From ce4994dd94994c75111a2fa73c51be32f4b36893 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 4 Jan 2013 13:27:59 -0500 Subject: [PATCH 1/3] studio - revised course overview section collapse button to toggle collapsing/expanding --- cms/static/js/base.js | 14 ++++++++++++++ cms/static/sass/_courseware.scss | 23 +++++++++++++++++++++++ cms/templates/overview.html | 2 +- 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 9fa4489c36..888fcef5b8 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -42,6 +42,7 @@ $(document).ready(function() { $('.new-unit-item').bind('click', createNewUnit); $('.collapse-all-button').bind('click', collapseAll); + $('.toggle-button-sections').bind('click', toggleSections); // autosave when a field is updated on the subsection page $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue); @@ -130,6 +131,19 @@ function collapseAll(e) { $('.expand-collapse-icon').removeClass('collapse').addClass('expand'); } +function toggleSections(e) { + e.preventDefault(); + + $section = $('.courseware-section'); + $button = $(this); + $labelCollapsed = $('up Collapse All Sections'); + $labelExpanded = $('down Expand All Sections'); + + $section.toggleClass('collapsed'); + var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed; + $button.toggleClass('is-activated').html(buttonLabel); +} + function editSectionPublishDate(e) { e.preventDefault(); $modal = $('.edit-subsection-publish-settings').show(); diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index e2037916cb..6a8be8e5ea 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -512,6 +512,29 @@ input.courseware-unit-search-input { } } +.toggle-button-sections { + position: relative; + float: right; + margin-top: 10px; + + font-size: 13px; + color: $darkGrey; + + .ss-icon { + @include border-radius(20px); + position: relative; + top: -1px; + display: inline-block; + margin-right: 2px; + line-height: 5px; + font-size: 11px; + } + + .label { + display: inline-block; + } +} + .new-section-name, .new-subsection-name-input { width: 515px; diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 2a46908c55..a20531200e 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -122,7 +122,7 @@
New Section - Collapse All + up Collapse All Sections
% for section in sections: From 6b8944ad6be23d1a9e034f0551b04d3cfbae7c06 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 7 Jan 2013 09:07:40 -0500 Subject: [PATCH 2/3] studio - section expanding/collapsing UI - wip --- cms/static/js/base.js | 17 +++++++++++++---- cms/static/sass/_courseware.scss | 24 +++++++++++++----------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 888fcef5b8..086a535994 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -41,7 +41,12 @@ $(document).ready(function() { $('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.new-unit-item').bind('click', createNewUnit); - $('.collapse-all-button').bind('click', collapseAll); + // toggling overview section details + $(function(){ + if($('.courseware-section').length > 0) { + $('.toggle-button-sections').addClass('is-shown'); + } + }); $('.toggle-button-sections').bind('click', toggleSections); // autosave when a field is updated on the subsection page @@ -135,13 +140,17 @@ function toggleSections(e) { e.preventDefault(); $section = $('.courseware-section'); + sectionCount = $section.length; $button = $(this); $labelCollapsed = $('up Collapse All Sections'); $labelExpanded = $('down Expand All Sections'); - $section.toggleClass('collapsed'); - var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed; - $button.toggleClass('is-activated').html(buttonLabel); + if (sectionCount > 0) { + $section.toggleClass('collapsed'); + $section.find('.expand-collapse-icon').toggleClass('collapse expand'); + var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed; + $button.toggleClass('is-activated').html(buttonLabel); + } } function editSectionPublishDate(e) { diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 6a8be8e5ea..2fe4605a33 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -422,6 +422,14 @@ input.courseware-unit-search-input { float: left; margin: 29px 6px 16px 16px; @include transition(none); + + &.expand { + background-position: 0 0; + } + + &.collapsed { + + } } .drag-handle { @@ -501,18 +509,8 @@ input.courseware-unit-search-input { } } -.collapse-all-button { - float: right; - margin-top: 10px; - font-size: 13px; - color: $darkGrey; - - .collapse-all-icon { - margin-right: 6px; - } -} - .toggle-button-sections { + display: none; position: relative; float: right; margin-top: 10px; @@ -520,6 +518,10 @@ input.courseware-unit-search-input { font-size: 13px; color: $darkGrey; + &.is-shown { + display: block; + } + .ss-icon { @include border-radius(20px); position: relative; From 19fa439326cf28c8f8ee5a9f9aee33f93ef9d7b8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 9 Jan 2013 12:31:32 -0500 Subject: [PATCH 3/3] studio - firming up section-wide collapsing/expanding functionality --- cms/static/js/base.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 086a535994..5863cb8ca4 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -131,10 +131,10 @@ $(document).ready(function() { }); }); -function collapseAll(e) { - $('.branch').addClass('collapsed'); - $('.expand-collapse-icon').removeClass('collapse').addClass('expand'); -} +// function collapseAll(e) { +// $('.branch').addClass('collapsed'); +// $('.expand-collapse-icon').removeClass('collapse').addClass('expand'); +// } function toggleSections(e) { e.preventDefault(); @@ -145,11 +145,15 @@ function toggleSections(e) { $labelCollapsed = $('up Collapse All Sections'); $labelExpanded = $('down Expand All Sections'); - if (sectionCount > 0) { - $section.toggleClass('collapsed'); - $section.find('.expand-collapse-icon').toggleClass('collapse expand'); - var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed; - $button.toggleClass('is-activated').html(buttonLabel); + var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded; + $button.toggleClass('is-activated').html(buttonLabel); + + if($button.hasClass('is-activated')) { + $section.addClass('collapsed'); + $section.find('.expand-collapse-icon').removeClass('collapsed').addClass('expand'); + } else { + $section.removeClass('collapsed'); + $section.find('.expand-collapse-icon').removeClass('expand').addClass('collapse'); } }