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))}}
|
||||
{{#each this.inactiveThemes as |theme|}}
|
||||
<ThemesListItem
|
||||
@classNames="inactive-theme"
|
||||
class="inactive-theme"
|
||||
@theme={{theme}}
|
||||
@navigateToTheme={{fn this.navigateToTheme theme}}
|
||||
@selectInactiveMode={{this.selectInactiveMode}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue