From 72c58cd454e65f282d0b7d93f0b454f73fdafdc8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Sun, 3 Mar 2013 20:44:48 -0500 Subject: [PATCH] studio - alerts: refactored styles for common content types across UI, got prompts set up and styled, and refactored base template for future prompt/notification/alert use --- cms/static/js/base.js | 12 +- cms/static/sass/_alerts.scss | 296 +++++++++++++++----------------- cms/static/sass/_base.scss | 7 + cms/static/sass/_keyframes.scss | 32 ++-- cms/static/sass/_variables.scss | 2 + cms/templates/alerts.html | 295 ++++++++++++++++++------------- cms/templates/base.html | 39 +++-- 7 files changed, 375 insertions(+), 308 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 9af785045f..a6e8190e17 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -62,10 +62,16 @@ $(document).ready(function () { $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); }); - // prompt close - $('.prompt .action-cancel').click(function(e) { + // prompt pop + $('.action-prompt').click(function(e){ (e).preventDefault(); - $(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding'); + $body.toggleClass('prompt-is-shown'); + }); + + // prompt close + $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) { + (e).preventDefault(); + $body.removeClass('prompt-is-shown'); }); // nav - dropdown related diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index a152db636a..c507034284 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -1,11 +1,35 @@ // studio alerts and notifications // ==================== +// shared +.wrapper-notification, .wrapper-alert, .prompt { + @include box-sizing(border-box); + background: $gray-d3; + border-top: 4px solid $gray-d4; + + .copy { + @include font-size(13); + color: $gray-l2; + + .title { + color: $white; + } + + .nav-actions { + + .action-primary { + color: $gray-d4; + } + } + } +} + // prompts .wrapper-prompt { + @include transition(all 0.05s ease-in-out); position: fixed; top: 0; - background: $black-t1; + background: $black-t0; width: 100%; height: 100%; text-align: center; @@ -20,20 +44,80 @@ } .prompt { - @include border-radius(3px); - @include box-sizing(border-box); - @include box-shadow(0 0 4px $shadow-d1); + @include border-radius(($baseline/5)); + @include box-shadow(0 0 3px $shadow-d1); display: inline-block; vertical-align: middle; - width: $baseline*15; - padding: $baseline; - background: $white; + width: $baseline*17.5; + border: 4px solid $black; + text-align: left; + + .copy { + border-top: 4px solid $blue; + padding: $baseline; + } .nav-actions { + @include box-shadow(inset 0 1px 2px $shadow-d1); + border-top: 1px solid $black-t1; + padding: ($baseline*0.75) $baseline; + background: $gray-d4; .nav-item { + display: inline-block; + margin-right: ($baseline*0.75); + &:last-child { + margin-right: 0; + } } + + .action-primary { + @include blue-button(); + @include font-size(13); + border-color: $blue-d2; + font-weight: 600; + } + + .action-secondary { + @include font-size(13); + } + } + } + + // types of prompts - error + .prompt.error { + + .icon-error { + color: $red-l1; + } + + .copy { + border-top-color: $red-l1; + } + } + + // types of prompts - confirmation + .prompt.confirmation { + + .icon-error { + color: $green; + } + + .copy { + border-top-color: $green; + } + } + + // types of prompts - error + .prompt.warning { + + .icon-warning { + color: $orange; + } + + .copy { + border-top-color: $orange; } } } @@ -41,15 +125,12 @@ // notifications .wrapper-notification { @include clearfix(); - @include box-sizing(border-box); @include box-shadow(0 -1px 3px $shadow); position: fixed; bottom: 0; z-index: 1000; width: 100%; - border-top: 4px solid $gray-l1; padding: ($baseline*0.75) ($baseline*2); - background: $gray-d3; &.wrapper-notification-warning { border-top-color: $orange; @@ -67,7 +148,7 @@ } } - &.wrapper-cation-error { + &.wrapper-notification-error { border-top-color: $red-l1; .icon-error { @@ -208,29 +289,6 @@ } } - // with cancel - .action-notification-close { - @include border-top-radius(3px); - position: absolute; - top: -34px; - right: $baseline; - padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5); - background: $gray-l1; - text-align: center; - - .label { - @include text-sr(); - } - - .icon { - @include font-size(14); - color: $white; - width: auto; - margin: 0; - padding: 2px; - } - } - // with actions &.has-actions { @@ -272,108 +330,17 @@ } } - // notification types - &.warning { - - .action-notification-close { - background: $orange; - - &:hover { - background: $orange-s2; - } - } - - .action-primary { - @include orange-button(); - @include font-size(13); - border-color: $orange-d2; - } - - a { - color: $orange; - - &:hover { - color: $orange-s2; - } - } - } - - &.error { - - .action-notification-close { - background: $red-l1; - - &:hover { - background: $red; - } - } - - .action-primary { - @include red-button(); - @include font-size(13); - border-color: $red-d2; - } - - a { - color: $red-l1; - - &:hover { - color: $red; - } - } - } - &.confirmation { .copy { margin-top: ($baseline/5); } - - .action-notification-close { - background: $green; - - &:hover { - background: $green-s2; - } - } - - .action-primary { - @include green-button(); - @include font-size(13); - border-color: $green-d2; - } - - a { - color: $green; - - &:hover { - color: $green-s2; - } - } - } - - &.announcement { - - .action-notification-close { - background: $blue; - - &:hover { - background: $blue-s1; - } - } - - .action-primary { - @include blue-button(); - @include font-size(13); - border-color: $blue-d2; - } } &.saving { .icon-saving { @include anim-rotateClockwise(3s, linear, infinite); - width: 22px; } @@ -559,12 +526,12 @@ // with cancel .action-alert-close { - @include border-bottom-radius(3px); + @include border-bottom-radius(($baseline/5)); position: absolute; top: -($baseline/10); right: $baseline; padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); - background: $gray-d1; + background: $gray-d4; text-align: center; .label { @@ -580,16 +547,20 @@ } &:hover { - background: $gray-l1; + background: $gray-d1; } } +} - // alert types +.alert, .notification, .prompt { + + // types - warning &.warning { - - .action-primary { + + .nav-actions .action-primary { @include orange-button(); border-color: $orange-d2; + color: $gray-d4; } a { @@ -601,9 +572,10 @@ } } + // types - error &.error { - .action-primary { + .nav-actions .action-primary { @include red-button(); border-color: $red-d2; } @@ -617,9 +589,27 @@ } } + // types - announcement + &.announcement { + + .nav-actions .action-primary { + @include blue-button(); + border-color: $blue-d2; + } + + a { + color: $blue; + + &:hover { + color: $blue-s2; + } + } + } + + // types - confirmation &.confirmation { - .action-primary { + .nav-actions .action-primary { @include green-button(); border-color: $green-d2; } @@ -633,17 +623,10 @@ } } - &.announcement { - - .action-primary { - @include blue-button(); - border-color: $blue-d2; - } - } - + // types - step required &.step-required { - .action-primary { + .nav-actions .action-primary { border-color: $pink-d2; @include pink-button(); } @@ -661,28 +644,33 @@ // js enabled .js { + // prompt set-up .wrapper-prompt { - display: none; + visibility: hidden; + pointer-events: none; .prompt { - @include anim-bounceIn(0.5s); - opacity: 0.1; + opacity: 0; + } + } + + // prompt showing + &.prompt-is-shown { + + .wrapper-view { + -webkit-filter: blur(2px) grayscale(25%); + filter: blur(2px) grayscale(25%); } - &.is-shown { - display: block; + .wrapper-prompt.is-shown { + visibility: visible; + pointer-events: auto; .prompt { + @include anim-bounceIn(0.5s); opacity: 1.0; } } - - &.is-hiding { - - .prompt { - @include anim-bounceOut(0.5s); - } - } } .wrapper-alert { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index d5a8adc6cb..5fd05d27a6 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -103,6 +103,13 @@ p, ul, ol, dl { // ==================== +// layout - basic +.wrapper-view { + +} + +// ==================== + // layout - basic page header .wrapper-mast { margin: 0; diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index 817dc27132..a756f66b2e 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -17,12 +17,14 @@ @-o-keyframes rotateClockwise { @include rotateClockwise(); } @keyframes rotateClockwise { @include rotateClockwise();} -@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(rotateClockwise); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); + } // ==================== @@ -47,12 +49,14 @@ @-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); } @keyframes notificationsSlideUp { @include notificationsSlideUp();} -@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(notificationsSlideUp); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); + } // ==================== @@ -77,12 +81,13 @@ @-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } @keyframes notificationsSlideDown { @include notificationsSlideDown();} -@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(notificationsSlideDown); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } // ==================== @@ -107,12 +112,13 @@ @-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } @keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();} -@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(notificationsSlideUpDown); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } // ==================== @@ -139,12 +145,13 @@ @-o-keyframes bounceIn { @include bounceIn(); } @keyframes bounceIn { @include bounceIn();} -@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(bounceIn); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } // ==================== @@ -185,10 +192,11 @@ @-o-keyframes bounceOut { @include bounceOut(); } @keyframes bounceOut { @include bounceOut();} -@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(bounceOut); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 35f39fcd3a..7998d0b199 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); +$black-t0: rgba(0,0,0,0.125); $black-t1: rgba(0,0,0,0.25); $black-t2: rgba(0,0,0,0.50); $black-t3: rgba(0,0,0,0.75); $white: rgb(255,255,255); +$white-t0: rgba(255,255,255,0.125); $white-t1: rgba(255,255,255,0.25); $white-t2: rgba(255,255,255,0.50); $white-t3: rgba(255,255,255,0.75); diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index 9b5ba70411..12c605d863 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -37,15 +37,15 @@ $(this.hash).addClass('is-shown'); }); - $('.hide-prompt').click(function(e) { - (e).preventDefault(); - $('.wrapper-prompt').removeClass('is-hiding is-shown'); - $(this.hash).addClass('is-hiding'); + $('.hide-prompt').click(function(e){ + (e).preventDefault(); + $body.removeClass('prompt-is-shown'); }); $('.show-prompt').click(function(e) { - (e).preventDefault(); - $('.wrapper-prompt').removeClass('is-shown is-hiding'); + (e).preventDefault(); + $body.toggleClass('prompt-is-shown'); + $('.wrapper-prompt').removeClass('is-shown'); $(this.hash).addClass('is-shown'); }); }); @@ -53,6 +53,122 @@ <%block name="content"> +
+
+

