github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 16:33:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Software update prompt fixes and improvements (#12648)

Browse Source 
* 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
This commit is contained in:
Martin Brennan 2021-04-14 10:26:23 +10:00 committed by GitHub
parent 66d17fdd6b
commit c07a6eeb6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/discourse/app/components/software-update-prompt.js
View File

@ -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;
},
});

12
app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs
View File

@ -1,5 +1,9 @@
<div class="wrap">
<a href={{rootUrl}} aria-live="polite">
{{d-icon "redo"}} {{html-safe (i18n "software_update_prompt")}}
</a>
<div class="software-update-prompt {{if showPrompt "require-software-refresh"}}">
<div class="wrap">
<div class="update-prompt-main-content" aria-live="polite">
<span role="button" onclick={{action "refreshPage"}} class="update-prompt-message">{{d-icon "redo"}} {{html-safe (i18n "software_update_prompt.message")}}</span>
<span class="update-prompt-dismiss"><span aria-label={{i18n "software_update_prompt.dismiss"}} role="button" onclick={{action "dismiss"}}>{{d-icon "times"}}</span></span>
</div>
</div>
</div>

8
app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js
View File

@ -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();

30
app/assets/stylesheets/common/software-update-prompt.scss
View File

@ -9,16 +9,38 @@
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;
}
.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 {
margin-right: 0.33em;

4
config/locales/client.en.yml
View File

@ -178,7 +178,9 @@ en:
wizard_required: "Welcome to your new Discourse! Let’s get started with <a href='%{url}' data-auto-route='true'>the setup wizard</a> ✨"
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, <span>please refresh</span>, or you may experience unexpected behavior."
software_update_prompt:
message: "We've updated this site, <span>please refresh</span>, 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."