Skip to content

E
edx-platform
Commit 8a23f432 by frances botsford
Options

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

FED Cleanup of Studio Outline page
parents 8554c3f0 1618c916
Showing with 362 additions and 71 deletions
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 0 → 100644
// 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;
}
.public-item:hover,
.private-item:hover,
.draft-item:hover {
color: $blue;
}
}
ol ol {
.section-item {
padding-left: 34px;
.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";
}
.new-unit-item {
margin: 0 0 $baseline 41px;
.private-item:after {
content: "- private";
}
}
.new-unit-item {
@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,24 +181,27 @@ 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>
<ol>
<li>
<a href="${index_url}" class="section-item">${section.display_name_with_default}</a>
<ol>
<li>
<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)}
</li>
</ol>
</li>
</ol>
<div class="unit-tree-location">
<ol>
<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 class="subsection">
<a href="${subsection_url}" class="section-item">
<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)}
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
......
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;
}
}
......
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