From 56b109cc01cfe8af42589b79b9f67e83af8fba66 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Fri, 24 Dec 2021 21:40:54 +0100 Subject: [PATCH] refactor stuff and change notification styles --- CHANGELOG.md | 3 +- src/js/Dribbblish.js | 9 +++- src/js/Loader.js | 22 +++----- src/js/Overlay.js | 68 ++++++++++++++++++++++++ src/styles/ConfigMenu.scss | 5 +- src/styles/ConnectDeviceList.scss | 9 +--- src/styles/ContextMenu.scss | 10 +--- src/styles/Lyrics.scss | 1 + src/styles/Modals.scss | 5 +- src/styles/{Loader.scss => Overlay.scss} | 10 ++-- src/styles/Popup.scss | 50 ----------------- src/styles/Util.scss | 8 +++ src/styles/main.scss | 18 ++++--- 13 files changed, 115 insertions(+), 103 deletions(-) create mode 100644 src/js/Overlay.js create mode 100644 src/styles/Lyrics.scss rename src/styles/{Loader.scss => Overlay.scss} (83%) delete mode 100644 src/styles/Popup.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 4253e97..b1efd0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,4 +6,5 @@ Fixed: Improved: - Add `embedWidgetGenerator` modals to custom modal styles. (Things like the [spicetify-marketplace](https://github.com/CharlieS1103/spicetify-marketplace) options) -- Changed custom app tab styles to fit in with the theme \ No newline at end of file +- Changed custom app tab styles to fit in with the theme +- Changed notification styles to fit in with other elements of the theme \ No newline at end of file diff --git a/src/js/Dribbblish.js b/src/js/Dribbblish.js index cd7b8ea..5d7056e 100644 --- a/src/js/Dribbblish.js +++ b/src/js/Dribbblish.js @@ -1,7 +1,8 @@ import ConfigMenu from "./ConfigMenu"; import Info from "./Info"; import Loader from "./Loader"; -import { icons } from "./Icons"; +import Overlay from "./Overlay"; +import Icon, { icons } from "./Icons"; export default class Dribbblish { /** @@ -23,7 +24,10 @@ export default class Dribbblish { /** @type {Loader} */ loader; - /** @type {Icons} */ + /** @type {Overlay} */ + overlay; + + /** @type {Icon} */ icons; /** @type {Object.} */ @@ -36,6 +40,7 @@ export default class Dribbblish { this.config = new ConfigMenu(); this.info = new Info(); this.loader = new Loader(); + this.overlay = new Overlay(); this.icons = icons; let tries = 0; diff --git a/src/js/Loader.js b/src/js/Loader.js index 5f51b4d..fe0cff2 100644 --- a/src/js/Loader.js +++ b/src/js/Loader.js @@ -1,28 +1,18 @@ -import { icons } from "./Icons"; +import Overlay from "./Overlay"; export default class Loader { - /** @type {HTMLDivElement} */ - #container; + /** @type {Overlay} */ + #overlay; constructor() { - this.#container = document.createElement("div"); - this.#container.id = "dribbblish-loader"; - this.#container.innerHTML = /* html */ ` -
- ${icons.get("loading", { size: 64 })} - -
- `; - - document.body.appendChild(this.#container); + this.#overlay = new Overlay(); } show(text) { - this.#container.querySelector("span").innerText = text ?? "Loading..."; - this.#container.setAttribute("active", ""); + this.#overlay.show({ icon: "loading", text }); } hide() { - this.#container.removeAttribute("active"); + this.#overlay.hide(); } } diff --git a/src/js/Overlay.js b/src/js/Overlay.js new file mode 100644 index 0000000..e918075 --- /dev/null +++ b/src/js/Overlay.js @@ -0,0 +1,68 @@ +import { defaults } from "./Util"; +import { icons } from "./Icons"; + +export default class Overlay { + /** + * @typedef {Object} DribbblishOverlayOptions + * @property {String} icon + * @property {String} text + * @property {DribbblishOverlayColor} color + */ + + /** + * @typedef {Object} DribbblishOverlayColor + * @property {String} [icon] + * @property {String} [text] + */ + + /** @type {HTMLDivElement} */ + #container; + + /** @type {HTMLElement} */ + #iconElem; + + /** @type {HTMLSpanElement} */ + #textElem; + + constructor() { + this.#container = document.createElement("div"); + this.#container.id = "dribbblish-overlay"; + this.#container.innerHTML = /* html */ ` +
+ + Loading... +
+ `; + + this.#iconElem = this.#container.querySelector("i"); + this.#textElem = this.#container.querySelector("span"); + + document.body.appendChild(this.#container); + } + + /** + * + * @param {DribbblishOverlayOptions} options + */ + show(options) { + const defaultOptions = { + icon: "", + text: "", + color: { + icon: "var(--spice-text)", + text: "var(--spice-subtext)" + } + }; + options = defaults(options, defaultOptions); + if (options.icon != "" && !options.icon.startsWith(" h2 { font-size: 32px; diff --git a/src/styles/ConnectDeviceList.scss b/src/styles/ConnectDeviceList.scss index 1923351..62c953c 100644 --- a/src/styles/ConnectDeviceList.scss +++ b/src/styles/ConnectDeviceList.scss @@ -1,13 +1,6 @@ .connect-device-list-container { - $border-color: spiceColor("subtext", 0.1, 0.1); - - border: 1px solid $border-color; - border-radius: var(--main-corner-radius); padding: 8px; - background-color: spiceColor("main", 0.75, -0.1) !important; - backdrop-filter: blur(10px); - border-radius: var(--main-corner-radius); - @include spiceShadow(); + @include spiceGlass(lightOffset(0.8, -0.1)); &::before { display: none; diff --git a/src/styles/ContextMenu.scss b/src/styles/ContextMenu.scss index e1fa761..c2cce03 100644 --- a/src/styles/ContextMenu.scss +++ b/src/styles/ContextMenu.scss @@ -1,10 +1,7 @@ .main-contextMenu-menu { - $border-color: spiceColor("subtext", 0.1, 0.1); - position: relative; overflow: visible; background-color: transparent !important; - border: 1px solid $border-color; border-radius: var(--main-corner-radius); padding: 8px; @@ -13,10 +10,7 @@ content: ""; position: absolute; inset: 0px; - background-color: spiceColor("main", 0.75, -0.1) !important; - backdrop-filter: blur(10px); - border-radius: var(--main-corner-radius); - @include spiceShadow(); + @include spiceGlass(lightOffset(0.8, -0.1)); } .main-contextMenu-menuItem { @@ -34,7 +28,7 @@ &::after { left: 8px; right: 8px; - border-color: $border-color; + border-color: spiceColor("subtext", 0.1, 0.1); } } } diff --git a/src/styles/Lyrics.scss b/src/styles/Lyrics.scss new file mode 100644 index 0000000..9ee18d2 --- /dev/null +++ b/src/styles/Lyrics.scss @@ -0,0 +1 @@ +// TODO: improve default lyrics styles when the classes are mapped `see: https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/144` diff --git a/src/styles/Modals.scss b/src/styles/Modals.scss index 57d7047..bce75ae 100644 --- a/src/styles/Modals.scss +++ b/src/styles/Modals.scss @@ -5,15 +5,12 @@ .GenericModal { z-index: 1; position: relative; - background-color: spiceColor("main", 0.95); - backdrop-filter: blur(3px); padding: 24px 16px; - border-radius: var(--main-corner-radius); display: flex; flex-direction: column; align-items: center; justify-content: center; - @include spiceShadow(); + @include spiceGlass(); // Popups (`Spicetify.PopupModal.display()`) generic-modal & { diff --git a/src/styles/Loader.scss b/src/styles/Overlay.scss similarity index 83% rename from src/styles/Loader.scss rename to src/styles/Overlay.scss index af5545a..672469d 100644 --- a/src/styles/Loader.scss +++ b/src/styles/Overlay.scss @@ -1,4 +1,4 @@ -#dribbblish-loader { +#dribbblish-overlay { z-index: 999999; position: fixed; inset: 0px; @@ -31,8 +31,12 @@ gap: 16px; align-items: center; - svg { - color: spiceColor("text"); + & > * { + color: var(--color); + + &:empty { + display: none; + } } } } diff --git a/src/styles/Popup.scss b/src/styles/Popup.scss deleted file mode 100644 index 3ffc597..0000000 --- a/src/styles/Popup.scss +++ /dev/null @@ -1,50 +0,0 @@ -.GenericModal__overlay { - backdrop-filter: blur(3px) brightness(60%); - background-color: transparent; - - .GenericModal { - z-index: 1; - position: relative; - width: clamp(500px, 50%, 650px); - background-color: spiceColor("main", 0.95); - backdrop-filter: blur(3px); - padding: 24px 16px; - border-radius: var(--main-corner-radius); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - @include spiceShadow(); - - .main-trackCreditsModal-container { - display: flex; - gap: 16px; - background-color: transparent; - width: 100%; - - .main-trackCreditsModal-header { - display: flex; - gap: 16px; - padding: 0px; - width: 100%; - border: none; - - h1 { - text-align: center; - width: 100%; - @include spiceFont("glue", 2em, "Bold"); - } - - button { - position: absolute; - top: 16px; - right: 16px; - } - } - - .main-trackCreditsModal-mainSection { - padding: 0px 26px; - } - } - } -} diff --git a/src/styles/Util.scss b/src/styles/Util.scss index 44a357f..9c35464 100644 --- a/src/styles/Util.scss +++ b/src/styles/Util.scss @@ -11,3 +11,11 @@ @mixin spiceShadow() { box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1); } + +@mixin spiceGlass($opacity: 0.95) { + background-color: spiceColor("main", $opacity); + backdrop-filter: blur(10px); + border: 1px solid spiceColor("subtext", 0.1, 0.1); + border-radius: var(--main-corner-radius); + @include spiceShadow(); +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0e26c73..ac26d83 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -7,10 +7,11 @@ @import "NoAds"; @import "Markdown"; @import "Info"; -@import "Loader"; @import "Modals"; @import "ConnectDeviceList"; +@import "Lyrics"; @import "Icons"; +@import "Overlay"; @import "CustomAppTabBar"; :root { @@ -595,13 +596,8 @@ html.sidebar-hide-text .GlueDropTarget span { text-align: center; white-space: nowrap; pointer-events: none; - border: 1px solid spiceColor("subtext", 0.1, 0.1); - border-radius: var(--main-corner-radius); color: spiceColor("subtext"); - background-color: spiceColor("main", 0.75, -0.1) !important; - backdrop-filter: blur(10px); - border-radius: var(--main-corner-radius); - @include spiceShadow(); + @include spiceGlass(); } .minimal-player .player-controls__buttons { @@ -1288,6 +1284,14 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container { display: none; } +// Notifications +.main-notificationBubbleContainer-NotificationBubbleContainer { + .main-notificationBubble-NotificationBubble { + color: spiceColor("subtext"); + @include spiceGlass(); + } +} + // ! WORKAROUNDS / TEMP FIXES // Spotify UI breaks after advertisements #63 canvas[width="250"][height="250"] {