github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-21 18:12:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Revert "DEV: FloatKit (#23541)" (#23549)

Browse Source 
This reverts commits

0623ac684a65f95ce4f5438ff47944b1dc2119f4
408e71e437ef8abf98f93e3449898bf906766b0e
a32fa3b9470dde0543fcee809f2abd1f219f7336

User tips were running into some issues.
This commit is contained in:
Joffrey JAFFEUX
2023-09-12 19:55:12 +02:00
committed by GitHub
parent 408e71e437
commit 85fddf58bc
166 changed files with 2490 additions and 5366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/styleguide/assets/javascripts/discourse/components/dummy-component.gjs
View File

@ -1,7 +0,0 @@
import Component from "@glimmer/component";
export default class DummyComponent extends Component {
<template>
My custom component with foo: {{@model.foo}}
</template>
}

103
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.hbs
View File

@ -1,103 +0,0 @@
<StyleguideExample @title="<Dmenu />">
<Styleguide::Component @tag="dmenu component">
<:sample>
<DMenu
@label={{this.label}}
@offset={{this.offset}}
@arrow={{this.arrow}}
@maxWidth={{this.maxWidth}}
@identifier={{this.identifier}}
@interactive={{this.interactive}}
@triggers={{this.triggers}}
@untriggers={{this.untriggers}}
@content={{this.content}}
>
{{this.content}}
</DMenu>
</:sample>
</Styleguide::Component>
<Styleguide::Component @tag="dmenu component">
<:sample>
<DMenu
@offset={{this.offset}}
@arrow={{this.arrow}}
@maxWidth={{this.maxWidth}}
@identifier={{this.identifier}}
@interactive={{this.interactive}}
@triggers={{this.triggers}}
@untriggers={{this.untriggers}}
@content={{this.content}}
>
<:trigger>
{{this.label}}
</:trigger>
<:content>
{{this.content}}
</:content>
</DMenu>
</:sample>
</Styleguide::Component>
<Styleguide::Component @tag="menu service">
<:sample>
<button
type="button"
class="btn btn-default"
id="menu-instance"
>{{this.label}}</button>
</:sample>
<:actions>
<DButton @action={{this.registerMenu}}>Register</DButton>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="menu service">
<:sample>
<button
type="button"
class="btn btn-default"
id="menu-instance-with-component"
>{{this.label}}</button>
</:sample>
<:actions>
<DButton @action={{this.registerMenuWithComponent}}>Register</DButton>
</:actions>
</Styleguide::Component>
<Styleguide::Controls>
<Styleguide::Controls::Row @name="Example label">
<Input @value={{this.label}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@content]">
<Input @value={{this.content}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@identifier]">
<Input @value={{this.identifier}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@offset]">
<Input @value={{this.offset}} @type="number" />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@triggers]">
<Input @value={{this.triggers}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@untriggers]">
<Input @value={{this.untriggers}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@maxWidth]">
<Input @value={{this.maxWidth}} @type="number" />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@interactive]">
<DToggleSwitch
@state={{this.interactive}}
{{on "click" this.toggleInteractive}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@arrow]">
<DToggleSwitch @state={{this.arrow}} {{on "click" this.toggleArrow}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@inline]">
<DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
</Styleguide::Controls::Row>
</Styleguide::Controls>
</StyleguideExample>

112
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.js
View File

