Merge pull request #1896 from edx/frances/fix/studio-outline-cleanup

FED Cleanup of Studio Outline page

cms/djangoapps/contentstore/features/common.py

@@ -43,9 +43,9 @@ def i_confirm_with_ok(_step):
 @step(u'I press the "([^"]*)" delete icon$')
 def i_press_the_category_delete_icon(_step, category):
     if category == 'section':
-        css = 'a.delete-button.delete-section-button span.delete-icon'
+        css = 'a.action.delete-section-button'
     elif category == 'subsection':
-        css = 'a.delete-button.delete-subsection-button  span.delete-icon'
+        css = 'a.action.delete-subsection-button'
     else:
         assert False, 'Invalid category: %s' % category
     world.css_click(css)
@@ -254,7 +254,7 @@ def create_course_with_unit():
 
     world.wait_for_js_to_load()
     css_selectors = [
-        'div.section-item a.expand-collapse-icon', 'a.new-unit-item'
+        'div.section-item a.expand-collapse', 'a.new-unit-item'
     ]
     for selector in css_selectors:
         world.css_click(selector)

cms/djangoapps/contentstore/features/section.py

@@ -29,7 +29,7 @@ def i_have_added_new_section(_step):
 
 @step('I click the Edit link for the release date$')
 def i_click_the_edit_link_for_the_release_date(_step):
-    button_css = 'div.section-published-date a.edit-button'
+    button_css = 'div.section-published-date a.edit-release-date'
     world.css_click(button_css)
 
 
@@ -88,7 +88,7 @@ def i_see_a_release_date_for_my_section(_step):
     status_text = world.css_text(css)
 
     # e.g. 11/06/2012 at 16:25
-    msg = 'Will Release:'
+    msg = 'Release date:'
     date_regex = r'(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) \d\d?, \d{4}'
     if not re.search(date_regex, status_text):
         print status_text, date_regex
@@ -117,7 +117,7 @@ def the_section_release_date_picker_not_visible(_step):
 def the_section_release_date_is_updated(_step):
     css = 'span.published-status'
     status_text = world.css_text(css)
-    assert_equal(status_text, 'Will Release: 12/25/2013 at 00:00 UTC')
+    assert_equal(status_text, 'Release date: 12/25/2013 at 00:00 UTC')
 
 
 def save_section_name(name):

cms/static/js/base.js

