From 690ffcf1d53079cfea8283bf22f30b82d961540c Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Fri, 10 Jan 2025 15:32:10 +1000
Subject: [PATCH] UX: Add DPageHeader to watched words and color palettes
(#30686)
Part of our admin UI consistency efforts, this is a stop-gap
until we can do a further UI review of these pages.
---
.../addon/templates/customize-colors-index.hbs | 4 +++-
.../admin/addon/templates/customize-colors.hbs | 17 +++++++++++++++--
.../admin/addon/templates/watched-words.hbs | 15 +++++++++++++++
.../stylesheets/common/admin/customize.scss | 6 ++++++
config/locales/client.en.yml | 10 ++++++----
5 files changed, 45 insertions(+), 7 deletions(-)
diff --git a/app/assets/javascripts/admin/addon/templates/customize-colors-index.hbs b/app/assets/javascripts/admin/addon/templates/customize-colors-index.hbs
index 495bfd48828..3547a81761e 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-colors-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-colors-index.hbs
@@ -1 +1,3 @@
-<p class="about">{{i18n "admin.customize.colors.about"}}</p>
\ No newline at end of file
+<div class="alert alert-info about-customize-colors">{{i18n
+ "admin.customize.colors.about"
+ }}</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/templates/customize-colors.hbs b/app/assets/javascripts/admin/addon/templates/customize-colors.hbs
index f84a8f365ac..a08b415d9bb 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-colors.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-colors.hbs
@@ -1,6 +1,19 @@
-<div class="content-list color-schemes">
- <h3>{{i18n "admin.customize.colors.long_title"}}</h3>
+<DPageHeader
+ @titleLabel={{i18n "admin.customize.colors.long_title"}}
+ @descriptionLabel={{i18n "admin.customize.colors.description"}}
+ @learnMoreUrl="https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857"
+ @hideTabs={{true}}
+>
+ <:breadcrumbs>
+ <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+ <DBreadcrumbsItem
+ @path="/admin/customize/colors"
+ @label={{i18n "admin.customize.colors.long_title"}}
+ />
+ </:breadcrumbs>
+</DPageHeader>
+<div class="content-list color-schemes">
<ul>
{{#each this.model as |scheme|}}
{{#unless scheme.is_base}}
diff --git a/app/assets/javascripts/admin/addon/templates/watched-words.hbs b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
index 5f0faa75a2b..6e27aeeabb5 100644
--- a/app/assets/javascripts/admin/addon/templates/watched-words.hbs
+++ b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
@@ -1,3 +1,18 @@
+<DPageHeader
+ @titleLabel={{i18n "admin.watched_words.title"}}
+ @descriptionLabel={{i18n "admin.watched_words.description"}}
+ @learnMoreUrl="https://meta.discourse.org/t/241735"
+ @hideTabs={{true}}
+>
+ <:breadcrumbs>
+ <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+ <DBreadcrumbsItem
+ @path="/admin/customize/watched_words"
+ @label={{i18n "admin.watched_words.title"}}
+ />
+ </:breadcrumbs>
+</DPageHeader>
+
<div class="admin-contents">
<div class="admin-controls">
<div class="controls">
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 6c99f564bd0..0c976c9ddf1 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -1072,3 +1072,9 @@
}
}
}
+
+.about-customize-colors {
+ text-align: center;
+ width: 65%;
+ margin-left: 30%;
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index b8dbc7bd920..2263cfc2cb8 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -6245,10 +6245,11 @@ en:
title: "Select base color palette"
description: "Base palette:"
title: "Colors"
- edit: "Edit Color Palettes"
- long_title: "Color Palettes"
+ edit: "Edit color palettes"
+ long_title: "Color palettes"
+ description: "Color palettes define the core colors used across your site’s interface, while themes can provide additional styling, layouts and components - both can work together to create your site’s unique look and feel, and both can be made available for users to select their preference."
about: "Modify the colors used by your themes. Create a new color palette to start."
- new_name: "New Color Palette"
+ new_name: "New color palette"
copy_name_prefix: "Copy of"
delete_confirm: "Delete this color palette?"
undo: "Undo"
@@ -6600,7 +6601,8 @@ en:
title: "Error Logs"
watched_words:
- title: "Watched Words"
+ title: "Watched words"
+ description: "Watched words are moderation tools that can perform multiple different actions including blocking, censoring, linking, or flagging posts containing certain words"
search: "search"
clear_filter: "Clear"
show_words: