From 3f2c3d53607935723ef5b4464646d06ca67d350f Mon Sep 17 00:00:00 2001 From: Kris Date: Mon, 12 Sep 2022 11:34:15 -0400 Subject: [PATCH] UX: switch wizard SVG colors for dark mode (#18109) --- .../wizard/addon/components/wizard-step.js | 7 +-- .../components/illustration-finished.hbs | 43 +++++++++++++++ .../components/illustration-members.hbs | 55 +++++++++++++++++++ .../components/illustration-welcome.hbs | 32 +++++++++++ .../templates/components/wizard-step.hbs | 11 +++- lib/wizard/builder.rb | 6 +- .../images/wizard/finished-illustration.svg | 1 - public/images/wizard/members-illustration.svg | 1 - public/images/wizard/welcome-illustration.svg | 1 - 9 files changed, 145 insertions(+), 12 deletions(-) create mode 100644 app/assets/javascripts/wizard/addon/templates/components/illustration-finished.hbs create mode 100644 app/assets/javascripts/wizard/addon/templates/components/illustration-members.hbs create mode 100644 app/assets/javascripts/wizard/addon/templates/components/illustration-welcome.hbs delete mode 100644 public/images/wizard/finished-illustration.svg delete mode 100644 public/images/wizard/members-illustration.svg delete mode 100644 public/images/wizard/welcome-illustration.svg diff --git a/app/assets/javascripts/wizard/addon/components/wizard-step.js b/app/assets/javascripts/wizard/addon/components/wizard-step.js index 58e01d31403..8c72f79e15c 100644 --- a/app/assets/javascripts/wizard/addon/components/wizard-step.js +++ b/app/assets/javascripts/wizard/addon/components/wizard-step.js @@ -1,7 +1,6 @@ import discourseComputed, { observes } from "discourse-common/utils/decorators"; import Component from "@ember/component"; import I18n from "I18n"; -import getUrl from "discourse-common/lib/get-url"; import { htmlSafe } from "@ember/template"; import { schedule } from "@ember/runloop"; import { action } from "@ember/object"; @@ -65,11 +64,11 @@ export default Component.extend({ }, @discourseComputed("step.banner") - bannerImage(src) { - if (!src) { + bannerImage(bannerName) { + if (!bannerName) { return; } - return getUrl(`/images/wizard/${src}`); + return bannerName; }, @discourseComputed() diff --git a/app/assets/javascripts/wizard/addon/templates/components/illustration-finished.hbs b/app/assets/javascripts/wizard/addon/templates/components/illustration-finished.hbs new file mode 100644 index 00000000000..fd114215182 --- /dev/null +++ b/app/assets/javascripts/wizard/addon/templates/components/illustration-finished.hbs @@ -0,0 +1,43 @@ + + + {{! template-lint-disable no-forbidden-elements }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/javascripts/wizard/addon/templates/components/illustration-members.hbs b/app/assets/javascripts/wizard/addon/templates/components/illustration-members.hbs new file mode 100644 index 00000000000..b797bc50784 --- /dev/null +++ b/app/assets/javascripts/wizard/addon/templates/components/illustration-members.hbs @@ -0,0 +1,55 @@ + + + + + + + + {{! template-lint-disable no-forbidden-elements }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/javascripts/wizard/addon/templates/components/illustration-welcome.hbs b/app/assets/javascripts/wizard/addon/templates/components/illustration-welcome.hbs new file mode 100644 index 00000000000..a88c31224a2 --- /dev/null +++ b/app/assets/javascripts/wizard/addon/templates/components/illustration-welcome.hbs @@ -0,0 +1,32 @@ + + + {{! template-lint-disable no-forbidden-elements }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs index 3f138a9c77d..96fd2e985d5 100644 --- a/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs +++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs @@ -29,9 +29,16 @@ {{#if this.step.description}}

{{html-safe this.step.description}}

{{/if}} - {{#if this.bannerImage}} - +
+ {{#if (eq this.bannerImage "welcome-illustration")}} + + {{else if (eq this.bannerImage "members-illustration")}} + + {{else if (eq this.bannerImage "finished-illustration")}} + + {{/if}} +
{{/if}} {{/if}} diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb index 716d2c65a99..86ae129ad6b 100644 --- a/lib/wizard/builder.rb +++ b/lib/wizard/builder.rb @@ -11,7 +11,7 @@ class Wizard return @wizard unless SiteSetting.wizard_enabled? && @wizard.user.try(:staff?) @wizard.append_step('introduction') do |step| - step.banner = "welcome-illustration.svg" + step.banner = "welcome-illustration" step.add_field(id: 'title', type: 'text', required: true, value: SiteSetting.title) step.add_field(id: 'site_description', type: 'text', required: false, value: SiteSetting.site_description) @@ -48,7 +48,7 @@ class Wizard end @wizard.append_step('privacy') do |step| - step.banner = "members-illustration.svg" + step.banner = "members-illustration" step.add_field( id: 'login_required', type: 'checkbox', @@ -79,7 +79,7 @@ class Wizard @wizard.append_step('ready') do |step| # no form on this page, just info. - step.banner = "finished-illustration.svg" + step.banner = "finished-illustration" end @wizard.append_step('styling') do |step| diff --git a/public/images/wizard/finished-illustration.svg b/public/images/wizard/finished-illustration.svg deleted file mode 100644 index 32820981182..00000000000 --- a/public/images/wizard/finished-illustration.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/wizard/members-illustration.svg b/public/images/wizard/members-illustration.svg deleted file mode 100644 index e8dca4b38d0..00000000000 --- a/public/images/wizard/members-illustration.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/wizard/welcome-illustration.svg b/public/images/wizard/welcome-illustration.svg deleted file mode 100644 index 53cb9e64d34..00000000000 --- a/public/images/wizard/welcome-illustration.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file