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

Studio: adding UI and styling for component-level access modal

Browse Source
This commit is contained in:
Brian Talbot
2014-12-01 09:32:29 -05:00
committed by Andy Armstrong
parent 561c57dbe9
commit 206ea8caeb
10 changed files with 526 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cms/static/sass/_variables.scss
View File

@@ -183,6 +183,7 @@ $color-ready: $green;
$color-warning: $orange-l2;
$color-error: $red-l2;
$color-staff-only: $black;
$color-visibility-set: $black;
$color-heading-base: $gray-d2;
$color-copy-base: $gray-l1;

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

@@ -1,7 +1,7 @@
// studio - elements - forms
// ====================
// Table of Contents
// Table of Contents
// * +Forms - General
// * +Field - Is Editable
// * +Field - With Error
@@ -12,7 +12,23 @@
// * +Form - Grandfathered
// +Forms - General
// ====================
// ====================
// element-specific utilities
// --------------------
// UI: checkbox/radio inputs
%input-tickable {
~ label {
color: $color-copy-base;
}
// STATE: checked/selected
&:checked ~ label {
@extend %t-strong;
color: $ui-action-primary-color-focus;
}
}
input[type="text"],
input[type="email"],
input[type="password"],
@@ -107,8 +123,18 @@ form {
}
}
// CASE: checkbox input
.field-checkbox .input-checkbox {
@extend %input-tickable;
}
// CASE: radio input
.field-radio .input-radio {
@extend %input-tickable;
}
// CASE: file input
input[type=file] {
input[type="file"] {
@extend %t-copy-sub1;
}

410
cms/static/sass/elements/_modal-window.scss
View File

@@ -52,6 +52,45 @@
}
}
// UI: summary messages
.summary-message {
margin-bottom: $baseline;
padding: ($baseline*0.75);
background: $gray-d3;
.icon, .copy {
display: inline-block;
vertical-align: top;
}
.icon {
@extend %t-icon4;
@include margin-right($baseline/2);
color: $white;
}
.copy {
@extend %t-copy-sub1;
max-width: 85%;
color: $white;
}
}
// CASE: Warning summary message
.summary-message-warning {
border-top: ($baseline/5) solid $color-warning;
.icon {
color: $color-warning;
}
}
// visual dividers
.divider-visual {
margin: ($baseline*0.75) 0;
border: ($baseline/20) solid $gray-l4;
}
// sections within a modal
.modal-section {
margin-bottom: ($baseline*0.75);
@@ -64,11 +103,20 @@
.modal-section-title {
@extend %t-title6;
margin: 0 0 ($baseline/2) 0;
border-bottom: 1px solid $gray-l4;
border-bottom: ($baseline/10) solid $gray-l4;
padding-bottom: ($baseline/4);
color: $gray-d2;
}
.modal-subsection-title {
@extend %t-title8;
@extend %t-strong;
margin-bottom: ($baseline/4);
text-transform: uppercase;
letter-spacing: 0.1;
color: $gray-l2;
}
.modal-section-content {
.list-fields, .list-actions {
@@ -238,143 +286,6 @@
}
}
// outline: edit item settings
.wrapper-modal-window-bulkpublish-section,
.wrapper-modal-window-bulkpublish-subsection,
.wrapper-modal-window-bulkpublish-unit,
.course-outline-modal {
.list-fields {
.field {
display: inline-block;
vertical-align: top;
margin-right: ($baseline/2);
margin-bottom: ($baseline/4);
label {
@extend %t-copy-sub1;
@extend %t-strong;
@include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
color: $blue;
}
}
input, textarea {
@extend %t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s);
height: 100%;
width: 100%;
padding: ($baseline/2);
// CASE: long length
&.long {
width: 100%;
}
// CASE: short length
&.short {
width: 25%;
}
}
// CASE: specific release + due times/dates
.start-date,
.start-time,
.due-date,
.due-time {
width: ($baseline*7);
}
.tip {
@extend %t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l2;
}
.tip-warning {
color: $gray-d2;
}
}
// CASE: type-based input
.field-text {
// TODO: refactor the _forms.scss partial to allow for this area to inherit from it
label, input, textarea {
display: block;
}
}
// CASE: select input
.field-select {
.label, .input {
display: inline-block;
vertical-align: middle;
}
.label {
margin-right: ($baseline/2);
}
.input {
width: 100%;
}
// CASE: checkbox input
.field-checkbox {
.label, label {
margin-bottom: 0;
}
}
}
}
// UI: grading section
.edit-settings-grading {
.grading-type {
margin-bottom: $baseline;
}
}
// UI: staff lock section
.edit-staff-lock {
.checkbox-cosmetic .input-checkbox {
@extend %cont-text-sr;
// CASE: unchecked
~ .tip-warning {
display: block;
}
// CASE: checked
&:checked {
~ .tip-warning {
display: none;
}
}
}
// needed to override poorly scoped margin-bottom on any label element in a view (from _forms.scss)
.checkbox-cosmetic .label {
margin-bottom: 0;
}
}
}
// xblock custom actions
.modal-window .editor-with-buttons {
margin-bottom: ($baseline*3);
@@ -394,7 +305,7 @@
}
// special overrides for video module editor/hidden tab editors
// MODAL TYPE: component - video modal (includes special overrides for xblock-related editing view)
.modal-lg.modal-type-video {
.modal-content {
@@ -517,4 +428,225 @@
opacity: 0.5;
filter: alpha(opacity=50);
}
// MODAL TYPE: component - visibility modal
.xblock-visibility_view {
.visibility-controls-secondary {
max-height: 100%;
overflow-y: scroll;
@include margin(($baseline*0.75), 0, 0, $baseline);
}
.visibility-controls-group {
@extend %wipe-last-child;
margin-bottom: $baseline;
}
// UI: form fields
.list-fields {
.field {
@extend %wipe-last-child;
margin-bottom: ($baseline/4);
label {
@extend %t-copy-sub1;
}
}
// UI: radio and checkbox inputs
.field-radio, .field-checkbox {
label {
@include margin-left($baseline/4);
}
}
}
// CASE: content group has been removed
.field-visibility-content-group.was-removed {
.input-checkbox:checked ~ label {
color: $color-error;
}
.note {
@extend %t-copy-sub2;
@extend %t-regular;
display: block;
color: $color-error;
}
}
// CASE: no groups configured for visibility
.is-not-configured {
@extend %no-content;
padding: ($baseline);
@include text-align(left); // reset for %no-content's default styling
.title {
@extend %t-title6;
font-weight: 600; // needed for poorly scoped .title rule in modals
margin: 0 0 ($baseline/2) 0; // needed for poorly scoped .title rule in modals
}
.copy {
@extend %t-copy-sub1;
p {
@extend %wipe-last-child;
margin-bottom: $baseline;
}
}
&.has-actions {
.actions {
margin-top: $baseline;
}
.action {
@include margin-left(0); // reset for %no-content's default styling
}
}
}
}
// MODAL TYPE: outline - edit item settings
.wrapper-modal-window-bulkpublish-section,
.wrapper-modal-window-bulkpublish-subsection,
.wrapper-modal-window-bulkpublish-unit,
.course-outline-modal {
.list-fields {
.field {
display: inline-block;
vertical-align: top;
@include margin-right($baseline/2);
margin-bottom: ($baseline/4);
label {
@extend %t-copy-sub1;
@extend %t-strong;
@include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
color: $blue;
}
}
input, textarea {
@extend %t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s);
height: 100%;
width: 100%;
padding: ($baseline/2);
// CASE: long length
&.long {
width: 100%;
}
// CASE: short length
&.short {
width: 25%;
}
}
// CASE: specific release + due times/dates
.start-date,
.start-time,
.due-date,
.due-time {
width: ($baseline*7);
}
.tip {
@extend %t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l2;
}
.tip-warning {
color: $gray-d2;
}
}
// CASE: type-based input
.field-text {
// TODO: refactor the _forms.scss partial to allow for this area to inherit from it
label, input, textarea {
display: block;
}
}
// CASE: select input
.field-select {
.label, .input {
display: inline-block;
vertical-align: middle;
}
.label {
@include margin-right($baseline/2);
}
.input {
width: 100%;
}
// CASE: checkbox input
.field-checkbox {
.label, label {
margin-bottom: 0;
}
}
}
}
// UI: grading section
.edit-settings-grading {
.grading-type {
margin-bottom: $baseline;
}
}
// UI: staff lock section
.edit-staff-lock {
.checkbox-cosmetic .input-checkbox {
@extend %cont-text-sr;
// CASE: unchecked
~ .tip-warning {
display: block;
}
// CASE: checked
&:checked {
~ .tip-warning {
display: none;
}
}
}
// needed to override poorly scoped margin-bottom on any label element in a view (from _forms.scss)
.checkbox-cosmetic .label {
margin-bottom: 0;
}
}
}
}