Section Release Date

+
+ + +
+

On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

+
+
+ SaveCancel +
+
+ +
+
+
+ UX Design +

Alerts & Notifications

+
+
+
+ +
+
+
+
+
+

Alerts

+ persistant, static messages to the user +
+ +

In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

+ +

Different Static Examples of Alerts

+

Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

+ + +
+ +
+
+

Notifications

+ contextual, feedback-based, and temporal messages to the user +
+ +

In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.

+ +

Different Static Examples of Notifications

+ + +
+ +
+
+

Prompts

+ presents a user with a choice, based on their previous interaction, that must be decided before they can proceed +
+ +

In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).

+ +

Different Static Examples of Prompts

+ + +
+
+
+
+ + +<%block name="view_alerts">
@@ -234,115 +350,9 @@
+ -
-
-

Section Release Date

-
- - -
-

On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

-
-
- SaveCancel -
-
- -
-
-
- UX Design -

Alerts & Notifications

-
-
-
- -
-
-
-
-
-

Alerts

- persistant, static messages to the user -
- -

In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

- -

Different Static Examples of Alerts

-

Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

- - -
- -
-
-

Notifications

- contextual, feedback-based, and temporal messages to the user -
- -

In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.

- -

Different Static Examples of Notifications

- - -
- -
-
-

