Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Studio: outline UI revisions:

Browse Source 
* 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
This commit is contained in:
Brian Talbot
2014-07-24 18:51:13 -04:00
committed by cahrens
parent a359065329
commit c433d2b48c
9 changed files with 91 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cms/static/sass/elements/_forms.scss
View File

@@ -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,

6
cms/static/sass/elements/_layout.scss
View File

@@ -83,12 +83,6 @@
@extend %btn-primary-green;
@extend %sizing;
}
// CASE: toggle button
&.button-toggle {
@extend %btn-secondary-gray;
@extend %sizing;
}
}
}
}

12
cms/static/sass/elements/_modules.scss
View File

@@ -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 {

21
cms/static/sass/views/_container.scss
View File

@@ -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;

23
cms/static/sass/views/_outline.scss
View File

@@ -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 {

10
cms/templates/course_outline.html
View File

@@ -47,14 +47,14 @@ from contentstore.utils import reverse_usage_url
<h3 class="sr">${_("Page Actions")}</h3>
<ul>
<li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
<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 href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location}" data-default-name="Section">
<i class="icon-plus"></i>${_('New Section')}
</a>
</li>
<li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location}" data-default-name="Section">
<i class="icon-plus"></i>${_('New Section')}
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
<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>
</li>
<li class="nav-item">

59
cms/templates/js/course-outline.underscore
View File

@@ -25,7 +25,7 @@ if (xblockType === 'course') {
var statusMessage = null;
var statusType = null;
if (publishState === 'is_staff_only') {
if (publishState === 'staff_only') {
statusType = 'staff-only';
statusMessage = 'Contains staff only content';
} else if (publishState === 'has_unpublished_content') {
@@ -82,36 +82,37 @@ if (statusType === 'warning') {
</ul>
</div>
</div>
<% if (statusMessage) { %>
<div class="<%= xblockType %>-status">
<% if (category !== 'vertical') { %>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<% if (xblockInfo.get('released_to_students')) { %>
<i class="icon icon-check-sign"></i>
<%= gettext('Released:') %>
<% } else if (xblockInfo.get('release_date')) { %>
<i class="icon icon-time"></i>
<%= gettext('Scheduled:') %>
<% } else { %>
<i class="icon icon-file-alt"></i>
<%= gettext('Unscheduled') %>
<% } %>
<% if (xblockInfo.get('release_date')) { %>
<%= xblockInfo.get('release_date') %>
<% } %>
</span>
</p>
</div>
<% } %>
<div class="status-message">
<i class="icon <%= statusIconClass %>"></i>
<p class="status-message-copy"><%- statusMessage %></p>
<div class="<%= xblockType %>-status">
<% if (category !== 'vertical') { %>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<% if (xblockInfo.get('released_to_students')) { %>
<i class="icon icon-check-sign"></i>
<%= gettext('Released:') %>
<% } else if (xblockInfo.get('release_date')) { %>
<i class="icon icon-time"></i>
<%= gettext('Scheduled:') %>
<% } else { %>
<i class="icon icon-file-alt"></i>
<%= gettext('Unscheduled') %>
<% } %>
<% if (xblockInfo.get('release_date')) { %>
<%= xblockInfo.get('release_date') %>
<% } %>
</span>
</p>
</div>
<% } %>
<% if (statusMessage) { %>
<div class="status-message">
<i class="icon <%= statusIconClass %>"></i>
<p class="status-message-copy"><%- statusMessage %></p>
</div>
<% } %>
<% } %>
</div>
<% } %>
<% if (!parentInfo && xblockInfo.get('child_info') && xblockInfo.get('child_info').children.length === 0) { %>

4
cms/templates/js/publish-xblock.underscore
View File

@@ -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';
}

10
cms/templates/ux/reference/outline.html
View File

@@ -20,14 +20,14 @@ from django.core.urlresolvers import reverse
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
<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 href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name="">
<i class="icon-plus"></i>New Section
</a>
</li>
<li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name="">
<i class="icon-plus"></i>Add Section
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
<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>
</li>
<li class="nav-item">