github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 14:45:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
0623ac684a
discourse/vendor/assets/svg-icons/discourse-additional.svg
Joffrey JAFFEUX 0623ac684a
DEV: FloatKit (#23541) 
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension.

---

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>
2023-09-12 15:50:26 +02:00

69 lines
9.4 KiB
XML
Raw Blame History

<?xml version="1.0" encoding="UTF-8"?>
<!--
Additional SVG icons
-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!-- "compress" icon from https://github.com/encharm/Font-Awesome-SVG-PNG -->
<symbol id="discourse-compress" viewBox="0 0 1792 1792">
<path d="M896 960v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45zm755-672q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23z"></path>
</symbol>
<!-- "expand" icon from https://github.com/encharm/Font-Awesome-SVG-PNG -->
<symbol id="discourse-expand" viewBox="0 0 1792 1792">
<path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"></path>
</symbol>
<!-- "Discourse Bookmark Clock" is a Discourse derivative of https://fontawesome.com/icons/bookmark -->
<symbol id="discourse-bookmark-clock" viewBox="0 0 536 512">
<path d="M215.86 143.33A168.09 168.09 0 01296 0H48A48 48 0 000 48v464l192-112 192 112V315.53c-94-.04-168.14-79.33-168.14-172.2z M392.45 0a144 144 0 10144 144 143.91 143.91 0 00-144-144zm64 150.3a9.77 9.77 0 01-9.7 9.7h-60.6a9.77 9.77 0 01-9.7-9.7V73.7a9.77 9.77 0 019.7-9.7h12.6a9.77 9.77 0 019.7 9.7V128h38.3a9.77 9.77 0 019.7 9.7z"/>
</symbol>
<!-- "Discourse Bell Exclamation" is a Discourse derivative of https://fontawesome.com/icons/bell and https://fontawesome.com/icons/exclamation -->
<symbol id='discourse-bell-exclamation' viewBox="0 0 448 512">
<path d="M439.4 362.3c-19.3-20.8-55.5-52-55.5-154.3 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8C118.6 68.1 64.1 130.3 64.1 208c0 102.3-36.2 133.5-55.5 154.3-6 6.4-8.6 14.1-8.6 21.7.1 16.4 13 32 32.1 32h383.8c19.1 0 32-15.6 32.1-32 .1-7.6-2.6-15.3-8.6-21.7zM201.7 116.6h44.6c6.5 0 11.7 5.5 11.4 12l-6.5 123.8c-.3 6.1-5.3 10.9-11.4 10.9h-31.6c-6.1 0-11.1-4.8-11.4-10.9l-6.5-123.8c-.3-6.6 4.9-12 11.4-12zM224 361.3c-18.6 0-33.7-15.1-33.7-33.7s15.1-33.7 33.7-33.7 33.7 15.1 33.7 33.7-15.1 33.7-33.7 33.7zM224 512c35.3 0 64-28.7 64-64H160c0 35.3 28.7 64 64 64z"/>
</symbol>
<!-- Discourse Bell One" is a Discourse derivative of https://fontawesome.com/icons/bell -->
<symbol id='discourse-bell-one' viewBox="0 0 448 512">
<path d="M224 512c35.3 0 64-28.7 64-64H160c0 35.3 28.7 64 64 64zM439.4 362.3c-19.3-20.8-55.5-52-55.5-154.3 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8C118.6 68.1 64.1 130.3 64.1 208c0 102.3-36.2 133.5-55.5 154.3-6 6.4-8.6 14.1-8.6 21.7.1 16.4 13 32 32.1 32h383.8c19.1 0 32-15.6 32.1-32 .1-7.6-2.6-15.3-8.6-21.7zm-145.2-28c0 8.6-7 15.5-15.5 15.5h-97c-8.6 0-15.5-7-15.5-15.5v-15.8c0-8.6 7-15.5 15.5-15.5h27.1V192.5l-5.1 3.1c-6 6.1-15.9 6.2-22 .1l-11.2-11.1c-6.1-6-6.2-15.9-.1-22l31.6-31.9c3.2-3.2 7.4-4.7 11.5-4.6h26.6c8.6 0 11.5 7 11.5 15.5v161.3h27.1c8.6 0 15.5 7 15.5 15.5v15.9z"/>
</symbol>
<!-- "Discourse Bell Slash" is a version of https://fontawesome.com/icons/bell-slash?style=regular that has been modified to be more consistent with the width of other bell icons -->
<symbol id='discourse-bell-slash' viewBox="0 0 448 512">
<path d="M442.7 396.2L36.5 70.7c-6.9-5.5-17-4.4-22.5 2.5L4 85.6c-5.5 6.9-4.4 17 2.5 22.5l406.2 325.5c6.9 5.5 17 4.4 22.5-2.5l10-12.5c5.5-6.9 3.7-17.7-3.2-23.2l.7.8zM67.5 368c16.7-22 34.5-55.8 41.4-110.6l-45.5-35.6C60.2 312.6 27 342.5 8.6 362.3 2.6 368.7 0 376.4 0 384c.1 16.4 13 32 32.1 32h279.7l-61.4-48H67.5zM224 96c61.9 0 112 50.1 112 112 0 .2-.1.4-.1.6 0 16.8 1.2 31.8 2.8 45.7l59.5 46.5c-8.3-22.1-14.3-51.5-14.3-92.9 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8c-26 5.4-49.4 16.9-69.1 32.7l38.2 29.8C179 103.2 200.6 96 224 96zm0 416c35.3 0 64-28.6 64-64H160c0 35.4 28.7 64 64 64z"/>
</symbol>
<!-- "Discourse Amazon" icon from svgrepo.com, with a brand-colored arrow -->
<symbol id='discourse-amazon' viewBox="0 0 291 291">
<path style="fill:#ff8a24;" d="M252.089,239.901c-120.033,57.126-194.528,9.331-242.214-19.7c-2.95-1.83-7.966,0.428-3.614,5.426 c15.886,19.263,67.95,65.692,135.909,65.692c68.005,0,108.462-37.107,113.523-43.58 C260.719,241.321,257.169,237.78,252.089,239.901z M285.8,221.284c-3.223-4.197-19.6-4.98-29.906-3.714 c-10.324,1.229-25.818,7.538-24.471,11.325c0.692,1.42,2.103,0.783,9.195,0.146c7.11-0.71,27.029-3.223,31.18,2.203 c4.17,5.462-6.354,31.49-8.275,35.687c-1.857,4.197,0.71,5.28,4.197,2.485c3.441-2.795,9.668-10.032,13.847-20.274 C285.718,238.845,288.249,224.479,285.8,221.284z"/>
<path d="M221.71,149.219V53.557C221.71,37.125,205.815,0,148.689,0C91.572,0,61.184,35.696,61.184,67.85 l47.74,4.27c0,0,10.633-32.136,35.313-32.136s22.987,19.992,22.987,24.316v20.784C135.607,86.149,57.096,95.18,57.096,161.382 c0,71.191,89.863,74.177,119.332,28.167c1.138,1.866,2.431,3.696,4.051,5.408c10.843,11.398,25.308,24.981,25.308,24.981 l36.852-36.415C242.658,183.513,221.71,167.071,221.71,149.219z M112.511,152.578c0-30.579,32.764-36.779,54.722-37.507v26.319 C167.224,193.527,112.511,185.634,112.511,152.578z"/>
</symbol>
<symbol id="discourse-emojis" viewBox="0 0 216.3 152.3">
<path d="M121.1 70.7c1.9 2 5.1 2.1 7.2.2l.2-.2 31.2-32.2c9.1-9.4 8.6-24.9-1.6-33.5-8.8-7.5-22-6.2-30.1 2.2l-3.2 3.3-3.2-3.3c-8.1-8.4-21.3-9.7-30.1-2.2-10.1 8.6-10.7 24.2-1.6 33.5l31.2 32.2zM53.5 45.3C23.9 45.3 0 69.2 0 98.8s23.9 53.5 53.5 53.5 53.5-24 53.5-53.5-23.9-53.5-53.5-53.5zm18.8 24.6c5.5 0 9.9 4.4 9.9 9.9s-4.4 9.9-9.9 9.9-9.9-4.4-9.9-9.9c-.1-5.5 4.4-9.9 9.9-9.9zm-38.2 0c5.5 0 9.9 4.4 9.9 9.9s-4.4 9.9-9.9 9.9-9.9-4.4-9.9-9.9 4.4-9.9 9.9-9.9zm52.4 45.4c-8.2 9.8-20.2 15.5-33.1 15.5s-24.9-5.6-33.1-15.5c-3.9-4.7 3.2-10.6 7.1-5.9 6.5 7.7 15.9 12.2 26 12.2s19.5-4.4 26-12.2c3.8-4.7 10.9 1.2 7.1 5.9zm129.8-22.5c0-6.4-6.3-9.5-13.3-9.5h-24c1.5-6 10.3-13.8 10.3-22.8 0-15.5-10.1-17.2-15.2-17.2-4.3 0-6.2 8.3-7.2 12.2-1.1 4.6-2.2 9.3-5.4 12.4-6.7 6.8-10.3 15.3-18.4 23.5-.7-1.8-2.6-3.1-4.7-3.1h-10.7c-2.8 0-5.1 2.2-5.1 4.9V142c0 2.7 2.3 4.9 5.1 4.9h10.7c2.8 0 5.1-2.2 5.1-4.9v-.9c.3.1.6.2.9.2 3.3.1 7.8 1.9 11.1 3.4 6.7 3 15.1 6.7 25.3 6.7h.6c9 0 19.7-.1 24-6.3 1.8-2.5 2.7-4.4.5-9.9 5-3 7-10 1-15 8-5 8-13 1-17 6.1-1.9 8.5-6.6 8.4-10.4z"></path>
</symbol>
<!-- Rounded svg arrow for float-kit, allows to change border color -->
<symbol id="tippy-rounded-arrow" class="tippy-rounded-arrow" viewBox="0 0 16 6">
<path fill="var(--float-kit-arrow-stroke-color)" class="svg-arrow" d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"/>
<path fill="var(--float-kit-arrow-fill-color)" class="svg-content" d="m0 7s2 0 5-4c1-1 2-2 3-2 1 0 2 1 3 2 3 4 5 4 5 4h-16z"/>
</symbol>
<symbol id='discourse-other-tab' viewBox="0 0 114 113">
<g clip-path="url(#clip0_2925_742)">
<rect x="8" y="8" width="44" height="44" rx="5"/>
<rect x="8" y="61" width="44" height="44" rx="5"/>
<rect x="62" y="61" width="44" height="44" rx="5"/>
<rect width="44" height="43.9967" rx="5" transform="matrix(0.705436 -0.708774 0.705436 0.708774 53 30)"/>
</g>
<defs>
<clipPath id="clip0_2925_742">
<rect width="114" height="113"/>
</clipPath>
</defs>
</symbol>
<symbol id="discourse-threads" viewBox="0 0 16 17" fill-rule="evenodd" clip-rule="evenodd">
<path d="M5 0L4.57143 3H1V5H4.28571L3.71429 9H0V11H3.42857L3 14L4.9799 14.2828L5.44888 11H7V9H5.73459L6.30602 5H11.2857L11 7H13.0203L13.306 5H16V3H13.5917L13.9799 0.282843L12 0L11.5714 3H6.59173L6.9799 0.282843L5 0ZM8 13.5V9C8 8.44772 8.44771 8 9 8H15C15.5523 8 16 8.44771 16 9V13.5C16 14.0523 15.5523 14.5 15 14.5H12.1194C11.5042 15.2014 10.396 16.3544 10.0417 16C9.97944 15.9223 9.99982 15.0667 10.0206 14.5H9C8.44771 14.5 8 14.0523 8 13.5Z"/>
</symbol>
<!-- Temporary addition given it's a high-profile icon. Can be removed when we upgrade to Font Awesome 6.4.1 -->
<symbol id="temporary-twitter-x" viewBox="0 0 512 512">
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
</symbol>
<symbol id="bookmark-delete" viewBox="0 0 16 20">
<path id="icon-bookmark__main" d="M0 20V5.5C0 4.6875 0.65625 4 1.5 4H10.5C11.3125 4 12 4.6875 12 5.5V20L6 16.5L0 20Z" fill="var(--tertiary)"/>
<circle id="icon-bookmark__delete-x" cx="11.5" cy="6.5" r="3.5" fill="var(--secondary)"/>
<path id="icon-bookmark__delete-bg" d="M11 1.40625C13.6758 1.40625 15.8438 3.57422 15.8438 6.25C15.8438 8.92578 13.6758 11.0938 11 11.0938C8.32422 11.0938 6.15625 8.92578 6.15625 6.25C6.15625 3.57422 8.32422 1.40625 11 1.40625ZM13.3633 7.53906L12.0938 6.25L13.3633 4.98047C13.4609 4.90234 13.4609 4.74609 13.3633 4.64844L12.6016 3.88672C12.5039 3.78906 12.3477 3.78906 12.2695 3.88672L11 5.15625L9.73047 3.88672C9.63281 3.78906 9.47656 3.78906 9.39844 3.88672L8.61719 4.64844C8.51953 4.74609 8.51953 4.90234 8.61719 4.98047L9.90625 6.25L8.61719 7.51953C8.51953 7.61719 8.51953 7.77344 8.61719 7.85156L9.37891 8.63281C9.47656 8.73047 9.63281 8.73047 9.71094 8.63281L11 7.34375L12.2695 8.63281C12.3477 8.73047 12.5039 8.73047 12.6016 8.63281L13.3633 7.87109C13.4609 7.77344 13.4609 7.61719 13.3633 7.53906Z" fill="var(--danger)"/>
</symbol>
</svg>
Reference in New Issue View Git Blame Copy Permalink