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

lubber-de · 2018-09-28T13:21:30Z

Toast Enhancements

Added

Option showProgress (default false), which displays a SUI attached progressbar increasing until displayTime is reached (ignored, if displayTime = 0) Values: 'bottom','top',false
Option progressUp (default true). If set to false the progress is decreasing instead of increasing
Support for 'message' component in addition to 'toast' to work with progressbar if className: {toast: 'ui message'} is used (all message color options are supported to display a progressbar with the same color)
Option transition.closeEasing (default 'easeOutBounce') to animate the stacking when a toast closes. Set empty for old behaviour
Optional onBeforeHide (will be called given a callback parameter) functionality to transition.js to make the above closeEasing animation possible
Support className: {toast:'ui floating toast'} just like in message to display a box-shadow underneath/around the toast. (className: {toast:'ui hoverfloating toast'} will show the box-shadow only on hovering)
Option closeIcon (default false). This will make the toast closable by the top right corner icon instead of clicking anywhere on the toast
Support string to option showIcon to be able to use individual icons

Changed

Removed fixed width, added an option compact (default true) which does the same but does this independ of the className
Removed fixed Opacity, added an option opacity (default 1) instead as discussed below

Fixed

Timeout bug: If toast was closed by click, the timeout was still running and returned error when reached because $toast was not existing anymore
Icon positioning on large wrapping text in toast to stay at the top left of the text
Icon will only be rendered, if class exists in icon object
Alignment of toast with different widths in right and center position

Examples

Progressbar `showProgress: 'bottom'`

$('body')
          .toast({
            displayTime: 5000,
            message: 'I am a toast, nice to meet you! this is a lot of text and should be displayed properly',
            class: 'info',
            showIcon: false,
            showProgress: 'bottom'
        });

Progressbar decreasing `progressUp: false`

$('body')
          .toast({
            displayTime: 4000,
//           title: 'Welcome!',  //set title:'header' below if you use 'ui message' instead of 'ui toast'
            message: 'I am a toast, nice to meet you! this is a lot of text and should be displayed properly',
            class: 'brown',
            className: {
                toast: 'ui compact message',
//                title: 'header'   //remember to set this aswell when using a title in a message
            },
            showProgress: 'bottom',
            progressUp: false
        });

Animated stacking on close `transition: closeEasing = 'easeOutBounce'`

$('body')
          .toast({
            displayTime: 2000,
            message: 'I am a toast, nice to meet you! this is a lot of text and should be displayed properly',
            class: 'purple',
            compact: false, //do not restrict to a fixed width
            className: {
                toast: 'ui message',
            },
            transition: {
                  closeEasing:'easeOutBounce', //this is default, you can omit it
//               closeEasing:'', //set to empty string to gain the previous behaviour without any animation
            },
            showProgress: 'bottom'
        });

Top Progressbar `showProgress: 'top'`

$('body')
          .toast({
            title: 'Welcome to a fresh Toast',
            displayTime: 4000,
            message: 'I am a toast, nice to meet you! this is a lot of text and should be displayed properly',
            class: 'error',
            className: {
                toast: 'ui floating toast',
            },
            showProgress: 'top'
        });

Close Icon `closeIcon: true`

Difference to usual toast: It's only closable by close-icon instead of clicking anywhere in the toast. cursor changed accordingly

Individual Icon `showIcon: 'your icon name'`

Using a string instead of true for showIcon will use that string for the icon display. Using true remains the old behaviour (displaying the appropriate icon which matches the class)

showIcon: 'accessible'

showIcon: 'microphone'

ColinFrick · 2018-09-28T13:25:24Z

Thanks for the pull request. Could you change the base branch to beta?

lubber-de · 2018-09-28T13:36:39Z

Thanks for the pull request. Could you change the base branch to beta?

Done ;)

y0hami · 2018-09-28T14:15:03Z

@lubber-de Great PR 👍, I will take a look and do some testing when I get some time.

prudho · 2018-09-28T14:26:47Z

Wow, this is a great PR ! Actually you did a lot of enhancements and fixes I was willing to do the next week 😄 As there's some big changes, I'll take the time to heavily test it, and I will take some time to do so. But from what I can see now, you seem to have done a great job !

src/definitions/modules/toast.less

…oast_enhancements

src/definitions/modules/toast.less

prudho · 2018-10-01T08:02:58Z

dist/components/toast.css

+}
+
+.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);


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

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' }

Changed / added accordingly by commit f49a63c.

…w icon only, if class exists

prudho

Alright, this looks good to me now !

Thank you for beeing comprehensive and patient. The toast is my first FUI module and I want it to be evolutive and perfect 😄

ColinFrick

I can't get the css to build after applying the patch:
'variable @floatingBoxShadow is undefined in file toast.less
after fixing that:
'variable @activePulseDuration is undefined in file toast.less

Sadly you can't use variables from other modules/elements that easily.

