Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Toast] Progressbar, closeEasing, Bugfixing, message support #139

Merged
merged 13 commits into from
Oct 10, 2018
Merged

[Toast] Progressbar, closeEasing, Bugfixing, message support #139

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0653860
Toast progressbar, closeEasing, Bugfixing, message support
lubber-de Sep 28, 2018
4499e46
Merge branch 'beta' of https://github.com/fomantic/Fomantic-UI into t…
lubber-de Sep 28, 2018
00eb26a
Make opacity an option (default 1), removed flat class
lubber-de Oct 1, 2018
f49a63c
Fixed floating shadow, added hoverfloating
lubber-de Oct 1, 2018
6a22d11
Support hoverfloating for message aswell
lubber-de Oct 1, 2018
ccf7ad0
Always render parent 'text-box', support 'top attached progress', sho…
lubber-de Oct 1, 2018
7266b63
Fixed full progressbar support for mixed toasts/messages/compact/top …
lubber-de Oct 2, 2018
f7bc317
support true/false/'top'/'bottom' for showProgress parameter. No need…
lubber-de Oct 4, 2018
aaac23e
Added closeIcon option, changed showProgress to allow false|'top'|'bo…
lubber-de Oct 4, 2018
ae61e96
less variables instead of fixed values
lubber-de Oct 4, 2018
c4c35c6
Support string for showIcon to use individual icons
lubber-de Oct 5, 2018
85bfe96
Merge branch 'beta' of https://github.com/fomantic/Fomantic-UI into t…
lubber-de Oct 5, 2018
91dff06
fixed syntax...
lubber-de Oct 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 73 additions & 4 deletions dist/components/toast.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
transform: translate(-50%, 0%);
top: 0.85714286em;
}

.ui.bottom.right.toast-container {
bottom: 0.85714286em;
right: 0.85714286em;
Expand Down Expand Up @@ -60,19 +61,45 @@
padding: 0.78571429em 1em;
margin: 0 0 6px;
color: rgba(255, 255, 255, 0.9);
opacity: 0.8;
opacity: 0.9;
}

.floating.toast {
box-shadow: 0 0 0 1px #a3c293 inset, 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this ! Since we got rid of opacity, what do you think about display it (or a variant) on mouse over ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest implementing this as an additional class, so the user can decide how it should behave

Will only show the box-shadow on hover

className: {
	toast: 'ui hoverfloating toast'
}

Will still show the box shadow any time

className: {
	toast: 'ui floating toast'
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed / added accordingly by commit f49a63c.

}

.toast-container .message {
display: flex !important;
}

.toast-container .compact.message {
width: 300px;
}

.toast-box .toast {
display: block;
}

.flat.toast {
opacity: 1;
}

.toast-container .message,
.toast:hover {
opacity: 1;
cursor: pointer;
}

.visible.toast-box,
.animating.toast,
.visible.toast {
display: block;
}
.toast > .icon {
margin-right: 0.6em;

.icon.toast .content {
padding-left: 3em;
}

.toast > .content > .title {
font-weight: bold;
}
Expand All @@ -89,6 +116,18 @@
background-color: #DB2828;
}

.info.toast-box .attached.progress .bar {
background: #12a1bf !important;
}
.warning.toast-box .attached.progress .bar {
background: #cf9b0d !important;
}
.success.toast-box .attached.progress .bar {
background: #15792d !important;
}
.error.toast-box .attached.progress .bar {
background: #9c1a1a !important;
}
/*--------------
Icon
---------------*/
Expand All @@ -97,9 +136,39 @@
display: inline-block;
vertical-align: middle;
font-size: 1.5em;
opacity: 0.8;
opacity: 0.9;
position: absolute;
}

.icon.flat.toast > .icon:not(.close) {
opacity:1;
}

.icon.toast > .content {
display: inline-block;
vertical-align: middle;
}

/*---------------
Progress Bar
----------------*/

.toast-box .attached.progress .bar {
min-width: 0%;
}

.toast-box .active.progress .bar::after {
-webkit-animation: progress-active 2s ease infinite !important;
animation: progress-active 2s ease infinite !important;
}

.toast-box .toast,
.toast-box .message {
margin-bottom: 0;
}

.toast-box .attached.progress {
margin: -3px 0 6px;
}


