diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 0bb0ae10f1..9af785045f 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -59,7 +59,13 @@ $(document).ready(function () { // alert and notifications - manual & action-based close $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) { (e).preventDefault(); - $(this).closest('.wrapper-notification').removeClass('is-shown'); + $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); + }); + + // prompt close + $('.prompt .action-cancel').click(function(e) { + (e).preventDefault(); + $(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding'); }); // nav - dropdown related diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index a582c5cfcf..fc8b25ea2c 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -1,6 +1,43 @@ // studio alerts and notifications // ==================== +// prompts +.wrapper-prompt { + position: fixed; + top: 0; + background: $black-t1; + width: 100%; + height: 100%; + text-align: center; + z-index: 100; + + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; /* Adjusts for spacing */ + } + + .prompt { + @include border-radius(3px); + @include box-sizing(border-box); + @include box-shadow(0 0 4px $shadow-d1); + display: inline-block; + vertical-align: middle; + width: $baseline*15; + padding: $baseline; + background: $white; + + .nav-actions { + + .nav-item { + + } + } + } +} + // notifications .wrapper-notification { @include clearfix(); @@ -622,6 +659,17 @@ // js enabled .js { + .wrapper-prompt { + @include transition (opacity 0.25s ease-in-out); + display: none; + opacity: 0; + + &.is-shown { + display: block; + opacity: 1.0; + } + } + .wrapper-alert { display: none; @@ -633,12 +681,17 @@ .wrapper-notification { bottom: -($notification-height); + // varying animations &.is-shown { - @include animation(notificationsSlideUp 2s forwards ease-in-out 1); + @include animation(notificationsSlideUp 1s forwards ease-in-out 1); } - &.is-fleeting.is-shown { - @include animation(notificationsSlideUpDown 6s forwards ease-in-out 1); + &.is-hiding { + @include animation(notificationsSlideDown 1s forwards ease-in-out 1); + } + + &.is-fleeting { + @include animation(notificationsSlideUpDown 2s forwards ease-in-out 1); } } } @@ -656,6 +709,29 @@ body.uxdesign.alerts { width: flex-grid(12, 12); margin-right: flex-gutter(); padding: $baseline ($baseline*1.5); + + ul { + + li { + @include clearfix(); + width: flex-grid(12, 12); + margin-bottom: ($baseline/4); + border-bottom: 1px solid $gray-l4; + padding-bottom: ($baseline/4); + + &:last-child { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + + a { + float: left; + width: flex-grid(5, 12); + margin-right: flex-gutter(); + } + } + } } } diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index a13891160a..372fb9e0ca 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -41,7 +41,29 @@ // ==================== -// notifications slide up +// notifications slide down +@mixin notificationsSlideDown { + 0% { + @include transform(translateY(-($notification-height*0.99))); + } + + 10% { + @include transform(translateY(-($notification-height))); + } + + 100% { + @include transform(translateY(0)); + } +} + +@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); } +@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); } +@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } +@keyframes notificationsSlideDown { @include notificationsSlideDown();} + +// ==================== + +// notifications slide up then down @mixin notificationsSlideUpDown { 0%, 100% { @include transform(translateY(0)); diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index b89fa7cc18..35f39fcd3a 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -16,7 +16,13 @@ $error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); +$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-t1: rgba(255,255,255,0.25); +$white-t2: rgba(255,255,255,0.50); +$white-t3: rgba(255,255,255,0.75); $gray: rgb(127,127,127); $gray-l1: tint($gray,20%); diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index 3682cb3200..9b5ba70411 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -7,16 +7,46 @@ // notifications - demo $(document).ready(function() { - $('.test-notification').click(function(e) { + $('.hide-notification').click(function(e) { (e).preventDefault(); - $('.wrapper-notification').removeClass('is-shown'); - $(this.hash).toggleClass('is-shown'); + $('.wrapper-notification').removeClass('is-hiding is-shown'); + $(this.hash).addClass('is-hiding'); }); - $('.test-alert').click(function(e) { + $('.show-notification').click(function(e) { + (e).preventDefault(); + $('.wrapper-notification').removeClass('is-shown is-hiding'); + $(this.hash).addClass('is-shown'); + }); + + $('.show-notification-fleeting').click(function(e) { + (e).preventDefault(); + $('.wrapper-notification').removeClass('is-fleeting'); + $(this.hash).addClass('is-fleeting'); + }); + + $('.hide-alert').click(function(e) { + (e).preventDefault(); + $('.wrapper-alert').removeClass('is-hiding'); + $(this.hash).addClass('is-hiding'); + }); + + $('.show-alert').click(function(e) { (e).preventDefault(); $('.wrapper-alert').removeClass('is-shown'); - $(this.hash).toggleClass('is-shown'); + $(this.hash).addClass('is-shown'); + }); + + $('.hide-prompt').click(function(e) { + (e).preventDefault(); + $('.wrapper-prompt').removeClass('is-hiding is-shown'); + $(this.hash).addClass('is-hiding'); + }); + + $('.show-prompt').click(function(e) { + (e).preventDefault(); + $('.wrapper-prompt').removeClass('is-shown is-hiding'); + $(this.hash).addClass('is-shown'); }); }); @@ -243,16 +273,16 @@

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

@@ -267,12 +297,46 @@

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

+ +
@@ -368,7 +432,7 @@ -
+
✓ @@ -394,4 +458,25 @@
+ + +
+
+
+

Are You Sure You Want to Do That?

+
+ + +
+
\ No newline at end of file