diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..548af57f --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "browser/ace"] + path = browser/ace + url = https://github.com/ajaxorg/ace-builds.git diff --git a/browser/ace b/browser/ace new file mode 160000 index 00000000..9d128398 --- /dev/null +++ b/browser/ace @@ -0,0 +1 @@ +Subproject commit 9d12839819e8a8b90f4a0aba382cac9a273b5983 diff --git a/browser/main/Components/CodeViewer.jsx b/browser/main/Components/CodeViewer.jsx new file mode 100644 index 00000000..159a0835 --- /dev/null +++ b/browser/main/Components/CodeViewer.jsx @@ -0,0 +1,34 @@ +var React = require('react/addons') + +var ace = require('ace') +var CodeViewer = React.createClass({ + propTypes: { + code: React.PropTypes.string, + mode: React.PropTypes.string + }, + componentDidMount: function () { + var el = React.findDOMNode(this.refs.target) + var editor = ace.edit(el) + editor.setValue(this.props.code) + editor.$blockScrolling = Infinity + editor.renderer.setShowGutter(false) + editor.setReadOnly(true) + + var session = editor.getSession() + session.setMode('ace/mode/' + this.props.mode) + session.setUseSoftTabs(true) + + this.setState({editor: editor}) + }, + componentDidUpdate: function () { + this.state.editor.setValue(this.props.code) + this.state.editor.getSession().setMode('ace/mode/' + this.props.mode) + }, + render: function () { + return ( +
+ ) + } +}) + +module.exports = CodeViewer diff --git a/browser/main/Containers/SnippetContainer.jsx b/browser/main/Containers/SnippetContainer.jsx index 57356a93..14bc2e40 100644 --- a/browser/main/Containers/SnippetContainer.jsx +++ b/browser/main/Containers/SnippetContainer.jsx @@ -1,5 +1,6 @@ var React = require('react/addons') var Snippet = require('../Services/Snippet') +var CodeViewer = require('../Components/CodeViewer') var SnippetList = React.createClass({ propTypes: { @@ -8,7 +9,6 @@ var SnippetList = React.createClass({ }, itemClickHandlerFactory: function (snippet) { return function () { - console.log(this.props.selectSnippet) this.props.selectSnippet(snippet) }.bind(this) }, @@ -55,13 +55,21 @@ var SnippetViewer = React.createClass({ }) content = (
-
{snippet.callSign} {snippet.updatedAt}
+
+ {snippet.callSign} {snippet.updatedAt} + + + + +
{snippet.description}
{tags}
-
{snippet.content}
+
+ +
) diff --git a/browser/main/Services/Snippet.js b/browser/main/Services/Snippet.js index 716ddb3e..a919549e 100644 --- a/browser/main/Services/Snippet.js +++ b/browser/main/Services/Snippet.js @@ -18,7 +18,7 @@ var snippets = { callSign: 'log', description: 'javascript log', content: 'console.log(\'yolo\')', - mode: 'js', + mode: 'javascript', createdAt: '2015-06-26T15:10:59.000Z', updatedAt: '2015-06-26T15:10:59.000Z', UserId: 1, diff --git a/browser/main/index.html b/browser/main/index.html index 6ee43383..5c9a5486 100644 --- a/browser/main/index.html +++ b/browser/main/index.html @@ -4,8 +4,10 @@ CodeXen + + diff --git a/browser/styles/main/containers/SnippetContainer.styl b/browser/styles/main/containers/SnippetContainer.styl index 607a6173..5ba5594d 100644 --- a/browser/styles/main/containers/SnippetContainer.styl +++ b/browser/styles/main/containers/SnippetContainer.styl @@ -43,11 +43,20 @@ box-sizing border-box small font-size 0.5em + .control-group + float right + button + margin 0 2px .viewer-body - absolute bottom left right + absolute bottom right + left 1px top 44px .viewer-detail border-bottom solid 1px borderColor padding 10px .description margin-bottom 15px + .content + padding 5px 0 + .ace_editor + height 500px diff --git a/browser/styles/shared/btn.styl b/browser/styles/shared/btn.styl index 90ba009b..a3708f0e 100644 --- a/browser/styles/shared/btn.styl +++ b/browser/styles/shared/btn.styl @@ -36,9 +36,8 @@ background-color brandColor .btn-default - border-color invBorderColor + border-color lightButtonColor background-color transparent - color invBorderColor + color lightButtonColor &:hover, &.hover, &:active, &.active - color white - background-color invBorderColor + background-color lighten(lightButtonColor, 75%) diff --git a/npm-debug.log b/npm-debug.log deleted file mode 100644 index 5704df8c..00000000 --- a/npm-debug.log +++ /dev/null @@ -1,36 +0,0 @@ -0 info it worked if it ends with ok -1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ] -2 info using npm@2.11.2 -3 info using node@v0.12.4 -4 verbose node symlink /usr/local/bin/node -5 verbose run-script [ 'prestart', 'start', 'poststart' ] -6 info prestart codexen-app-builder@0.2.0 -7 info start codexen-app-builder@0.2.0 -8 verbose unsafe-perm in lifecycle true -9 info codexen-app-builder@0.2.0 Failed to exec start script -10 verbose stack Error: codexen-app-builder@0.2.0 start: `npm run serve | npm run dev` -10 verbose stack Exit status 1 -10 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16) -10 verbose stack at EventEmitter.emit (events.js:110:17) -10 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14) -10 verbose stack at ChildProcess.emit (events.js:110:17) -10 verbose stack at maybeClose (child_process.js:1015:16) -10 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5) -11 verbose pkgid codexen-app-builder@0.2.0 -12 verbose cwd /Users/dickchoi/codexen/codexen-app -13 error Darwin 14.3.0 -14 error argv "node" "/usr/local/bin/npm" "start" -15 error node v0.12.4 -16 error npm v2.11.2 -17 error code ELIFECYCLE -18 error codexen-app-builder@0.2.0 start: `npm run serve | npm run dev` -18 error Exit status 1 -19 error Failed at the codexen-app-builder@0.2.0 start script 'npm run serve | npm run dev'. -19 error This is most likely a problem with the codexen-app-builder package, -19 error not with npm itself. -19 error Tell the author that this fails on your system: -19 error npm run serve | npm run dev -19 error You can get their info via: -19 error npm owner ls codexen-app-builder -19 error There is likely additional logging output above. -20 verbose exit [ 1, true ] diff --git a/package.json b/package.json index c15875c6..f8ef70ba 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,6 @@ }, "homepage": "https://github.com/Rokt33r/codexen-app#readme", "dependencies": { - "@rokt33r/ace-builds": "^1.1.9", - "del": "^1.2.0", "dotenv": "^1.1.0", "marked": "^0.3.3", "moment": "^2.10.3", diff --git a/webpack.config.js b/webpack.config.js index 5185ad65..ae96df3e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,6 +17,10 @@ module.exports = { { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' + }, + { + test: /\.css$/, + loader: 'style-loader!css-loader' } ] }, @@ -25,7 +29,8 @@ module.exports = { //but get it from a global 'React' variable 'react': 'React', 'react/addons': 'React', - 'react-router': 'ReactRouter' + 'react-router': 'ReactRouter', + 'ace': 'ace' }, resolve: { extensions: ['', '.js', '.jsx']