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

Jump to bottom

[Toast] Build from html #280

Closed
hakeem86 opened this issue Dec 2, 2018 · 2 comments
Closed

[Toast] Build from html #280

hakeem86 opened this issue Dec 2, 2018 · 2 comments
Assignees
@lubber-de
Labels
lang/css Anything involving CSS lang/javascript Anything involving JavaScript type/feat Any feature requests or improvements
Milestone
2.8.1

Comments

@hakeem86
Copy link

hakeem86 commented Dec 2, 2018 •
edited
Loading

Description

It would be great if it was possible to build toast from HTML.. Would be useful when you have POST some data to the server and you want to show an error/info toast message due to user input error etc.

Example

Maybe something like this or another syntax that make more sense.

<div class="toast success compact visible" data-position="top left" data-displayTime="5000">
    <div class="icon info ui toast">
        <i class="info icon"></i>
        <div class="content">
            <div>Hello world</div>
        </div>
    </div>
</div>

$('.toast').toast();
@lubber-de lubber-de self-assigned this Dec 2, 2018
@lubber-de lubber-de added the type/feat Any feature requests or improvements label Dec 2, 2018
@lubber-de
Copy link
Member

We are already working on this feature 😉 Stay tuned.

@lubber-de lubber-de added this to the 2.7.x milestone Dec 2, 2018
@lubber-de lubber-de added lang/css Anything involving CSS lang/javascript Anything involving JavaScript labels Dec 2, 2018
@lubber-de lubber-de modified the milestones: 2.7.x, 2.8.x Sep 1, 2019
@lubber-de lubber-de mentioned this issue Oct 28, 2019
Merged
@lubber-de
Copy link
Member

Finally possible by #1129

@lubber-de lubber-de modified the milestones: 2.8.x, 2.8.0 Oct 28, 2019
@lubber-de lubber-de added the state/has-pr An issue which has a related PR open label Oct 28, 2019
y0hami pushed a commit that referenced this issue Nov 13, 2019
@lubber-de
feat(toast): add actions, behaviors and other variations
df93795 
BREAKING CHANGE: contains some breaking changes to the core logic and settings.

New Features
  - Image support just like icon
  - displayTime 'auto' calculates time by amount of words
  - Progressbars can have its own individual color now 
  - A toast can be created out of existing dom nodes or markup now $('.ui.toast').toast() with clone support;
  - Toast is pausable on hovering to be able to mark/copy text or just hold on to have more time to read it
  - closeIcon can be displayed to the left 
  - Support for `card` and `message` layouts

Behaviors
  - get or check for existing toasts
  - stop/start display timer
  - get the remaining Time

Actions
  - a toast can have a configurable amount of action buttons
  - support for default button selectors as in modal
  - displayable at the bottom of the toast as in modal or full width attached to the modal
  - also displayable to the right

Changed defaults (aka breaking changes)
  - Toast is floating (aka has a shadow)
  - Progressbar decreases
  - Close-Easing is smoother instead of bouncy (still available for those who like it)
  - Icon is centered vertically
  - Toast display in neutral white background without icon (looks good, as it has a shadow now)
  - A possible given title is a bit larger than before (by using standard "ui header")
  - floating and hoverfloating moved from toast to toast-box to cover the whole toast including possible attached actions

Core
  - Changed progressbar from css transition to css animation to be able to pause scrollbar on hover via css only
  - Return instance of created toast even when created dynamically via body so you can interact with and reference it via javascript afterwards
  - Support behaviors because of instantiation
  - Optimized LESS Code usage, refactored JS

Closes #160 #280 #315 #316 #566
@lubber-de lubber-de added tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build and removed state/has-pr An issue which has a related PR open labels Nov 13, 2019
@y0hami y0hami closed this as completed Nov 14, 2019
@y0hami y0hami removed the tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build label Nov 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lubber-de lubber-de

Labels
lang/css Anything involving CSS lang/javascript Anything involving JavaScript type/feat Any feature requests or improvements
Projects
None yet
Milestone
2.8.1
Development

No branches or pull requests
3 participants
@hakeem86 @y0hami @lubber-de