From 09b89600388b9f685f8d98fa3eb525b24506103f Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 2 Feb 2022 21:33:52 -0800 Subject: [PATCH 1/3] Starting theme support --- src/main/base/browserwindow.ts | 22 ++++++++++++++++++++++ src/renderer/index.js | 13 +++++++++++++ src/renderer/themes/WIP.md | 14 ++++++++++++++ src/renderer/themes/default.less | 1 + src/renderer/views/main.ejs | 1 + src/renderer/views/pages/settings.ejs | 25 ++++++++++++++----------- 6 files changed, 65 insertions(+), 11 deletions(-) create mode 100644 src/renderer/themes/WIP.md create mode 100644 src/renderer/themes/default.less diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index e5115fad..755bba14 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -150,6 +150,20 @@ export class BrowserWindow { res.render("main", this.EnvironmentVariables); }); + app.get("/themes/:theme", (req, res) => { + const theme = req.params.theme.toLowerCase(); + const themePath = path.join(utils.getPath('srcPath'), "./renderer/themes/", theme); + const userThemePath = path.join(utils.getPath('themes'), theme); + if (fs.existsSync(userThemePath)) { + res.sendFile(userThemePath); + } else if (fs.existsSync(themePath)) { + res.sendFile(themePath); + } else { + res.send(`// Theme not found - ${userThemePath}`); + } + + }); + app.get("/audio.webm", (req, res) => { try { req.socket.setTimeout(Number.MAX_SAFE_INTEGER); @@ -276,6 +290,14 @@ export class BrowserWindow { event.returnValue = process.platform; }); + ipcMain.on("get-themes", (event, key) => { + if (fs.existsSync(utils.getPath("themes"))) { + event.returnValue = fs.readdirSync(utils.getPath("themes")); + } else { + event.returnValue = []; + } + }); + ipcMain.on("get-i18n", (event, key) => { event.returnValue = utils.getLocale(key); }); diff --git a/src/renderer/index.js b/src/renderer/index.js index 0154a5c1..1e90530c 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -586,6 +586,7 @@ const app = new Vue({ }, async init() { let self = this + this.setTheme() this.setLz(this.cfg.general.language) this.setLzManual() clearTimeout(this.hangtimer) @@ -840,6 +841,18 @@ const app = new Vue({ this.$forceUpdate() }, 500) }, + setTheme(theme = "") { + if(this.cfg.visual.theme == "") { + this.cfg.visual.theme = "default.less" + } + if(theme == ""){ + theme = this.cfg.visual.theme + }else{ + this.cfg.visual.theme = theme + } + document.querySelector("#userTheme").href = `themes/${this.cfg.visual.theme}` + document.querySelectorAll(`[id*='less']`).forEach(el => { el.remove() });less.refresh() + }, unauthorize() { this.mk.unauthorize() document.location.reload() diff --git a/src/renderer/themes/WIP.md b/src/renderer/themes/WIP.md new file mode 100644 index 00000000..9bac366d --- /dev/null +++ b/src/renderer/themes/WIP.md @@ -0,0 +1,14 @@ +# Themes (WIP) + +## Making a theme +* If one does not already exist, create a new theme directory in the user data folder. + * **Windows:** `%appdata%/Cider/themes` + * **Mac:** `~/Library/Application Support/Cider/themes` + * **Linux:** `~/.config/Cider/themes` +* Create a `theme.less` file with the name of the theme. +* In Cider, select the theme in the settings. +* To enable hot reloading for the theme, open the DevTools and enter `less.watch()` in the console. + +## Resources +* The default styles.less can be found in: [src/renderer/style.less](https://github.com/ciderapp/Cider/tree/main/src/renderer/style.less) +* [Less.js documentation](https://lesscss.org/) \ No newline at end of file diff --git a/src/renderer/themes/default.less b/src/renderer/themes/default.less new file mode 100644 index 00000000..29f60626 --- /dev/null +++ b/src/renderer/themes/default.less @@ -0,0 +1 @@ +// Default theme \ No newline at end of file diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 7517b412..4973ed00 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -16,6 +16,7 @@ Cider + diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs index 4b99d3c3..ea9f61fb 100644 --- a/src/renderer/views/pages/settings.ejs +++ b/src/renderer/views/pages/settings.ejs @@ -97,6 +97,17 @@ {{$root.getLz('settings.header.visual')}}
+
+
+ Theme +
+
+ +
+
{{$root.getLz('settings.option.visual.windowBackgroundStyle')}} @@ -623,16 +634,7 @@ {{$root.getLz('settings.header.unfinished')}}
-
-
- Theme -
-
- -
-
+
Theme Options @@ -694,7 +696,8 @@ props: [], data: function () { return { - app: this.$root + app: this.$root, + themes: ipcRenderer.sendSync("get-themes") } }, mounted: function () { From 72c672c480f88807613c1b60833256b6609851dd Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 2 Feb 2022 21:37:55 -0800 Subject: [PATCH 2/3] will no longer run app.setTheme on init if no theme was selected --- src/renderer/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/index.js b/src/renderer/index.js index 1e90530c..42855963 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -586,7 +586,9 @@ const app = new Vue({ }, async init() { let self = this - this.setTheme() + if(this.cfg.visual.theme != "default.less" || this.cfg.visual.theme != "") { + this.setTheme() + } this.setLz(this.cfg.general.language) this.setLzManual() clearTimeout(this.hangtimer) From 1071ab89a9aaa4ebe14b88a3931c3e32be6f7895 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 2 Feb 2022 21:49:28 -0800 Subject: [PATCH 3/3] will now go responsive sooner --- src/renderer/style.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/renderer/style.less b/src/renderer/style.less index 583798a8..32c31859 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -502,6 +502,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .app-sidebar-footer { + border-top: 1px solid rgba(200, 200, 200, 0.15); padding: 11px; .app-playback-controls { @@ -1392,7 +1393,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } /* Window is smaller <= 1023px width */ -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1120px) { .display--small { display: inherit !important;; @@ -4579,7 +4580,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { height: 50vh; } - @media only screen and (max-width: 1023px) { + @media only screen and (max-width: 1121px) { .display--large { display: flex !important; } @@ -4970,7 +4971,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { height: 50vh; } - @media only screen and (max-width: 1023px) { + @media only screen and (max-width: 1121px) { .display--large { display: flex !important; }