From c07a6eeb6dcdd1e0904a9af11501c27f818b3da5 Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Wed, 14 Apr 2021 10:26:23 +1000 Subject: [PATCH] FIX: Software update prompt fixes and improvements (#12648) * Fixes the z-index of the prompt so it is behind the quick access panels * Adds a dismiss `X` button (made sure the click target of this was quite big) * Change structure of HTML to address template lint issues * Fix aria-hidden not returning true/false * Reload current page instead of navigating to / when clicking on the prompt message --- .../app/components/software-update-prompt.js | 37 ++++++++----------- .../components/software-update-prompt.hbs | 12 ++++-- .../widgets/software-update-prompt-test.js | 8 ---- .../common/software-update-prompt.scss | 34 ++++++++++++++--- config/locales/client.en.yml | 4 +- 5 files changed, 54 insertions(+), 41 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/software-update-prompt.js b/app/assets/javascripts/discourse/app/components/software-update-prompt.js index 0de3b1e7f2d..73424b6513c 100644 --- a/app/assets/javascripts/discourse/app/components/software-update-prompt.js +++ b/app/assets/javascripts/discourse/app/components/software-update-prompt.js @@ -2,35 +2,20 @@ import getURL from "discourse-common/lib/get-url"; import { cancel, later } from "@ember/runloop"; import discourseComputed, { on } from "discourse-common/utils/decorators"; import Component from "@ember/component"; -import { not } from "@ember/object/computed"; +import { action } from "@ember/object"; import { isTesting } from "discourse-common/config/environment"; export default Component.extend({ - showPrompt: false, + tagName: "", - classNameBindings: ["getClassNames"], - attributeBindings: ["isHidden:aria-hidden"], + showPrompt: false, + _timeoutHandler: null, @discourseComputed rootUrl() { return getURL("/"); }, - isHidden: not("showPrompt"), - - _timeoutHandler: null, - - @discourseComputed("showPrompt") - getClassNames(showPrompt) { - const classes = ["software-update-prompt"]; - - if (showPrompt) { - classes.push("require-software-refresh"); - } - - return classes.join(" "); - }, - @on("init") initSubscribtions() { this.messageBus.subscribe("/refresh_client", () => { @@ -56,11 +41,19 @@ export default Component.extend({ }); }, - willDestroyElement() { - this._super(...arguments); + @action + refreshPage() { + document.location.reload(); + }, + @action + dismiss() { + this.set("showPrompt", false); + }, + + @on("willDestroyElement") + _resetTimeoutHandler() { this._timeoutHandler && cancel(this._timeoutHandler); - this._timeoutHandler = null; }, }); diff --git a/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs b/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs index 617ffe7a35d..db9627812ef 100644 --- a/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs @@ -1,5 +1,9 @@ -
- - {{d-icon "redo"}} {{html-safe (i18n "software_update_prompt")}} - +
+
+
+ {{d-icon "redo"}} {{html-safe (i18n "software_update_prompt.message")}} + {{d-icon "times"}} +
+
+ diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js index f0bca8a7b3d..59059a28bbe 100644 --- a/app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js +++ b/app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js @@ -26,14 +26,6 @@ discourseModule( "it does not have the class to show the prompt" ); - assert.equal( - queryAll("div.software-update-prompt")[0].getAttribute( - "aria-hidden" - ), - "", - "it does have the aria-hidden attribute" - ); - publishToMessageBus("/global/asset-version", "somenewversion"); const done = assert.async(); diff --git a/app/assets/stylesheets/common/software-update-prompt.scss b/app/assets/stylesheets/common/software-update-prompt.scss index 0871146d255..4da4fc47481 100644 --- a/app/assets/stylesheets/common/software-update-prompt.scss +++ b/app/assets/stylesheets/common/software-update-prompt.scss @@ -9,15 +9,37 @@ visibility: hidden; transition: max-height 1s; box-shadow: shadow("header"); - z-index: z("header") + 10; + z-index: z("header") - 10; - a { - display: block; - padding: 0.5em 0; + .update-prompt-main-content { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; } - span { - text-decoration: underline; + .update-prompt-message { + cursor: pointer; + padding: 0.75em 0; + span { + text-decoration: underline; + } + } + + .update-prompt-dismiss { + justify-content: flex-end; + display: flex; + height: 44px; + flex: 1; + + span { + cursor: pointer; + display: inline; + height: 100%; + display: flex; + align-items: center; + padding-left: 20px; + } } .d-icon { diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 6db0d431c60..7238838f18a 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -178,7 +178,9 @@ en: wizard_required: "Welcome to your new Discourse! Let’s get started with the setup wizard ✨" emails_are_disabled: "All outgoing email has been globally disabled by an administrator. No email notifications of any kind will be sent." - software_update_prompt: "We've updated this site, please refresh, or you may experience unexpected behavior." + software_update_prompt: + message: "We've updated this site, please refresh, or you may experience unexpected behavior." + dismiss: "Dismiss" bootstrap_mode_enabled: one: "To make launching your new site easier, you are in bootstrap mode. All new users will be granted trust level 1 and have daily email summary emails enabled. This will be automatically turned off when %{count} user has joined."