basic tab switching added

cms/static/coffee/src/views/module_edit.coffee

@@ -7,7 +7,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
     "click .component-editor .save-button": 'clickSaveButton'
     "click .component-actions .edit-button": 'clickEditButton'
     "click .component-actions .delete-button": 'onDelete'
-    "click .not-set ": 'clickModeButton'
+    "click .mode a": 'clickModeButton'
 
   initialize: ->
     @onDelete = @options.onDelete
@@ -28,6 +28,8 @@ class CMS.Views.ModuleEdit extends Backbone.View
           model: new CMS.Models.MetadataEditor(metadataEditor.data('metadata'))
           });
 
+   ----> find id of the li that wraps the is-set A thinger, that thing's name, get the first word set to VAR, and then add is-active to the div whose class equals  wrapper-comp-VAR
+
   changedMetadata: ->
     return @metadataEditor.getModifiedMetadataValues()
 
@@ -86,11 +88,19 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   clickModeButton: (event) ->
     event.preventDefault()
-    @$el.find("a").removeClass('not-set').addClass('is-set')
-
-    previouslySetMode = @$el.siblings('li.active-mode').find('.is-set')
-    previouslySetMode.find("a").removeClass('is-set').addClass('not-set')
-
-    activeTab = $component_editor.find('.xmodule_edit').find(".is-set")
-    activeTab.removeClass('is-set')
-    activeTab.siblings('.not-set').addClass('is-set')
+    if $(this).hasClass(".is-set")
+      alert("Hey Sucka")
+    else
+      previousTab = @$el.find('li.active-mode .is-set')
+      previousTab.parent().siblings().find("a").addClass('is-set').attr({
+        aria-selected: 'true',
+        tab-index: '1'
+        })
+      previousTab.removeClass('is-set').attr({
+        aria-selected: 'false',
+        tab-index: '0'
+        })
+
+      previousTabContent = @$el.find('div.is-active')
+      previousTabContent.siblings().addClass('is-active')
+      previousTabContent.removeClass('is-active')

cms/static/sass/views/_unit.scss

@@ -532,10 +532,21 @@ body.course.unit {
 }
 
 // Editor Wrapper
-.wrapper-comp-editor { }
+.wrapper-comp-editor {
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
+ }
 
 // Settings Wrapper
 .wrapper-comp-settings {
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
 
   //settings-list
   .list-input.settings-list { 
@@ -625,7 +636,7 @@ body.course.unit {
         }
       }
 
-      input, select {
+      input, select, input[type="number"] {
         @include placeholder($gray-l4);
         @include font-size(16);
         @include size(100%,100%);

cms/templates/component.html

@@ -3,13 +3,10 @@
 		<div class="component-edit-header">
   			<span class="component-name"><em>Editing:</em> Component</span>
   	  		<ul class="nav-edit-modes">
-  	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
-  	  				<a href="#" class="not-set">Editor</a>
+  	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="-1">
+  	  				<a href="#">Editor</a>
 	  			</li>
-	  			<li id="settings-mode" class="mode inactive-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
-	  				<a href="#" class="not-set">Compiler </a>
-	  			</li>
-	  			<li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  			<li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="0">
 	  				<a href="#" class="is-set">Settings</a>
 	  			</li>
 	  		</ul>