@ -1,112 +0,0 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { tracked } from "@glimmer/tracking";
import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
import { htmlSafe } from "@ember/template";
import { MENU } from "float-kit/lib/constants";
export default class Menus extends Component {
@service menu;
@tracked label = "What is this?";
@tracked triggers = MENU.options.triggers;
@tracked untriggers = MENU.options.untriggers;
@tracked arrow = MENU.options.arrow;
@tracked inline = MENU.options.inline;
@tracked interactive = MENU.options.interactive;
@tracked maxWidth = MENU.options.maxWidth;
@tracked identifier;
@tracked offset = MENU.options.offset;
@tracked _content = htmlSafe("<ul><li>Hello</li><li>World!</li></ul>");
get content() {
return this._content;
}
set content(value) {
this._content = htmlSafe(value);
}
get templateCode() {
return `<DMenu
@label={{html-safe "${this.label}"}}
@content={{html-safe "${this.content}"}}
/>`;
}
get templateCodeContent() {
return `<DMenu @maxWidth={{100}}>
<:trigger>
${this.label}
</:trigger>
<:content>
${this.content}
</:content>
</DMenu>`;
}
get serviceCode() {
return `this.menu.register(
document.queryselector(".my-element"),
{ content: htmlSafe(${this.content}) }
);`;
}
get serviceCodeComponent() {
return `this.menu.register(
document.queryselector(".my-element"),
{ component: MyComponent, data: { foo: 1 } }
);`;
}
@action
toggleArrow() {
this.arrow = !this.arrow;
}
@action
toggleInteractive() {
this.interactive = !this.interactive;
}
@action
toggleInline() {
this.inline = !this.inline;
}
@action
registerMenu() {
this.menuInstance?.destroy();
this.menuInstance = this.menu.register(
document.querySelector("#menu-instance"),
this.options
);
}
@action
registerMenuWithComponent() {
this.menuInstanceWithComponent?.destroy();
this.menuInstanceWithComponent = this.menu.register(
document.querySelector("#menu-instance-with-component"),
{
...this.options,
component: DummyComponent,
data: { foo: 1 },
}
);
}
get options() {
return {
offset: this.offset,
arrow: this.arrow,
maxWidth: this.maxWidth,
identifier: this.identifier,
interactive: this.interactive,
triggers: this.triggers ?? ["click"],
untriggers: this.untriggers ?? ["click"],
content: this.content,
};
}
}

10
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/rich-tooltip.hbs Normal file
View File

@ -0,0 +1,10 @@
<StyleguideExample @title="<DTooltip>">
<DButton>
{{i18n "styleguide.sections.rich_tooltip.hover_to_see"}}
<DTooltip>
<h3>{{i18n "styleguide.sections.rich_tooltip.header"}}</h3>
{{i18n "styleguide.sections.rich_tooltip.description"}}
</DTooltip>
</DButton>
</StyleguideExample>

93
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.hbs
View File

@ -1,93 +0,0 @@
{{! template-lint-disable no-potential-path-strings }}
<StyleguideExample @title="Toasts service">
<Styleguide::Component @tag="default">
<:actions>
<DButton
@translatedLabel="Show default toast"
@action={{fn this.showToast "default"}}
/>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="success">
<:actions>
<DButton
@translatedLabel="Show success toast"
@action={{fn this.showToast "success"}}
/>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="warning">
<:actions>
<DButton
@translatedLabel="Show warning toast"
@action={{fn this.showToast "warning"}}
/>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="info">
<:actions>
<DButton
@translatedLabel="Show info toast"
@action={{fn this.showToast "info"}}
/>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="error">
<:actions>
<DButton
@translatedLabel="Show error toast"
@action={{fn this.showToast "error"}}
/>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="custom component">
<:actions>
<DButton
@translatedLabel="Show toast"
@action={{this.showCustomComponentToast}}
/>
</:actions>
</Styleguide::Component>
<Styleguide::Controls>
<Styleguide::Controls::Row @name="[@options.autoClose]">
<DToggleSwitch
@state={{this.autoClose}}
{{on "click" this.toggleAutoClose}}
/>
</Styleguide::Controls::Row>
{{#if this.autoClose}}
<Styleguide::Controls::Row @name="[@options.duration] ms">
<Input @value={{this.duration}} @type="number" />
</Styleguide::Controls::Row>
{{/if}}
<Styleguide::Controls::Row @name="[@options.class]">
<Input @value={{this.class}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row>
<b>Model props for default:</b>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@options.data.title]">
<Input @value={{this.title}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@options.data.message]">
<Input @value={{this.message}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@options.data.icon]">
<IconPicker
@name="icon"
@value={{this.icon}}
@options={{hash maximum=1}}
@onChange={{action (mut this.icon)}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="With an action">
<DToggleSwitch @state={{this.action}} {{on "click" this.toggleAction}} />
</Styleguide::Controls::Row>
</Styleguide::Controls>
</StyleguideExample>

70
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
View File

@ -1,70 +0,0 @@
import { action } from "@ember/object";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { inject as service } from "@ember/service";
import { TOAST } from "float-kit/lib/constants";
import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
export default class Toasts extends Component {
@service toasts;
@tracked title = "Title";
@tracked message = "Message";
@tracked duration = TOAST.options.duration;
@tracked autoClose = TOAST.options.autoClose;
@tracked class;
@tracked action = true;
@tracked icon;
@action
showCustomComponentToast() {
this.toasts.show({
duration: this.duration,
autoClose: this.autoClose,
class: this.class,
component: DummyComponent,
data: {
foo: 1,
},
});
}
@action
showToast(theme) {
const actions = [];
if (this.action) {
actions.push({
label: "Ok",
class: "btn-primary",
action: (args) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + args.data.title);
args.close();
},
});
}
this.toasts[theme]({
duration: this.duration,
autoClose: this.autoClose,
class: this.class,
data: {
title: this.title,
message: this.message,
icon: this.icon,
actions,
},
});
}
@action
toggleAction() {
this.action = !this.action;
}
@action
toggleAutoClose() {
this.autoClose = !this.autoClose;
}
}

95
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.hbs
View File

@ -1,95 +0,0 @@
<StyleguideExample @title="<DTooltip />">
<Styleguide::Component @tag="tooltip component">
<:sample>
<DTooltip
@label={{this.label}}
@offset={{this.offset}}
@arrow={{this.arrow}}
@maxWidth={{this.maxWidth}}
@identifier={{this.identifier}}
@interactive={{this.interactive}}
@triggers={{this.triggers}}
@untriggers={{this.untriggers}}
@content={{this.content}}
@inline={{this.inline}}
/>
</:sample>
</Styleguide::Component>
<Styleguide::Component @tag="tooltip component">
<:sample>
<DTooltip
@offset={{this.offset}}
@arrow={{this.arrow}}
@maxWidth={{this.maxWidth}}
@identifier={{this.identifier}}
@interactive={{this.interactive}}
@triggers={{this.triggers}}
@untriggers={{this.untriggers}}
@content={{this.content}}
@inline={{this.inline}}
>
<:trigger>
{{this.label}}
</:trigger>
<:content>
{{this.content}}
</:content>
</DTooltip>
</:sample>
</Styleguide::Component>
<Styleguide::Component @tag="tooltip service">
<:sample>
<span id="tooltip-instance">{{this.label}}</span>
</:sample>
<:actions>
<DButton @action={{this.registerTooltip}}>Register</DButton>
</:actions>
</Styleguide::Component>
<Styleguide::Component @tag="tooltip service">
<:sample>
<span id="tooltip-instance-with-component">{{this.label}}</span>
</:sample>
<:actions>
<DButton @action={{this.registerTooltipWithComponent}}>Register</DButton>
</:actions>
</Styleguide::Component>
<Styleguide::Controls>
<Styleguide::Controls::Row @name="Example label">
<Input @value={{this.label}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@content]">
<Input @value={{this.content}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@identifier]">
<Input @value={{this.identifier}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@offset]">
<Input @value={{this.offset}} @type="number" />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@triggers]">
<Input @value={{this.triggers}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@untriggers]">
<Input @value={{this.untriggers}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@maxWidth]">
<Input @value={{this.maxWidth}} @type="number" />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@interactive]">
<DToggleSwitch
@state={{this.interactive}}
{{on "click" this.toggleInteractive}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@arrow]">
<DToggleSwitch @state={{this.arrow}} {{on "click" this.toggleArrow}} />
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@inline]">
<DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
</Styleguide::Controls::Row>
</Styleguide::Controls>
</StyleguideExample>

112
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.js
View File

@ -1,112 +0,0 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { tracked } from "@glimmer/tracking";
import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
import { TOOLTIP } from "float-kit/lib/constants";
import { htmlSafe } from "@ember/template";
export default class Tooltips extends Component {
@service tooltip;
@tracked label = "What is this?";
@tracked triggers = TOOLTIP.options.triggers;
@tracked untriggers = TOOLTIP.options.untriggers;
@tracked arrow = TOOLTIP.options.arrow;
@tracked inline = TOOLTIP.options.inline;
@tracked interactive = TOOLTIP.options.interactive;
@tracked maxWidth = TOOLTIP.options.maxWidth;
@tracked identifier;
@tracked offset = TOOLTIP.options.offset;
@tracked _content = "Hello World!";
get content() {
return this._content;
}
set content(value) {
this._content = htmlSafe(value);
}
get templateCode() {
return `<DTooltip
@label="${this.label}"
@content="${this.content}"
/>`;
}
get templateCodeContent() {
return `<DTooltip @maxWidth={{100}}>
<:trigger>
${this.label}
</:trigger>
<:content>
${this.content}
</:content>
</DTooltip>`;
}
get serviceCode() {
return `this.tooltip.register(
document.queryselector(".my-element"),
{ content: "${this.content}" }
);`;
}
get serviceCodeComponent() {
return `this.tooltip.register(
document.queryselector(".my-element"),
{ component: MyComponent, data: { foo: 1 } }
);`;
}
@action
toggleArrow() {
this.arrow = !this.arrow;
}
@action
toggleInteractive() {
this.interactive = !this.interactive;
}
@action
toggleInline() {
this.inline = !this.inline;
}
@action
registerTooltip() {
this.tooltipInstance?.destroy();
this.tooltipInstance = this.tooltip.register(
document.querySelector("#tooltip-instance"),
this.options
);
}
@action
registerTooltipWithComponent() {
this.tooltipInstanceWithComponent?.destroy();
this.tooltipInstanceWithComponent = this.tooltip.register(
document.querySelector("#tooltip-instance-with-component"),
{
...this.options,
component: DummyComponent,
data: { foo: 1 },
}
);
}
get options() {
return {
offset: this.offset,
arrow: this.arrow,
maxWidth: this.maxWidth,
identifier: this.identifier,
interactive: this.interactive,
triggers: this.triggers,
untriggers: this.untriggers,
content: this.content,
};
}
}

36
plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.hbs
View File

@ -1,35 +1,3 @@
<div class="styleguide__component">
{{#if @tag}}
<span class="styleguide__component-tag">{{@tag}}</span>
{{/if}}
{{#if (has-block "title")}}
<div class="styleguide__component-title">
{{yield to="title"}}
</div>
{{/if}}
{{#if (or (has-block) (has-block "sample"))}}
<div class="styleguide__component-sample">
{{#if (has-block)}}
{{yield}}
{{/if}}
{{#if (has-block "sample")}}
{{yield to="sample"}}
{{/if}}
</div>
{{/if}}
{{#if (has-block "actions")}}
<div class="styleguide__component-actions">
{{yield to="actions"}}
</div>
{{/if}}
{{#if (has-block "code")}}
<div class="styleguide__component-code">
{{yield to="code"}}
</div>
{{/if}}
<div class="component">
{{yield}}
</div>

8
plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js
View File

@ -18,9 +18,7 @@ import headerIcons from "../components/sections/molecules/header-icons";
import navigationBar from "../components/sections/molecules/navigation-bar";
import navigationStacked from "../components/sections/molecules/navigation-stacked";
import postMenu from "../components/sections/molecules/post-menu";
import tooltips from "../components/sections/molecules/tooltips";
import menus from "../components/sections/molecules/menus";
import toasts from "../components/sections/molecules/toasts";
import richTooltip from "../components/sections/molecules/rich-tooltip";
import signupCta from "../components/sections/molecules/signup-cta";
import topicListItem from "../components/sections/molecules/topic-list-item";
import topicNotifications from "../components/sections/molecules/topic-notifications";
@ -72,9 +70,7 @@ const SECTIONS = [
id: "navigation-stacked",
},
{ component: postMenu, category: "molecules", id: "post-menu" },
{ component: tooltips, category: "molecules", id: "tooltips" },
{ component: menus, category: "molecules", id: "menus" },
{ component: toasts, category: "molecules", id: "toasts" },
{ component: richTooltip, category: "molecules", id: "rich-tooltip" },
{ component: signupCta, category: "molecules", id: "signup-cta" },
{ component: topicListItem, category: "molecules", id: "topic-list-item" },
{

45
plugins/styleguide/assets/stylesheets/styleguide.scss
View File

@ -75,6 +75,12 @@
width: 100%;
position: relative;
.component {
padding: 2rem;
border: 2px dotted var(--primary-low);
margin-bottom: 2rem;
}
.component-properties {
width: 100%;
@ -229,42 +235,3 @@
}
}
}
.styleguide__component {
border: 2px dotted var(--primary-low);
margin-bottom: 2rem;
position: relative;
&-tag {
position: absolute;
top: 0;
right: 0;
padding: 3px 6px;
background: var(--primary-low);
max-width: 25%;
@include ellipsis;
}
&-sample {
display: flex;
padding: 2rem;
}
&-actions {
display: flex;
align-items: center;
padding: 1rem 2rem;
}
&-code {
display: flex;
.ember-view {
width: 100%;
}
pre {
margin: 0;
}
}
}

10
plugins/styleguide/config/locales/client.en.yml
View File

@ -16,10 +16,6 @@ en:
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:
@ -87,12 +83,12 @@ en:
title: "Spinners"
empty_state:
title: "Empty State"
tooltips:
title: "Tooltips"
rich_tooltip:
title: "Rich Tooltip"
description: "Description"
header: "Header"
hover_to_see: "Hover to see a tooltip"
char_counter:
title: "Character Counter"
placeholder: "Enter your text here..."