Prompts

- presents a user with a choice, based on their previous interaction, that must be decided before they can proceed -
- -

In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).

- -

Different Static Examples of Notifications

- - -
-
-
-
- +<%block name="view_notifications">
@@ -388,11 +398,6 @@ - - - ␡ - close notification -
@@ -458,22 +463,66 @@ + - +<%block name="view_prompts"> +
-

Are You Sure You Want to Do That?

+

Delete "Introduction & Overview"?

+

Deleting a section cannot be undone and its contents cannot be recovered.

+
+
+ + +
+
+
+

Use Advanced Problem Editor?

+

If you proceed, you cannot edit this problem using the simple problem editor.

+
+ + +
+
+ + +
+
+
+

There Were Errors in Your Submission

+

Please correct the errors noted on the page and try again.

+
+ + diff --git a/cms/templates/base.html b/cms/templates/base.html index 498897bd11..387b45a0d1 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -6,12 +6,12 @@ - <%block name="title"></%block> | - % if context_course: - <% ctx_loc = context_course.location %> - ${context_course.display_name} | - % endif - edX Studio + <%block name="title"></%block> | + % if context_course: + <% ctx_loc = context_course.location %> + ${context_course.display_name} | + % endif + edX Studio @@ -22,14 +22,13 @@ - + <%block name="header_extras"> - <%include file="widgets/header.html" /> - <%include file="courseware_vendor_js.html"/> + <%include file="courseware_vendor_js.html"/> @@ -48,15 +47,23 @@ - <%block name="content"> - <%include file="widgets/footer.html" /> + +
+ <%include file="widgets/header.html" /> + + <%block name="view_alerts"> + + <%block name="content"> + <%include file="widgets/footer.html" /> + <%block name="view_notifications"> +
+ + <%block name="view_prompts"> <%block name="jsextra"> - - - + \ No newline at end of file