Merge pull request #107 from Coding/yangzhen/add-dark-theme

hackape · web-flow · commit b0d07ba67337 · 2017-04-18T17:02:02.000+08:00
Add dark theme, close coding/WebIDE#80, close coding/WebIDE#165,
diff --git a/app/components/MenuBar/menuBarItems.js b/app/components/MenuBar/menuBarItems.js
@@ -4,10 +4,45 @@ import * as GitActions from '../Git/actions'
 import React from 'react'
 import mapShortcutToItems from './utils'
 
+var codingLogo = (
+  <div className='menu-bar-item-logo'>
+    <svg
+      version='1.1'
+      id='Layer_3'
+      xmlns='http://www.w3.org/2000/svg'
+      x='0px'
+      y='0px'
+      width='407.5px'
+      height='306.577px'
+      viewBox='0 0 407.5 306.577'
+      enableBackground='new 0 0 407.5 306.577'
+    >
+      <g>
+        <ellipse cx='159.785' cy='167.517' rx='3.656' ry='4.39' />
+        <ellipse cx='246.618' cy='167.517' rx='3.656' ry='4.39' />
+        <path d='M299.252,139.319c-5.997,0-11.253,3.803-14.191,9.509c-9.997-21.679-30.795-41.764-56.498-50.035
+          c-13.869-5.534-23.608-16.155-24.812-28.568c-1.204,12.413-10.943,23.034-24.812,28.568c-25.703,8.271-46.501,28.355-56.498,50.035
+          c-2.938-5.706-8.194-9.509-14.191-9.509c-9.21,0-16.676,8.965-16.676,20.025c0,11.059,7.466,20.025,16.676,20.025
+          c2.801,0,5.439-0.833,7.757-2.299c0.793,35.91,39.753,59.219,87.745,59.282c47.991-0.062,86.952-23.372,87.745-59.282
+          c2.318,1.466,4.956,2.299,7.757,2.299c9.21,0,16.676-8.965,16.676-20.025C315.928,148.285,308.461,139.319,299.252,139.319z
+          M115.83,165.602c-0.78,2.883-4.253,4.111-7.757,2.744c-3.504-1.367-5.712-4.812-4.932-7.695c0.78-2.883,4.253-4.111,7.757-2.744
+          S116.61,162.72,115.83,165.602z M203.75,226.356c-38.492-0.06-69.664-18.201-69.664-44.17c0-0.544,0.02-1.083,0.046-1.621
+          c0.009-0.177,0.018-0.354,0.03-0.531c0.024-0.367,0.057-0.732,0.093-1.097c0.049-0.489,0.107-0.976,0.178-1.46
+          c0.007-0.048,0.013-0.096,0.02-0.144c0.775-5.104,2.759-12.893,5.755-17.382c7.198-10.412,20.037-17.348,34.684-17.348
+          c11.276,0,21.473,4.118,28.858,10.759c7.385-6.641,17.582-10.759,28.858-10.759c14.647,0,27.486,6.937,34.684,17.348
+          c2.996,4.489,4.98,12.278,5.755,17.382c0.007,0.048,0.013,0.096,0.02,0.144c0.072,0.484,0.129,0.972,0.178,1.46
+          c0.036,0.365,0.069,0.729,0.093,1.097c0.012,0.177,0.021,0.354,0.03,0.531c0.026,0.538,0.046,1.077,0.046,1.621
+          C273.414,208.155,242.242,226.295,203.75,226.356z M299.427,168.346c-3.504,1.367-6.977,0.139-7.757-2.744s1.428-6.328,4.932-7.695
+          c3.504-1.367,6.977-0.139,7.757,2.744C305.139,163.534,302.931,166.979,299.427,168.346z'
+        />
+      </g>
+    </svg>
+  </div>
+)
 var dividItem = { name: '-' }
 var menuBarItems = [
   {
-    name: (<div className="menu-bar-item-logo"></div>),
+    name: codingLogo,
     className: 'coding-logo',
     items: [
       {
diff --git a/app/components/Modal/modals/Prompt.jsx b/app/components/Modal/modals/Prompt.jsx
@@ -21,6 +21,7 @@ class Prompt extends Component {
           <div className='message'>{content.message}</div>
         : null }
         <input type='text'
+          className='form-control'
           ref={r=>this.input=r}
           onChange={ e=>this.setState({value: e.target.value}) }
           onKeyDown={this.onKeyDown}
diff --git a/app/components/Package/extensionList.js b/app/components/Package/extensionList.js
@@ -49,7 +49,7 @@ class ExtensionList extends Component {
                 <div>
                     <input
                         type="text"
-                        className="search"
+                        className="search form-control"
                         value={this.state.searchKey}
                         placeholder="filter extension by name"
                         onChange={(e) => {
diff --git a/app/components/Setting/index.jsx b/app/components/Setting/index.jsx
@@ -139,7 +139,7 @@ let SettingsView = (props) => {
 } = props
 
   return (
-    <div name="settings-view">
+    <div className="settings-view">
       <div className="settings-container">
         <div className="settings-header">
           <div className="tab-bar-header">Settings</div>
@@ -158,15 +158,7 @@ let SettingsView = (props) => {
           </div>
         </div>
       </div>
-      <div className="modal-ops" style={{
-        position: 'relative',
-        backgroundColor: 'white',
-        paddingTop: '6px',
-        paddingRight: '5px',
-        borderTop: '1px solid #eee',
-        marginLeft: '-10px',
-        marginRight: '-10px'
-      }}>
+      <div className="modal-ops">
         <button
           className="btn btn-default"
           onClick={() => { cancelSettingItem(); }
diff --git a/app/components/Setting/reducer.js b/app/components/Setting/reducer.js
@@ -34,7 +34,7 @@ const getDefaultLangCode = () => {
   }, '')
 }
 
-export const UIThemeOptions = ['Light', 'Dark']
+export const UIThemeOptions = ['base-theme', 'dark']
 export const SyntaxThemeOptions = ['default', 'neo', 'eclipse', 'monokai', 'material']
 
 const SettingState = {
diff --git a/app/components/Terminal/index.jsx b/app/components/Terminal/index.jsx
@@ -13,6 +13,7 @@ terms.setActions(TabActions);
 class Term extends Component {
   constructor(props) {
     super(props);
+    this.setTheme = this.setTheme.bind(this)
   }
 
   componentDidMount() {
@@ -32,6 +33,7 @@ class Term extends Component {
     });
     setTimeout(() => terminal.sizeToFit(), 0)
     emitter.on(E.PANEL_RESIZED, this.onResize.bind(this))
+    emitter.on(E.THEME_CHANGED, this.onTheme.bind(this))
 
     terms.add(terminal);
     terminal.on('data', data => {
@@ -44,6 +46,7 @@ class Term extends Component {
 
   componentWillUnmount() {
     emitter.removeListener(E.PANEL_RESIZED, this.onResize)
+    emitter.removeListener(E.THEME_CHANGED, this.onTheme)
   }
 
   render() {
@@ -61,12 +64,20 @@ class Term extends Component {
     this.terminal.sizeToFit()
   }
 
+  onTheme (nextThemeId) {
+    let themeName = 'terminal_basic'
+    if (nextThemeId === 'dark') {
+      themeName = 'default'
+    }
+    this.setTheme(themeName)
+  }
+
   setTheme(themeName) {
-    var theme = Terminal.themes.defaults['default'];
+    var theme = Terminal.themes.defaults[themeName];
     var terminal = this.terminal;
     terminal.colors = Terminal.themes.colors(theme);
 
-    if (themeName == 'terminal_basic') terminal.colors[256] = '#fffff7';
+    // if (themeName == 'terminal_basic') terminal.colors[256] = '#fffff7';
     terminal.element.style.backgroundColor = terminal.colors[256];
     terminal.element.style.color = terminal.colors[257];
     terminal.refresh(0, terminal.rows - 1)
diff --git a/app/index.js b/app/index.js
@@ -6,6 +6,7 @@ import Root from './containers/Root'
 import './styles/main.styl'
 const baseTheme = require('!!style-loader/useable!css-loader!stylus-loader!./styles/base-theme/index.styl')
 baseTheme.use()
+window.themes = { '@current': baseTheme }
 
 import initialize from './initialize'
 
diff --git a/app/styles/base-theme/styles/menu.styl b/app/styles/base-theme/styles/menu.styl
@@ -18,3 +18,9 @@
     color: $text-color-subtle;
   }
 }
+
+.menu-bar-item-logo {
+  svg {
+    fill: #353535;
+  }
+}
diff --git a/app/styles/core-ui/Git.styl b/app/styles/core-ui/Git.styl
@@ -85,6 +85,7 @@
   min-width: 200px;
   right: 1px;
   flex-direction: column;
+  z-index: 201;
 
   .widget-header {
     display: flex;
diff --git a/app/styles/core-ui/MenuBar.styl b/app/styles/core-ui/MenuBar.styl
@@ -27,8 +27,13 @@
 .menu-bar-item-logo {
   width: 42px;
   height: 19px;
-  background: url(https://dn-coding-net-production-static.qbox.me/static/cb75498a0ffd36e2c694da62f1bdb86c.svg) no-repeat center;
-  background-size: 40px 34px;
+  // background: url(https://dn-coding-net-production-static.qbox.me/static/cb75498a0ffd36e2c694da62f1bdb86c.svg) no-repeat center;
+  // background-size: 40px 34px;
+  svg {
+    width: 40px;
+    height: 34px;
+    margin-top: -8px;
+  }
 }
 .menu-bar-item-container {
   padding: 4px 12px;
diff --git a/app/styles/core-ui/Settings.styl b/app/styles/core-ui/Settings.styl
@@ -9,6 +9,18 @@
   }
 }
 
+.settings-view {
+  .modal-ops {
+    position: relative;
+    margin-top: 10px;
+    padding-top: 10px;
+    padding-right: 8px;
+    border-top: 1px solid #eee;
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+}
+
 .settings-header {
   border-right: 1px solid #ccc;
   width: 25%;
diff --git a/app/styles/core-ui/index.styl b/app/styles/core-ui/index.styl
@@ -1,4 +1,4 @@
-@import "ui-variables";
+@import "../ui-variables";
 @import "./Menu";
 @import "./MenuBar";
 @import "./Breadcrumbs";
@@ -17,5 +17,3 @@
 @import "./Bar";
 @import "./Markdown";
 @import "./History";
-
-@import "../../node_modules/fixed-data-table/dist/fixed-data-table.min.css"
diff --git a/app/styles/dark/index.styl b/app/styles/dark/index.styl
@@ -0,0 +1,11 @@
+@import './styles/ui-variables';
+@import './styles/tabs';
+@import './styles/panes';
+@import './styles/filetree';
+@import './styles/menu';
+@import './styles/bars';
+@import './styles/git';
+@import './styles/editor';
+@import './styles/modal';
+@import './styles/form';
+@import './styles/history';
diff --git a/app/styles/dark/styles/bars.styl b/app/styles/dark/styles/bars.styl
@@ -0,0 +1,38 @@
+.menu-bar {
+  background-color: $base-top-menu-bar-background;
+  border-color: $base-border-color;
+  color: $text-color;
+}
+
+.status-bar {
+  border-color: $base-border-color;
+  background-color: $base-top-menu-bar-background;
+  color: $text-color;
+
+  .git-branch-widget .widget-header {
+    background-color: $base-background-color;
+    color: $text-color;
+  }
+}
+
+.breadcrumbs {
+  background-color: $menu-background-color;
+  border-color: $base-border-color;
+  color: $text-color;
+  .crumb {
+    background-color: $menu-background-color;
+    &:before {
+      border-left-color: $base-border-color;
+    }
+    &:after {
+      border-left-color: $menu-background-color;
+    }
+  }
+}
+
+.side-bar {
+  color: $text-color;
+  .side-bar-label.active {
+    background-color: $tab-background-color-active;
+  }
+}
diff --git a/app/styles/dark/styles/editor.styl b/app/styles/dark/styles/editor.styl
@@ -0,0 +1,9 @@
+.cm-s-monokai, .cm-s-material {
+  &.CodeMirror {
+    background: $base-background-color;
+  }
+
+  .CodeMirror-gutters {
+    background: $base-background-color;
+  }
+}
diff --git a/app/styles/dark/styles/filetree.styl b/app/styles/dark/styles/filetree.styl
@@ -0,0 +1,15 @@
+.filetree-node.focus {
+  color: $text-color-highlight;
+  > .filetree-node-bg {
+    background-color: $tree-view-background-color-highlight;
+  }
+}
+
+.filetree-container {
+  color: $text-color;
+  background-color: #252526;
+  .filetree-node-container.highlight,
+  .filetree-node.focus {
+    background-color: $tree-view-background-color-highlight;
+  }
+}
diff --git a/app/styles/dark/styles/form.styl b/app/styles/dark/styles/form.styl
@@ -0,0 +1,21 @@
+.form-control {
+  background-color: $base-background-color;
+  border-color: $base-border-color;
+  color: $text-color;
+}
+
+.btn-default {
+  background-color: $base-background-color;
+  border-color: $base-border-color;
+  color: $text-color;
+
+  &:hover, &:active, &:active:hover {
+    background-color: #000;
+    border-color: $base-border-color;
+    color: $text-color;
+  }
+}
+
+hr {
+  border-color: $base-border-color;
+}
diff --git a/app/styles/dark/styles/git.styl b/app/styles/dark/styles/git.styl
@@ -0,0 +1,52 @@
+// .status          { color: @text-color; }
+// .status-added    { color: @text-color-success; } // green
+// .status-ignored  { color: @text-color-subtle; }  // faded
+// .status-modified { color: @text-color-warning; } // orange
+// .status-removed  { color: @text-color-error; }   // red
+// .status-renamed  { color: @text-color-info; }    // blue
+
+.git-untracked {
+  color: $untracked-color;
+}
+.git-confliction {
+  color: $confliction-color;
+}
+.git-modified {
+  color: $modified-color;
+}
+.git-modify {
+  color: $modified-color;
+}
+.git-changed {
+  color: $modified-color;
+}
+.git-rename {
+  color: $modified-color;
+}
+.git-copy {
+  color: $modified-color;
+}
+
+.git-added {
+  color: $added-color;
+}
+.git-add {
+  color: $added-color;
+}
+.git-missing {
+  text-decoration: line-through;
+}
+
+.git-removed {
+  text-decoration: line-through;
+}
+.git-delete {
+  text-decoration: line-through;
+}
+
+.file-status-indicator {
+  &.modified, &.changed, &.modify {color: hsl(47,100%,50%)}
+  &.untracked, &.add {color: hsl(80,60%,40%)}
+  &.missing {color: hsl(10,80%,45%)}
+  &.confliction {color: hsl(10,80%,45%)}
+}
diff --git a/app/styles/dark/styles/history.styl b/app/styles/dark/styles/history.styl
diff --git a/app/styles/dark/styles/menu.styl b/app/styles/dark/styles/menu.styl
diff --git a/app/styles/dark/styles/modal.styl b/app/styles/dark/styles/modal.styl
diff --git a/app/styles/dark/styles/panes.styl b/app/styles/dark/styles/panes.styl
diff --git a/app/styles/dark/styles/tabs.styl b/app/styles/dark/styles/tabs.styl
diff --git a/app/styles/dark/styles/ui-variables.styl b/app/styles/dark/styles/ui-variables.styl
diff --git a/app/styles/main.styl b/app/styles/main.styl
diff --git a/app/utils/emitter.js b/app/utils/emitter.js
diff --git a/app/utils/themeManager.js b/app/utils/themeManager.js

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const getDefaultLangCode = () => {`
`34`	`34`	`}, '')`
`35`	`35`	`}`
`36`	`36`
`37`		`-export const UIThemeOptions = ['Light', 'Dark']`
	`37`	`+export const UIThemeOptions = ['base-theme', 'dark']`
`38`	`38`	`export const SyntaxThemeOptions = ['default', 'neo', 'eclipse', 'monokai', 'material']`
`39`	`39`
`40`	`40`	`const SettingState = {`
Original file line number	Diff line number	Diff line change
`@@ -18,3 +18,9 @@`
`18`	`18`	`color: $text-color-subtle;`
`19`	`19`	`}`
`20`	`20`	`}`
	`21`	`+`
	`22`	`+.menu-bar-item-logo {`
	`23`	`+ svg {`
	`24`	`+ fill: #353535;`
	`25`	`+ }`
	`26`	`+}`