status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #174 from status-im/feature/tabs-colored 

Color tabs for text editor
This commit is contained in:
Iuri Matias 2018-10-28 11:29:38 +01:00 committed by GitHub
parent 1a60f0f718 f1e1c4a143
commit 3c93151750
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
embark-ui/src/components/SearchBar.js
View File

@ -44,7 +44,7 @@ class SearchBar extends React.Component {
render() { render() {
return ( return (
<Form inline className={classNames('search-bar', 'mr-2', {hidden: this.props.hidden})}> <Form inline className={classNames('search-bar', 'mr-2')}>
{!this.props.loading && {!this.props.loading &&
<React.Fragment> <React.Fragment>
<div className={classNames({'d-sm-down-none': !this.state.showForm})}> <div className={classNames({'d-sm-down-none': !this.state.showForm})}>

16
embark-ui/src/components/TextEditor.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-fontawesome'; import FontAwesomeIcon from 'react-fontawesome';
import classNames from 'classnames'; import classNames from 'classnames';
import {DARK_THEME} from '../constants'; import {DARK_THEME, LIGHT_THEME} from '../constants';
import './TextEditor.css'; import './TextEditor.css';
const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json']; const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json'];
@ -137,18 +137,20 @@ class TextEditor extends React.Component {
renderTabs() { renderTabs() {
return ( return (
<ul className="list-inline m-0 p-2"> <ul className="list-inline m-0 p-0">
{this.props.editorTabs.map(file => ( {this.props.editorTabs.map(file => (
<li key={file.name} className={classNames("m-1", "list-inline-item", "border-right")}> <li key={file.name} className={classNames("p-2", "list-inline-item", "mr-0", "border-right", {
'bg-white': file.active && LIGHT_THEME === this.props.theme,
'bg-black': file.active && DARK_THEME === this.props.theme
})}>
<a <a
href="#switch-tab" href="#switch-tab"
onClick={() => this.props.addEditorTabs(file)} onClick={() => this.props.addEditorTabs(file)}
className={classNames('p-2', {'text-muted': !file.active}, className="p-2 text-muted"
{'text-primary': file.active}) >
}>
{file.name} {file.name}
</a> </a>
<FontAwesomeIcon style={{cursor: 'pointer'}} onClick={() => this.props.removeEditorTabs(file)} className="mx-1" name="close"/> <FontAwesomeIcon style={{cursor: 'pointer'}} onClick={() => this.props.removeEditorTabs(file)} className="px-1" name="close"/>
</li> </li>
))} ))}
</ul> </ul>

6
embark-ui/src/index.css
View File

@ -21,9 +21,6 @@
.relative { .relative {
position: relative; position: relative;
} }
.hidden {
display: none;
}
.react-json-view { .react-json-view {
border-radius: .25rem; border-radius: .25rem;
@ -77,3 +74,6 @@
text-decoration: none; text-decoration: none;
} }
.bg-black {
background-color: #1C1C1C;
}