From fdd60a7516efdf7b8ad331119e68a24a66cc593f Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 25 Jul 2022 11:38:50 +0530 Subject: [PATCH 1/7] Add documentation for derived themes --- doc/THEMING.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/doc/THEMING.md b/doc/THEMING.md index b6af27cf..5ffadf44 100644 --- a/doc/THEMING.md +++ b/doc/THEMING.md @@ -167,3 +167,38 @@ To find the theme-id of some theme, you can look at the built-asset section of t This default theme will render as "Default" option in the theme-chooser dropdown. If the device preference is for dark theme, the dark default is selected and vice versa. **You'll need to reload twice so that Hydrogen picks up the config changes!** + +# Derived Theme(Collection) +This allows users to theme Hydrogen without the need for rebuilding. Derived theme collections can be thought of as extensions (derivations) of some existing build time theme. + +## Creating a derived theme: +Here's how you create a new derived theme: +1. You create a new theme manifest file (eg: theme-awesome.json) and mention which build time theme you're basing your new theme on using the `extends` field. The base css file of the mentioned theme is used for your new theme. +2. You configue the theme manifest as usual by populating the `variants` field with your desired colors. +3. You add your new theme manifest to the list of themes in `config.json`. + +Reload Hydrogen twice and the new theme should show up in the theme chooser. + +## How does it work? + +For every theme collection in hydrogen, the build process emits a runtime css file which like the built theme css file contains variables in the css code. But unlike the theme css file, the runtime css file lacks the definition for these variables: + +CSS for the built theme: +```css +:root { + --background-color-primary: #f2f20f; +} + +body { + background-color: var(--background-color-primary); +} +``` +and the corresponding runtime theme: +```css +/* Notice the lack of definiton for --background-color-primary here! */ +body { + background-color: var(--background-color-primary); +} +``` + +When hydrogen loads a derived theme, it takes the runtime css file of the extended theme and dynamically adds the variable definition based on the values specified in the manifest. Icons are also colored dynamically and injected as variables using Data URIs. From adfecf0778838b7167c1264b4125e6d2d9fdef73 Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Tue, 26 Jul 2022 10:02:20 +0200 Subject: [PATCH 2/7] Fix restoring the last url at start The last session url is now remembered for being restored at the beginning of the session. Thanks for the help of @bwindels --- src/domain/navigation/URLRouter.js | 4 ++-- src/matrix/common.js | 18 +++++++++--------- src/platform/web/dom/History.js | 5 +++-- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/domain/navigation/URLRouter.js b/src/domain/navigation/URLRouter.js index 586eec8a..ab5dc5ce 100644 --- a/src/domain/navigation/URLRouter.js +++ b/src/domain/navigation/URLRouter.js @@ -27,7 +27,7 @@ export class URLRouter { } _getLastSessionId() { - const navPath = this._urlAsNavPath(this._history.getLastUrl() || ""); + const navPath = this._urlAsNavPath(this._history.getLastSessionUrl() || ""); const sessionId = navPath.get("session")?.value; if (typeof sessionId === "string") { return sessionId; @@ -84,7 +84,7 @@ export class URLRouter { } tryRestoreLastUrl() { - const lastNavPath = this._urlAsNavPath(this._history.getLastUrl() || ""); + const lastNavPath = this._urlAsNavPath(this._history.getLastSessionUrl() || ""); if (lastNavPath.segments.length !== 0) { this._applyNavPathToNavigation(lastNavPath); return true; diff --git a/src/matrix/common.js b/src/matrix/common.js index ba7876ed..abd74a57 100644 --- a/src/matrix/common.js +++ b/src/matrix/common.js @@ -22,16 +22,16 @@ export function makeTxnId() { } export function isTxnId(txnId) { - return txnId.startsWith("t") && txnId.length === 15; + return txnId.startsWith("t") && txnId.length === 15; } export function tests() { - return { - "isTxnId succeeds on result of makeTxnId": assert => { - assert(isTxnId(makeTxnId())); - }, - "isTxnId fails on event id": assert => { - assert(!isTxnId("$yS_n5n3cIO2aTtek0_2ZSlv-7g4YYR2zKrk2mFCW_rm")); - }, - } + return { + "isTxnId succeeds on result of makeTxnId": assert => { + assert(isTxnId(makeTxnId())); + }, + "isTxnId fails on event id": assert => { + assert(!isTxnId("$yS_n5n3cIO2aTtek0_2ZSlv-7g4YYR2zKrk2mFCW_rm")); + }, + } } diff --git a/src/platform/web/dom/History.js b/src/platform/web/dom/History.js index d51974bb..49102e5c 100644 --- a/src/platform/web/dom/History.js +++ b/src/platform/web/dom/History.js @@ -65,6 +65,7 @@ export class History extends BaseObservableValue { } onSubscribeFirst() { + this._lastSessionHash = window.localStorage?.getItem("hydrogen_last_url_hash"); window.addEventListener('hashchange', this); } @@ -76,7 +77,7 @@ export class History extends BaseObservableValue { window.localStorage?.setItem("hydrogen_last_url_hash", hash); } - getLastUrl() { - return window.localStorage?.getItem("hydrogen_last_url_hash"); + getLastSessionUrl() { + return this._lastSessionHash; } } From 0718f1e77ebd3a8af4566df7ec2062254a1843f2 Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Tue, 26 Jul 2022 11:11:16 +0200 Subject: [PATCH 3/7] Fixed the https://github.com/vector-im/hydrogen-web/pull/816#discussion_r929692693 comment Added the _lastSessionHash attribute inside the History constructor --- src/platform/web/dom/History.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/platform/web/dom/History.js b/src/platform/web/dom/History.js index 49102e5c..ab47e18a 100644 --- a/src/platform/web/dom/History.js +++ b/src/platform/web/dom/History.js @@ -17,6 +17,12 @@ limitations under the License. import {BaseObservableValue} from "../../../observable/ObservableValue"; export class History extends BaseObservableValue { + + constructor() { + super(); + this._lastSessionHash = null; + } + handleEvent(event) { if (event.type === "hashchange") { this.emit(this.get()); From 9b0ab0c8f1d8cbd9fef72b565b635a2be89687d0 Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Wed, 27 Jul 2022 09:19:36 +0200 Subject: [PATCH 4/7] Used "null" instead of "undefined" When creating the this._lastSessionHash attribute of History --- src/platform/web/dom/History.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/dom/History.js b/src/platform/web/dom/History.js index ab47e18a..d40f501b 100644 --- a/src/platform/web/dom/History.js +++ b/src/platform/web/dom/History.js @@ -20,7 +20,7 @@ export class History extends BaseObservableValue { constructor() { super(); - this._lastSessionHash = null; + this._lastSessionHash = undefined; } handleEvent(event) { From 2d3b6fe973b2b1e66a5db985d357a60e1674bd71 Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Wed, 27 Jul 2022 12:40:19 +0200 Subject: [PATCH 5/7] Canceled indentation modification. --- src/matrix/common.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/matrix/common.js b/src/matrix/common.js index abd74a57..ba7876ed 100644 --- a/src/matrix/common.js +++ b/src/matrix/common.js @@ -22,16 +22,16 @@ export function makeTxnId() { } export function isTxnId(txnId) { - return txnId.startsWith("t") && txnId.length === 15; + return txnId.startsWith("t") && txnId.length === 15; } export function tests() { - return { - "isTxnId succeeds on result of makeTxnId": assert => { - assert(isTxnId(makeTxnId())); - }, - "isTxnId fails on event id": assert => { - assert(!isTxnId("$yS_n5n3cIO2aTtek0_2ZSlv-7g4YYR2zKrk2mFCW_rm")); - }, - } + return { + "isTxnId succeeds on result of makeTxnId": assert => { + assert(isTxnId(makeTxnId())); + }, + "isTxnId fails on event id": assert => { + assert(!isTxnId("$yS_n5n3cIO2aTtek0_2ZSlv-7g4YYR2zKrk2mFCW_rm")); + }, + } } From 02bc7d1d7e9eef5915b9cb6284fb289868905e44 Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Fri, 29 Jul 2022 10:14:41 +0000 Subject: [PATCH 6/7] fix typo --- doc/THEMING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/THEMING.md b/doc/THEMING.md index 5ffadf44..39729830 100644 --- a/doc/THEMING.md +++ b/doc/THEMING.md @@ -174,7 +174,7 @@ This allows users to theme Hydrogen without the need for rebuilding. Derived the ## Creating a derived theme: Here's how you create a new derived theme: 1. You create a new theme manifest file (eg: theme-awesome.json) and mention which build time theme you're basing your new theme on using the `extends` field. The base css file of the mentioned theme is used for your new theme. -2. You configue the theme manifest as usual by populating the `variants` field with your desired colors. +2. You configure the theme manifest as usual by populating the `variants` field with your desired colors. 3. You add your new theme manifest to the list of themes in `config.json`. Reload Hydrogen twice and the new theme should show up in the theme chooser. From 06da5a8ae485a0b83f682711306239b14b20d916 Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Fri, 29 Jul 2022 10:14:58 +0000 Subject: [PATCH 7/7] clarification --- doc/THEMING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/THEMING.md b/doc/THEMING.md index 39729830..599434bd 100644 --- a/doc/THEMING.md +++ b/doc/THEMING.md @@ -177,7 +177,7 @@ Here's how you create a new derived theme: 2. You configure the theme manifest as usual by populating the `variants` field with your desired colors. 3. You add your new theme manifest to the list of themes in `config.json`. -Reload Hydrogen twice and the new theme should show up in the theme chooser. +Refresh Hydrogen twice (once to refresh cache, and once to load) and the new theme should show up in the theme chooser. ## How does it work?