Skip to content

E
edx-platform
Commit 09263954 by Brian Talbot
Options

studio - alerts: added in close buttons and basic JS to control them/moved demo… 

studio - alerts: added in close buttons and basic JS to control them/moved demo JS to alerts.html page
parent 95ea0168
Showing with 178 additions and 70 deletions
cms/static/js/base.js
...@@ -43,31 +43,28 @@ $(document).ready(function () { ...@@ -43,31 +43,28 @@ $(document).ready(function () {
$('body').addClass('js'); $('body').addClass('js');
// notifications // lean/simple modal
$('.testing .test-notification').click(function(e) { $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){
(e).preventDefault(); (e).preventDefault();
manageNotification(e);
}); });
function manageNotification(e) { // alert and notifications - manual close
var $notificationRibbon = $('.wrapper-notification'); $('.action-alert-close').click(function(e) {
(e).preventDefault();
// showing console.log('closing alert');
$notificationRibbon.toggleClass('is-shown'); $(this).closest('.wrapper-alert').removeClass('is-shown');
});
// controls for closing notification
$notificationRibbon.find('.action-notification-close').click(function(e) {
(e).preventDefault();
$notificationRibbon.toggleClass('is-shown');
});
}
// lean/simple modal // alert and notifications - manual close
$('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('.action-notification-close').click(function(e) {
$('a.action-modal-close').click(function(e){
(e).preventDefault(); (e).preventDefault();
$(this).closest('.wrapper-notification').removeClass('is-shown');
}); });
// nav - dropdown related // nav - dropdown related
$body.click(function (e) { $body.click(function (e) {
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
......
cms/static/sass/_alerts.scss
...@@ -5,9 +5,8 @@ ...@@ -5,9 +5,8 @@
.wrapper-notification { .wrapper-notification {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
// @include transition (bottom 1.5s ease-in-out 0.25s); transition: bottom 1.0s ease-in-out 0.125s;
transition: bottom 1.5s ease-in-out 0.25s; -webkit-transition: bottom 1.0s ease-in-out 0.125s;
-webkit-transition: bottom 1.5s ease-in-out 0.25s;
@include box-shadow(0 -1px 3px $shadow); @include box-shadow(0 -1px 3px $shadow);
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
...@@ -66,8 +65,9 @@ ...@@ -66,8 +65,9 @@
// shorter/status notifications // shorter/status notifications
&.wrapper-notification-status { &.wrapper-notification-status {
width: ($baseline*12.5); width: ($baseline*6);
right: ($baseline); right: ($baseline);
border-top-color: $pink;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
.notification { .notification {
...@@ -94,6 +94,30 @@ ...@@ -94,6 +94,30 @@
} }
} }
} }
// shorter/status notifications
&.wrapper-notification-help {
width: ($baseline*14);
right: ($baseline);
padding: ($baseline/2) $baseline;
.notification {
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
.icon-help {
width: $baseline;
margin-right: ($baseline*0.75);
}
.copy {
width: ($baseline*11);
}
}
}
} }
.notification { .notification {
...@@ -135,27 +159,24 @@ ...@@ -135,27 +159,24 @@
// with cancel // with cancel
.action-notification-close { .action-notification-close {
@include transition(top .25s ease-in-out); @include border-top-radius(3px);
@include border-bottom-radius(3px);
position: absolute; position: absolute;
top: -($baseline/4); top: -31px;
left: ($baseline/2); right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d2; background: $gray-l1;
text-align: center; text-align: center;
.label { .label {
@include text-sr(); @include text-sr();
} }
.ss-icon { .icon {
@include font-size(14); @include font-size(14);
color: $white; color: $white;
} width: auto;
margin: 0;
&:hover { padding: 2px;
background: $blue;
top: 0;
} }
} }
...@@ -185,16 +206,18 @@ ...@@ -185,16 +206,18 @@
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
}
}
.action-primary { .action-primary {
@include font-size(13); @include blue-button();
font-weight: 600; @include font-size(13);
} border-color: $blue-d2;
font-weight: 600;
}
.action-secondary { .action-secondary {
@include font-size(13); @include font-size(13);
}
}
} }
} }
...@@ -202,14 +225,16 @@ ...@@ -202,14 +225,16 @@
&.warning { &.warning {
.action-notification-close { .action-notification-close {
background: $orange;
&:hover { &:hover {
background: $orange; background: $orange-s2;
} }
} }
.action-primary { .action-primary {
@include orange-button; @include orange-button();
@include font-size(13);
border-color: $orange-d2; border-color: $orange-d2;
} }
...@@ -225,14 +250,16 @@ ...@@ -225,14 +250,16 @@
&.error { &.error {
.action-notification-close { .action-notification-close {
background: $red-l1;
&:hover { &:hover {
background: $red-l1; background: $red;
} }
} }
.action-primary { .action-primary {
@include red-button; @include red-button();
@include font-size(13);
border-color: $red-d2; border-color: $red-d2;
} }
...@@ -248,14 +275,16 @@ ...@@ -248,14 +275,16 @@
&.confirmation { &.confirmation {
.action-notification-close { .action-notification-close {
background: $green;
&:hover { &:hover {
background: $green; background: $green-s2;
} }
} }
.action-primary { .action-primary {
@include green-button; @include green-button();
@include font-size(13);
border-color: $green-d2; border-color: $green-d2;
} }
...@@ -271,14 +300,16 @@ ...@@ -271,14 +300,16 @@
&.announcement { &.announcement {
.action-notification-close { .action-notification-close {
background: $blue;
&:hover { &:hover {
background: $blue; background: $blue-s1;
} }
} }
.action-primary { .action-primary {
@include blue-button; @include blue-button();
@include font-size(13);
border-color: $blue-d2; border-color: $blue-d2;
} }
} }
...@@ -291,6 +322,10 @@ ...@@ -291,6 +322,10 @@
height: 25px; height: 25px;
line-height: 3rem !important; line-height: 3rem !important;
} }
.copy p {
@include text-sr();
}
} }
} }
...@@ -428,6 +463,7 @@ ...@@ -428,6 +463,7 @@
} }
} }
// with actions
&.has-actions { &.has-actions {
.icon { .icon {
...@@ -466,11 +502,38 @@ ...@@ -466,11 +502,38 @@
} }
} }
// with cancel
.action-alert-close {
@include border-bottom-radius(3px);
position: absolute;
top: -($baseline/10);
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d1;
text-align: center;
.label {
@include text-sr();
}
.icon {
@include font-size(14);
color: $white;
width: auto;
margin: 0;
padding: 2px;
}
&:hover {
background: $gray-l1;
}
}
// alert types // alert types
&.warning { &.warning {
.action-primary { .action-primary {
@include orange-button; @include orange-button();
border-color: $orange-d2; border-color: $orange-d2;
} }
...@@ -486,7 +549,7 @@ ...@@ -486,7 +549,7 @@
&.error { &.error {
.action-primary { .action-primary {
@include red-button; @include red-button();
border-color: $red-d2; border-color: $red-d2;
} }
...@@ -502,7 +565,7 @@ ...@@ -502,7 +565,7 @@
&.confirmation { &.confirmation {
.action-primary { .action-primary {
@include green-button; @include green-button();
border-color: $green-d2; border-color: $green-d2;
} }
...@@ -518,7 +581,7 @@ ...@@ -518,7 +581,7 @@
&.announcement { &.announcement {
.action-primary { .action-primary {
@include blue-button; @include blue-button();
border-color: $blue-d2; border-color: $blue-d2;
} }
} }
...@@ -527,7 +590,7 @@ ...@@ -527,7 +590,7 @@
.action-primary { .action-primary {
border-color: $pink-d2; border-color: $pink-d2;
@include pink-button; @include pink-button();
} }
a { a {
......
cms/templates/alerts.html
...@@ -2,6 +2,26 @@ ...@@ -2,6 +2,26 @@
<%block name="title">Studio Alerts</%block> <%block name="title">Studio Alerts</%block>
<%block name="bodyclass">is-signedin course uxdesign alerts</%block> <%block name="bodyclass">is-signedin course uxdesign alerts</%block>
<%block name="jsextra">
<script type="text/javascript">
// notifications - demo
$(document).ready(function() {
$('.test-notification').click(function(e) {
(e).preventDefault();
$('.wrapper-notification').removeClass('is-shown');
$(this.hash).toggleClass('is-shown');
});
$('.test-alert').click(function(e) {
(e).preventDefault();
$('.wrapper-alert').removeClass('is-shown');
$(this.hash).toggleClass('is-shown');
});
});
</script>
</%block>
<%block name="content"> <%block name="content">
<!-- alert: you're editing a draft --> <!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft"> <div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
...@@ -63,6 +83,23 @@ ...@@ -63,6 +83,23 @@
</div> </div>
</div> </div>
<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-close">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">Your changes have been saved</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div>
<a href="#" rel="view" class="action action-alert-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close alert</span>
</a>
</div>
</div>
<!-- alert: delete confirmed --> <!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed"> <div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
<div class="alert confirmation"> <div class="alert confirmation">
...@@ -206,11 +243,16 @@ ...@@ -206,11 +243,16 @@
<p>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</p> <p>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</p>
<ul> <ul>
<li><a href="#" class="test-notification">Toggle Change Warning Notification</a></li> <li><a href="#alert-draft" class="test-alert">Toggle Draft Alert</a></li>
<li><a href="#" class="test-notification">Toggle New Version Warning Notification</a></li> <li><a href="#alert-version" class="test-alert">Toggle Version Alert</a></li>
<li><a href="#" class="test-notification">Toggle Editing Warning Notification</a></li> <li><a href="#alert-saved" class="test-alert">Toggle Previous View/Action Alert</a></li>
<li><a href="#" class="test-notification">Toggle Saving Notification</a></li> <li><a href="#alert-close" class="test-alert">Toggle Alert with Close Option</a></li>
<li><a href="#" class="test-notification">Toggle Help Notification</a></li> <li><a href="#alert-removed" class="test-alert">Toggle Previous View/Action Removed Alert</a></li>
<li><a href="#alert-system-error" class="test-alert">Toggle System Error Alert</a></li>
<li><a href="#alert-user-error" class="test-alert">Toggle User Error Alert</a></li>
<li><a href="#alert-announcement1" class="test-alert">Toggle Announcement Alert</a></li>
<li><a href="#alert-announcement2" class="test-alert">Toggle Announcement with Actions Alert</a></li>
<li><a href="#alert-activation" class="test-alert">Toggle Activiation Alert</a></li>
</ul> </ul>
</section> </section>
...@@ -225,11 +267,11 @@ ...@@ -225,11 +267,11 @@
<h3 class="title-3">Different Static Examples of Notifications</h3> <h3 class="title-3">Different Static Examples of Notifications</h3>
<ul> <ul>
<li><a href="#" class="test-notification">Toggle Change Warning Notification</a></li> <li><a href="#notification-change" class="test-notification">Toggle Change Warning Notification</a></li>
<li><a href="#" class="test-notification">Toggle New Version Warning Notification</a></li> <li><a href="#notification-version" class="test-notification">Toggle New Version Warning Notification</a></li>
<li><a href="#" class="test-notification">Toggle Editing Warning Notification</a></li> <li><a href="#notification-dangerous" class="test-notification">Toggle Editing Warning Notification</a></li>
<li><a href="#" class="test-notification">Toggle Saving Notification</a></li> <li><a href="#notification-saving" class="test-notification">Toggle Saving Notification</a></li>
<li><a href="#" class="test-notification">Toggle Help Notification</a></li> <li><a href="#notification-help" class="test-notification">Toggle Help Notification</a></li>
</ul> </ul>
</section> </section>
</article> </article>
...@@ -243,7 +285,7 @@ ...@@ -243,7 +285,7 @@
<div class="copy"> <div class="copy">
<h2 class="title title-3">You've Made Some Changes</h2> <h2 class="title title-3">You've Made Some Changes</h2>
<p><strong>Note:</strong> Your changes will not take effect until you <strong>save your progress</strong>.</p> <p>Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div> </div>
<nav class="nav-actions"> <nav class="nav-actions">
...@@ -314,7 +356,7 @@ ...@@ -314,7 +356,7 @@
</div> </div>
<!-- notification: status - saving --> <!-- notification: status - saving -->
<div class="wrapper wrapper-notification wrapper-notification-status is-shown" id="notification-saving"> <div class="wrapper wrapper-notification wrapper-notification-status" id="notification-saving">
<div class="notification saving"> <div class="notification saving">
<i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i> <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
...@@ -325,15 +367,20 @@ ...@@ -325,15 +367,20 @@
</div> </div>
</div> </div>
<!-- notification: status - helper --> <!-- notification: help - DYK -->
<div class="wrapper wrapper-notification wrapper-notification-helping" id="notification-helping"> <div class="wrapper wrapper-notification wrapper-notification-help" id="notification-help">
<div class="notification helping"> <div class="notification help">
<i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i> <i class="ss-icon ss-symbolicons-block icon icon-help">&#x2753;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">Fun Fact:</h2> <h2 class="title title-3">Fun Fact:</h2>
<p>Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p> <p>Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
</div> </div>
<a href="#" rel="view" class="action action-notification-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close notification</span>
</a>
</div> </div>
</div> </div>
</%block> </%block>
\ No newline at end of file
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