From 3174e1bf72a5eb13811385ba6c01df01497f18bb Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 16 Jul 2014 19:49:48 -0400 Subject: [PATCH 1/7] Studio: adding styling support for section/subsection settings modal UI: * revising mark up/semantics for modal form UI * refactoring and revising styling for modal form UI * adding basic modal content support styling * changing section/subsection modal window size to 'large' * converting subsection grading type selection UI to native select element --- .../views/modals/edit_section_in_outline.js | 2 +- cms/static/sass/elements/_modal-window.scss | 35 ++ cms/static/sass/views/_outline.scss | 324 +++--------------- .../js/edit-section-xblock-modal.underscore | 141 +++++--- 4 files changed, 165 insertions(+), 337 deletions(-) diff --git a/cms/static/js/views/modals/edit_section_in_outline.js b/cms/static/js/views/modals/edit_section_in_outline.js index 41bf7dbd8f64..84fbead7e328 100644 --- a/cms/static/js/views/modals/edit_section_in_outline.js +++ b/cms/static/js/views/modals/edit_section_in_outline.js @@ -19,7 +19,7 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", options: $.extend({}, BaseModal.prototype.options, { modalName: 'edit-xblock', addSaveButton: true, - modalSize: 'med' + modalSize: 'large' }), initialize: function() { diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss index 8df685f5f0b7..bba1a90b7628 100644 --- a/cms/static/sass/elements/_modal-window.scss +++ b/cms/static/sass/elements/_modal-window.scss @@ -334,3 +334,38 @@ filter: alpha(opacity=50); } } + +// applications of modal +// ------------------------ +.modal-window { + + .modal-section { + margin-bottom: $baseline; + + &:last-child { + margin-bottom: 0; + } + } + + .modal-section-title { + @extend %t-title6; + margin: 0 0 ($baseline*0.75) 0; + border-bottom: 1px solid $gray-l4; + padding-bottom: ($baseline/2); + color: $gray-d2; + font-weight: 600; + } + + .modal-section-content { + + .list-fields, .list-actions { + display: inline-block; + vertical-align: middle; + } + + .list-actions { + @extend %actions-list; + margin-left: ($baseline/4); + } + } +} diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index 7a6e74a8e97f..f00d133c026b 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -507,314 +507,80 @@ } } + // modal - edit outline item settings + // ------------------------ + .edit-outline-item-modal { + .list-fields { + margin-bottom: $baseline; - // modal to edit section publish settings - // basic non-backbone modal-window set-up - // .wrapper-modal-window { - // @extend %ui-depth4; - // @include transition(all $tmg-f2 ease-in-out); - // visibility: hidden; - // pointer-events: none; - // display: none; - // position: fixed; - // top: 0; - // overflow: scroll; - // background: $black-t2; - // width: 100%; - // height: 100%; - // text-align: center; - - // &:before { - // content: ''; - // display: inline-block; - // height: 100%; - // vertical-align: middle; - // margin-right: -0.25em; /* Adjusts for spacing */ - // } - - // .modal-window { - // -webkit-transform: translate(-50%, -50%); - // transform: translate(-50%, -50%); - // position: absolute; - // top: 50%; - // left: 50%; - // opacity: 0; - // } - // } - - // modal-window showing/hiding - // &.modal-window-is-shown { - // overflow: hidden; - - // .wrapper-modal-window.is-shown { - // visibility: visible; - // pointer-events: auto; - // display: block; - - // .modal-window { - // opacity: 1.0; - // } - // } - // } - - .wrapper-modal-window { - .scheduled-date-input, - .due-date-input { - @include clearfix; - - .date-input, - .time-input { - display: inline-block; - width: 100px; - } - - .inherits-check { - label { - font-size: 13px; - } - } - - .notice { - @extend %t-copy-sub2; - margin-top: 6px; - color: #999; - } - } - - .due-date-input { - label { - display: inline-block !important; - margin-right: 10px; - } - - a { - font-size: 11px; - font-weight: bold; - text-transform: uppercase; - } - - .date-setter { - @include clearfix; - display: block; - } - - .remove-date { - display: block; - margin-top: ($baseline/4); - } + // CASE: last child + &:last-child { + margin-bottom: 0; } - .gradable { - - label { - // @extend %t-title8; + .field { display: inline-block; vertical-align: top; - } + margin-right: ($baseline/2); - .gradable-status { - position: relative; - top: -4px; - display: inline-block; - margin-left: 10px; - width: 65%; - - .status-label { - margin: 0; - padding: 0; - background: transparent; - color: $blue; - border: none; - font-size: 11px; - font-weight: bold; - text-transform: uppercase; - } - .menu-toggle { - z-index: 100; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 20px; - background: transparent; - - &:hover, &.is-active { - color: $blue; - } - } - - .menu { - @include transition(opacity $tmg-f2 linear 0s); - z-index: 1; - position: absolute; - top: -12px; - left: -7px; - display: none; - width: 100%; - margin: 0; - padding: 8px 12px; - opacity: 0.0; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - border-radius: 4px; - box-shadow: 0 1px 2px rgba(0, 0, 0, .2); - - - li { - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; - } + // TODO: refactor the _forms.scss partial to allow for this area to inherit from it + label, input, textarea { + display: block; } - a { + label { + @extend %t-copy-sub1; + @include transition(color $tmg-f3 ease-in-out 0s); + margin: 0 0 ($baseline/4) 0; + font-weight: 600; - &.is-selected { - font-weight: bold; + &.is-focused { + color: $blue; } } - } - // dropdown state - &.is-active { - - .menu { - z-index: 10000; - display: block; - opacity: 1.0; - } - - .menu-toggle { - z-index: 1000; - } - } - // set state - &.is-set { + input, textarea { + @extend %t-copy-base; + @include transition(all $tmg-f2 ease-in-out 0s); + height: 100%; + width: 100%; + padding: ($baseline/2); - .menu-toggle { - color: $blue; - } + // CASE: long length + &.long { + width: 100%; + } - .status-label { - display: block; - color: $blue; + // CASE: long length + &.short { + width: 25%; + } } } - } - } - } - - .edit-section-publish-settings { - - .picker { - @include clearfix(); - - .field { - float: left; - margin: 0 ($baseline/2) ($baseline/2); - - label, - input { - display: block; - text-align: left; - } + // CASE: select input + .field-select { - label { - @extend %t-copy-sub1; - margin-bottom: ($baseline/4); - font-weight: 600; + .label, .input { + display: inline-block; + vertical-align: middle; } - input[type="text"] { - @extend %t-copy-sub1; + .label { + margin-right: ($baseline/2); } } } - } - - - - // UI: DnD - specific elems/cases - section - .courseware-section { - - .draggable-drop-indicator-before { - top: -($baseline/2); - left: 0; - } - .draggable-drop-indicator-after { - bottom: -13px; - left: 0; - } + // UI: grading settings + .edit-settings-grading { - // CASE: DnD - empty subsection with unit dropping - .drop-target-prepend .draggable-drop-indicator-initial { - opacity: 1.0; - } - - // STATE: was dropped - &.was-dropped { - background-color: $ui-update-color; - } - } - - // UI: DnD - specific elems/cases - subsection - .courseware-subsection { - - .draggable-drop-indicator-before { - top: 0; - } - - .draggable-drop-indicator-after { - bottom: 0; - } - - // CASE: DnD - empty subsection with unit dropping - .drop-target-prepend .draggable-drop-indicator-initial { - opacity: 1.0; - } - - // STATE: was dropped - &.was-dropped { - - > .section-item { - background-color: $ui-update-color !important; // nasty, but needed for specificity + .grading-type { + margin-bottom: $baseline; } } } - - // UI: DnD - specific elems/cases - unit - .courseware-unit { - - .draggable-drop-indicator-before { - top: 0; - } - - .draggable-drop-indicator-after { - bottom: 0; - } - - // STATE: was dropped - &.was-dropped { - - > .section-item { - background-color: $ui-update-color !important; // nasty, but needed for specificity - } - } - } - - // UI: DnD - specific elems/cases - empty parents splint - .ui-splint-indicator { - position: relative; - } } diff --git a/cms/templates/js/edit-section-xblock-modal.underscore b/cms/templates/js/edit-section-xblock-modal.underscore index 536592d087f2..5e5059d1bdca 100644 --- a/cms/templates/js/edit-section-xblock-modal.underscore +++ b/cms/templates/js/edit-section-xblock-modal.underscore @@ -1,71 +1,98 @@ -
-
+
+
- <% if (xblockInfo.get('category') === 'chapter') { %> -

Change the settings for this section

- <% } %> - <% if (xblockInfo.get('category') === 'sequential') { %> -

Change the current publishing status for this Subsection

- <% } %> +
+ <% if (xblockInfo.get('category') === 'chapter') { %> +

<%= gettext('Change the settings for this section') %>

+ <% } %> + <% if (xblockInfo.get('category') === 'sequential') { %> +

<%= gettext('Change the settings for this subsection') %>

+ <% } %> +
+
+
-

<%= gettext('Release') %>

-
-
-
- - -
-
- - -
- <% if (xblockInfo.get('category') != 'chapter') { %> - - - <%= gettext('Delete') %> - - <% } %> +

<%= gettext('Release Date and Time') %>

+ +
+
    +
  • + + +
    • + +
  • + + +
    • +
+ + <% if (xblockInfo.get('category') === 'sequential') { %> + + <% } %>
+ <% if (xblockInfo.get('category') === 'sequential') { %> +
+

<%= gettext('Grading') %>

- <% if (xblockInfo.get('category') === 'sequential') { %> -

-
-

<%= gettext('Grading') %>

- <%= gettext('Grade as:') %> -
+
+
    +
  • + + + +
    • +
-
-
-
- - -
-
- - -
- + +
+
    +
  • + + +
    • + +
  • + + +
    • +
+ +
+ +
- <% } %> - - -
+
+ <% } %> +
-
From b42c807de64fc6c4914d63db6d7563df57f58ae1 Mon Sep 17 00:00:00 2001 From: Tim Babych Date: Thu, 17 Jul 2014 14:49:37 +0300 Subject: [PATCH 2/7] Bring back .remove-date for button that removes due date on subsection. --- cms/templates/js/edit-section-xblock-modal.underscore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/templates/js/edit-section-xblock-modal.underscore b/cms/templates/js/edit-section-xblock-modal.underscore index 5e5059d1bdca..21d3e0f29f90 100644 --- a/cms/templates/js/edit-section-xblock-modal.underscore +++ b/cms/templates/js/edit-section-xblock-modal.underscore @@ -84,7 +84,7 @@
  • - + <%= gettext('Clear Grading Due Date') %> From a5cc2181b083dbe4487b773809bd9e8ee0812b2d Mon Sep 17 00:00:00 2001 From: Tim Babych Date: Fri, 18 Jul 2014 00:12:56 +0300 Subject: [PATCH 3/7] make grader type work --- cms/static/js/views/modals/edit_section_in_outline.js | 11 ++++++----- cms/templates/js/edit-section-xblock-modal.underscore | 8 ++++---- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/cms/static/js/views/modals/edit_section_in_outline.js b/cms/static/js/views/modals/edit_section_in_outline.js index 84fbead7e328..06d7f4be05dd 100644 --- a/cms/static/js/views/modals/edit_section_in_outline.js +++ b/cms/static/js/views/modals/edit_section_in_outline.js @@ -76,6 +76,7 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", BaseModal.prototype.render.call(this); this.$el.find('.date').datepicker({'dateFormat': 'm/d/yy'}); this.$el.find('.time').timepicker({'timeFormat' : 'H:i'}); + $('.edit-outline-item-modal #grading_type').val(this.xblockInfo.get('format')) new this.SelectGraderView({ el : this.$el.find('.gradable-status'), graders : this.graderTypes, @@ -104,8 +105,8 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", var releaseDatetime, metadata, dueDatetime, graderType, objectToSave; event.preventDefault(); releaseDatetime = DateUtils( - $('.edit-section-modal #start_date'), - $('.edit-section-modal #start_time') + $('.edit-outline-item-modal #start_date'), + $('.edit-outline-item-modal #start_time') ); // Check releaseDatetime and dueDatetime for sanity? metadata = { @@ -114,11 +115,11 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", objectToSave = {metadata: metadata}; if (this.xblockInfo.get('category') === 'sequential') { var dueDatetime = DateUtils( - $('.edit-section-modal #due_date'), - $('.edit-section-modal #due_time') + $('.edit-outline-item-modal #due_date'), + $('.edit-outline-item-modal #due_time') ); metadata.due_date = dueDatetime; - graderType = $('.edit-section-modal .gradable .gradable-status .status-label')[0].firstChild.textContent; + graderType = $('.edit-outline-item-modal #grading_type').val(); if (graderType === "Not Graded") { graderType = "notgraded"; } diff --git a/cms/templates/js/edit-section-xblock-modal.underscore b/cms/templates/js/edit-section-xblock-modal.underscore index 21d3e0f29f90..f541a11de542 100644 --- a/cms/templates/js/edit-section-xblock-modal.underscore +++ b/cms/templates/js/edit-section-xblock-modal.underscore @@ -54,12 +54,12 @@
    • -
    From 07f910b79507745155f9ff2023e648cbe314e77a Mon Sep 17 00:00:00 2001 From: Tim Babych Date: Fri, 18 Jul 2014 00:15:01 +0300 Subject: [PATCH 4/7] A bit more valid css lookup. --- cms/static/js/views/modals/edit_section_in_outline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/static/js/views/modals/edit_section_in_outline.js b/cms/static/js/views/modals/edit_section_in_outline.js index 06d7f4be05dd..3b408281445d 100644 --- a/cms/static/js/views/modals/edit_section_in_outline.js +++ b/cms/static/js/views/modals/edit_section_in_outline.js @@ -76,7 +76,7 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", BaseModal.prototype.render.call(this); this.$el.find('.date').datepicker({'dateFormat': 'm/d/yy'}); this.$el.find('.time').timepicker({'timeFormat' : 'H:i'}); - $('.edit-outline-item-modal #grading_type').val(this.xblockInfo.get('format')) + this.$el.find('.edit-outline-item-modal #grading_type').val(this.xblockInfo.get('format')) new this.SelectGraderView({ el : this.$el.find('.gradable-status'), graders : this.graderTypes, From 1a22fd2b1521c6ef8a20c2d8df4a463808ba1e63 Mon Sep 17 00:00:00 2001 From: Tim Babych Date: Fri, 18 Jul 2014 15:27:18 +0300 Subject: [PATCH 5/7] Do not hardcode grader types in .underscore template. --- cms/static/js/views/modals/edit_section_in_outline.js | 1 + cms/templates/js/edit-section-xblock-modal.underscore | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/cms/static/js/views/modals/edit_section_in_outline.js b/cms/static/js/views/modals/edit_section_in_outline.js index 3b408281445d..7004563d7ad3 100644 --- a/cms/static/js/views/modals/edit_section_in_outline.js +++ b/cms/static/js/views/modals/edit_section_in_outline.js @@ -57,6 +57,7 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", return this.template({ xblockInfo: this.xblockInfo, getDateTime: this.getDateTime, + graderTypes: this.graderTypes, date: this.date, }); }, diff --git a/cms/templates/js/edit-section-xblock-modal.underscore b/cms/templates/js/edit-section-xblock-modal.underscore index f541a11de542..1186e51ccd37 100644 --- a/cms/templates/js/edit-section-xblock-modal.underscore +++ b/cms/templates/js/edit-section-xblock-modal.underscore @@ -55,11 +55,11 @@
