diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 1c1ff8eef0..da648a6447 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -327,8 +327,9 @@ form[class^="create-"] { } -// form - inline xblock name edit on unit, container, outline? +// form - inline xblock name edit on unit, container, outline +// TOOD: abstract this out into a Sass placeholder .incontext-editor.is-editable { .incontext-editor-value, diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index 764af35552..942a85e7ef 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -83,12 +83,6 @@ @extend %btn-primary-green; @extend %sizing; } - - // CASE: toggle button - &.button-toggle { - @extend %btn-secondary-gray; - @extend %sizing; - } } } } diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index b46fce054f..16c5f89bb8 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -269,12 +269,15 @@ $outline-indent-width: $baseline; // UI: section %outline-section { - @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s); + @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s, padding-left $tmg-f2 linear 0s); border-left: 1px solid $color-draft; + margin-bottom: $baseline; + padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline + 4); // STATE: is-collapsed &.is-collapsed { border-left-width: ($baseline/4); + padding-left: $baseline; // CASE: is ready to be live &.is-ready { @@ -306,7 +309,12 @@ $outline-indent-width: $baseline; // UI: subsection %outline-subsection { @include transition(border-left-color $tmg-f2 linear 0s); + margin-bottom: ($baseline/2); + border: 1px solid $gray-l4; border-left: ($baseline/4) solid $color-draft; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding: ($baseline*0.75); // CASE: is ready to be live &.is-ready { @@ -405,8 +413,6 @@ $outline-indent-width: $baseline; @extend %ui-window; @extend %outline-item; @extend %outline-section; - margin-bottom: $baseline; - padding: ($baseline*0.75) $baseline; // header - title .section-title { diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index 53079dd995..08b279941e 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -25,15 +25,23 @@ font-weight: 600; } - // TODO: abstract out .is-editable { + // TOOD: abstract this out into a Sass placeholder .incontext-editor-input { + @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0); @extend %t-title4; @extend %t-strong; + width: 100%; background: none repeat scroll 0 0 $white; border: 0; box-shadow: 0 0 2px 2px $shadow inset; + + // STATE: focus + &:focus { + box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset; + color: $ui-action-primary-color-focus; + } } } } @@ -99,16 +107,23 @@ .bit-publishing { @extend %bar-module; - &.published, - &.is-published { + // CASE: content is ready to be made live + &.is-ready { @extend %bar-module-green; } + // CASE: content is live + &.is-live { + @extend %bar-module-blue; + } + + // CASE: content is draft &.draft , &.is-draft { @extend %bar-module-yellow; } + // CASE: content is staff only &.staff-only, &.is-staff-only { @extend %bar-module-black; diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index a99588a8a1..3a7c70a2fb 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -18,15 +18,23 @@ .incontext-editor-form { width: 100%; + position: relative; + top: -($baseline/4); } + // TOOD: abstract this out into a Sass placeholder .incontext-editor-input { - @extend %t-title5; - @extend %t-strong; + @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0); width: 100%; background: none repeat scroll 0 0 $white; border: 0; - box-shadow: 0 0 2px 2px $shadow-l1 inset; + box-shadow: 0 0 2px 2px $shadow inset; + + // STATE: focus + &:focus { + box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset; + color: $ui-action-primary-color-focus; + } } // STATE: hover/focus @@ -247,6 +255,11 @@ // header .section-header { @extend %outline-item-header; + + .incontext-editor-input { + @extend %t-strong; + @extend %t-title5; + } } .section-header-details { @@ -320,6 +333,10 @@ // header .subsection-header { @extend %outline-item-header; + + .incontext-editor-input { + @extend %t-title6; + } } .subsection-header-details { diff --git a/cms/templates/course_outline.html b/cms/templates/course_outline.html index e014309219..29753df804 100644 --- a/cms/templates/course_outline.html +++ b/cms/templates/course_outline.html @@ -47,14 +47,14 @@ from contentstore.utils import reverse_usage_url

${_("Page Actions")}

- <% if (statusMessage) { %> -
- <% if (category !== 'vertical') { %> -
-

- Release Status: - - <% if (xblockInfo.get('released_to_students')) { %> - - <%= gettext('Released:') %> - <% } else if (xblockInfo.get('release_date')) { %> - - <%= gettext('Scheduled:') %> - <% } else { %> - - <%= gettext('Unscheduled') %> - <% } %> - <% if (xblockInfo.get('release_date')) { %> - <%= xblockInfo.get('release_date') %> - <% } %> - -

-
- <% } %> -
- -

<%- statusMessage %>

+
+ <% if (category !== 'vertical') { %> +
+

+ Release Status: + + <% if (xblockInfo.get('released_to_students')) { %> + + <%= gettext('Released:') %> + <% } else if (xblockInfo.get('release_date')) { %> + + <%= gettext('Scheduled:') %> + <% } else { %> + + <%= gettext('Unscheduled') %> + <% } %> + <% if (xblockInfo.get('release_date')) { %> + <%= xblockInfo.get('release_date') %> + <% } %> + +

+ <% } %> + + <% if (statusMessage) { %> +
+ +

<%- statusMessage %>

- <% } %> + <% } %> +
<% } %> <% if (!parentInfo && xblockInfo.get('child_info') && xblockInfo.get('child_info').children.length === 0) { %> diff --git a/cms/templates/js/publish-xblock.underscore b/cms/templates/js/publish-xblock.underscore index 21fc7a1fe7..76d5238c68 100644 --- a/cms/templates/js/publish-xblock.underscore +++ b/cms/templates/js/publish-xblock.underscore @@ -3,9 +3,9 @@ var publishClass = ''; if (publishState === 'staff_only') { publishClass = 'is-staff-only'; } else if (publishState === 'live') { - publishClass = 'is-live is-published is-released'; + publishClass = 'is-live'; } else if (publishState === 'ready') { - publishClass = 'is-ready is-published'; + publishClass = 'is-ready'; } else if (publishState === 'has_unpublished_content') { publishClass = 'has-warnings is-draft'; } diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html index 41857bda0f..656a957b60 100644 --- a/cms/templates/ux/reference/outline.html +++ b/cms/templates/ux/reference/outline.html @@ -20,14 +20,14 @@ from django.core.urlresolvers import reverse

Page Actions