62 changes: 54 additions & 8 deletions dist/components/toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ $.fn.toast = function(parameters) {

$module = $(this),
$toast = $('<div/>'),
$progress = $('<div/>',{'class':'ui bottom attached active progress'}),
$progressBar = $('<div/>',{'class':'bar'}),

$close = $module.find(selector.close),
$context = (settings.context)
Expand All @@ -74,7 +76,7 @@ $.fn.toast = function(parameters) {
module.bind.events();

if(settings.displayTime > 0) {
setTimeout(module.close, settings.displayTime);
module.closeTimer = setTimeout(module.close, settings.displayTime+(settings.showProgress ? 300 : 0));
}
module.show();
},
Expand All @@ -97,6 +99,9 @@ $.fn.toast = function(parameters) {
},

close: function(callback) {
if(module.closeTimer) {
clearTimeout(module.closeTimer);
}
callback = callback || function(){};
module.remove.visible();
module.unbind.events();
Expand All @@ -106,12 +111,12 @@ $.fn.toast = function(parameters) {

create: {
container: function() {
module.verbose('Creating container')
module.verbose('Creating container');
$context.append('<div class="ui ' + settings.position + ' ' + className.container + '"></div>');
},
toast: function() {
var $content = $('<div/>').addClass(className.content);
module.verbose('Creating toast')
module.verbose('Creating toast');

if (settings.showIcon) {
var $icon = $('<i/>').addClass(settings.icons[settings.class] + ' ' + className.icon);
Expand All @@ -138,12 +143,26 @@ $.fn.toast = function(parameters) {
.addClass(settings.class + ' ' + className.toast)
.append($content)
;

if(settings.showProgress && settings.displayTime > 0){
$toast = $('<div/>',{'class':'toast-box '+settings.class})
.append($toast);
$progress
.addClass(settings.class)
.append($progressBar);
$toast.append($progress);
$progressBar.css('transition','width '+(settings.displayTime/1000)+'s linear');
$progressBar.width(settings.progressUp?'0%':'100%');
setTimeout(function() {
if(typeof $progress !== 'undefined'){
$progressBar.width(settings.progressUp?'100%':'0%');
}
},300);
}
if (settings.newestOnTop) {
$toast.prependTo(module.get.container());
}
else {
$toast.appendTo(module.get.container())
$toast.appendTo(module.get.container());
}
}
},
Expand Down Expand Up @@ -204,6 +223,16 @@ $.fn.toast = function(parameters) {
duration : settings.transition.hideDuration,
debug : settings.debug,
verbose : settings.verbose,

onBeforeHide: function(callback){
callback = $.isFunction(callback)?callback : function(){};
if(settings.transition.closeEasing !== ''){
$toast.css('opacity',0);
$toast.slideUp(500,settings.transition.closeEasing,callback);
} else {
callback.call($toast);
}
},
onComplete : function() {
module.destroy();
callback.call($toast, element);
Expand All @@ -220,7 +249,7 @@ $.fn.toast = function(parameters) {

has: {
container: function() {
module.verbose('Determining if there is already a container')
module.verbose('Determining if there is already a container');
return ($context.find(module.helpers.toClass(settings.position) + selector.container).length > 0);
}
},
Expand All @@ -246,7 +275,7 @@ $.fn.toast = function(parameters) {
event: {
click: function() {
settings.onClick.call($toast, element);
module.close()
module.close();
}
},

Expand Down Expand Up @@ -469,13 +498,16 @@ $.fn.toast.settings = {
displayTime : 3000, // set to zero to require manually dismissal, otherwise hides on its own
showIcon : true,
newestOnTop : false,
showProgress : false,
progressUp : true, //if false, the bar will start at 100% and decrease to 0%

// transition settings
transition : {
showMethod : 'scale',
showDuration : 500,
hideMethod : 'scale',
hideDuration : 500
hideDuration : 500,
closeEasing : 'easeOutBounce' //Set to empty string to stack the closed toast area immediately (old behaviour)
},

error: {
Expand Down Expand Up @@ -513,5 +545,19 @@ $.fn.toast.settings = {
onRemove : function(){},
};

$.extend( $.easing, {
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
});


})( jQuery, window, document );
21 changes: 16 additions & 5 deletions dist/components/transition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -779,11 +779,22 @@ $.fn.transition = function() {
element.blur(); // IE will trigger focus change if element is not blurred before hiding
module.remove.display();
module.remove.visible();
module.set.hidden();
module.force.hidden();
settings.onHide.call(element);
settings.onComplete.call(element);
// module.repaint();
if($.isFunction(settings.onBeforeHide)){
settings.onBeforeHide.call(element,function(){
module.hideNow();
});
} else {
module.hideNow();
}

},

hideNow: function() {
module.set.hidden();
module.force.hidden();
settings.onHide.call(element);
settings.onComplete.call(element);
// module.repaint();
},

show: function(display) {
Expand Down
Loading