PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge pull request #11381 from vector-im/travis/base-theme

Browse source 
Trigger a theme change on startup, not just a tint change
This commit is contained in:
Travis Ralston 2019-11-14 09:25:15 -07:00 committed by GitHub
commit 515db517ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/vector/index.js
View file

@ -56,8 +56,8 @@ import WebPlatform from './platform/WebPlatform';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg'; import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore"; import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
import Tinter from 'matrix-react-sdk/lib/Tinter';
import SdkConfig from "matrix-react-sdk/lib/SdkConfig"; import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
import {getBaseTheme, setTheme} from "matrix-react-sdk/lib/theme";
import Olm from 'olm'; import Olm from 'olm';
@ -255,15 +255,18 @@ async function loadApp() {
} }
// as quickly as we possibly can, set a default theme... // as quickly as we possibly can, set a default theme...
// we do this by checking to see if the theme's "base" has loaded first so we can
// safely rely on the assets.
let a; let a;
const theme = SettingsStore.getValue("theme"); const theme = SettingsStore.getValue("theme");
const baseTheme = getBaseTheme(theme);
for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) { for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
const href = a.getAttribute("href"); const href = a.getAttribute("href");
if (!href) continue; if (!href) continue;
// shouldn't we be using the 'title' tag rather than the href? // shouldn't we be using the 'title' tag rather than the href?
const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/); const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/);
if (match) { if (match) {
if (match[1] === theme) { if (match[1] === baseTheme) {
// remove the disabled flag off the stylesheet // remove the disabled flag off the stylesheet
// Firefox requires setting the attribute to false, so do // Firefox requires setting the attribute to false, so do
@ -274,21 +277,21 @@ async function loadApp() {
// in case the Tinter.tint() in MatrixChat fires before the // in case the Tinter.tint() in MatrixChat fires before the
// CSS has actually loaded (which in practice happens)... // CSS has actually loaded (which in practice happens)...
// This if fixes Tinter.setTheme to not fire on Firefox // This if fixes setTheme to not fire on Firefox
// in case it is the first time loading Riot. // in case it is the first time loading Riot.
// `InstallTrigger` is a Object which only exists on Firefox // `InstallTrigger` is a Object which only exists on Firefox
// (it is used for their Plugins) and can be used as a // (it is used for their Plugins) and can be used as a
// feature check. // feature check.
// Firefox loads css always before js. This is why we dont use // Firefox loads css always before js. This is why we dont use
// onload or it's EventListener as thoose will never trigger. // onload or it's EventListener as those will never trigger.
if (typeof InstallTrigger !== 'undefined') { if (typeof InstallTrigger !== 'undefined') {
Tinter.setTheme(theme); setTheme(theme);
} else { } else {
// FIXME: we should probably block loading the app or even // FIXME: we should probably block loading the app or even
// showing a spinner until the theme is loaded, to avoid // showing a spinner until the theme is loaded, to avoid
// flashes of unstyled content. // flashes of unstyled content.
a.onload = () => { a.onload = () => {
Tinter.setTheme(theme); setTheme(theme);
}; };
} }
} else { } else {