diff --git a/spec/app/config-view-spec.coffee b/spec/app/config-view-spec.coffee index 1e476b25d..5defd234a 100644 --- a/spec/app/config-view-spec.coffee +++ b/spec/app/config-view-spec.coffee @@ -8,17 +8,22 @@ describe "ConfigView", -> configView = new ConfigView describe ".addPanel(name, view)", -> - fit "adds a menu entry to the left and a panel that can be activated by clicking it", -> + it "adds a menu entry to the left and a panel that can be activated by clicking it", -> configView.addPanel('Panel 1', $$ -> @div id: 'panel-1') configView.addPanel('Panel 2', $$ -> @div id: 'panel-2') expect(configView.panelMenu.find('li:contains(Panel 1)')).toExist() - expect(configView.panelMenu.find('li:contains(Panel 1)')).toHaveClass('active') expect(configView.panelMenu.find('li:contains(Panel 2)')).toExist() + expect(configView.panelMenu.children(':first')).toHaveClass 'active' configView.attachToDom() + configView.panelMenu.find('li:contains(Panel 1)').click() + expect(configView.panelMenu.children('.active').length).toBe 1 + expect(configView.panelMenu.find('li:contains(Panel 1)')).toHaveClass('active') expect(configView.panels.find('#panel-1')).toBeVisible() expect(configView.panels.find('#panel-2')).toBeHidden() configView.panelMenu.find('li:contains(Panel 2)').click() - expect(configView.panels.find('#panel-2')).toBeVisible() + expect(configView.panelMenu.children('.active').length).toBe 1 + expect(configView.panelMenu.find('li:contains(Panel 2)')).toHaveClass('active') expect(configView.panels.find('#panel-1')).toBeHidden() + expect(configView.panels.find('#panel-2')).toBeVisible() diff --git a/src/app/config-view.coffee b/src/app/config-view.coffee index dab7297e4..ac51ca99a 100644 --- a/src/app/config-view.coffee +++ b/src/app/config-view.coffee @@ -1,6 +1,7 @@ {View, $$} = require 'space-pen' $ = require 'jquery' _ = require 'underscore' +EditorConfigPanel = require 'editor-config-panel' module.exports = class ConfigView extends View @@ -15,6 +16,9 @@ class ConfigView extends View @on 'click', '#panel-menu li', (e) => @showPanel($(e.target).attr('name')) + @addPanel('General', $$ -> @div "General") + @addPanel('Editor', new EditorConfigPanel) + addPanel: (name, panel) -> panelItem = $$ -> @li name: name, name @panelMenu.append(panelItem) diff --git a/src/app/editor-config-panel.coffee b/src/app/editor-config-panel.coffee new file mode 100644 index 000000000..1d9b6e216 --- /dev/null +++ b/src/app/editor-config-panel.coffee @@ -0,0 +1,13 @@ +{View} = require 'space-pen' + +module.exports = +class EditorConfigPanel extends View + @content: -> + @div class: 'config-panel', => + @div class: 'row', => + @label for: 'editor.fontSize', "Font Size:" + @input name: 'editor.fontSize', size: 2 + + @div class: 'row', => + @label for: 'editor.fontFamily', "Font Family:" + @input name: 'editor.fontFamily' diff --git a/static/config.less b/static/config.less index a6f913e7d..f93742e20 100644 --- a/static/config.less +++ b/static/config.less @@ -1,4 +1,36 @@ #config-view { height: 100%; width: 100%; + background: white; + display: -webkit-flex; + + #panel-menu { + background: #f3f3f3; + + li { + width: 100px; + padding: 10px; + background: #ddd; + box-sizing: border-box; + cursor: pointer; + + &.active { + background: #aaa; + } + } + } + + #panels { + -webkit-flex: 1; + > div { + padding: 10px; + } + + label { + display: inline-block; + width: 80px; + text-align: right; + margin-right: 5px; + } + } }