Studio: revises visual layout/presentation of multi-value metadata fields

cms/static/js/views/metadata_editor_view.js

@@ -320,8 +320,8 @@ CMS.Views.Metadata.List = CMS.Views.Metadata.AbstractEditor.extend({
         "click .setting-clear" : "clear",
         "keypress .setting-input" : "showClearButton",
         "change input" : "updateModel",
-        "click .setting-add" : "addEntry",
-        "click .setting-remove" : "removeEntry"
+        "click .create-setting" : "addEntry",
+        "click .remove-setting" : "removeEntry"
     },
 
     templateName: "metadata-list-entry",
@@ -338,9 +338,9 @@ CMS.Views.Metadata.List = CMS.Views.Metadata.AbstractEditor.extend({
         list.empty();
         _.each(value, function(ele, index) {
             var template = _.template(
-                '<li>' +
+                '<li class="list-settings-item">' +
                     '<input class="input" value="<%= ele %>">' +
-                    '<a href="#" class="setting-remove" data-index="<%= index %>">remove</a>' +
+                    '<a href="#" class="remove-action remove-setting" data-index="<%= index %>"><i class="icon-remove-sign"></i><span class="sr">Remove</span></a>' +
                 '</li>'
             );
             list.append($(template({'ele': ele, 'index': index})));

cms/static/sass/views/_textbooks.scss

@@ -148,6 +148,14 @@ body.course.textbooks {
         padding: ($baseline*0.75) $baseline;
         background: $gray-l6;
 
+        .action {
+          margin-right: ($baseline/4);
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
         // add a chapter is below with chapters styling
 
         .action-primary {

cms/static/sass/views/_unit.scss

@@ -449,12 +449,39 @@ body.course.unit {
 
       // Module Actions, also used for Static Pages
       .module-actions {
-        box-shadow: inset 0 1px 1px $shadow;
-        padding: 0 0 $baseline $baseline;
-        background-color: $gray-l6;
+        box-shadow: inset 0 1px 2px $shadow;
+        border-top: 1px solid $gray-l1;
+        padding: ($baseline*0.75) $baseline;
+        background: $gray-l6;
 
-        .save-button {
-        margin: ($baseline/2) 8px 0 0;
+        .action {
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: ($baseline/4);
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        .action-primary {
+          @include blue-button;
+          @extend .t-action2;
+          @include transition(all .15s);
+          display: inline-block;
+          padding: ($baseline/5) $baseline;
+          font-weight: 600;
+          text-transform: uppercase;
+        }
+
+        .action-secondary {
+          @include grey-button;
+          @extend .t-action2;
+          @include transition(all .15s);
+          display: inline-block;
+          padding: ($baseline/5) $baseline;
+          font-weight: 600;
+          text-transform: uppercase;
         }
       }
     }
@@ -599,26 +626,27 @@ body.course.unit {
         }
       }
 
-      .wrapper-comp-setting{
+      .wrapper-comp-setting {
         display: inline-block;
         min-width: 300px;
-        width: 45%;
+        width: 55%;
         top: 0;
         vertical-align: top;
         margin-bottom:5px;
         position: relative;
       }
 
-      label.setting-label {
+      .setting-label {
         @extend .t-copy-sub1;
         @include transition(color $tmg-f2 ease-in-out 0s);
-        font-weight: 400;
         vertical-align: middle;
         display: inline-block;
         position: relative;
         left: 0;
+        width: 33%;
         min-width: 100px;
-        width: 35%;
+        margin-right: ($baseline/2);
+        font-weight: 600;
 
         &.is-focused {
           color: $blue;
@@ -708,14 +736,98 @@ body.course.unit {
         }
       }
 
-      .tip.setting-help {
+      .setting-help {
         @include font-size(12);
         display: inline-block;
         font-color: $gray-l6;
-        min-width: 260px;
-        width: 50%;
+        min-width: ($baseline*10);
+        width: 35%;
         vertical-align: top;
       }
+
+
+
+      // TYPE: enumerated lists of metadata sets
+      .metadata-list-enum {
+
+        * {
+          @include box-sizing(border-box);
+        }
+
+        // label
+        .setting-label {
+          vertical-align: top;
+          margin-top: ($baseline/2);
+        }
+
+        // inputs and labels
+        .wrapper-list-settings {
+          @include size(45%,100%);
+          display: inline-block;
+          min-width: ($baseline*5);
+
+          // enumerated fields
+          .list-settings {
+            margin: 0;
+
+            .list-settings-item {
+              margin-bottom: ($baseline/4);
+            }
+
+            // inputs
+            .input {
+              width: 80%;
+              margin-right: ($baseline/2);
+              vertical-align: middle;
+            }
+          }
+        }
+
+        // actions
+        .create-action, .remove-action, .setting-clear {
+
+        }
+
+        .setting-clear {
+          vertical-align: top;
+          margin-top: ($baseline/4);
+        }
+
+        .create-setting {
+          @extend .ui-btn-flat-outline;
+          @extend .t-action3;
+          display: block;
+          width: 100%;
+          padding: ($baseline/2);
+          font-weight: 600;
+
+          *[class^="icon-"] {
+            margin-right: ($baseline/4);
+          }
+
+          // STATE: disabled
+          &.is-disabled {
+
+          }
+        }
+
+        .remove-setting {
+          @include transition(color 0.25s ease-in-out);
+          @include font-size(20);
+          display: inline-block;
+          background: transparent;
+          color: $blue-l3;
+
+          &:hover {
+            color: $blue;
+          }
+
+          // STATE: disabled
+          &.is-disabled {
+
+          }
+        }
+      }
     }
   }
 }

cms/templates/component.html

@@ -26,8 +26,8 @@
 	        </div>
 		</div>
 		<div class="row module-actions">
-	  		<a href="#" class="save-button">${_("Save")}</a>
-	  		<a href="#" class="cancel-button">${_("Cancel")}</a>
+	  		<a href="#" class="save-button action-primary action">${_("Save")}</a>
+	  		<a href="#" class="cancel-button action-secondary action">${_("Cancel")}</a>
 		</div> <!-- Module Actions-->
   </div>
 </div>

cms/templates/js/metadata-editor.underscore

@@ -1,6 +1,6 @@
 <ul class="list-input settings-list">
     <% _.each(_.range(numEntries), function() { %>
-    <li class="field comp-setting-entry metadata_entry" id="settings-listing">
+    <li class="field comp-setting-entry metadata_entry">
     </li>
     <% }) %>
 </ul>

cms/templates/js/metadata-list-entry.underscore

@@ -1,11 +1,17 @@
-<div class="wrapper-comp-setting">
+<div class="wrapper-comp-setting metadata-list-enum">
   <label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name')%></label>
-  <div id="<%= uniqueId %>" class="setting-list-wrapper">
-    <ol class="setting-input" type="text"></ol>
+  <div id="<%= uniqueId %>" class="wrapper-list-settings">
+    <ol class="list-settings">
+
+    </ol>
+
+    <a href="#" class="create-action create-setting">
+      <i class="icon-plus"></i>Add <span class="sr"><%= model.get('display_name')%></span>
+    </a>
   </div>
-  <a href="#" class="setting-add">add</a>
   <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-    <i class="icon-undo"></i><span class="sr">"<%= gettext("Clear Value") %>"</span>
+    <i class="icon-undo"></i>
+    <span class="sr">"<%= gettext("Clear Value") %>"</span>
   </button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>