mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 20:35:21 +08:00
2a10ea0e3f
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":
- menu
- tooltip
- toast
## Tooltips
### Component
Simple cases can be express with an API similar to DButton:
```hbs
<DTooltip
@Label={{i18n "foo.bar"}}
@ICON="check"
@content="Something"
/>
```
More complex cases can use blocks:
```hbs
<DTooltip>
<:trigger>
{{d-icon "check"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
Something
</:content>
</DTooltip>
```
### Service
You can manually show a tooltip using the `tooltip` service:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();
// you can also just close any open tooltip through the service
this.tooltip.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const tooltipInstance = this.tooltip.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Menus
Menus are very similar to tooltips and provide the same kind of APIs:
### Component
```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</DMenu>
```
They also support blocks:
```hbs
<DMenu>
<:trigger>
{{d-icon "plus"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</:content>
</DMenu>
```
### Service
You can manually show a menu using the `menu` service:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();
// you can also just close any open tooltip through the service
this.menu.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const menuInstance = this.menu.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Toasts
Interacting with toasts is made only through the `toasts` service.
A default component is provided (DDefaultToast) and can be used through dedicated service methods:
- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });
```javascript
this.toasts.success({
data: {
title: "Foo",
message: "Bar",
actions: [
{
label: "Ok",
class: "btn-primary",
action: (componentArgs) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + componentArgs.data.title);
componentArgs.close();
},
}
]
},
});
```
You can also provide your own component:
```javascript
this.toasts.show(MyComponent, {
autoClose: false,
class: "foo",
data: { baz: 1 },
})
```
Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
99 lines
3.0 KiB
YAML
99 lines
3.0 KiB
YAML
en:
|
|
js:
|
|
styleguide:
|
|
title: "Styleguide"
|
|
welcome: "To get started, choose a section from the menu on the left."
|
|
|
|
categories:
|
|
atoms: Atoms
|
|
molecules: Molecules
|
|
organisms: Organisms
|
|
|
|
sections:
|
|
typography:
|
|
title: "Typography"
|
|
example: "Welcome to Discourse"
|
|
paragraph: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
date_time_inputs:
|
|
title: "Date/Time inputs"
|
|
menus:
|
|
title: "Menus"
|
|
toasts:
|
|
title: "Toasts"
|
|
font_scale:
|
|
title: "Font System"
|
|
colors:
|
|
title: "Colors"
|
|
icons:
|
|
title: "Icons"
|
|
full_list: "See the full list of Font Awesome Icons"
|
|
input_fields:
|
|
title: "Input Fields"
|
|
buttons:
|
|
title: "Buttons"
|
|
dropdowns:
|
|
title: "Dropdowns"
|
|
categories:
|
|
title: "Categories"
|
|
bread_crumbs:
|
|
title: "Bread Crumbs"
|
|
navigation:
|
|
title: "Navigation"
|
|
navigation_bar:
|
|
title: "Navigation Bar"
|
|
navigation_stacked:
|
|
title: "Navigation Stacked"
|
|
categories_list:
|
|
title: "Categories List"
|
|
topic_link:
|
|
title: "Topic Link"
|
|
topic_list_item:
|
|
title: "Topic List Item"
|
|
topic_statuses:
|
|
title: "Topic Statuses"
|
|
topic_list:
|
|
title: "Topic List"
|
|
basic_topic_list:
|
|
title: "Basic Topic List"
|
|
footer_message:
|
|
title: "Footer Message"
|
|
signup_cta:
|
|
title: "Signup CTA"
|
|
topic_timer_info:
|
|
title: "Topic Timers"
|
|
topic_footer_buttons:
|
|
title: "Topic Footer Buttons"
|
|
topic_notifications:
|
|
title: "Topic Notifications"
|
|
post:
|
|
title: "Post"
|
|
topic_map:
|
|
title: "Topic Map"
|
|
site_header:
|
|
title: "Site Header"
|
|
suggested_topics:
|
|
title: "Suggested Topics"
|
|
post_menu:
|
|
title: "Post Menu"
|
|
modal:
|
|
title: "Modal"
|
|
header: "Modal Title"
|
|
footer: "Modal Footer"
|
|
user_about:
|
|
title: "User About Box"
|
|
header_icons:
|
|
title: "Header Icons"
|
|
spinners:
|
|
title: "Spinners"
|
|
empty_state:
|
|
title: "Empty State"
|
|
tooltips:
|
|
title: "Tooltips"
|
|
description: "Description"
|
|
header: "Header"
|
|
hover_to_see: "Hover to see a tooltip"
|
|
char_counter:
|
|
title: "Character Counter"
|
|
placeholder: "Enter your text here..."
|
|
|