Rendering different sized toasts results in a progress bar outside of the the smaller toasts:

I just executed all three examples (from the description) at the same time.

src/themes/default/modules/toast.variables

…attached, made compact an option, fixed alignments, fixed responsiveness margins, removed unused variables

lubber-de · 2018-10-04T12:56:07Z

Meanwhile, while you are testing my latest commit 😉 :
What do you think about having the option "showProgress" support either false or 'top' or 'bottom' (instead of only true/false) as an addition to the current only possibility to use a top progressbar by defining className: {progress:'ui top attached active progress'} ?
I think showProgress: 'top' is easier to use (and even less needed code if we maybe set showProgress:'bottom' to default.) If needed one can still use an own className definition.

y0hami · 2018-10-04T12:58:55Z

@lubber-de I totally agree with this. I think it should be showProgress but default to false but allow false, true, 'top' and 'bottom'

ColinFrick · 2018-10-04T12:59:12Z

@lubber-de would make sense. Definitely one thing I didn't really like of the original commit.

y0hami · 2018-10-04T16:25:05Z

@etshy Good point. I said to add the boolean values so it would break any changes but we haven't released this yet so what is there to break 🤔 so we could just have 'top' and 'bottom'

lubber-de · 2018-10-04T16:27:42Z

@etshy
Yes, it's actually not a difference right now. What i could add is to explicitely set bottom and remove top when showProgress: 'bottom' has been defined. Then the difference to true would be that true simply uses the given settings.className.progress value without any change. Of course, by default this is also 'ui bottom attached active progress', but could be changed to something different by the user at runtime and toast will leave that untouched then. 🤔

etshy · 2018-10-04T16:52:38Z

Options should false (to not show the progress, ofc), 'top' and 'bottom' I guess.

@lubber-de I didn't take a look to the code or event the toast features yet so I don't really know what is settings.className.progress. A string to set classes to the progress bar ?
If yes, in the case you use showProgress: true, and don't specify a top or bottom class in settings.className.progress what happen ?

IMO, top or bottom should always be here so the 'top' or 'bottom' value is mandatory, either in settings.className.progress or in showProgress.

Let me know if I misunderstood something here.

y0hami · 2018-10-04T17:03:54Z

@lubber-de @etshy I can see where you both are coming from but I think we should only have false, 'top' and 'bottom' it may mean a little more code but at the end of the day, it should be straightforward and easy to understand as a user.

default:
showProgress: false

available:
showProgress: false|'top'|'bottom'

lubber-de · 2018-10-04T17:09:18Z

Alright, but if somebody sets this to true we should raise an exception on the console then?

lubber-de · 2018-10-04T17:18:45Z

I think, I simply add the string value of showProgress to the div and if it's any boolean value, the progress won't be rendered completely. This way the user would also be able to add more classes to the progress if needed

etshy · 2018-10-04T17:34:32Z

@hammy2899 that's how I thought it would be better, just false, 'top' and 'bottom'.

I was just asking, IF there is a true value, how it will be handled.

I guees you could raise an exception if true or any others value is set, and not show anything ?
I don't know if it's possible to do that with the current code though.

Thanks a lot to work so much on this 👍

…ttom' only

…oast_enhancements

ColinFrick · 2018-10-05T13:46:24Z

@lubber-de is this ready for review now, or do you have more changes planned?

lubber-de · 2018-10-05T13:48:38Z

@ColinFrick It's ready now. I have more additions in progress, but this can be a separate PR then. I won't touch this branch anymore unless you'll need more fixes/changes

prudho

LGTM

y0hami · 2018-10-10T17:51:14Z

If someone has some time and could do the docs this could be in our next release.

Toast progressbar, closeEasing, Bugfixing, message support

0653860

ColinFrick requested review from y0hami, ColinFrick and prudho September 28, 2018 13:22

ColinFrick added type/feat Any feature requests or improvements lang/css Anything involving CSS lang/javascript Anything involving JavaScript state/awaiting-docs Pull requests which need doc changes/additions state/awaiting-reviews Pull requests which are waiting for reviews labels Sep 28, 2018

lubber-de changed the base branch from master to beta September 28, 2018 13:36

prudho reviewed Sep 28, 2018

View reviewed changes

src/definitions/modules/toast.less Outdated Show resolved Hide resolved

Merge branch 'beta' of https://github.com/fomantic/Fomantic-UI into t…

4499e46

…oast_enhancements

prudho reviewed Oct 1, 2018

View reviewed changes

src/definitions/modules/toast.less Show resolved Hide resolved

prudho reviewed Oct 1, 2018

View reviewed changes

lubber-de added 4 commits October 1, 2018 10:19

Make opacity an option (default 1), removed flat class

00eb26a

Fixed floating shadow, added hoverfloating

f49a63c

Support hoverfloating for message aswell

6a22d11

Always render parent 'text-box', support 'top attached progress', sho…

ccf7ad0

…w icon only, if class exists

prudho previously approved these changes Oct 1, 2018

View reviewed changes

ColinFrick requested changes Oct 1, 2018

View reviewed changes

ColinFrick reviewed Oct 1, 2018

View reviewed changes

src/themes/default/modules/toast.variables Show resolved Hide resolved

Fixed full progressbar support for mixed toasts/messages/compact/top …

7266b63

…attached, made compact an option, fixed alignments, fixed responsiveness margins, removed unused variables

lubber-de dismissed prudho’s stale review via 7266b63 October 2, 2018 17:29

lubber-de added 4 commits October 4, 2018 21:36

Added closeIcon option, changed showProgress to allow false|'top'|'bo…

aaac23e

…ttom' only

less variables instead of fixed values

ae61e96

Support string for showIcon to use individual icons

c4c35c6

Merge branch 'beta' of https://github.com/fomantic/Fomantic-UI into t…

85bfe96

…oast_enhancements

ColinFrick added this to the 2.6.x milestone Oct 5, 2018

fixed syntax...

91dff06

ColinFrick requested review from prudho and ColinFrick October 5, 2018 19:03

lubber-de mentioned this pull request Oct 8, 2018

[Toast] Action Text #160

Closed

prudho approved these changes Oct 9, 2018

View reviewed changes

ColinFrick approved these changes Oct 10, 2018

View reviewed changes

y0hami removed the state/awaiting-reviews Pull requests which are waiting for reviews label Oct 10, 2018

y0hami merged commit 409e533 into fomantic:beta Oct 10, 2018

lubber-de mentioned this pull request Oct 10, 2018

[Toast] New enhancements fomantic/Fomantic-UI-Docs#30

Merged

lubber-de deleted the toast_enhancements branch October 10, 2018 22:10

lubber-de added state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo and removed state/awaiting-docs Pull requests which need doc changes/additions labels Oct 15, 2018

y0hami mentioned this pull request Oct 17, 2018

2.6.3 Release #184

Merged

lubber-de modified the milestones: 2.6.x, 2.6.3 Sep 2, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lubber-de commented Sep 28, 2018 •

edited

Loading

ColinFrick commented Sep 28, 2018

lubber-de commented Sep 28, 2018

y0hami commented Sep 28, 2018

prudho commented Sep 28, 2018

prudho Oct 1, 2018

lubber-de Oct 1, 2018

lubber-de Oct 1, 2018

prudho left a comment

ColinFrick left a comment

lubber-de commented Oct 4, 2018

y0hami commented Oct 4, 2018

ColinFrick commented Oct 4, 2018

y0hami commented Oct 4, 2018

lubber-de commented Oct 4, 2018

etshy commented Oct 4, 2018

y0hami commented Oct 4, 2018

lubber-de commented Oct 4, 2018

lubber-de commented Oct 4, 2018

etshy commented Oct 4, 2018

ColinFrick commented Oct 5, 2018

lubber-de commented Oct 5, 2018

prudho left a comment

y0hami commented Oct 10, 2018

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

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

Conversation

lubber-de commented Sep 28, 2018 • edited Loading

Toast Enhancements

Added

Changed

Fixed

Examples

Progressbar showProgress: 'bottom'

Progressbar decreasing progressUp: false

Animated stacking on close transition: closeEasing = 'easeOutBounce'

Top Progressbar showProgress: 'top'

Close Icon closeIcon: true

Individual Icon showIcon: 'your icon name'

ColinFrick commented Sep 28, 2018

lubber-de commented Sep 28, 2018

y0hami commented Sep 28, 2018

prudho commented Sep 28, 2018

prudho Oct 1, 2018

Choose a reason for hiding this comment

lubber-de Oct 1, 2018

Choose a reason for hiding this comment

lubber-de Oct 1, 2018

Choose a reason for hiding this comment

prudho left a comment

Choose a reason for hiding this comment

ColinFrick left a comment

Choose a reason for hiding this comment

lubber-de commented Oct 4, 2018

y0hami commented Oct 4, 2018

ColinFrick commented Oct 4, 2018

y0hami commented Oct 4, 2018

lubber-de commented Oct 4, 2018

etshy commented Oct 4, 2018

y0hami commented Oct 4, 2018

lubber-de commented Oct 4, 2018

lubber-de commented Oct 4, 2018

etshy commented Oct 4, 2018

ColinFrick commented Oct 5, 2018

lubber-de commented Oct 5, 2018

prudho left a comment

Choose a reason for hiding this comment

y0hami commented Oct 10, 2018

lubber-de commented Sep 28, 2018 •

edited

Loading

Progressbar `showProgress: 'bottom'`

Progressbar decreasing `progressUp: false`

Animated stacking on close `transition: closeEasing = 'easeOutBounce'`

Top Progressbar `showProgress: 'top'`

Close Icon `closeIcon: true`

Individual Icon `showIcon: 'your icon name'`