From 99458e72237c95f7448a51341e09f99edd54ff99 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 29 Jul 2013 15:08:17 -0400 Subject: [PATCH] Studio: revises visual layout/presentation of multi-value metadata fields --- cms/static/js/views/metadata_editor_view.js | 8 +- cms/static/sass/views/_textbooks.scss | 8 + cms/static/sass/views/_unit.scss | 138 ++++++++++++++++-- cms/templates/component.html | 4 +- cms/templates/js/metadata-editor.underscore | 2 +- .../js/metadata-list-entry.underscore | 16 +- 6 files changed, 151 insertions(+), 25 deletions(-) diff --git a/cms/static/js/views/metadata_editor_view.js b/cms/static/js/views/metadata_editor_view.js index 31ac9f800c..1a6499ab8c 100644 --- a/cms/static/js/views/metadata_editor_view.js +++ b/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( - '
  • ' + + '
  • ' + '' + - 'remove' + + 'Remove' + '
    • ' ); list.append($(template({'ele': ele, 'index': index}))); diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 8058673b2b..b83d22414b 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/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 { diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 06685ad96b..84cc0d1618 100644 --- a/cms/static/sass/views/_unit.scss +++ b/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 { + + } + } + } } } } diff --git a/cms/templates/component.html b/cms/templates/component.html index 512847aa3d..2412cd74d4 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -26,8 +26,8 @@
    - ${_("Save")} - ${_("Cancel")} + ${_("Save")} + ${_("Cancel")}
    diff --git a/cms/templates/js/metadata-editor.underscore b/cms/templates/js/metadata-editor.underscore index 03fdd28996..67898a77b6 100644 --- a/cms/templates/js/metadata-editor.underscore +++ b/cms/templates/js/metadata-editor.underscore @@ -1,6 +1,6 @@ diff --git a/cms/templates/js/metadata-list-entry.underscore b/cms/templates/js/metadata-list-entry.underscore index f0809f6039..d4f79e2e17 100644 --- a/cms/templates/js/metadata-list-entry.underscore +++ b/cms/templates/js/metadata-list-entry.underscore @@ -1,11 +1,17 @@ -
    +
    -
    -
      + - add
      <%= model.get('help') %>