DEV: migrates themes-list-item to gjs (#27870)
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
b0480dd34e
commit
654a42171a
|
|
@ -0,0 +1,168 @@
|
||||||
|
import Component from "@glimmer/component";
|
||||||
|
import { tracked } from "@glimmer/tracking";
|
||||||
|
import { Input } from "@ember/component";
|
||||||
|
import { hash } from "@ember/helper";
|
||||||
|
import { on } from "@ember/modifier";
|
||||||
|
import { action } from "@ember/object";
|
||||||
|
import { htmlSafe } from "@ember/template";
|
||||||
|
import PluginOutlet from "discourse/components/plugin-outlet";
|
||||||
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
|
import icon from "discourse-common/helpers/d-icon";
|
||||||
|
import i18n from "discourse-common/helpers/i18n";
|
||||||
|
import escape from "discourse-common/lib/escape";
|
||||||
|
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||||
|
|
||||||
|
const MAX_COMPONENTS = 4;
|
||||||
|
|
||||||
|
export default class ThemesListItem extends Component {
|
||||||
|
@tracked childrenExpanded = false;
|
||||||
|
|
||||||
|
get displayHasMore() {
|
||||||
|
return this.args.theme?.get("childThemes.length") > MAX_COMPONENTS;
|
||||||
|
}
|
||||||
|
|
||||||
|
get displayComponents() {
|
||||||
|
return this.hasComponents && this.args.theme?.isActive;
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasComponents() {
|
||||||
|
return this.children.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
handleClick(event) {
|
||||||
|
if (!event.target.classList.contains("others-count")) {
|
||||||
|
this.args.navigateToTheme();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get children() {
|
||||||
|
let children = this.args.theme?.get("childThemes.[]");
|
||||||
|
if (this.args.theme?.get("component") || !children) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
children = this.childrenExpanded
|
||||||
|
? children
|
||||||
|
: children.slice(0, MAX_COMPONENTS);
|
||||||
|
return children.map((t) => {
|
||||||
|
const name = escape(t.name);
|
||||||
|
return t.enabled ? name : `${iconHTML("ban")} ${name}`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get childrenString() {
|
||||||
|
return this.children.join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
|
get moreCount() {
|
||||||
|
const childrenCount = this.args.theme?.get("childThemes.length");
|
||||||
|
if (
|
||||||
|
this.args.theme?.get("component") ||
|
||||||
|
!childrenCount ||
|
||||||
|
this.childrenExpanded
|
||||||
|
) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return childrenCount - MAX_COMPONENTS;
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
toggleChildrenExpanded(event) {
|
||||||
|
event?.preventDefault();
|
||||||
|
this.childrenExpanded = !this.childrenExpanded;
|
||||||
|
}
|
||||||
|
|
||||||
|
<template>
|
||||||
|
{{! template-lint-disable no-nested-interactive }}
|
||||||
|
<div
|
||||||
|
class={{concatClass
|
||||||
|
"themes-list-container__item"
|
||||||
|
(if @theme.selected "selected")
|
||||||
|
}}
|
||||||
|
role="button"
|
||||||
|
{{on "click" this.handleClick}}
|
||||||
|
...attributes
|
||||||
|
>
|
||||||
|
<div class="inner-wrapper">
|
||||||
|
<span>
|
||||||
|
<PluginOutlet
|
||||||
|
@name="admin-customize-themes-list-item"
|
||||||
|
@connectorTagName="span"
|
||||||
|
@outletArgs={{hash theme=@theme}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
{{#if @selectInactiveMode}}
|
||||||
|
<Input
|
||||||
|
@checked={{@theme.markedToDelete}}
|
||||||
|
id={{@theme.id}}
|
||||||
|
@type="checkbox"
|
||||||
|
/>
|
||||||
|
{{/if}}
|
||||||
|
<span class="name">
|
||||||
|
{{@theme.name}}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="icons">
|
||||||
|
{{#if @theme.selected}}
|
||||||
|
{{icon "caret-right"}}
|
||||||
|
{{else}}
|
||||||
|
{{#if @theme.default}}
|
||||||
|
{{icon
|
||||||
|
"check"
|
||||||
|
class="default-indicator"
|
||||||
|
title="admin.customize.theme.default_theme_tooltip"
|
||||||
|
}}
|
||||||
|
{{/if}}
|
||||||
|
{{#if @theme.isPendingUpdates}}
|
||||||
|
{{icon
|
||||||
|
"sync"
|
||||||
|
title="admin.customize.theme.updates_available_tooltip"
|
||||||
|
class="light-grey-icon"
|
||||||
|
}}
|
||||||
|
{{/if}}
|
||||||
|
{{#if @theme.isBroken}}
|
||||||
|
{{icon
|
||||||
|
"exclamation-circle"
|
||||||
|
class="broken-indicator"
|
||||||
|
title="admin.customize.theme.broken_theme_tooltip"
|
||||||
|
}}
|
||||||
|
{{/if}}
|
||||||
|
{{#unless @theme.enabled}}
|
||||||
|
{{icon
|
||||||
|
"ban"
|
||||||
|
class="light-grey-icon"
|
||||||
|
title="admin.customize.theme.disabled_component_tooltip"
|
||||||
|
}}
|
||||||
|
{{/unless}}
|
||||||
|
{{/if}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{#if this.displayComponents}}
|
||||||
|
<div class="components-list">
|
||||||
|
<span class="components">{{htmlSafe this.childrenString}}</span>
|
||||||
|
|
||||||
|
{{#if this.displayHasMore}}
|
||||||
|
<a
|
||||||
|
href
|
||||||
|
{{on "click" this.toggleChildrenExpanded}}
|
||||||
|
class="others-count"
|
||||||
|
>
|
||||||
|
{{#if this.childrenExpanded}}
|
||||||
|
{{i18n "admin.customize.theme.collapse"}}
|
||||||
|
{{else}}
|
||||||
|
{{i18n
|
||||||
|
"admin.customize.theme.and_x_more"
|
||||||
|
count=this.moreCount
|
||||||
|
}}
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
}
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
<div class="inner-wrapper">
|
|
||||||
<span>
|
|
||||||
<PluginOutlet
|
|
||||||
@name="admin-customize-themes-list-item"
|
|
||||||
@connectorTagName="span"
|
|
||||||
@outletArgs={{hash theme=this.theme}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
{{#if @selectInactiveMode}}
|
|
||||||
<Input
|
|
||||||
@checked={{this.theme.markedToDelete}}
|
|
||||||
id={{this.theme.id}}
|
|
||||||
@type="checkbox"
|
|
||||||
/>
|
|
||||||
{{/if}}
|
|
||||||
<span class="name">
|
|
||||||
{{this.theme.name}}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="icons">
|
|
||||||
{{#if this.theme.selected}}
|
|
||||||
{{d-icon "caret-right"}}
|
|
||||||
{{else}}
|
|
||||||
{{#if this.theme.default}}
|
|
||||||
{{d-icon
|
|
||||||
"check"
|
|
||||||
class="default-indicator"
|
|
||||||
title="admin.customize.theme.default_theme_tooltip"
|
|
||||||
}}
|
|
||||||
{{/if}}
|
|
||||||
{{#if this.theme.isPendingUpdates}}
|
|
||||||
{{d-icon
|
|
||||||
"sync"
|
|
||||||
title="admin.customize.theme.updates_available_tooltip"
|
|
||||||
class="light-grey-icon"
|
|
||||||
}}
|
|
||||||
{{/if}}
|
|
||||||
{{#if this.theme.isBroken}}
|
|
||||||
{{d-icon
|
|
||||||
"exclamation-circle"
|
|
||||||
class="broken-indicator"
|
|
||||||
title="admin.customize.theme.broken_theme_tooltip"
|
|
||||||
}}
|
|
||||||
{{/if}}
|
|
||||||
{{#unless this.theme.enabled}}
|
|
||||||
{{d-icon
|
|
||||||
"ban"
|
|
||||||
class="light-grey-icon"
|
|
||||||
title="admin.customize.theme.disabled_component_tooltip"
|
|
||||||
}}
|
|
||||||
{{/unless}}
|
|
||||||
{{/if}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{#if this.displayComponents}}
|
|
||||||
<div class="components-list">
|
|
||||||
<span class="components">{{html-safe this.childrenString}}</span>
|
|
||||||
|
|
||||||
{{#if this.displayHasMore}}
|
|
||||||
<a href {{on "click" this.toggleChildrenExpanded}} class="others-count">
|
|
||||||
{{#if this.childrenExpanded}}
|
|
||||||
{{i18n "admin.customize.theme.collapse"}}
|
|
||||||
{{else}}
|
|
||||||
{{i18n "admin.customize.theme.and_x_more" count=this.moreCount}}
|
|
||||||
{{/if}}
|
|
||||||
</a>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
import Component from "@ember/component";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import { and, gt } from "@ember/object/computed";
|
|
||||||
import { classNameBindings, classNames } from "@ember-decorators/component";
|
|
||||||
import escape from "discourse-common/lib/escape";
|
|
||||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
||||||
import discourseComputed from "discourse-common/utils/decorators";
|
|
||||||
|
|
||||||
const MAX_COMPONENTS = 4;
|
|
||||||
|
|
||||||
@classNames("themes-list-container__item")
|
|
||||||
@classNameBindings("theme.selected:selected")
|
|
||||||
export default class ThemesListItem extends Component {
|
|
||||||
childrenExpanded = false;
|
|
||||||
|
|
||||||
@gt("children.length", 0) hasComponents;
|
|
||||||
|
|
||||||
@and("hasComponents", "theme.isActive") displayComponents;
|
|
||||||
|
|
||||||
@gt("theme.childThemes.length", MAX_COMPONENTS) displayHasMore;
|
|
||||||
|
|
||||||
click(e) {
|
|
||||||
if (!e.target.classList.contains("others-count")) {
|
|
||||||
this.navigateToTheme();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@discourseComputed(
|
|
||||||
"theme.component",
|
|
||||||
"theme.childThemes.@each.name",
|
|
||||||
"theme.childThemes.length",
|
|
||||||
"childrenExpanded"
|
|
||||||
)
|
|
||||||
children() {
|
|
||||||
const theme = this.theme;
|
|
||||||
let children = theme.get("childThemes");
|
|
||||||
if (theme.get("component") || !children) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
children = this.childrenExpanded
|
|
||||||
? children
|
|
||||||
: children.slice(0, MAX_COMPONENTS);
|
|
||||||
return children.map((t) => {
|
|
||||||
const name = escape(t.name);
|
|
||||||
return t.enabled ? name : `${iconHTML("ban")} ${name}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@discourseComputed("children")
|
|
||||||
childrenString(children) {
|
|
||||||
return children.join(", ");
|
|
||||||
}
|
|
||||||
|
|
||||||
@discourseComputed(
|
|
||||||
"theme.childThemes.length",
|
|
||||||
"theme.component",
|
|
||||||
"childrenExpanded",
|
|
||||||
"children.length"
|
|
||||||
)
|
|
||||||
moreCount(childrenCount, component, expanded) {
|
|
||||||
if (component || !childrenCount || expanded) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
return childrenCount - MAX_COMPONENTS;
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
toggleChildrenExpanded(event) {
|
|
||||||
event?.preventDefault();
|
|
||||||
this.toggleProperty("childrenExpanded");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
{{#if (and this.hasInactiveThemes (not this.activeFilter))}}
|
{{#if (and this.hasInactiveThemes (not this.activeFilter))}}
|
||||||
{{#each this.inactiveThemes as |theme|}}
|
{{#each this.inactiveThemes as |theme|}}
|
||||||
<ThemesListItem
|
<ThemesListItem
|
||||||
@classNames="inactive-theme"
|
class="inactive-theme"
|
||||||
@theme={{theme}}
|
@theme={{theme}}
|
||||||
@navigateToTheme={{fn this.navigateToTheme theme}}
|
@navigateToTheme={{fn this.navigateToTheme theme}}
|
||||||
@selectInactiveMode={{this.selectInactiveMode}}
|
@selectInactiveMode={{this.selectInactiveMode}}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue