discourse/app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs
Kris 8c22831672
UX: update appropriate btn-flat instances to btn-transparent (#25945)
With the adjustments of `btn-transparent` in https://github.com/discourse/discourse/pull/24666, there are more buttons that could use this class instead of `btn-flat`. This mostly relates to `x` close buttons, but also includes composer and chat toggles.

The primary difference between these styles is that `btn-transparent` never has a background, where `btn-flat` may have a hover or focus background.
2024-02-29 11:47:07 +01:00

57 lines
1.6 KiB
Plaintext

import { concat, fn, hash } from "@ember/helper";
import DButton from "discourse/components/d-button";
import concatClass from "discourse/helpers/concat-class";
import icon from "discourse-common/helpers/d-icon";
import or from "truth-helpers/helpers/or";
const DDefaultToast = <template>
<div
class={{concatClass
"fk-d-default-toast"
(concat "-" (or @data.theme "default"))
}}
...attributes
>
{{#if @data.icon}}
<div class="fk-d-default-toast__icon-container">
{{icon @data.icon}}
</div>
{{/if}}
<div class="fk-d-default-toast__main-container">
<div class="fk-d-default-toast__texts">
{{#if @data.title}}
<div class="fk-d-default-toast__title">
{{@data.title}}
</div>
{{/if}}
{{#if @data.message}}
<div class="fk-d-default-toast__message">
{{@data.message}}
</div>
{{/if}}
</div>
{{#if @data.actions}}
<div class="fk-d-default-toast__actions">
{{#each @data.actions as |toastAction|}}
{{#if toastAction.action}}
<DButton
@icon={{toastAction.icon}}
@translatedLabel={{toastAction.label}}
@action={{fn toastAction.action (hash data=@data close=@close)}}
class={{toastAction.class}}
tabindex="0"
/>
{{/if}}
{{/each}}
</div>
{{/if}}
</div>
<div class="fk-d-default-toast__close-container">
<DButton class="btn-transparent" @icon="times" @action={{@close}} />
</div>
</div>
</template>;
export default DDefaultToast;