Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - alerts: more progress including prompts

Browse Source
This commit is contained in:
Brian Talbot
2013-03-01 15:43:07 -05:00
parent cb456ad228
commit ad70581b80
5 changed files with 222 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cms/static/js/base.js
View File

@@ -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

82
cms/static/sass/_alerts.scss
View File

@@ -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();
}
}
}
}
}

24
cms/static/sass/_keyframes.scss
View File

@@ -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));

6
cms/static/sass/_variables.scss
View File

@@ -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%);

129
cms/templates/alerts.html
View File

@@ -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');
});
});
</script>
@@ -243,16 +273,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>
<ul>
<li><a href="#alert-draft" class="test-alert">Toggle Draft Alert</a></li>
<li><a href="#alert-version" class="test-alert">Toggle Version Alert</a></li>
<li><a href="#alert-saved" class="test-alert">Toggle Previous View/Action Alert</a></li>
<li><a href="#alert-close" class="test-alert">Toggle Alert with Close Option</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-announcement2" class="test-alert">Toggle Announcement Alert</a></li>
<li><a href="#alert-announcement1" class="test-alert">Toggle Announcement with Actions Alert</a></li>
<li><a href="#alert-activation" class="test-alert">Toggle Activiation Alert</a></li>
<li><a href="#alert-draft" class="show-alert">Show Draft</a></li>
<li><a href="#alert-version" class="show-alert">Show Version</a></li>
<li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
<li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
<li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
<li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
<li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
<li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
<li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
<li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
</ul>
</section>
@@ -267,12 +297,46 @@
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li><a href="#notification-change" class="test-notification">Toggle Change Warning Notification</a></li>
<li><a href="#notification-version" class="test-notification">Toggle New Version Warning Notification</a></li>
<li><a href="#notification-dangerous" class="test-notification">Toggle Editing Warning Notification</a></li>
<li><a href="#notification-confirmation" class="test-notification">Toggle Confirmation Notification</a></li>
<li><a href="#notification-saving" class="test-notification">Toggle Saving Notification</a></li>
<li><a href="#notification-help" class="test-notification">Toggle Help Notification</a></li>
<li>
<a href="#notification-change" class="show-notification">Show Change Warning</a>
<a href="#notification-change" class="hide-notification">Hide Change Warning</a>
</li>
<li>
<a href="#notification-version" class="show-notification">Show New Version Warning</a>
<a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
</li>
<li>
<a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
<a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
</li>
<li>
<a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
</li>
<li>
<a href="#notification-saving" class="show-notification">Show Saving</a>
<a href="#notification-saving" class="hide-notification">Hide Saving</a>
</li>
<li>
<a href="#notification-help" class="show-notification">Show Help</a>
<a href="#notification-help" class="hide-notification">Hide Help</a>
</li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Prompts</h2>
<span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
</header>
<p>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).</p>
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li>
<a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
</li>
</ul>
</section>
</article>
@@ -368,7 +432,7 @@
</div>
<!-- notification: status- confirmed -->
<div class="wrapper wrapper-notification wrapper-notification-confirmation is-fleeting" id="notification-confirmation">
<div class="wrapper wrapper-notification wrapper-notification-confirmation" id="notification-confirmation">
<div class="notification confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
@@ -394,4 +458,25 @@
</a>
</div>
</div>
<!-- prompt: confirm -->
<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm">
<div class="prompt confirm">
<div class="copy">
<h2 class="title title-3">Are You Sure You Want to Do That?</h2>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary action-proceed">Yes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary action-cancel">No</a>
</li>
</ul>
</nav>
</div>
</div>
</%block>