mirror of
https://github.com/discourse/discourse.git
synced 2025-10-03 17:21:20 +08:00
759fc04041
Context: The `btn` mixin is used for every functional button, but this includes button elements that are not, or should not be, styled like our default or primary buttons. To change how this works this commit: * stripped down the mixin to the bare essentials, mainly limiting to the properties that use variables. * moved most things into the `btn` class * moved some things into specific descriptive classes (default, danger, success) such as border-radius Example of button that does not need a border-radius and would benefit from this: <img width="464" height="184" alt="CleanShot 2025-09-19 at 12 56 04@2x" src="https://github.com/user-attachments/assets/e908b2cf-971f-4c1f-aade-7492bad2f89c" /> * Deprecated… * FlatButton component * btn-active: we should use the proper pseudoclass :active or a –-active modifier in code if we need it * btn-text: every button by default is a btn-text. We already have a class to indicate when it isn’t (no-text) * fixed btn-link property to make DButton component behave like an inline link (no padding, link-styling) * Since I moved styling from .btn, ths means every button now needs a specific declaration. So I’ve added btn-default where necessary. * Fixed btn-flat hover effect: The difference between btn-flat and btn-transparent was getting very ambiguous. I’ve fixed the hover effect for btn-flat so that the distinction is: <img width="1094" height="408" alt="image" src="https://github.com/user-attachments/assets/addf56a9-1f61-463d-abd9-5028a3b88fad" /> * Changed the custom icon colour from header icons so it follows the normal btn-flat styling, the way the sidebar icon already was doing. (Consistency) **Other small button-related change along the way** What | BC | AC | |----| ----|--------| Inconsistent save/cancel colours | <img width="1720" height="1084" alt="CleanShot 2025-09-19 at 15 31 40@2x" src="https://github.com/user-attachments/assets/227289c3-6ded-4633-868d-6e33c32d83c3" /> | <img width="1720" height="1084" alt="CleanShot 2025-09-19 at 15 30 56@2x" src="https://github.com/user-attachments/assets/b23f96c9-04f3-40ea-9fba-2be59eae8e64" /> | --------- Co-authored-by: Martin Brennan <martin@discourse.org>
255 lines
9 KiB
Text
255 lines
9 KiB
Text
import { LinkTo } from "@ember/routing";
|
|
import { htmlSafe } from "@ember/template";
|
|
import RouteTemplate from "ember-route-template";
|
|
import DButton from "discourse/components/d-button";
|
|
import PluginOutlet from "discourse/components/plugin-outlet";
|
|
import TextField from "discourse/components/text-field";
|
|
import UserLink from "discourse/components/user-link";
|
|
import avatar from "discourse/helpers/avatar";
|
|
import icon from "discourse/helpers/d-icon";
|
|
import formatDate from "discourse/helpers/format-date";
|
|
import lazyHash from "discourse/helpers/lazy-hash";
|
|
import { i18n } from "discourse-i18n";
|
|
|
|
export default RouteTemplate(
|
|
<template>
|
|
<div class="show-current-style admin-customize-themes-show">
|
|
<div class="back-to-themes-and-components">
|
|
<LinkTo
|
|
@route={{if
|
|
@controller.model.component
|
|
"adminConfig.customize.components"
|
|
"adminConfig.customize.themes"
|
|
}}
|
|
>
|
|
{{icon "angle-left"}}
|
|
{{i18n
|
|
(if
|
|
@controller.model.component
|
|
"admin.config_areas.themes_and_components.components.back"
|
|
"admin.config_areas.themes_and_components.themes.back"
|
|
)
|
|
}}
|
|
</LinkTo>
|
|
</div>
|
|
|
|
<span>
|
|
<PluginOutlet
|
|
@name="admin-customize-themes-show-top"
|
|
@connectorTagName="div"
|
|
@outletArgs={{lazyHash theme=@controller.model}}
|
|
/>
|
|
</span>
|
|
|
|
<div class="title admin-customize-themes-show__title">
|
|
{{#if @controller.editingName}}
|
|
<div class="container-edit-title">
|
|
<TextField @value={{@controller.model.name}} @autofocus="true" />
|
|
<DButton
|
|
@action={{@controller.finishedEditingName}}
|
|
@icon="check"
|
|
class="btn-primary btn-small submit-edit"
|
|
/>
|
|
<DButton
|
|
@action={{@controller.cancelEditingName}}
|
|
@icon="xmark"
|
|
class="btn-default btn-small cancel-edit"
|
|
/>
|
|
</div>
|
|
{{else}}
|
|
<DButton
|
|
@action={{@controller.startEditingName}}
|
|
class="btn-transparent title-button"
|
|
role="heading"
|
|
aria-level="2"
|
|
aria-label="Edit theme name: {{@controller.model.name}}"
|
|
>
|
|
<span>{{@controller.model.name}}</span>
|
|
{{#unless @controller.model.system}}
|
|
{{icon "pencil" class="inline-icon"}}
|
|
{{/unless}}
|
|
</DButton>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<PluginOutlet
|
|
@name="admin-customize-theme-before-errors"
|
|
@outletArgs={{lazyHash theme=@controller.model}}
|
|
/>
|
|
|
|
{{#each @controller.model.errors as |error|}}
|
|
<div class="alert alert-error">{{error}}</div>
|
|
{{/each}}
|
|
|
|
{{#if @controller.finishInstall}}
|
|
<div class="control-unit">
|
|
{{#if @controller.sourceIsHttp}}
|
|
<a class="remote-url" href={{@controller.remoteThemeLink}}>{{i18n
|
|
"admin.customize.theme.source_url"
|
|
}}{{icon "link"}}</a>
|
|
{{else}}
|
|
<div class="remote-url">
|
|
<code>{{@controller.model.remote_theme.remote_url}}</code>
|
|
{{#if @controller.model.remote_theme.branch}}
|
|
(<code>{{@controller.model.remote_theme.branch}}</code>)
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if @controller.showRemoteError}}
|
|
<div class="error-message">
|
|
{{icon "triangle-exclamation"}}
|
|
{{i18n "admin.customize.theme.repo_unreachable"}}
|
|
</div>
|
|
<div class="raw-error">
|
|
<code>{{@controller.model.remoteError}}</code>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<DButton
|
|
@action={{@controller.updateToLatest}}
|
|
@icon="download"
|
|
@label="admin.customize.theme.finish_install"
|
|
class="btn-primary finish-install"
|
|
/>
|
|
<DButton
|
|
@action={{@controller.destroyTheme}}
|
|
@label="admin.customize.delete"
|
|
@icon="trash-can"
|
|
class="btn-danger"
|
|
/>
|
|
|
|
<span class="status-message">
|
|
{{i18n "admin.customize.theme.last_attempt"}}
|
|
{{formatDate
|
|
@controller.model.remote_theme.updated_at
|
|
leaveAgo="true"
|
|
}}
|
|
</span>
|
|
</div>
|
|
{{else}}
|
|
{{#unless @controller.model.supported}}
|
|
<div class="alert alert-error">
|
|
{{i18n "admin.customize.theme.required_version.error"}}
|
|
{{#if @controller.model.remote_theme.minimum_discourse_version}}
|
|
{{i18n
|
|
"admin.customize.theme.required_version.minimum"
|
|
version=@controller.model.remote_theme.minimum_discourse_version
|
|
}}
|
|
{{/if}}
|
|
{{#if @controller.model.remote_theme.maximum_discourse_version}}
|
|
{{i18n
|
|
"admin.customize.theme.required_version.maximum"
|
|
version=@controller.model.remote_theme.maximum_discourse_version
|
|
}}
|
|
{{/if}}
|
|
</div>
|
|
{{/unless}}
|
|
|
|
{{#unless @controller.model.enabled}}
|
|
<div class="alert alert-error">
|
|
{{#if @controller.model.disabled_by}}
|
|
{{i18n "admin.customize.theme.disabled_by"}}
|
|
<UserLink @user={{@controller.model.disabled_by}}>
|
|
{{avatar @controller.model.disabled_by imageSize="tiny"}}
|
|
{{@controller.model.disabled_by.username}}
|
|
</UserLink>
|
|
{{formatDate @controller.model.disabled_at leaveAgo="true"}}
|
|
{{else}}
|
|
{{i18n "admin.customize.theme.disabled"}}
|
|
{{/if}}
|
|
<DButton
|
|
@action={{@controller.enableComponent}}
|
|
@icon="check"
|
|
@label="admin.customize.theme.enable"
|
|
class="btn-default"
|
|
/>
|
|
</div>
|
|
{{/unless}}
|
|
|
|
<div class="metadata control-unit remote-theme-metadata">
|
|
{{#if @controller.model.remote_theme}}
|
|
{{#if @controller.model.remote_theme.remote_url}}
|
|
{{#if @controller.sourceIsHttp}}
|
|
<a
|
|
class="remote-url"
|
|
href={{@controller.remoteThemeLink}}
|
|
>{{i18n "admin.customize.theme.source_url"}}{{icon "link"}}</a>
|
|
{{else}}
|
|
<div class="remote-url">
|
|
<code>{{@controller.model.remote_theme.remote_url}}</code>
|
|
{{#if @controller.model.remote_theme.branch}}
|
|
(<code>{{@controller.model.remote_theme.branch}}</code>)
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if @controller.model.remote_theme.about_url}}
|
|
<a
|
|
class="url about-url"
|
|
href={{@controller.model.remote_theme.about_url}}
|
|
>{{i18n "admin.customize.theme.about_theme"}}{{icon "link"}}</a>
|
|
{{/if}}
|
|
|
|
{{#if @controller.model.remote_theme.license_url}}
|
|
<a
|
|
class="url license-url"
|
|
href={{@controller.model.remote_theme.license_url}}
|
|
>{{i18n "admin.customize.theme.license"}}{{icon "link"}}</a>
|
|
{{/if}}
|
|
|
|
{{#if @controller.model.description}}
|
|
<span
|
|
class="theme-description"
|
|
>{{@controller.model.description}}</span>
|
|
{{/if}}
|
|
|
|
{{#if @controller.model.remote_theme.authors}}<span
|
|
class="authors"
|
|
><span class="heading">{{i18n
|
|
"admin.customize.theme.authors"
|
|
}}</span>
|
|
{{@controller.model.remote_theme.authors}}</span>{{/if}}
|
|
|
|
{{#if @controller.model.remote_theme.theme_version}}<span
|
|
class="version"
|
|
><span class="heading">{{i18n
|
|
"admin.customize.theme.version"
|
|
}}</span>
|
|
{{@controller.model.remote_theme.theme_version}}</span>{{/if}}
|
|
|
|
{{#if @controller.model.remote_theme.is_git}}
|
|
<div class="alert alert-info remote-theme-edits">
|
|
{{htmlSafe
|
|
(i18n
|
|
"admin.customize.theme.remote_theme_edits"
|
|
repoURL=@controller.remoteThemeLink
|
|
)
|
|
}}
|
|
</div>
|
|
|
|
{{#if @controller.showRemoteError}}
|
|
<div class="error-message">
|
|
{{icon "triangle-exclamation"}}
|
|
{{i18n "admin.customize.theme.repo_unreachable"}}
|
|
</div>
|
|
<div class="raw-error">
|
|
<code>{{@controller.model.remoteError}}</code>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if @controller.model.system}}
|
|
<div class="alert alert-info system-theme-info">
|
|
{{i18n "admin.customize.theme.built_in_description"}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{outlet}}
|
|
{{/if}}
|
|
</div>
|
|
</template>
|
|
);
|
