Zhengxinqi/issue80 theme

app/components/CodeMirrorEditor/index.jsx

@@ -19,15 +19,16 @@ class CodeMirrorEditor extends Component {
   }
 
   componentDidMount() {
-    const {theme, tab, width, height} = this.props;
+    const {themeSetting, tab, width, height} = this.props;
+    const themeConfig = themeSetting.items[1].value.split('/').pop();
+    // todo add other setting item from config
     const editor = this.editor = CodeMirror(this.editorDOM, {
-      theme: theme,
+      theme: themeConfig,
       autofocus: true,
       lineNumbers: true,
       matchBrackets: true,
       autoCloseBrackets: true,
     });
-
     // @fixme:
     // related counterparts:
     // 1. IdeEnvironment.js
@@ -91,6 +92,10 @@ class CodeMirrorEditor extends Component {
 
 }
 
-CodeMirrorEditor = connect(state => ({setting: state.SettingState.views.tabs.EDITOR}), null)(CodeMirrorEditor);
+CodeMirrorEditor = connect(state => ({
+  setting: state.SettingState.views.tabs.EDITOR,
+  themeSetting: state.SettingState.views.tabs.THEME,
+}),
+ null)(CodeMirrorEditor);
 
 export default CodeMirrorEditor;

app/components/Setting/index.jsx

@@ -94,7 +94,17 @@ const EditorSettings = (props) => (
       )}
     </div>
   )
-
+const ThemeSettings = (props) => (
+    <div>
+      <h2 className='settings-content-header'>Theme Settings</h2>
+      {props.items.map(settingItem =>
+        <FormGroupFactory
+          key={settingItem.name}
+          domain='THEME'
+          settingItem={settingItem} />
+      )}
+    </div>
+  )
 
 const SettingsContent = ({ content }) => {
   switch (content.id) {
@@ -103,6 +113,8 @@ const SettingsContent = ({ content }) => {
       return <GeneralSettings {...content} />
     case 'EDITOR':
       return <EditorSettings {...content} />
+    case 'THEME':
+      return <ThemeSettings {...content} />
   }
 }
 

app/components/Setting/reducer.js

@@ -7,11 +7,13 @@ import {
   CONFIRM_UPDATE_FIELD,
   CANCEL_UPDATE_FIELD
 } from './actions'
-
+import { changeTheme, changeCodeTheme } from '../../utils/themeManager'
 import ace from 'brace'
 import 'brace/ext/themelist'
 const aceThemes = ace.acequire('ace/ext/themelist')
-  .themes.map((t, i) => ({value: t.theme, name: t.caption}))
+  .themes
+  .filter(theme => theme.name.match('monokai|ambiance'))  // temporary get only avaliable theme
+  .map((t, i) => ({value: t.theme, name: t.caption}))
 
 const langCodes = {
   en_US: 'English',
@@ -37,21 +39,30 @@ const getDefaultLangCode = () => {
   }, '')
 }
 
+export const UIthemeOption = ['Light', 'Dark']
 
 const SettingState = {
-  activeTabId: 'EDITOR',
-  tabIds: ['GENERAL', 'EDITOR'],
+  activeTabId: 'GENERAL',
+  tabIds: ['GENERAL', 'THEME', 'EDITOR'],
   tabs: {
+    THEME: {
+      id: 'THEME',
+      items: [{
+        name: 'UI Theme',
+        value: 'Light',
+        options: UIthemeOption
+      }, {
+        name: 'Syntax Theme',
+        value: 'Default',
+        options: aceThemes
+      }]
+    },
     GENERAL: {
       id: 'GENERAL',
       items: [{
         name: 'Language',
         value: langCodes[getDefaultLangCode()],
         options: ['English', 'Chinese']
-      }, {
-        name: 'Theme',
-        value: 'Light',
-        options: ['Light', 'Dark']
       }, {
         name: 'Hide Files',
         value: '/.git,/.coding-ide'
@@ -70,10 +81,6 @@ const SettingState = {
         name: 'Font Family',
         value: 'Consolas',
         options: ['Consolas', 'Courier', 'Courier New', 'Menlo']
-      }, {
-        name: 'Editor Theme',
-        value: 'Default',
-        options: aceThemes
       }, {
         name: 'Charset',
         value: 'utf8',
@@ -116,6 +123,8 @@ export default handleActions({
 
   [SETTING_UPDATE_FIELD]: (state, action) => {
     const { domain, fieldName, value } = action.payload
+    if (fieldName === 'UI Theme') { changeTheme(value); }
+    if (fieldName === 'Syntax Theme') { changeCodeTheme(value); }
     return {
       ...state,
       views: { ...state.views,

app/index.js

@@ -1,20 +1,25 @@
 /* @flow weak */
 import { AppContainer } from 'react-hot-loader';
 import React from 'react'
-window.React = React // expose React to enable react devtool
 import { render } from 'react-dom'
 import Root from './containers/Root'
-import './styles/main.styl'
-import './styles/base-theme/index.styl'
 import { createI18n, getExtensions } from './utils'
+import initTheme from './utils/themeManager'
+require ('./styles/main.styl').use()
 
+// expose some api
+// todo wrapper all extension apis with getApis(key)
+window.React = React // expose React to enable react devtool
 window.refs = {}
 window.i18n = createI18n
 window.extensions = {}
 window.extension = f => getExtensions
+// init theme and extension
+initTheme()
 
-const rootElement = document.getElementById('root')
 
+// render and hot reload
+const rootElement = document.getElementById('root')
 if (__DEV__) {
   const hotLoaderRender = () =>
     render(<AppContainer><Root /></AppContainer>, rootElement)

app/styles/Dark/styles/ui-variables.styl

@@ -0,0 +1,100 @@
+gray($amount) {
+  lighten(#000000, $amount);
+}
+
+// Text Colors
+$text-color            = gray(30%);
+$text-color-subtle     = gray(50%);
+$text-color-highlight  = gray(20%);
+$text-color-selected   = $text-color-highlight;
+
+$text-color-info       = hsl(219,  79%, 66%);
+$text-color-success    = hsl(140,  44%, 62%);
+$text-color-warning    = hsl( 36,  60%, 72%);
+$text-color-error      = hsl(  9, 100%, 64%);
+
+// Base colors
+$base-background-color = black;
+$base-border-color     = darken($base-background-color, 8%);
+$base-top-menu-bar-background = #e5e5e5;
+// Background colors
+$background-color-info= #0098ff;
+$background-color-success= #17ca65;
+$background-color-warning= #ff4800;
+$background-color-error= #c00;
+
+$background-color-highlight= hsla(0,0%,0%,.1);
+$background-color-selected= $background-color-highlight;
+$app-background-color= #fff;
+
+// Component colors
+$pane-item-background-color= $base-background-color;
+$pane-item-border-color= $base-border-color;
+
+$input-background-color= #fff;
+$input-border-color= $base-border-color;
+
+$tool-panel-background-color= #f4f4f4;
+$tool-panel-border-color= $base-border-color;
+
+$inset-panel-background-color= #eee;
+$inset-panel-border-color= $base-border-color;
+
+$panel-heading-background-color= #ddd;
+$panel-heading-border-color= transparent;
+
+$overlay-background-color= #f4f4f4;
+$overlay-border-color= $base-border-color;
+
+$button-background-color= #ccc;
+$button-background-color-hover= lighten($button-background-color, 5%);
+$button-background-color-selected= $button-background-color-hover;
+$button-border-color= #aaa;
+
+$tab-bar-background-color    = $base-background-color;
+$tab-bar-border-color        = $base-border-color;
+$tab-background-color        = $tab-bar-background-color;
+$tab-background-color-active = lighten($tab-bar-background-color, 100%);
+$tab-border-color            = $base-border-color;
+
+$tree-view-background-color= $tool-panel-background-color;
+$tree-view-background-color-highlight= darken($tree-view-background-color, 5%);
+$tree-view-border-color= $tool-panel-border-color;
+
+
+$menu-background-color= $app-background-color
+$menu-border-color= darken($base-border-color, 15%);
+$menu-background-color-highlight = hsl(213, 83, 58);
+
+// Site colors
+$ui-site-color-1= $background-color-success; // green
+$ui-site-color-2= $background-color-info; // blue
+$ui-site-color-3= $background-color-warning; // orange
+$ui-site-color-4= #db2ff4; // purple
+$ui-site-color-5= #f5e11d; // yellow
+
+// Sizes
+$font-size= 13px;
+$input-font-size= 14px;
+
+$disclosure-arrow-size= 12px;
+
+$component-padding= 10px;
+$component-icon-padding= 5px;
+$component-icon-size= 16px;
+$component-line-height= 25px;
+$component-border-radius= 2px;
+
+$tab-height= 28px;
+
+// Other
+$font-family= 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+$use-custom-controls= true; // false uses native controls
+
+
+// Git status colors
+$modified-color = #578ddf;
+$untracked-color = #0fd000;
+$confliction-color = #c13d00;
+$added-color = #0fd000;
+$deleted-color = #616161;

app/styles/Light/index.styl

@@ -0,0 +1,7 @@
+@import './styles/ui-variables';
+@import './styles/tabs';
+@import './styles/panes';
+@import './styles/filetree';
+@import './styles/menu';
+@import './styles/bars';
+@import './styles/git';

app/styles/Light/styles/bars.styl

@@ -0,0 +1,24 @@
+.menu-bar {
+  background-color: $base-top-menu-bar-background;
+  border-color: $base-border-color;
+  color: gray(15%);
+}
+
+.status-bar {
+  border-color: $base-border-color;
+  background-color: $base-top-menu-bar-background;
+}
+
+.breadcrumbs {
+  background-color: $menu-background-color;
+  border-color: $base-border-color;
+  .crumb {
+    background-color: $menu-background-color;
+    &:before {
+      border-left-color: $base-border-color;
+    }
+    &:after {
+      border-left-color: $menu-background-color;
+    }
+  }
+}

app/styles/Light/styles/filetree.styl

@@ -0,0 +1,6 @@
+.filetree-node.focus {
+  color: $text-color-highlight;
+  > .filetree-node-bg {
+    background-color: $tree-view-background-color-highlight;
+  }
+}

app/styles/Light/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%)}
+}

app/styles/Light/styles/menu.styl

@@ -0,0 +1,20 @@
+.menu {
+  color: $text-color;
+  background-color: $menu-background-color;
+  border-color: $menu-border-color;
+  opacity: 0.95;
+  > li > hr {
+    border-color: gray(80%);
+  }
+}
+
+.menu-bar-item-container, .menu-item-container {
+  &.active {
+    background-color: $menu-background-color-highlight;
+    color: #fff;
+  }
+  &.disabled, &.active.disabled {
+    background-color: transparent;
+    color: $text-color-subtle;
+  }
+}

app/styles/Light/styles/panes.styl

@@ -0,0 +1,4 @@
+.panel-container, .pane-container {
+  background-color: $base-background-color;
+  border: 1px solid $base-border-color;
+}