diff options
author | Robin Appelman <icewind@owncloud.com> | 2015-08-11 17:21:49 +0300 |
---|---|---|
committer | Robin Appelman <icewind@owncloud.com> | 2015-08-11 17:21:49 +0300 |
commit | c0822d049b5f6c3e3657bd2a299d149b29412c5c (patch) | |
tree | 13adb05ed1a066cf7a065890361076fe1d154106 /js | |
parent | c5bee0b5d4bfcdb36498dce05a409746ae747d8a (diff) |
modularize css
Diffstat (limited to 'js')
-rw-r--r-- | js/Components/Exception.js | 10 | ||||
-rw-r--r-- | js/Components/Exception.less | 32 | ||||
-rw-r--r-- | js/Components/LogTable.js | 22 | ||||
-rw-r--r-- | js/Components/LogTable.less | 88 | ||||
-rw-r--r-- | js/Components/ToggleEntry.js | 6 | ||||
-rw-r--r-- | js/Components/ToggleEntry.less | 19 | ||||
-rw-r--r-- | js/Components/TraceLine.js | 10 | ||||
-rw-r--r-- | js/Components/TraceLine.less | 7 | ||||
-rw-r--r-- | js/index.js | 6 |
9 files changed, 123 insertions, 77 deletions
diff --git a/js/Components/Exception.js b/js/Components/Exception.js index c23cde2..9854bc3 100644 --- a/js/Components/Exception.js +++ b/js/Components/Exception.js @@ -1,6 +1,8 @@ import {Component} from 'react/addons'; import {TraceLine} from './TraceLine.js'; +import style from './Exception.less'; + export class Exception extends Component { state = { expanded: false @@ -21,7 +23,7 @@ export class Exception extends Component { ); }); traceElements = ( - <ol className="trace" start="0"> + <ol className={style.trace} start="0"> {traceElements} </ol> ) @@ -30,10 +32,10 @@ export class Exception extends Component { } return ( <span - className={"exceptionRow " + (this.state.expanded ? 'expanded':'retracted')} + className={style.exceptionRow + ' ' + (this.state.expanded ? style.expanded:style.retracted)} onClick={this.clickHandler}> - <span className="exception">{this.props.Exception}</span>: - <span className="message">{this.props.Message}</span> + <span className={style.exception}>{this.props.Exception}</span>: + <span className={style.messsage}>{this.props.Message}</span> {traceElements} </span> ); diff --git a/js/Components/Exception.less b/js/Components/Exception.less new file mode 100644 index 0000000..2e0ed3d --- /dev/null +++ b/js/Components/Exception.less @@ -0,0 +1,32 @@ +.exceptionRow { + display: inline-block; + width: 100%; + cursor: pointer; + + * { + cursor: inherit; + } + + .exception { + font-weight: bold; + } + + ol.trace { + padding-top: 0.5em; + } +} + +.retracted::after, .expanded::after { + position: absolute; + top: 0px; + right: 0px; + margin: 10px; +} + +.retracted::after { + content: '▼'; +} + +.expanded::after { + content: '▲'; +} diff --git a/js/Components/LogTable.js b/js/Components/LogTable.js index 07d9980..6f5cce7 100644 --- a/js/Components/LogTable.js +++ b/js/Components/LogTable.js @@ -3,27 +3,29 @@ import {LogEntry} from './LogEntry.js'; import {LogLevel} from './LogLevel.js'; import Timestamp from 'react-time'; +import style from './LogTable.less'; + export class LogTable extends Component { render () { var rows = this.props.entries.map((entry, i) => { var time = new Date(entry.time); return ( - <tr className={"level_" + entry.level} key={i}> - <td className="level"><LogLevel level={entry.level}/></td> - <td className="app">{entry.app}</td> - <td className="messsage"><LogEntry message={entry.message}/></td> - <td className="time"><Timestamp value={time} relative/></td> + <tr className={style['level_' + entry.level]} key={i}> + <td className={style.level}><LogLevel level={entry.level}/></td> + <td className={style.app}>{entry.app}</td> + <td className={style.message}><LogEntry message={entry.message}/></td> + <td className={style.time}><Timestamp value={time} relative/></td> </tr> ) }); return ( - <table className="logs grid"> + <table className={style.logs}> <thead> <tr> - <th className="level">Level</th> - <th className="app">App</th> - <th className="messsage">Message</th> - <th className="time">Time</th> + <th className={style.level}>Level</th> + <th className={style.app}>App</th> + <th className={style.message}>Message</th> + <th className={style.time}>Time</th> </tr> </thead> <tbody> diff --git a/js/Components/LogTable.less b/js/Components/LogTable.less index ad37c8f..eeff837 100644 --- a/js/Components/LogTable.less +++ b/js/Components/LogTable.less @@ -1,46 +1,46 @@ .logs { - width: 100%; - white-space: normal; - margin-bottom: 14px; -} - -.logs td, table.logs th { - vertical-align: top; - border-bottom: 1px solid #ddd; - padding: .8em; - text-align: left; - font-weight: normal; - position: relative; -} - -.logs .time { - width: 100px; -} - -.logs .app { - width: 150px; -} - -.logs .level { - width: 100px; -} - -/*info*/ -.logs tr.level_1 { - background-color: #BDE5F8; -} - -/* warning*/ -.logs tr.level_2 { - background-color: #FEEFB3; -} - -/*error*/ -.logs tr.level_3 { - background-color: #FFBABA; -} - -/*fatal*/ -.logs tr.level_4 { - background-color: #ff8080; + width: 100%; + white-space: normal; + margin-bottom: 14px; + + td, th { + vertical-align: top; + border-bottom: 1px solid #ddd; + padding: .8em; + text-align: left; + font-weight: normal; + position: relative; + } + + .time { + width: 100px; + } + + .app { + width: 150px; + } + + .level { + width: 100px; + } + + /*info*/ + tr.level_1 { + background-color: #BDE5F8; + } + + /* warning*/ + tr.level_2 { + background-color: #FEEFB3; + } + + /*error*/ + tr.level_3 { + background-color: #FFBABA; + } + + /*fatal*/ + tr.level_4 { + background-color: #ff8080; + } } diff --git a/js/Components/ToggleEntry.js b/js/Components/ToggleEntry.js index db849dc..237980f 100644 --- a/js/Components/ToggleEntry.js +++ b/js/Components/ToggleEntry.js @@ -1,5 +1,7 @@ import {Component} from 'react/addons'; +import style from './ToggleEntry.less'; + export class ToggleEntry extends Component { static idCounter = 0; _id = null; @@ -30,8 +32,8 @@ export class ToggleEntry extends Component { render () { return ( - <li> - <a className="checkbox-holder" onClick={this.onClick}> + <li className={style.toggleEntry}> + <a className={style['checkbox-holder']} onClick={this.onClick}> <input id={this.getCheckBoxId()} type="checkbox" checked={this.state.active} readOnly/> diff --git a/js/Components/ToggleEntry.less b/js/Components/ToggleEntry.less index bef362c..d2ec080 100644 --- a/js/Components/ToggleEntry.less +++ b/js/Components/ToggleEntry.less @@ -1,11 +1,12 @@ -.toggleEntry a { - line-height: 30px; +.toggleEntry { + a { + line-height: 30px; + } + input[type="checkbox"] { + margin: 5px; + } + label { + margin: 5px; + } } -.toggleEntry input[type="checkbox"] { - margin: 5px; -} - -.toggleEntry label { - margin: 5px; -} diff --git a/js/Components/TraceLine.js b/js/Components/TraceLine.js index ebf8923..a3017ba 100644 --- a/js/Components/TraceLine.js +++ b/js/Components/TraceLine.js @@ -1,14 +1,16 @@ import {Component} from 'react/addons'; +import style from './TraceLine.less'; + export class TraceLine extends Component { render () { return ( - <li> - <span className="file">{this.props.file}</span> + <li className={style.line}> + <span className={style.file}>{this.props.file}</span> <span - className="line">{this.props.lineNumber ? ' - line ' + this.props.lineNumber + ': ' : ''} + className={style.line}>{this.props.lineNumber ? ' - line ' + this.props.lineNumber + ': ' : ''} </span> - <span className="call">{this.props.call}</span> + <span className={style.call}>{this.props.call}</span> </li> ); } diff --git a/js/Components/TraceLine.less b/js/Components/TraceLine.less new file mode 100644 index 0000000..8a942a6 --- /dev/null +++ b/js/Components/TraceLine.less @@ -0,0 +1,7 @@ +.line { + padding: 0.3em; + + .file, .line { + font-style: italic; + } +} diff --git a/js/index.js b/js/index.js index 43eeab5..321f3d9 100644 --- a/js/index.js +++ b/js/index.js @@ -4,10 +4,8 @@ import {App} from './App.js'; var React = require('react/addons'); -if (process.env.NODE_ENV !== 'production') { - // Enable React devtools - window.React = React; -} +// Enable React devtools +window.React = React; $(document).ready(() => { React.render(<App />, document.getElementById('content')); |