Merge pull request #2276 from edx/studio/duplicate/visuals

Updates Studio's visual styling of action buttons on components and static pages

cms/static/js/spec/views/unit_spec.js

@@ -32,19 +32,19 @@ define(["coffee/src/views/unit", "js/models/module_info", "js/spec/create_sinon"
                   <ol class="components"> \
                     <li class="component" data-locator="loc_1"> \
                       <div class="wrapper wrapper-component-editor"/> \
-                      <div class="component-actions"> \
-                        <a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>Duplicate</a> \
-                      </div> \
+                      <ul class="component-actions"> \
+                        <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button"><i class="icon-copy"></i><span class="sr"></span>Duplicate</span></a> \
+                      </ul> \
                     </li> \
                     <li class="component" data-locator="loc_2"> \
                       <div class="wrapper wrapper-component-editor"/> \
-                      <div class="component-actions"> \
-                        <a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>Duplicate</a> \
-                      </div> \
+                      <ul class="component-actions"> \
+                        <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button"><i class="icon-copy"></i><span class="sr"></span>Duplicate</span></a> \
+                      </ul> \
                     </li> \
                   </ol> \
                 </div>';
-
+                
             var unit;
             var clickDuplicate = function (index) {
                 unit.$(".duplicate-button")[index].click();

cms/static/sass/views/_assets.scss

@@ -325,6 +325,7 @@
     }
   }
 
+  // uses similar styling as unit.scss, static-pages.scss
   .action-item {
     display: inline-block;
     margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);

cms/static/sass/views/_static-pages.scss

@@ -116,10 +116,66 @@
       }
     }
 
-    .component-actions {
+    // uses similar styling as assets.scss, unit.scss
+    .wrapper-component-action-header {
+      @include box-sizing(border-box);
       position: absolute;
-      top: 20px;
-      right: 44px;
+      width: 100%;
+      padding: $baseline/4 $baseline/2;
+      top: 0;
+      left: 0;
+    }
+
+    .component-header {
+      display: none;
+    }
+
+    .component-actions {
+      display: inline-block;
+      float: right; 
+      margin-right: $baseline*2;
+      padding: 8px 0px;
+      vertical-align: middle;
+      text-align: center;
+
+      .action-item {
+        display: inline-block;
+        margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+
+        .action-button {
+          @include transition(all $tmg-f2 ease-in-out 0s);
+          display: block;
+          padding: 0 $baseline/2;
+          width: auto;
+          height: ($baseline*1.5);
+          border-radius: 3px;
+          color: $gray-l1;
+
+          &:hover {
+            background-color: $blue;
+            color: $gray-l6;
+          }
+
+          .action-button-text {
+            padding-left: 1px;
+            vertical-align: bottom;
+            line-height: 17px;
+          }
+
+          &.delete-button:hover {
+            background-color: $gray-l1;
+          }
+        }
+
+        [class^="icon-"] {
+          display: inline-block;
+          vertical-align: bottom;
+        }
+
+        &.action-duplicate {
+          display: none;
+        }
+      }
     }
   }
 
@@ -163,10 +219,6 @@
       margin-right: 12px;
     }
   }
-
-  .duplicate-button.standard {
-    display: none;
-  }
 }
 
 .edit-static-page {

cms/static/sass/views/_unit.scss

@@ -867,20 +867,35 @@ body.course.unit,.view-unit {
 // ====================
 
 // Editing Units from Courseware
+//uses similar styling as static-pages.scss
 body.unit {
 
   .component {
     padding-top: 30px;
 
-    .component-actions {
+
+    .wrapper-component-action-header {
       @include box-sizing(border-box);
       position: absolute;
       width: 100%;
-      padding: 15px;
+      padding: $baseline/4 $baseline/2;
       top: 0;
       left: 0;
-      border-bottom: 1px solid $lightBluishGrey2;
-      background: $lightGrey;
+      border-bottom: 1px solid $gray-l4;
+      background: $gray-l5;
+    }
+
+    .component-header {
+      display: inline-block;
+      width: 50%;
+      vertical-align: middle;
+    }
+
+    .component-actions {
+      display: inline-block;
+      float: right;
+      vertical-align: middle;
+      text-align: center; 
     }
 
     &.editing {
@@ -888,6 +903,53 @@ body.unit {
     }
   }
 }
+
+// ====================
+
+// Component Header Actions
+// uses similar styling as assets.scss, static-pages.scss
+
+body.unit {
+
+  .component-actions {
+
+    .action-item {
+      display: inline-block;
+      margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+
+      .action-button {
+        @include transition(all $tmg-f2 ease-in-out 0s);
+        display: block;
+        padding: 0 $baseline/2;
+        width: auto;
+        height: ($baseline*1.5);
+        border-radius: 3px;
+        color: $gray-l1;
+
+        &:hover {
+          background-color: $blue;
+          color: $gray-l6;
+        }
+
+        .action-button-text {
+          padding-left: 1px;
+          vertical-align: bottom;
+          line-height: 17px;
+        }
+
+        &.delete-button:hover {
+          background-color: $gray-l1;
+        }
+      }
+
+      [class^="icon-"] {
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+  }
+}
+
 // ====================
 
 // Unit Page Sidebar