58
cms/static/sass/elements/_xblocks.scss
View File

@@ -150,42 +150,50 @@
// ====================
// UI: xblocks - calls-to-action
.wrapper-xblock .header-actions {
.wrapper-xblock {
.actions-list {
// UI: xblocks - calls-to-action
.header-actions .actions-list {
@extend %actions-list;
}
}
// UI: xblock is collapsible
.wrapper-xblock.is-collapsible,
.wrapper-xblock.xblock-type-container {
// CASE: xblock is collapsible
&.is-collapsible,
&.xblock-type-container {
.icon {
font-style: normal;
}
.icon {
font-style: normal;
}
.expand-collapse {
@extend %expand-collapse;
margin: 0 ($baseline/4);
height: ($baseline*1.25);
width: $baseline;
.expand-collapse {
@extend %expand-collapse;
margin: 0 ($baseline/4);
height: ($baseline*1.25);
width: $baseline;
&:focus {
outline: 0;
&:focus {
outline: 0;
}
}
.action-view {
.action-button {
transition: none;
}
.action-button-text {
padding-right: ($baseline/5);
padding-left: 0;
}
}
}
.action-view {
// CASE: xblock has specific visibility set
&.has-visibility-set {
.action-button {
transition: none;
}
.action-button-text {
padding-right: ($baseline/5);
padding-left: 0;
.action-visibility .visibility-button.visibility-button { // needed to cascade in front of overscoped header-actions CSS rule
color: $color-visibility-set;
}
}
}

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

@@ -6,7 +6,20 @@
// ====================
// view-specific utilities
// --------------------
%status-value-base {
@extend %t-title7;
@extend %t-strong;
}
%status-value-sub1 {
@extend %t-title8;
display: block;
}
// UI: container page view
// --------------------
.view-container {
@extend %two-col-1;
@@ -102,6 +115,7 @@
@extend %t-title8;
}
// UI: publishing details/summary
.bit-publishing {
@extend %bar-module;
@@ -159,19 +173,18 @@
.wrapper-release {
.release-date {
@extend %t-strong;
@extend %status-value-base;
}
.release-with {
@extend %t-title8;
display: block;
@extend %status-value-sub1;
}
}
.wrapper-visibility {
.copy {
@extend %t-strong;
@extend %status-value-base;
margin-bottom: ($baseline/10);
}
@@ -181,15 +194,23 @@
}
.inherited-from {
@extend %t-title8;
display: block;
@extend %status-value-sub1;
}
// UI: note about specific access
.note-visibility {
@extend %status-value-sub1;
.icon {
@include margin-right($baseline/4);
}
}
}
.wrapper-pub-actions {
padding: ($baseline*0.75);
border-top: 1px solid $gray-l4;
margin-top: ($baseline/2);
padding: $baseline ($baseline*0.75) ($baseline*0.75) ($baseline*0.75);
.action-publish {
@extend %btn-primary-blue;
@@ -209,7 +230,6 @@
}
}
}
}
// versioning widget
@@ -244,8 +264,7 @@
.wrapper-unit-id, .wrapper-library-id {
.unit-id-value, .library-id-value {
@extend %cont-text-wrap;
@extend %t-copy-sub1;
@extend %status-value-base;
display: inline-block;
width: 100%;
}
@@ -308,5 +327,3 @@
}
}
}

3
cms/templates/base.html
View File

@@ -86,6 +86,9 @@ import json
</div>
<div id="page-prompt"></div>
<%block name="modal_placeholder"></%block>
<%block name="jsextra"></%block>
<script type="text/javascript">
require(['js/factories/common_deps'], function () {

5
cms/templates/container.html
View File

@@ -144,3 +144,8 @@ from django.utils.translation import ugettext as _
</div>
</div>
</%block>
<!-- NOTE: remove this HTML if you want to not see the fake visibility modal -->
<%block name="modal_placeholder">
<%include file="ux/reference/modal_access-component.html" />
</%block>

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

@@ -66,7 +66,7 @@ var visibleToStaffOnly = visibilityState === 'staff_only';
<% } %>
</h5>
<% if (visibleToStaffOnly) { %>
<p class="copy">
<p class="visbility-copy copy">
<%= gettext("Staff Only") %>
<% if (!hasExplicitStaffLock) { %>
<span class="inherited-from">
@@ -75,10 +75,18 @@ var visibleToStaffOnly = visibilityState === 'staff_only';
<% } %>
</p>
<% } else { %>
<p class="copy"><%= gettext("Staff and Students") %></p>
<p class="visbility-copy copy"><%= gettext("Staff and Students") %></p>
<% } %>
<p class="action-inline">
<a href="" class="action-staff-lock" role="button" aria-pressed="<%= hasExplicitStaffLock %>">
<!-- NOTE: @andyarmstrong, here's the new copy we're adding to the visibility summary UI to make sure we're as accurate as we can be at the final state of the unit/container's visibility -->
<p class="note-visibility">
<i class="icon icon-eye-open"></i>
<span class="note-copy"><%= gettext("Some content in this unit is only visible to particular groups") %></span>
</p>
<ul class="actions-inline">
<li class="action-inline">
<a href="" class="action-staff-lock" role="button" aria-pressed="<%= hasExplicitStaffLock %>">
<% if (hasExplicitStaffLock) { %>
<i class="icon fa fa-check-square-o"></i>
<% } else { %>
@@ -86,7 +94,8 @@ var visibleToStaffOnly = visibilityState === 'staff_only';
<% } %>
<%= gettext('Hide from students') %>
</a>
</p>
</li>
</ul>
</div>
<div class="wrapper-pub-actions bar-mod-actions">

16
cms/templates/studio_xblock_wrapper.html
View File

@@ -38,7 +38,8 @@ messages = json.dumps(xblock.validate().to_json())
<div class="studio-xblock-wrapper" data-locator="${xblock.location | h}" data-course-key="${xblock.location.course_key | h}">
% endif
<section class="wrapper-xblock ${section_class} ${collapsible_class}">
<!-- NOTE: @andyarmstrong, in order to style the case when an access level is set, we need to add a class to each xblock's wrapper. How does .has-visiblity-set sound? -->
<section class="wrapper-xblock ${section_class} ${collapsible_class} has-visibility-set">
% endif
<header class="xblock-header xblock-header-${xblock.category}">
@@ -76,6 +77,19 @@ messages = json.dumps(xblock.validate().to_json())
<span class="sr">${_("Delete")}</span>
</a>
</li>
<!-- NOTE: @andyarmstrong, here's a static version of the new access control we're adding. Remember we wanted to update the tooltip if particular groups were set on a component -->
<li class="action-item action-visibility">
<a href="#" data-tooltip="${_("Visibility Settings")}" class="visibility-button action-button">
<i class="icon-eye-open"></i>
<span class="sr">${_("Visibility")}</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
<i class="icon fa fa-copy"></i>
<span class="sr">${_("Duplicate")}</span>
</a>
</li>
% if is_reorderable:
<li class="action-item action-drag">
<span data-tooltip="${_('Drag to reorder')}" class="drag-handle action"></span>

126
cms/templates/ux/reference/modal_access-component.html Normal file
View File

@@ -0,0 +1,126 @@
<div class="wrapper wrapper-modal-window wrapper-modal-window-edit-xblock" aria-describedby="modal-window-description" aria-labelledby="modal-window-title" aria-hidden="" role="dialog">
<div class="modal-window-overlay"></div>
<div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;">
<div class="edit-xblock-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Editing visibility for: [Component Name]</h2>
</div>
<div class="modal-content">
<div class="xblock-editor" data-locator="i4x://TestU/cohorts001/chapter/748152225449412a846bc24811a5621c" data-course-key="">
<div class="xblock xblock-visibility_view">
<div class="modal-section visibility-summary">
<div class="summary-message summary-message-warning visibility-summary-message">
<i class="icon icon-warning-sign"></i>
<p class="copy">This component is contained in a unit that is hidden from students. Component visibility settings are overridden by the unit visibility settings.</p>
</div>
<!-- NOTE: use when no group configuration has been set -->
<div class="is-not-configured has-actions">
<h4 class="title">You have not set up any groups</h4>
<div class="copy">
<p>Groups are a way for you to organize content in your course with a particular student experience in mind. They are commonly used to facilitate content and pedagogical experiments as well as to provide different tracks of content.</p>
</div>
<div class="actions">
<a href="" class="action action-primary action-settings">Manage groups in this course</a>
</div>
</div>
</div>
<form class="visibility-controls-form" method="post" action="">
<div class="modal-section visibility-controls">
<h3 class="modal-section-title">Set visibility to:</h3>
<div class="modal-section-content">
<section class="visibility-controls-primary">
<ul class="list-fields list-radio">
<li class="field field-radio field-visibility-level">
<input type="radio" id="visibility-level-all" name="visibility-level" value="" class="input input-radio visibility-level-all" />
<label for="visibility-level-all" class="label">All Students and Staff</label>
</li>
<li class="field field-radio field-visibility-level">
<input type="radio" id="visibility-level-specific" name="visibility-level" value="" class="input input-radio visibility-level-specific" checked="checked" />
<label for="visibility-level-specific" class="label">Specific Groups</label>
</li>
</ul>
</section>
<!-- NOTE: @andyarmstrong, if you need this wrapper to show and hide, great. If not, please remove it from the DOM -->
<div class="wrapper-visibility-specific">
<section class="visibility-controls-secondary">
<div class="visibility-controls-group">
<h4 class="visibility-controls-title modal-subsection-title sr">Content Groups</h4>
<ul class="list-fields list-checkbox">
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME1" />
<label for="visibility-content-group-NAME1" class="label">Content Group NAME 1</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME2" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME2" />
<label for="visibility-content-group-NAME2" class="label">Content Group NAME 2</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME3" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME3" />
<label for="visibility-content-group-NAME3" class="label">Content Group NAME 3</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME4" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME4" />
<label for="visibility-content-group-NAME4" class="label">Content Group NAME 4</label>
</li>
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
<li class="field field-checkbox field-visibility-content-group was-removed">
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
<label for="visibility-content-group-deleted1" class="label">
Deleted Content Group
</label>
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
</li>
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
<li class="field field-checkbox field-visibility-content-group was-removed">
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
<label for="visibility-content-group-deleted1" class="label">
Deleted Content Group
</label>
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</form>
</div><!-- .xblock -->
</div><!-- .xblock-editor -->
</div><!-- .modal-content -->
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-save">Save</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div><!-- .xblock-visibility-modal -->
</div><!-- .modal-window -->
</div><!-- .wrapper-modal-window -->