Skip to content

E
edx-platform
Commit 95ea0168 by Brian Talbot
Options

studio - alerts: firmed up status-based notifications

parent d809df91
Showing with 93 additions and 74 deletions
cms/static/sass/_alerts.scss
...@@ -10,20 +10,12 @@ ...@@ -10,20 +10,12 @@
-webkit-transition: bottom 1.5s ease-in-out 0.25s; -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;
bottom: -1000px;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
overflow: hidden;
opacity: 0;
border-top: 4px solid $gray-l1; border-top: 4px solid $gray-l1;
padding: ($baseline*0.75) ($baseline*2); padding: ($baseline*0.75) ($baseline*2);
background: $gray-d3; background: $gray-d3;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
&.wrapper-notification-warning { &.wrapper-notification-warning {
border-top-color: $orange; border-top-color: $orange;
...@@ -74,12 +66,11 @@ ...@@ -74,12 +66,11 @@
// shorter/status notifications // shorter/status notifications
&.wrapper-notification-status { &.wrapper-notification-status {
width: ($baseline*10); width: ($baseline*12.5);
right: ($baseline); right: ($baseline);
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
.notification { .notification {
background: red;
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix(); @include clearfix();
width: 100%; width: 100%;
...@@ -87,11 +78,19 @@ ...@@ -87,11 +78,19 @@
min-width: none; min-width: none;
.icon { .icon {
width: auto; width: $baseline;
margin-right: ($baseline*0.75);
} }
.copy { .copy {
width: auto; width: ($baseline*9);
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
} }
} }
} }
...@@ -115,7 +114,7 @@ ...@@ -115,7 +114,7 @@
.icon { .icon {
@include transition (color 0.5s ease-in-out); @include transition (color 0.5s ease-in-out);
@include font-size(28); @include font-size(22);
width: flex-grid(1, 12); width: flex-grid(1, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
text-align: right; text-align: right;
...@@ -283,6 +282,16 @@ ...@@ -283,6 +282,16 @@
border-color: $blue-d2; border-color: $blue-d2;
} }
} }
&.saving {
.icon-saving {
@include animation(rotateClockwise 3.0s forwards linear infinite);
width: 22px;
height: 25px;
line-height: 3rem !important;
}
}
} }
// ==================== // ====================
...@@ -296,16 +305,11 @@ ...@@ -296,16 +305,11 @@
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
opacity: 0;
border-bottom: 4px solid $gray-l1; border-bottom: 4px solid $gray-l1;
border-top: 1px solid $black; border-top: 1px solid $black;
padding: $baseline ($baseline*2); padding: $baseline ($baseline*2);
background: $gray-d3; background: $gray-d3;
&.is-shown {
opacity: 1.0;
}
&.wrapper-alert-warning { &.wrapper-alert-warning {
border-bottom-color: $orange; border-bottom-color: $orange;
...@@ -536,6 +540,28 @@ ...@@ -536,6 +540,28 @@
} }
} }
// js enabled
.js {
.wrapper-alert {
display: none;
&.is-shown {
display: block;
}
}
.wrapper-notification {
bottom: -1000px;
opacity: 0;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
}
}
// temporary // temporary
body.uxdesign.alerts { body.uxdesign.alerts {
......
cms/static/sass/_base.scss
...@@ -69,7 +69,7 @@ h1 { ...@@ -69,7 +69,7 @@ h1 {
} }
.title-3 { .title-3 {
@include font-size(16); @include font-size(18);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
...@@ -93,6 +93,14 @@ h1 { ...@@ -93,6 +93,14 @@ h1 {
font-weight: 500 font-weight: 500
} }
p, ul, ol, dl {
margin-bottom: ($baseline/2);
&:last-child {
margin-bottom: 0;
}
}
// ==================== // ====================
// layout - basic page header // layout - basic page header
...@@ -316,32 +324,12 @@ h1 { ...@@ -316,32 +324,12 @@ h1 {
color: $gray-d3; color: $gray-d3;
} }
.title-1 {
}
.title-2 {
@include font-size(24);
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
}
.title-3 {
@include font-size(16);
margin: 0 0 ($baseline/4) 0;
font-weight: 500;
}
.title-4 {
}
.title-5 {
}
> section { > section {
margin: 0 0 $baseline 0; margin: 0 0 ($baseline*2) 0;
&:last-child {
margin-bottom: 0;
}
header { header {
@include clearfix(); @include clearfix();
......
cms/static/sass/_keyframes.scss
...@@ -7,14 +7,6 @@ ...@@ -7,14 +7,6 @@
@include transform(rotate(0deg)); @include transform(rotate(0deg));
} }
25% {
@include transform(rotate(90deg));
}
50% {
@include transform(rotate(180deg));
}
100% { 100% {
@include transform(rotate(360deg)); @include transform(rotate(360deg));
} }
......
cms/templates/alerts.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<%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 is-shown"> <div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
<div class="alert warning has-actions"> <div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
<!-- alert: newer version --> <!-- alert: newer version -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown"> <div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-version">
<div class="alert warning has-actions"> <div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</div> </div>
<!-- alert: save confirmed --> <!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown"> <div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-saved">
<div class="alert confirmation"> <div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i> <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
<!-- alert: delete confirmed --> <!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown"> <div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
<div class="alert confirmation"> <div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i> <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </div>
<!-- alert: system error --> <!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown"> <div class="wrapper wrapper-alert wrapper-alert-error" id="alert-system-error">
<div class="alert error"> <div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</div> </div>
<!-- alert: user error --> <!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown"> <div class="wrapper wrapper-alert wrapper-alert-error" id="alert-user-error">
<div class="alert error has-actions"> <div class="alert error has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
</div> </div>
<!-- alert: announcement w/ actions --> <!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown"> <div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement1">
<div class="alert announcement has-actions"> <div class="alert announcement has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i> <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
</div> </div>
<!-- alert: announcement --> <!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown"> <div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement2">
<div class="alert announcement"> <div class="alert announcement">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i> <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
</div> </div>
<!-- alert: step required --> <!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown"> <div class="wrapper wrapper-alert wrapper-alert-step-required" id="alert-activation">
<div class="alert step-required has-actions"> <div class="alert step-required has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i> <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
...@@ -182,14 +182,6 @@ ...@@ -182,14 +182,6 @@
</div> </div>
</div> </div>
<div class="wrapper wrapper-testing">
<div class="testing">
<ul>
<li><a href="#" class="test-notification">Toggle Notification</a></li>
</ul>
</div>
</div>
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<div class="title"> <div class="title">
...@@ -209,6 +201,17 @@ ...@@ -209,6 +201,17 @@
</header> </header>
<p>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.</p> <p>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.</p>
<h3 class="title-3">Different Static Examples of Alerts</h3>
<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="#" 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="#" class="test-notification">Toggle Editing Warning Notification</a></li>
<li><a href="#" class="test-notification">Toggle Saving Notification</a></li>
<li><a href="#" class="test-notification">Toggle Help Notification</a></li>
</ul>
</section> </section>
<section> <section>
...@@ -218,13 +221,23 @@ ...@@ -218,13 +221,23 @@
</header> </header>
<p>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.</p> <p>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.</p>
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li><a href="#" 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="#" class="test-notification">Toggle Editing Warning Notification</a></li>
<li><a href="#" class="test-notification">Toggle Saving Notification</a></li>
<li><a href="#" class="test-notification">Toggle Help Notification</a></li>
</ul>
</section> </section>
</article> </article>
</section> </section>
</div> </div>
<!-- notification: change has been made and a save is needed --> <!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change"> <div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change">
<div class="notification change has-actions"> <div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i> <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
...@@ -248,7 +261,7 @@ ...@@ -248,7 +261,7 @@
</div> </div>
<!-- notification: newer version exists --> <!-- notification: newer version exists -->
<div class="wrapper wrapper-notification wrapper-notification-warning"> <div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version">
<div class="notification warning has-actions"> <div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -277,7 +290,7 @@ ...@@ -277,7 +290,7 @@
</div> </div>
<!-- notification: warning about editing something dangerous --> <!-- notification: warning about editing something dangerous -->
<div class="wrapper wrapper-notification wrapper-notification-warning"> <div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous">
<div class="notification warning has-actions"> <div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -301,7 +314,7 @@ ...@@ -301,7 +314,7 @@
</div> </div>
<!-- notification: status - saving --> <!-- notification: status - saving -->
<div class="wrapper wrapper-notification wrapper-notification-status"> <div class="wrapper wrapper-notification wrapper-notification-status is-shown" 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>
...@@ -313,7 +326,7 @@ ...@@ -313,7 +326,7 @@
</div> </div>
<!-- notification: status - helper --> <!-- notification: status - helper -->
<div class="wrapper wrapper-notification wrapper-notification-status"> <div class="wrapper wrapper-notification wrapper-notification-helping" id="notification-helping">
<div class="notification helping"> <div class="notification helping">
<i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i> <i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i>
......
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