From 77a853e98045c647c754e76361104806ab43e920 Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Mon, 8 May 2023 22:31:22 +0200 Subject: [PATCH] feat: add .css theme file upload and a unstyled theme selector --- CHANGELOG.md | 2 + src/pages/settings/preload.ts | 34 +++++++++++++ src/pages/settings/settings.html | 87 +++++++++++++++++++++++--------- src/pages/settings/settings.scss | 56 +++++++++++++++++++- 4 files changed, 154 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24397c2..5fa7a58 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - moved from Javascript to Typescript for all files - use `npm run watch` to watch for changes & recompile typescript and sass files +- Added support for theming the application + ## 5.1.0 ### New features diff --git a/src/pages/settings/preload.ts b/src/pages/settings/preload.ts index fb64769..830c5e4 100644 --- a/src/pages/settings/preload.ts +++ b/src/pages/settings/preload.ts @@ -1,5 +1,6 @@ import remote from "@electron/remote"; import { ipcRenderer, shell } from "electron"; +import fs from "fs"; import { globalEvents } from "../../constants/globalEvents"; import { settings } from "../../constants/settings"; import { settingsStore } from "./../../scripts/settings"; @@ -24,6 +25,36 @@ let adBlock: HTMLInputElement, trayIcon: HTMLInputElement, updateFrequency: HTMLInputElement; +function getThemeFiles() { + const selectElement = document.getElementById("themesList") as HTMLSelectElement; + const fileNames = fs.readdirSync(process.resourcesPath).filter((file) => file.endsWith(".css")); + const options = fileNames.map((name) => { + return new Option(name, name); + }); + + // empty old options + const oldOptions = document.querySelectorAll("#themesList option"); + oldOptions.forEach((o) => o.remove()); + + [new Option("Tidal - Default", "none")].concat(options).forEach((option) => { + selectElement.add(option, null); + }); +} + +function handleFileUploads() { + const fileMessage = document.getElementById("file-message"); + fileMessage.innerText = "or drag and drop files here"; + + document.getElementById("theme-files").addEventListener("change", function (e: any) { + Array.from(e.target.files).forEach((file: File) => { + const destination = `${process.resourcesPath}/${file.name}`; + fs.copyFileSync(file.path, destination, null); + }); + fileMessage.innerText = `${e.target.files.length} files successfully uploaded`; + getThemeFiles(); + }); +} + /** * Sync the UI forms with the current settings */ @@ -79,6 +110,9 @@ window.addEventListener("DOMContentLoaded", () => { return document.getElementById(id) as HTMLInputElement; } + getThemeFiles(); + handleFileUploads(); + document.getElementById("close").addEventListener("click", hide); document.getElementById("restart").addEventListener("click", restart); document.querySelectorAll(".external-link").forEach((elem) => diff --git a/src/pages/settings/settings.html b/src/pages/settings/settings.html index b784a02..63b2599 100644 --- a/src/pages/settings/settings.html +++ b/src/pages/settings/settings.html @@ -35,6 +35,9 @@ + + + @@ -226,6 +229,49 @@ +
+

Flags

+
+
+

Disable hardware built-in media keys

+

+ Also prevents certain desktop environments from recognizing the chrome MPRIS + client separately from the custom MPRIS client. +

+
+ +
+
+
+

Enable GPU rasterization

+

Move a part of the rendering to the GPU for increased performance.

+
+ +
+
+
+

Disable Background Throttling

+

+ Makes app more responsive while in the background, at the cost of performance. +

+
+ +
+
+ + +
+
+

Theming

Custom CSS

@@ -238,41 +284,34 @@
-

Flags

+

Theme files

-

Disable hardware built-in media keys

+

Current theme

- Also prevents certain desktop environments from recognizing the chrome MPRIS - client separately from the custom MPRIS client. + Select a theme below or "Tidal - Default" to return to the original Tidal look.

+
-
+
-

Enable GPU rasterization

-

Move a part of the rendering to the GPU for increased performance.

-
- -
-
-
-

Disable Background Throttling

+

Upload new themes

- Makes app more responsive while in the background, at the cost of performance. + Click the button and select the css files to import. They will be added to the theme list + automatically.

+
+
+ Choose files + or drag and drop files here + +
+
-
diff --git a/src/pages/settings/settings.scss b/src/pages/settings/settings.scss index 537dbd5..8813c6a 100644 --- a/src/pages/settings/settings.scss +++ b/src/pages/settings/settings.scss @@ -156,7 +156,7 @@ html { display: none; } - @for $i from 1 to 6 { + @for $i from 1 to 7 { .settings > input:nth-child(#{$i * 2 - 1}):checked ~ & > .tabs__section:nth-child(#{$i}) { display: block; } @@ -361,3 +361,57 @@ html { } } } + +// file upload + +.file-drop-area { + position: relative; + display: flex; + align-items: center; + width: 100%; + max-width: 100%; + padding: 25px 0 25px 0px; + border: 1px dashed $tidal-grey; + border-radius: 3px; + transition: 0.2s; + &.is-active { + background-color: $black; + } + + div { + padding-left: 25px; + } +} + +.file-btn { + flex-shrink: 0; + background-color: $black; + border: 1px solid $tidal-grey; + border-radius: 3px; + padding: 8px 15px; + margin-right: 10px; + font-size: 12px; + text-transform: uppercase; +} + +.file-msg { + font-size: small; + font-weight: 300; + line-height: 1.4; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.file-input { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + cursor: pointer; + opacity: 0; + &:focus { + outline: none; + } +}