github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-30 05:53:55 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Switch logos live when changing color schemes in user prefs (#13684)

Browse Source
This commit is contained in:
Penar Musaraj 2021-07-09 14:07:00 -04:00 committed by GitHub
parent 696bd0bf05
commit c7cdebd931
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/site-header.js
View File

@ -29,7 +29,9 @@ const SiteHeaderComponent = MountWidget.extend(
@observes( @observes(
"currentUser.unread_notifications", "currentUser.unread_notifications",
"currentUser.unread_high_priority_notifications", "currentUser.unread_high_priority_notifications",
"currentUser.reviewable_count" "currentUser.reviewable_count",
"session.defaultColorSchemeIsDark",
"session.darkModeAvailable"
) )
notificationsChanged() { notificationsChanged() {
this.queueRerender(); this.queueRerender();

3
app/assets/javascripts/discourse/app/controllers/preferences/interface.js
View File

@ -1,4 +1,5 @@
import Controller, { inject as controller } from "@ember/controller"; import Controller, { inject as controller } from "@ember/controller";
import Session from "discourse/models/session";
import { import {
iOSWithVisualViewport, iOSWithVisualViewport,
isiPad, isiPad,
@ -392,8 +393,10 @@ export default Controller.extend({
this.themeId, this.themeId,
true true
); );
Session.currentProp("darkModeAvailable", false);
} else { } else {
loadColorSchemeStylesheet(colorSchemeId, this.themeId, true); loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
Session.currentProp("darkModeAvailable", true);
} }
}, },

20
app/assets/javascripts/discourse/app/lib/color-scheme-picker.js
View File

@ -1,6 +1,8 @@
import cookie, { removeCookie } from "discourse/lib/cookie"; import cookie, { removeCookie } from "discourse/lib/cookie";
import I18n from "I18n"; import I18n from "I18n";
import Session from "discourse/models/session";
import { ajax } from "discourse/lib/ajax"; import { ajax } from "discourse/lib/ajax";
import { later } from "@ember/runloop";
export function listColorSchemes(site, options = {}) { export function listColorSchemes(site, options = {}) {
let schemes = site.get("user_color_schemes"); let schemes = site.get("user_color_schemes");
@ -49,20 +51,20 @@ export function listColorSchemes(site, options = {}) {
export function loadColorSchemeStylesheet( export function loadColorSchemeStylesheet(
colorSchemeId, colorSchemeId,
theme_id, theme_id,
dark = false darkMode = false
) { ) {
const themeId = theme_id ? `/${theme_id}` : ""; const themeId = theme_id ? `/${theme_id}` : "";
ajax(`/color-scheme-stylesheet/${colorSchemeId}${themeId}.json`).then( ajax(`/color-scheme-stylesheet/${colorSchemeId}${themeId}.json`).then(
(result) => { (result) => {
if (result && result.new_href) { if (result && result.new_href) {
const elementId = dark ? "cs-preview-dark" : "cs-preview-light"; const elementId = darkMode ? "cs-preview-dark" : "cs-preview-light";
const existingElement = document.querySelector(`link#${elementId}`); const existingElement = document.querySelector(`link#${elementId}`);
if (existingElement) { if (existingElement) {
existingElement.href = result.new_href; existingElement.href = result.new_href;
} else { } else {
let link = document.createElement("link"); let link = document.createElement("link");
link.href = result.new_href; link.href = result.new_href;
link.media = dark link.media = darkMode
? "(prefers-color-scheme: dark)" ? "(prefers-color-scheme: dark)"
: "(prefers-color-scheme: light)"; : "(prefers-color-scheme: light)";
link.rel = "stylesheet"; link.rel = "stylesheet";
@ -70,6 +72,18 @@ export function loadColorSchemeStylesheet(
document.body.appendChild(link); document.body.appendChild(link);
} }
if (!darkMode) {
later(() => {
const schemeType = getComputedStyle(document.body).getPropertyValue(
"--scheme-type"
);
Session.currentProp(
"defaultColorSchemeIsDark",
schemeType.trim() === "dark"
);
}, 500);
}
} }
} }
); );