TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restyle flash message animation

This commit is contained in:
Samuel Georges 2016-04-27 04:44:02 +10:00
parent ad484d56cf
commit 589f6d1551
5 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/system/assets/ui/docs/flashmessage.md
View File

@ -11,7 +11,7 @@ Displays a floating flash message on the screen.
### Trigger
<p>
<a href="#" class="btn btn-primary" onclick="$.oc.flashMsg({text: 'The record has been successfujavascript:;ly saved. This message will go away in 1 second.', 'class': 'success', 'interval': 1}); return false;">
<a href="#" class="btn btn-primary" onclick="$.oc.flashMsg({text: 'The record has been successfully saved. This message will go away in 1 second.', 'class': 'success', 'interval': 1}); return false;">
Create Success message
</a>
</p>

3
modules/system/assets/ui/js/flashmessage.js
View File

@ -15,8 +15,9 @@
$('body > p.flash-message').remove()
if ($element.length == 0)
if ($element.length == 0) {
$element = $('<p/>').addClass(options.class).html(options.text)
}
$element.addClass('flash-message fade')
$element.attr('data-control', null)

18
modules/system/assets/ui/less/flashmessage.less
View File

@ -35,13 +35,12 @@
&.fade {
.opacity(0);
.transition(~'all 0.5s, width 0s');
.transform(~'scale(0.9)');
.transition(~'opacity .15s linear');
}
&.fade.in {
.opacity(1);
.transform( ~'scale(1)');
.animation(~'flashmessage-fade-in 1s cubic-bezier(0.2, 0.7, 0.5, 1)');
}
&.success { background: @color-flash-success-bg; }
@ -79,4 +78,17 @@
margin-left: 0;
width: auto;
}
}
@keyframes flashmessage-fade-in {
0% {
.transform(~"translateY(-30%)");
opacity: 0;
}
70% {
opacity: 1;
}
100% {
.transform(~"translateY(0)");
}
}

3
modules/system/assets/ui/storm-min.js vendored
View File

@ -1900,8 +1900,7 @@ $(container).triggerHandler('dispose-control')}}
$.oc.foundation.controlUtils=ControlUtils;$(document).on('ajaxBeforeReplace',function(ev){$.oc.foundation.controlUtils.disposeControls(ev.target)})}(window.jQuery);+function($){"use strict";var FlashMessage=function(options,el){var
options=$.extend({},FlashMessage.DEFAULTS,options),$element=$(el)
$('body > p.flash-message').remove()
if($element.length==0)
$element=$('<p/>').addClass(options.class).html(options.text)
if($element.length==0){$element=$('<p/>').addClass(options.class).html(options.text)}
$element.addClass('flash-message fade')
$element.attr('data-control',null)
$element.append('<button type="button" class="close" aria-hidden="true">&times;</button>')

8
modules/system/assets/ui/storm.css
View File

@ -1691,8 +1691,8 @@ div.scoreboard .scoreboard-offset{padding-left:20px}
body.slim-container div.scoreboard{padding:0 20px}
#layout-canvas .flash-message{display:none}
.flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10000;word-wrap:break-word;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity .15s linear;transition:opacity .15s linear}
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-animation:flashmessage-fade-in 1s cubic-bezier(0.2,0.7,0.5,1);animation:flashmessage-fade-in 1s cubic-bezier(0.2,0.7,0.5,1)}
.flash-message.success{background:#8da85e}
.flash-message.error{background:#cc3300}
.flash-message.warning{background:#f0ad4e}
@ -1702,6 +1702,10 @@ body.slim-container div.scoreboard{padding:0 20px}
.flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important}
@media (max-width:768px){.flash-message{left:10px;right:10px;top:10px;margin-left:0;width:auto}
}
@keyframes flashmessage-fade-in{0%{-webkit-transform:translateY(-30%);-ms-transform:translateY(-30%);transform:translateY(-30%);opacity:0}
70%{opacity:1}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
[class^="flag-"],[class*=" flag-"]{background-image:url("images/flag-icons-small.png");width:16px;height:16px;line-height:16px;vertical-align:middle;display:inline-block;margin:-3px 2px 0 2px}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){[class^="flag-"],[class*=" flag-"]{background-image:url("images/flag-icons-large.png");background-size:16px 3952px}
}