Skip to content

E
edx-platform
Commit 72c58cd4 by Brian Talbot
Options

studio - alerts: refactored styles for common content types across UI, got… 

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
parent 47aacc70
Showing with 202 additions and 182 deletions
cms/static/js/base.js
...@@ -62,10 +62,16 @@ $(document).ready(function () { ...@@ -62,10 +62,16 @@ $(document).ready(function () {
$(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
}); });
// prompt pop
$('.action-prompt').click(function(e){
(e).preventDefault();
$body.toggleClass('prompt-is-shown');
});
// prompt close // prompt close
$('.prompt .action-cancel').click(function(e) { $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
(e).preventDefault(); (e).preventDefault();
$(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding'); $body.removeClass('prompt-is-shown');
}); });
// nav - dropdown related // nav - dropdown related
......
cms/static/sass/_alerts.scss
// studio alerts and notifications // 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 // prompts
.wrapper-prompt { .wrapper-prompt {
@include transition(all 0.05s ease-in-out);
position: fixed; position: fixed;
top: 0; top: 0;
background: $black-t1; background: $black-t0;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
...@@ -20,36 +44,93 @@ ...@@ -20,36 +44,93 @@
} }
.prompt { .prompt {
@include border-radius(3px); @include border-radius(($baseline/5));
@include box-sizing(border-box); @include box-shadow(0 0 3px $shadow-d1);
@include box-shadow(0 0 4px $shadow-d1);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: $baseline*15; width: $baseline*17.5;
padding: $baseline; border: 4px solid $black;
background: $white; text-align: left;
.copy {
border-top: 4px solid $blue;
padding: $baseline;
}
.nav-actions { .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 { .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;
}
}
} }
// notifications // notifications
.wrapper-notification { .wrapper-notification {
@include clearfix(); @include clearfix();
@include box-sizing(border-box);
@include box-shadow(0 -1px 3px $shadow); @include box-shadow(0 -1px 3px $shadow);
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
border-top: 4px solid $gray-l1;
padding: ($baseline*0.75) ($baseline*2); padding: ($baseline*0.75) ($baseline*2);
background: $gray-d3;
&.wrapper-notification-warning { &.wrapper-notification-warning {
border-top-color: $orange; border-top-color: $orange;
...@@ -67,7 +148,7 @@ ...@@ -67,7 +148,7 @@
} }
} }
&.wrapper-cation-error { &.wrapper-notification-error {
border-top-color: $red-l1; border-top-color: $red-l1;
.icon-error { .icon-error {
...@@ -208,29 +289,6 @@ ...@@ -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 // with actions
&.has-actions { &.has-actions {
...@@ -272,108 +330,17 @@ ...@@ -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 { &.confirmation {
.copy { .copy {
margin-top: ($baseline/5); 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 { &.saving {
.icon-saving { .icon-saving {
@include anim-rotateClockwise(3s, linear, infinite); @include anim-rotateClockwise(3s, linear, infinite);
width: 22px; width: 22px;
} }
...@@ -559,12 +526,12 @@ ...@@ -559,12 +526,12 @@
// with cancel // with cancel
.action-alert-close { .action-alert-close {
@include border-bottom-radius(3px); @include border-bottom-radius(($baseline/5));
position: absolute; position: absolute;
top: -($baseline/10); top: -($baseline/10);
right: $baseline; right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d1; background: $gray-d4;
text-align: center; text-align: center;
.label { .label {
...@@ -580,16 +547,20 @@ ...@@ -580,16 +547,20 @@
} }
&:hover { &:hover {
background: $gray-l1; background: $gray-d1;
} }
} }
}
// alert types .alert, .notification, .prompt {
// types - warning
&.warning { &.warning {
.action-primary { .nav-actions .action-primary {
@include orange-button(); @include orange-button();
border-color: $orange-d2; border-color: $orange-d2;
color: $gray-d4;
} }
a { a {
...@@ -601,9 +572,10 @@ ...@@ -601,9 +572,10 @@
} }
} }
// types - error
&.error { &.error {
.action-primary { .nav-actions .action-primary {
@include red-button(); @include red-button();
border-color: $red-d2; border-color: $red-d2;
} }
...@@ -617,9 +589,27 @@ ...@@ -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 { &.confirmation {
.action-primary { .nav-actions .action-primary {
@include green-button(); @include green-button();
border-color: $green-d2; border-color: $green-d2;
} }
...@@ -633,17 +623,10 @@ ...@@ -633,17 +623,10 @@
} }
} }
&.announcement { // types - step required
.action-primary {
@include blue-button();
border-color: $blue-d2;
}
}
&.step-required { &.step-required {
.action-primary { .nav-actions .action-primary {
border-color: $pink-d2; border-color: $pink-d2;
@include pink-button(); @include pink-button();
} }
...@@ -661,26 +644,31 @@ ...@@ -661,26 +644,31 @@
// js enabled // js enabled
.js { .js {
// prompt set-up
.wrapper-prompt { .wrapper-prompt {
display: none; visibility: hidden;
pointer-events: none;
.prompt { .prompt {
@include anim-bounceIn(0.5s); opacity: 0;
opacity: 0.1;
} }
}
&.is-shown { // prompt showing
display: block; &.prompt-is-shown {
.prompt { .wrapper-view {
opacity: 1.0; -webkit-filter: blur(2px) grayscale(25%);
} filter: blur(2px) grayscale(25%);
} }
&.is-hiding { .wrapper-prompt.is-shown {
visibility: visible;
pointer-events: auto;
.prompt { .prompt {
@include anim-bounceOut(0.5s); @include anim-bounceIn(0.5s);
opacity: 1.0;
} }
} }
} }
......
cms/static/sass/_base.scss
...@@ -103,6 +103,13 @@ p, ul, ol, dl { ...@@ -103,6 +103,13 @@ p, ul, ol, dl {
// ==================== // ====================
// layout - basic
.wrapper-view {
}
// ====================
// layout - basic page header // layout - basic page header
.wrapper-mast { .wrapper-mast {
margin: 0; margin: 0;
......
cms/static/sass/_keyframes.scss
...@@ -17,12 +17,14 @@ ...@@ -17,12 +17,14 @@
@-o-keyframes rotateClockwise { @include rotateClockwise(); } @-o-keyframes rotateClockwise { @include rotateClockwise(); }
@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-name(rotateClockwise);
@include animation-duration($duration); @include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count); @include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
...@@ -47,12 +49,14 @@ ...@@ -47,12 +49,14 @@
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); } @-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@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-name(notificationsSlideUp);
@include animation-duration($duration); @include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count); @include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
...@@ -77,12 +81,13 @@ ...@@ -77,12 +81,13 @@
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } @-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@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-name(notificationsSlideDown);
@include animation-duration($duration); @include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count); @include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
...@@ -107,12 +112,13 @@ ...@@ -107,12 +112,13 @@
@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } @-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@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-name(notificationsSlideUpDown);
@include animation-duration($duration); @include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count); @include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
...@@ -139,12 +145,13 @@ ...@@ -139,12 +145,13 @@
@-o-keyframes bounceIn { @include bounceIn(); } @-o-keyframes bounceIn { @include bounceIn(); }
@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-name(bounceIn);
@include animation-duration($duration); @include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count); @include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
...@@ -185,10 +192,11 @@ ...@@ -185,10 +192,11 @@
@-o-keyframes bounceOut { @include bounceOut(); } @-o-keyframes bounceOut { @include bounceOut(); }
@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-name(bounceOut);
@include animation-duration($duration); @include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count); @include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
\ No newline at end of file
cms/static/sass/_variables.scss
...@@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87); ...@@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87);
// colors - new for re-org // colors - new for re-org
$black: rgb(0,0,0); $black: rgb(0,0,0);
$black-t0: rgba(0,0,0,0.125);
$black-t1: rgba(0,0,0,0.25); $black-t1: rgba(0,0,0,0.25);
$black-t2: rgba(0,0,0,0.50); $black-t2: rgba(0,0,0,0.50);
$black-t3: rgba(0,0,0,0.75); $black-t3: rgba(0,0,0,0.75);
$white: rgb(255,255,255); $white: rgb(255,255,255);
$white-t0: rgba(255,255,255,0.125);
$white-t1: rgba(255,255,255,0.25); $white-t1: rgba(255,255,255,0.25);
$white-t2: rgba(255,255,255,0.50); $white-t2: rgba(255,255,255,0.50);
$white-t3: rgba(255,255,255,0.75); $white-t3: rgba(255,255,255,0.75);
......
cms/templates/base.html
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> <title>
<%block name="title"></%block> | <%block name="title"></%block> |
% if context_course: % if context_course:
<% ctx_loc = context_course.location %> <% ctx_loc = context_course.location %>
${context_course.display_name} | ${context_course.display_name} |
% endif % endif
edX Studio edX Studio
</title> </title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
...@@ -22,14 +22,13 @@ ...@@ -22,14 +22,13 @@
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<%block name="header_extras"></%block> <%block name="header_extras"></%block>
</head> </head>
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="widgets/header.html" />
<%include file="courseware_vendor_js.html"/>
<%include file="courseware_vendor_js.html"/>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
...@@ -48,15 +47,23 @@ ...@@ -48,15 +47,23 @@
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
<script type="text/javascript"> <script type="text/javascript">
document.write('\x3Cscript type="text/javascript" src="' + document.write('\x3Cscript type="text/javascript" src="' +
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>'); document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
</script> </script>
<%block name="content"></%block> <!-- view -->
<%include file="widgets/footer.html" /> <div class="wrapper wrapper-view">
<%include file="widgets/header.html" />
<%block name="jsextra"></%block> <%block name="view_alerts"></%block>
</body>
</html> <%block name="content"></%block>
<%include file="widgets/footer.html" />
<%block name="view_notifications"></%block>
</div>
<%block name="view_prompts"></%block>
<%block name="jsextra"></%block>
</body>
</html>
\ 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