reworked add component steps

cms/static/coffee/src/views/unit.coffee

@@ -4,7 +4,6 @@ class CMS.Views.UnitEdit extends Backbone.View
     'click .new-component .cancel-button': 'closeNewComponent'
     'click .new-component-templates .new-component-template a': 'saveNewComponent'
     'click .new-component-templates .cancel-button': 'closeNewComponent'
-    'click .new-component-button': 'showNewComponentForm'
     'click .delete-draft': 'deleteDraft'
     'click .create-draft': 'createDraft'
     'click .publish-draft': 'publishDraft'
@@ -54,30 +53,20 @@ class CMS.Views.UnitEdit extends Backbone.View
         )
     )
 
-  # New component creation
-  showNewComponentForm: (event) =>
-    event.preventDefault()
-    @$newComponentItem.addClass('adding')
-    $(event.target).fadeOut(150)
-    @$newComponentItem.css('height', @$newComponentTypePicker.outerHeight())
-    @$newComponentTypePicker.slideDown(250)
-
   showComponentTemplates: (event) =>
     event.preventDefault()
 
     type = $(event.currentTarget).data('type')
-    @$newComponentTypePicker.fadeOut(250)
-    @$(".new-component-#{type}").fadeIn(250)
+    @$newComponentTypePicker.slideUp(250)
+    @$(".new-component-#{type}").slideDown(250)
 
   closeNewComponent: (event) =>
     event.preventDefault()
 
-    @$newComponentTypePicker.slideUp(250)
+    @$newComponentTypePicker.slideDown(250)
     @$newComponentTemplatePickers.slideUp(250)
-    @$newComponentButton.fadeIn(250)
     @$newComponentItem.removeClass('adding')
     @$newComponentItem.find('.rendered-component').remove()
-    @$newComponentItem.css('height', @$newComponentButton.outerHeight())
 
   saveNewComponent: (event) =>
     event.preventDefault()

cms/static/sass/_unit.scss

@@ -81,33 +81,22 @@
           border-radius: 3px 3px 0 0;
         }
 
-        .new-component-type, .new-component-template {
-          @include clearfix;
-
+        .new-component-type {
+          a,
           li {
             display: inline-block;
           }
 
           a {
-            position: relative;
-            display: inline-block;
             width: 100px;
             height: 100px;
             margin-right: 10px;
             margin-bottom: 10px;
             border-radius: 8px;
-            border: 1px solid $darkGreen;
-            background: $green;
             font-size: 13px;
             line-height: 14px;
-            color: #fff;
             text-align: center;
-            @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
-            @include transition(background-color .15s);
-
-            &:hover {
-              background: $brightGreen;
-            }
+            @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
 
             .name {
               position: absolute;
@@ -120,9 +109,43 @@
           }
         }
 
+        .new-component-type,
         .new-component-template {
+          @include clearfix;
+
           a {
-            height: 60px;
+            position: relative;            
+            border: 1px solid $darkGreen;
+            background: $green;
+            color: #fff;            
+            @include transition(background-color .15s);
+
+            &:hover {
+              background: $brightGreen;
+            }
+          }
+        }
+
+        .new-component-template {
+          margin-bottom: 20px;
+
+          li:first-child {
+            a {
+              border-radius: 3px 3px 0 0;
+            }
+          }
+
+          li:last-child {
+            a {
+              border-radius: 0 0 3px 3px;
+            }
+          }
+
+          a {
+            display: block;
+            padding: 7px 20px;
+            border-bottom: none;
+            font-weight: 300;
           }
         }
 
@@ -137,14 +160,11 @@
         
         .new-component-templates {
           display: none;
-          position: absolute;
-          width: 100%;
           padding: 20px;
           @include clearfix;
 
           .cancel-button {
-            @include blue-button;
-            border-color: #30649c;
+            @include white-button;
           }
         }
       }