github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 02:41:13 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: FloatKit (#23312)

Browse Source 
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

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>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually 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 are very similar to tooltips and provide the same kind of APIs:

```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>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually 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 }
  }
)
```

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>
This commit is contained in:
Joffrey JAFFEUX
2023-09-12 15:06:51 +02:00
committed by GitHub
parent d9238fb01b
commit abcdd8d367
166 changed files with 5360 additions and 2489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
plugins/discourse-local-dates/spec/system/local_dates_spec.rb
View File

@ -31,44 +31,46 @@ describe "Local dates", type: :system do
expect(topic_page).to have_content(topic.title)
post_dates = topic_page.find_all("span[data-date]")
# Single date in a paragraph.
#
post_dates[0].click
tippy_date = topic_page.find(".tippy-content .current .date-time")
expect(tippy_date).to have_text("#{formatted_date_for_year(12, 15)}\n2:19 PM", exact: true)
find("span[data-date]:nth-of-type(1)").click
expect(page.find("[data-content] .current .date-time")).to have_text(
"#{formatted_date_for_year(12, 15)}\n2:19 PM",
exact: true,
)
page.send_keys(:escape)
# Two single dates in the same paragraph.
#
post_dates[1].click
tippy_date = topic_page.find(".tippy-content .current .date-time")
find("span[data-date]:nth-of-type(2)").click
expect(page.find("[data-content] .current .date-time")).to have_text(
"#{formatted_date_for_year(12, 15)}\n1:20 AM",
exact: true,
)
page.send_keys(:escape)
expect(tippy_date).to have_text("#{formatted_date_for_year(12, 15)}\n1:20 AM", exact: true)
post_dates[2].click
tippy_date = topic_page.find(".tippy-content .current .date-time")
expect(tippy_date).to have_text("#{formatted_date_for_year(12, 15)}\n2:40 AM", exact: true)
find("span[data-date]:nth-of-type(3)").click
expect(page.find("[data-content] .current .date-time")).to have_text(
"#{formatted_date_for_year(12, 15)}\n2:40 AM",
exact: true,
)
page.send_keys(:escape)
# Two date ranges in the same paragraph.
#
post_dates[3].click
tippy_date = topic_page.find(".tippy-content .current .date-time")
expect(tippy_date).to have_text(
find("span[data-date]:nth-of-type(4)").click
expect(page.find("[data-content] .current .date-time")).to have_text(
"#{formatted_date_for_year(12, 15)}\n11:25 AM → 12:26 AM",
exact: true,
)
page.send_keys(:escape)
post_dates[5].click
tippy_date = topic_page.find(".tippy-content .current .date-time")
expect(tippy_date).to have_text(
find("span[data-date]:nth-of-type(6)").click
expect(page.find("[data-content] .current .date-time")).to have_text(
"#{formatted_date_for_year(12, 22)} 11:57 AM → #{formatted_date_for_year(12, 23)} 11:58 AM",
exact: true,
)
page.send_keys(:escape)
end
end