Add super basic styling to config view and 2 non-functional panels

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()

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)

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'

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;
+    }
+  }
 }