@@ -25,7 +25,7 @@ domReady(function() {
 
     $('body').addClass('js');
 
-    $('.unit .item-actions .delete-button').bind('click', deleteUnit);
+    $('.unit .item-actions .delete-unit-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
     // lean/simple modal
@@ -243,17 +243,17 @@ function createNewUnit(e) {
 
 function deleteUnit(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('li.leaf'), 'Unit');
+    _deleteItem($(this).parents('li.courseware-unit'), 'Unit');
 }
 
 function deleteSubsection(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('li.branch'), 'Subsection');
+    _deleteItem($(this).parents('li.courseware-subsection'), 'Subsection');
 }
 
 function deleteSection(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('section.branch'), 'Section');
+    _deleteItem($(this).parents('section.courseware-section'), 'Section');
 }
 
 function _deleteItem($el, type) {

cms/static/sass/_shame.scss

@@ -46,12 +46,6 @@
 
 // ====================
 
-// needed for poorly scoped margin rules on all content elements
-.branch .sortable-unit-list {
-  margin-bottom: 0;
-}
-
-
 // yes we have no boldness today - need to fix the resets
 body strong,
 body b {

cms/static/sass/elements/_edit_dialog.scss

+// studio - elements - editing dialog
+// ========================
+
+body.course.feature-edit-dialog {
+
+  // dialog
+  .wrapper-dialog {
+    @extend %ui-depth5;
+    @include transition(all $tmg-f2 ease-in-out);
+    position: fixed;
+    top: 0;
+    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 */
+    }
+
+    .dialog  {
+      @include box-sizing(border-box);
+      display: inline-block;
+      vertical-align: middle;
+      width: $baseline*23;
+      box-shadow: 0px 0px 7px $shadow-d1;
+      border-radius: ($baseline/5);
+      background-color: $gray-l4;
+      padding: 7px;
+      text-align: left;
+
+      .title {
+        @extend %t-title5;
+        margin-bottom: ($baseline/2);
+        font-weight: 600;
+        color: $black;
+      }
+
+      .message {
+        @extend %t-copy-sub2;
+        color: $gray;
+      }
+
+      .error {
+        color: $white;
+      }
+
+      form {
+        padding: 0;
+
+        .form-content {
+          box-shadow: 0 0 3px $shadow-d1;
+          padding: ($baseline*1.5);
+          background-color: $white;
+        }
+
+        .field {
+          margin-bottom: ($baseline/2);
+        }
+
+        label {
+          @include font-size(14);
+          display: block;
+          font-weight: bold;
+        }
+
+        input[type="text"] {
+          @extend %t-copy-sub2;
+        }
+
+        .actions {
+          padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
+
+          .action-item {
+            @extend %t-action4;
+            display: inline-block;
+            margin-right: ($baseline*0.75);
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          .action-primary {
+            @include blue-button();
+            @include font-size(12); // needed due to bad button mixins for now
+            border-color: $blue-d1;
+            color: $white;
+          }
+
+          a {
+            color: $blue;
+
+            &:hover {
+              color: $blue-s2;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // dialog set-up
+  .wrapper-dialog {
+    visibility: hidden;
+    pointer-events: none;
+
+    .dialog {
+      opacity: 0;
+    }
+  }
+
+  // dialog showing/hiding
+  &.dialog-is-shown {
+
+    .wrapper-dialog.is-shown {
+      visibility: visible;
+      pointer-events: auto;
+
+      .dialog {
+        opacity: 1.0;
+      }
+    }
+  }
+}

cms/static/sass/style-app.scss

@@ -38,3 +38,4 @@
 @import 'elements/modal'; // interstitial UI, dialogs, modal windows
 @import 'elements/vendor'; // overrides to vendor-provided styling
 @import 'elements/uploads';
+@import 'elements/edit_dialog';

cms/static/sass/views/_subsection.scss

@@ -33,6 +33,7 @@
         }
 
         label {
+          @extend %t-title8;
           margin-bottom: ($baseline/4);
         }
       }
@@ -201,12 +202,6 @@
     input {
       font-size: 14px;
     }
-
-    .sortable-unit-list {
-      ol {
-        @include tree-view;
-      }
-    }
   }
 
   .subsection-name-input {
@@ -237,8 +232,8 @@
     }
 
     .notice {
+      @extend %t-copy-sub2;
       margin-top: 6px;
-      font-size: 11px;
       color: #999;
     }
   }
@@ -295,9 +290,105 @@
     }
   }
 
+  .sortable-unit-list {
+
+    .courseware-unit {
+      @include font-size(13);
+      @include clearfix();
+      margin: -1px 0 0 0;
+
+      .section-item {
+        @include transition(background $tmg-avg ease-in-out 0);
+        @include font-size(13);
+        position: relative;
+        display: block;
+        padding: 6px 8px 8px 16px;
+
+        &:hover {
+          background: $blue-l5;
+        }
+      }
+
+      .public-item {
+        color: $black;
+      }
+
+      .private-item {
+        color: $gray-l1;
+      }
+
+      .draft-item {
+        color: $yellow-d1;
+      }
+
+      .draft-item:after,
+      .public-item:after,
+      .private-item:after {
+        @include font-size(9);
+        margin-left: 3px;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+
+      .draft-item:after {
+        content: "- draft";
+      }
+
+      .private-item:after {
+        content: "- private";
+      }
+    }
+
+    .actions-list {
+      display: inline-block;
+      margin-bottom: 0;
+    }
+
+    .actions-item {
+      @include font-size(13);
+      display: inline-block;
+      padding: 0 4px;
+      vertical-align: middle;
+
+      .action {
+        min-width: ($baseline*.75);
+        color: $gray-l2;
+
+        &:hover,
+        &.is-set {
+          color: $blue;
+          visibility: visible;
+        }
+
+        //reset old drag handle style
+        &.drag-handle {
+          float: none;
+          margin: 0;
+          background: transparent url(../img/drag-handles.png) right 5px no-repeat;
+          text-align: center;
+        }
+      }
+    }
+
+    .new-unit-item {
+      @extend %ui-btn-flat-outline;
+      width: 100%;
+      margin: 0 0 ($baseline/2) 0;
+      border: 1px solid $gray-l3;
+      padding: ($baseline/2) 0;
+      color: $gray-l2;
+
+      &:hover {
+        box-shadow: none;
+        background-image: none;
+      }
+    }
+  }
+
   .gradable {
 
     label {
+      @extend %t-title8;
       display: inline-block;
       vertical-align: top;
     }

cms/static/sass/views/_unit.scss

@@ -885,6 +885,14 @@ body.unit {
 // ====================
 
 // Unit Page Sidebar
+
+.sidebar {
+
+  label {
+    @extend %t-title8;
+  }
+}
+
 .unit-settings {
 
   .window-contents {
@@ -910,12 +918,14 @@ body.unit {
     }
   }
 
+
+
   input[type="radio"] {
       margin-right: 7px;
   }
 
   .status {
-    font-size: 12px;
+    @extend %t-copy-sub2;
 
     strong {
       font-weight: 700;
@@ -1025,37 +1035,95 @@ body.unit {
     font-size: 8px;
   }
 
-  .window-contents > ol {
-    @include tree-view;
+  .unit-tree-location {
+
+    .section-name {
+      @extend %t-title8;
+    }
+
+
+    .subsection,
+    .courseware-unit {
+      margin: ($baseline/4) 0 0 ($baseline);
+    }
+
+    .courseware-unit .section-item {
+      background-color: transparent;
+    }
 
     .section-item {
+      @include transition(background $tmg-avg ease-in-out 0);
       @include box-sizing(border-box);
+      @extend %t-copy-sub2;
       display: inline-block;
       width: 100%;
-      font-size: 11px;
-      padding: 2px 8px 4px;
+      background: $gray-l5;
+      padding: 6px 8px 8px 16px;
+      vertical-align: top;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      color: $gray;
+
+      &:hover {
+        background: $blue-l5;
+        color: $blue;
       }
 
-    ol {
-      .section-item {
-        padding-left: $baseline;
+      &.editing {
+        background-color: $orange-l3;
       }
 
-      .new-unit-item {
-        margin-left: $baseline;
+      .public-item {
+        color: $black;
+      }
+
+      .private-item {
+        color: $gray-l1;
       }
+
+      .draft-item {
+        color: $yellow-d1;
       }
 
-    ol ol {
-      .section-item {
-        padding-left: 34px;
+      .public-item:hover,
+      .private-item:hover,
+      .draft-item:hover {
+        color: $blue;
+      }
+
+      .draft-item:after,
+      .public-item:after,
+      .private-item:after {
+        @include font-size(9);
+        margin-left: 3px;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+
+      .draft-item:after {
+        content: "- draft";
+      }
+
+      .private-item:after {
+        content: "- private";
+      }
     }
 
     .new-unit-item {
-        margin: 0 0 $baseline 41px;
+      @extend %ui-btn-flat-outline;
+      @extend %t-action4;
+      width: 90%;
+      margin: 0 0 ($baseline/2) ($baseline/4);
+      border: 1px solid transparent;
+      padding: ($baseline/4) ($baseline/2);
+      font-weight: normal;
+      color: $gray-l2;
+      text-align: left;
+
+      &:hover {
+        box-shadow: none;
+        background-image: none;
       }
     }
   }

cms/templates/unit.html

@@ -46,7 +46,7 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
       </div>
       <div class="main-column">
         <article class="unit-body window">
-        <p class="unit-name-input"><label>${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" class="unit-display-name-input" /></p>
+        <p class="unit-name-input"><label for="unit-display-name-input">${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" id="unit-display-name-input" class="unit-display-name-input" /></p>
           <ol class="components">
             % for locator in components:
             <li class="component" data-locator="${locator}"/>
@@ -147,8 +147,8 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
           <h4 class="header">${_("Unit Settings")}</h4>
           <div class="window-contents">
             <div class="row visibility">
-              <label class="inline-label">${_("Visibility:")}</label>
-              <select name="visibility-select" class='visibility-select'>
+              <label for="visibility-select" class="inline-label">${_("Visibility:")}</label>
+              <select name="visibility-select" id="visibility-select" class='visibility-select'>
                 <option value="public">${_("Public")}</option>
                 <option value="private">${_("Private")}</option>
               </select>
@@ -181,17 +181,19 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
           <div class="window-contents">
             <div class="row wrapper-unit-id">
               <p class="unit-id">
-                <span class="label">${_("Unit Identifier:")}</span>
-                <input type="text" class="url value" value="${unit.location.name}" readonly />
+                <label for="unit-location-id-input">${_("Unit Identifier:")}</label>
+                <input type="text" class="url value" id="unit-location-id-input" value="${unit.location.name}" readonly />
               </p>
             </div>
+            <div class="unit-tree-location">
               <ol>
-              <li>
-                <a href="${index_url}" class="section-item">${section.display_name_with_default}</a>
+                <li class="section">
+                  <a href="${index_url}" class="section-item section-name">
+                    <span class="section-name">${section.display_name_with_default}</span>
+                  </a>
                   <ol>
-                  <li>
+                    <li class="subsection">
                       <a href="${subsection_url}" class="section-item">
-                      <span class="folder-icon"></span>
                         <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
                       </a>
                       ${units.enum_units(subsection, actions=False, selected=unit.location)}
@@ -204,5 +206,6 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
         </div>
       </div>
     </div>
+  </div>
 
 </%block>

cms/templates/widgets/units.html

+<%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%! from contentstore.utils import compute_unit_state %>
 <%! from xmodule.modulestore.django import loc_mapper %>
@@ -18,7 +19,7 @@ This def will enumerate through a passed in subsection and list all of the units
   <%
     unit_locator = loc_mapper().translate_location(context_course.location.course_id, unit.location, False, True)
   %>
-  <li class="courseware-unit leaf unit is-draggable" data-locator="${unit_locator}"
+  <li class="courseware-unit unit is-draggable" data-locator="${unit_locator}"
       data-parent="${subsection_locator}">
 
     <%include file="_ui-dnd-indicator-before.html" />
@@ -32,14 +33,18 @@ This def will enumerate through a passed in subsection and list all of the units
     %>
     <div class="section-item ${selected_class}">
       <a href="${unit_locator.url_reverse('unit')}" class="${unit_state}-item">
-        <span class="${unit.scope_ids.block_type}-icon"></span>
         <span class="unit-name">${unit.display_name_with_default}</span>
       </a>
       % if actions:
       <div class="item-actions">
-	<a href="#" data-tooltip="Delete this unit" class="delete-button" data-locator="${unit_locator}">
-        <span class="delete-icon"></span></a>
-	<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle"></span>
+        <ul class="actions-list">
+          <li class="actions-item delete">
+            <a href="#" data-tooltip="${_("Delete this unit")}" class="delete-unit-button action" data-locator="${unit_locator}"><i class="icon-trash"></i><span class="sr">${_("Delete unit")}</span></a>
+          </li>
+          <li class="actions-item drag">
+            <span data-tooltip="${_("Drag to sort")}" class="drag-handle unit-drag-handle action"><span class="sr"> ${_("Drag to reorder unit")}</span></span>
+          </li>
+        </ul>
       </div>
       % endif
     </div>
@@ -47,11 +52,11 @@ This def will enumerate through a passed in subsection and list all of the units
     <%include file="_ui-dnd-indicator-after.html" />
   </li>
   % endfor
-  <li>
+  <li class="courseware-unit add-new-unit">
     <%include file="_ui-dnd-indicator-initial.html" />
 
     <a href="#" class="new-unit-item" data-category="${new_unit_category}" data-parent="${subsection_locator}">
-      <span class="new-unit-icon"></span>New Unit
+      <i class="icon-plus"></i> ${_("New Unit")}
     </a>
   </li>
 </ol>

common/static/sass/_mixins-inherited.scss

@@ -354,8 +354,8 @@
 }
 
 @mixin tree-view {
-  border: 1px solid $mediumGrey;
-  background: $lightGrey;
+  border: 0;
+  background: $white;
 
   .branch {
     margin-bottom: 0;
@@ -374,7 +374,7 @@
     font-size: 13px;
 
     &:hover {
-      background: $orange-l4;
+      background: $blue-l5;
 
       .item-actions {
         display: block;
@@ -403,11 +403,11 @@
     }
 
     .private-item {
-      color: #a4aab7;
+      color: $gray-l1;
     }
 
     .draft-item {
-      color: #9f7d10;
+      color: $yellow-d1;
     }
   }