public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Code Issues Releases Wiki Activity

embed ace

Browse Source
This commit is contained in:
Rokt33r
2015-07-07 03:55:52 +09:00
parent 361e9c629e
commit c74de88ca3
11 changed files with 71 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
browser/ace Submodule

Submodule browser/ace added at 9d12839819

34
browser/main/Components/CodeViewer.jsx Normal file
View File

@@ -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 (
<div ref='target'></div>
)
}
})
module.exports = CodeViewer

14
browser/main/Containers/SnippetContainer.jsx
View File

@@ -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 = (
<div className='SnippetViewer'>
<div className='viewer-header'><i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small></div>
<div className='viewer-header'>
<i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small>
<span className='control-group'>
<button className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
</span>
</div>
<div className='viewer-body'>
<div className='viewer-detail'>
<div className='description'>{snippet.description}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div>
<div>{snippet.content}</div>
<div className='content'>
<CodeViewer code={snippet.content} mode={snippet.mode}/>
</div>
</div>
</div>
)

2
browser/main/Services/Snippet.js
View File

@@ -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,

2
browser/main/index.html
View File

@@ -4,8 +4,10 @@
<title>CodeXen</title>
<link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
<script src="../vendor/react/react-with-addons.js"></script>
<script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
<script src="../ace/src-min/ace.js"></script>
</head>
<body>

11
browser/styles/main/containers/SnippetContainer.styl
View File

@@ -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

7
browser/styles/shared/btn.styl
View File

@@ -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%)