From 12b5305c765a06b459c7b48aabc853303689c2b8 Mon Sep 17 00:00:00 2001 From: Tim Babych Date: Fri, 18 Jul 2014 15:52:38 +0300 Subject: [PATCH 6/7] Remove JS code related to custom CourseGrader element. --- .../views/modals/edit_section_in_outline.js | 22 ++----------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/cms/static/js/views/modals/edit_section_in_outline.js b/cms/static/js/views/modals/edit_section_in_outline.js index 7004563d7ad3..cea7f92177d9 100644 --- a/cms/static/js/views/modals/edit_section_in_outline.js +++ b/cms/static/js/views/modals/edit_section_in_outline.js @@ -5,11 +5,9 @@ */ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", "js/models/xblock_info", "date", "js/views/utils/xblock_utils", - "js/collections/course_grader", "js/views/overview_assignment_grader", - "js/utils/get_date"], + "js/collections/course_grader", "js/utils/get_date"], function($, _, gettext, BaseModal, XBlockInfo, date, XBlockViewUtils, - CourseGraderCollection, OverviewAssignmentGrader, - DateUtils) { + CourseGraderCollection, DateUtils) { var EditSectionXBlockModal = BaseModal.extend({ events : { "click .action-save": "save", @@ -29,14 +27,6 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", this.xblockInfo = this.options.model; this.date = date; this.graderTypes = new CourseGraderCollection(JSON.parse(this.xblockInfo.get('course_graders')), {parse:true}); - this.SelectGraderView = OverviewAssignmentGrader.extend({ - selectGradeType : function(e) { - e.preventDefault(); - this.removeMenu(e); - this.assignmentGrade.set('graderType', ($(e.target).hasClass('gradable-status-notgraded')) ? 'notgraded' : $(e.target).text()); - this.render(); - } - }) }, @@ -78,11 +68,6 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", this.$el.find('.date').datepicker({'dateFormat': 'm/d/yy'}); this.$el.find('.time').timepicker({'timeFormat' : 'H:i'}); this.$el.find('.edit-outline-item-modal #grading_type').val(this.xblockInfo.get('format')) - new this.SelectGraderView({ - el : this.$el.find('.gradable-status'), - graders : this.graderTypes, - hideSymbol : true, - }); function removeDateSetter(e) { e.preventDefault(); @@ -121,9 +106,6 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", ); metadata.due_date = dueDatetime; graderType = $('.edit-outline-item-modal #grading_type').val(); - if (graderType === "Not Graded") { - graderType = "notgraded"; - } objectToSave = {metadata: metadata, graderType: graderType} } XBlockViewUtils.updateXBlockFields(this.xblockInfo, objectToSave, true).done( From ed45ff432bb15d5de7be9a29ca8038eca5385730 Mon Sep 17 00:00:00 2001 From: Tim Babych Date: Fri, 18 Jul 2014 16:32:58 +0300 Subject: [PATCH 7/7] Remove dummy br --- cms/templates/js/edit-section-xblock-modal.underscore | 1 - 1 file changed, 1 deletion(-) diff --git a/cms/templates/js/edit-section-xblock-modal.underscore b/cms/templates/js/edit-section-xblock-modal.underscore index 1186e51ccd37..c2979e0e15cc 100644 --- a/cms/templates/js/edit-section-xblock-modal.underscore +++ b/cms/templates/js/edit-section-xblock-modal.underscore @@ -58,7 +58,6 @@ <% graderTypes.each(function(grader) { %> -
<% }); %>