Skip to content

E
edx-platform
Commit c433d2b4 by Brian Talbot Committed by cahrens
Options

Studio: outline UI revisions: 

* syncing up unit publishing state UI with stateful names/styles
* revising outline item status message display logic to show release status
* fixing publishState value typo in outline UI template
* refining and syncing incontext editor styling
* maintaining visual alignment of collapsed/expanded sections in outline UI
* simplifying page-level action styles on outline UI
parent a3590653
Showing with 91 additions and 57 deletions
cms/static/sass/elements/_forms.scss
...@@ -327,8 +327,9 @@ form[class^="create-"] { ...@@ -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.is-editable {
.incontext-editor-value, .incontext-editor-value,
......
cms/static/sass/elements/_layout.scss
...@@ -83,12 +83,6 @@ ...@@ -83,12 +83,6 @@
@extend %btn-primary-green; @extend %btn-primary-green;
@extend %sizing; @extend %sizing;
} }
// CASE: toggle button
&.button-toggle {
@extend %btn-secondary-gray;
@extend %sizing;
}
} }
} }
} }
......
cms/static/sass/elements/_modules.scss
...@@ -269,12 +269,15 @@ $outline-indent-width: $baseline; ...@@ -269,12 +269,15 @@ $outline-indent-width: $baseline;
// UI: section // UI: section
%outline-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; border-left: 1px solid $color-draft;
margin-bottom: $baseline;
padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline + 4);
// STATE: is-collapsed // STATE: is-collapsed
&.is-collapsed { &.is-collapsed {
border-left-width: ($baseline/4); border-left-width: ($baseline/4);
padding-left: $baseline;
// CASE: is ready to be live // CASE: is ready to be live
&.is-ready { &.is-ready {
...@@ -306,7 +309,12 @@ $outline-indent-width: $baseline; ...@@ -306,7 +309,12 @@ $outline-indent-width: $baseline;
// UI: subsection // UI: subsection
%outline-subsection { %outline-subsection {
@include transition(border-left-color $tmg-f2 linear 0s); @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-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 // CASE: is ready to be live
&.is-ready { &.is-ready {
...@@ -405,8 +413,6 @@ $outline-indent-width: $baseline; ...@@ -405,8 +413,6 @@ $outline-indent-width: $baseline;
@extend %ui-window; @extend %ui-window;
@extend %outline-item; @extend %outline-item;
@extend %outline-section; @extend %outline-section;
margin-bottom: $baseline;
padding: ($baseline*0.75) $baseline;
// header - title // header - title
.section-title { .section-title {
......
cms/static/sass/views/_container.scss
...@@ -25,15 +25,23 @@ ...@@ -25,15 +25,23 @@
font-weight: 600; font-weight: 600;
} }
// TODO: abstract out
.is-editable { .is-editable {
// TOOD: abstract this out into a Sass placeholder
.incontext-editor-input { .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-title4;
@extend %t-strong; @extend %t-strong;
width: 100%;
background: none repeat scroll 0 0 $white; background: none repeat scroll 0 0 $white;
border: 0; border: 0;
box-shadow: 0 0 2px 2px $shadow 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;
}
} }
} }
} }
...@@ -99,16 +107,23 @@ ...@@ -99,16 +107,23 @@
.bit-publishing { .bit-publishing {
@extend %bar-module; @extend %bar-module;
&.published, // CASE: content is ready to be made live
&.is-published { &.is-ready {
@extend %bar-module-green; @extend %bar-module-green;
} }
// CASE: content is live
&.is-live {
@extend %bar-module-blue;
}
// CASE: content is draft
&.draft , &.draft ,
&.is-draft { &.is-draft {
@extend %bar-module-yellow; @extend %bar-module-yellow;
} }
// CASE: content is staff only
&.staff-only, &.staff-only,
&.is-staff-only { &.is-staff-only {
@extend %bar-module-black; @extend %bar-module-black;
......
cms/static/sass/views/_outline.scss
...@@ -18,15 +18,23 @@ ...@@ -18,15 +18,23 @@
.incontext-editor-form { .incontext-editor-form {
width: 100%; width: 100%;
position: relative;
top: -($baseline/4);
} }
// TOOD: abstract this out into a Sass placeholder
.incontext-editor-input { .incontext-editor-input {
@extend %t-title5; @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0);
@extend %t-strong;
width: 100%; width: 100%;
background: none repeat scroll 0 0 $white; background: none repeat scroll 0 0 $white;
border: 0; 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 // STATE: hover/focus
...@@ -247,6 +255,11 @@ ...@@ -247,6 +255,11 @@
// header // header
.section-header { .section-header {
@extend %outline-item-header; @extend %outline-item-header;
.incontext-editor-input {
@extend %t-strong;
@extend %t-title5;
}
} }
.section-header-details { .section-header-details {
...@@ -320,6 +333,10 @@ ...@@ -320,6 +333,10 @@
// header // header
.subsection-header { .subsection-header {
@extend %outline-item-header; @extend %outline-item-header;
.incontext-editor-input {
@extend %t-title6;
}
} }
.subsection-header-details { .subsection-header-details {
......
cms/templates/course_outline.html
...@@ -47,14 +47,14 @@ from contentstore.utils import reverse_usage_url ...@@ -47,14 +47,14 @@ from contentstore.utils import reverse_usage_url
<h3 class="sr">${_("Page Actions")}</h3> <h3 class="sr">${_("Page Actions")}</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden"> <a href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location}" data-default-name="Section">
<span class="collapse-all"><i class="icon-arrow-up"></i> <span class="label">${_("Collapse All Sections")}</span></span> <i class="icon-plus"></i>${_('New Section')}
<span class="expand-all"><i class="icon-arrow-down"></i> <span class="label">${_("Expand All Sections")}</span></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location}" data-default-name="Section"> <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
<i class="icon-plus"></i>${_('New Section')} <span class="collapse-all"><i class="icon-arrow-up"></i> <span class="label">${_("Collapse All Sections")}</span></span>
<span class="expand-all"><i class="icon-arrow-down"></i> <span class="label">${_("Expand All Sections")}</span></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
......
cms/templates/js/course-outline.underscore
...@@ -25,7 +25,7 @@ if (xblockType === 'course') { ...@@ -25,7 +25,7 @@ if (xblockType === 'course') {
var statusMessage = null; var statusMessage = null;
var statusType = null; var statusType = null;
if (publishState === 'is_staff_only') { if (publishState === 'staff_only') {
statusType = 'staff-only'; statusType = 'staff-only';
statusMessage = 'Contains staff only content'; statusMessage = 'Contains staff only content';
} else if (publishState === 'has_unpublished_content') { } else if (publishState === 'has_unpublished_content') {
...@@ -82,36 +82,37 @@ if (statusType === 'warning') { ...@@ -82,36 +82,37 @@ if (statusType === 'warning') {
</ul> </ul>
</div> </div>
</div> </div>
<% if (statusMessage) { %> <div class="<%= xblockType %>-status">
<div class="<%= xblockType %>-status"> <% if (category !== 'vertical') { %>
<% if (category !== 'vertical') { %> <div class="status-release">
<div class="status-release"> <p>
<p> <span class="sr status-release-label">Release Status:</span>
<span class="sr status-release-label">Release Status:</span> <span class="status-release-value">
<span class="status-release-value"> <% if (xblockInfo.get('released_to_students')) { %>
<% if (xblockInfo.get('released_to_students')) { %> <i class="icon icon-check-sign"></i>
<i class="icon icon-check-sign"></i> <%= gettext('Released:') %>
<%= gettext('Released:') %> <% } else if (xblockInfo.get('release_date')) { %>
<% } else if (xblockInfo.get('release_date')) { %> <i class="icon icon-time"></i>
<i class="icon icon-time"></i> <%= gettext('Scheduled:') %>
<%= gettext('Scheduled:') %> <% } else { %>
<% } else { %> <i class="icon icon-file-alt"></i>
<i class="icon icon-file-alt"></i> <%= gettext('Unscheduled') %>
<%= gettext('Unscheduled') %> <% } %>
<% } %> <% if (xblockInfo.get('release_date')) { %>
<% if (xblockInfo.get('release_date')) { %> <%= xblockInfo.get('release_date') %>
<%= xblockInfo.get('release_date') %> <% } %>
<% } %> </span>
</span> </p>
</p>
</div>
<% } %>
<div class="status-message">
<i class="icon <%= statusIconClass %>"></i>
<p class="status-message-copy"><%- statusMessage %></p>
</div> </div>
<% } %>
<% if (statusMessage) { %>
<div class="status-message">
<i class="icon <%= statusIconClass %>"></i>
<p class="status-message-copy"><%- statusMessage %></p>
</div> </div>
<% } %> <% } %>
</div>
<% } %> <% } %>
<% if (!parentInfo && xblockInfo.get('child_info') && xblockInfo.get('child_info').children.length === 0) { %> <% if (!parentInfo && xblockInfo.get('child_info') && xblockInfo.get('child_info').children.length === 0) { %>
......
cms/templates/js/publish-xblock.underscore
...@@ -3,9 +3,9 @@ var publishClass = ''; ...@@ -3,9 +3,9 @@ var publishClass = '';
if (publishState === 'staff_only') { if (publishState === 'staff_only') {
publishClass = 'is-staff-only'; publishClass = 'is-staff-only';
} else if (publishState === 'live') { } else if (publishState === 'live') {
publishClass = 'is-live is-published is-released'; publishClass = 'is-live';
} else if (publishState === 'ready') { } else if (publishState === 'ready') {
publishClass = 'is-ready is-published'; publishClass = 'is-ready';
} else if (publishState === 'has_unpublished_content') { } else if (publishState === 'has_unpublished_content') {
publishClass = 'has-warnings is-draft'; publishClass = 'has-warnings is-draft';
} }
......
cms/templates/ux/reference/outline.html
...@@ -20,14 +20,14 @@ from django.core.urlresolvers import reverse ...@@ -20,14 +20,14 @@ from django.core.urlresolvers import reverse
<h3 class="sr">Page Actions</h3> <h3 class="sr">Page Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all"> <a href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name="">
<span class="collapse-all"><i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span></span> <i class="icon-plus"></i>New Section
<span class="expand-all"><i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name=""> <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
<i class="icon-plus"></i>Add Section <span class="collapse-all"><i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span></span>
<span class="expand-all"><i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment