dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-20 20:59:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

overhaul modals and casting to device ui

Browse source
This commit is contained in:
Send_Nukez 2021-11-28 04:57:07 +01:00
parent e18320acb3
commit b2cfe07578
5 changed files with 207 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGELOG.md
View file

@ -14,4 +14,7 @@ Improved:
- Added hover tooltips on playlist / folder images. Useful for collapsed sidebar
- Now also shows if a new spicetify-cli update is available (Requires spicetify-cli > 2.7.2)
- Popups (like lyrics-plus settings) styles are now consistent with the Dribbblish settings styles
- Only display option to reset setting if it was changed
- Only display option to reset setting if it was changed
- `Connect to Device` interface / selection is now more inline with other context menus
- When casting to a device it shows up as info (next to your profile picture)
- Confirmation modal styles are now more inline with other popups

35
src/js/main.js
View file

@ -831,6 +831,41 @@ Dribbblish.on("ready", () => {
setInterval(checkForUpdate, 10 * 60 * 1000);
checkForUpdate();
function registerCastingListener() {
if (!document.querySelector(".main-nowPlayingBar-container")) return setTimeout(registerCastingListener, 250);
function setInfo() {
if (!document.querySelector(".main-connectBar-connectBar svg > path")) return;
Dribbblish.info.set("casting", {
icon: $(".main-connectBar-connectBar svg > path").attr("d").includes("1.48 1.48") ? "cast-connected" : "cast",
text: $(".main-connectBar-connectBar").text(),
// TODO: make onClick act like clicking on the connect to device button
// onClick: () => ,
order: -999
});
}
setInfo();
const castingListener = new MutationObserver((muts) => {
let action;
for (const mut of muts) {
if (mut.target instanceof HTMLElement && (mut.target.classList.contains("main-connectBar-connectBar") || mut.target.querySelector(".main-connectBar-connectBar"))) action = "change";
for (const el of mut.addedNodes) if (el instanceof HTMLElement && el.querySelector(".main-connectBar-connectBar")) action = "add";
for (const el of mut.removedNodes) if (el instanceof HTMLElement && el.querySelector(".main-connectBar-connectBar")) action = "remove";
}
if (["add", "change"].includes(action)) {
setInfo();
} else if (action == "remove") {
Dribbblish.info.remove("casting");
}
});
castingListener.observe(document.querySelector(".main-nowPlayingBar-container"), {
childList: true,
subtree: true
});
}
registerCastingListener();
// Show "Offline" info
function offlineInfo(show) {
Dribbblish.info.set(

48
src/styles/ConnectDeviceList.scss Normal file
View file

@ -0,0 +1,48 @@
.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();
&::before {
display: none;
}
.connect-device-list-content {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
.connect-header {
padding: 0px;
filter: invert(var(--is_light));
}
.connect-device-list {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
.connect-device-list-item {
background-color: transparent;
border-radius: var(--main-corner-radius);
&:hover,
&:active {
background-color: spiceColor("subtext", 0.1, 0.1);
}
&--active {
background-color: spiceColor("selected-row", 0.2) !important;
}
}
}
}
}

64
src/styles/Modals.scss Normal file
View file

@ -0,0 +1,64 @@
.GenericModal__overlay {
backdrop-filter: blur(3px) brightness(60%);
background-color: transparent;
.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();
// Popups (`Spicetify.PopupModal.display()`)
generic-modal & {
color: spiceColor("text");
width: clamp(500px, 50%, 650px);
}
// Dialogs (Delete Folder)
.ReactModalPortal > & {
> * {
color: spiceColor("subtext");
background-color: transparent;
padding: 0px;
}
}
.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;
}
}
}
}

101
src/styles/main.scss
View file

@ -8,12 +8,13 @@
@import "Fonts";
@import "Inputs";
@import "ConfigMenu";
@import "ContextMenu.scss";
@import "ContextMenu";
@import "NoAds";
@import "Markdown";
@import "Info";
@import "Loader";
@import "Popup";
@import "Modals";
@import "ConnectDeviceList";
:root {
--bar-height: 70px;
@ -27,6 +28,18 @@
--sidebar-icons-border-radius: 50vh; // 50vh = round / pill
--song-transition-speed: 3s;
--is_dark: calc(1 - var(--is_light));
// Display warning for incorrectly installed js
&:not([dribbblish-js-installed])::after {
content: "dribbblish-dynamic.js not installed correctly";
position: fixed;
inset: 0px;
color: red;
background-color: black;
text-align: center;
line-height: 100vh;
@include spiceFont("glue", 32px, "Bold");
}
}
::-webkit-scrollbar {
@ -103,15 +116,6 @@
color: white;
}
.connect-title,
.connect-header {
display: none;
}
.connect-device-list {
margin: 0px -5px;
}
/* Remove Topbar background colour */
.main-topBar-background {
background-color: unset !important;
@ -120,8 +124,7 @@
background-color: spiceColor("main");
}
.main-entityHeader-shadow,
.connect-device-list-container {
.main-entityHeader-shadow {
box-shadow: 0 4px 20px #21212130;
}
@ -305,6 +308,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
}
.main-nowPlayingBar-container {
position: relative;
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
background-color: spiceColor("main");
border-top: 0;
@ -320,11 +324,27 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
}
.main-connectBar-connectBar {
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
border: 2px solid spiceColor("main");
border-top: 0;
background-color: spiceColor("button") !important;
color: spiceColor("text") !important;
// These styles are useless, but maybe we'll change this back to the way it was before so I'll leave them
display: none;
// position: absolute;
// display: flex;
// flex-direction: row-reverse;
// gap: 8px;
// height: fit-content;
// right: 4px;
// bottom: 4px;
// padding: 2px 8px;
// background-color: spiceColor("text", 0.2) !important;
// border-radius: var(--main-corner-radius);
// &::after {
// display: none;
// }
// svg {
// margin: 0px;
// }
}
.Root__nav-bar {
@ -513,13 +533,9 @@ html.sidebar-hide-text .GlueDropTarget span {
.playback-bar {
position: absolute;
width: var(--main-view-width);
left: var(--sidebar-width);
bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
}
.Root.is-connectBarVisible .playback-bar {
bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
left: 0px;
right: 0px;
top: calc(0px - 12px / 2);
}
.main-nowPlayingWidget-coverArt .cover-art {
@ -557,6 +573,10 @@ html.sidebar-hide-text .GlueDropTarget span {
.progress-bar:not(:active) .progress-bar__slider {
transition-property: left, opacity;
}
.playback-bar:not(:active) .prog-tooltip {
transition: transform var(--playbar-movement-anim-speed) ease;
}
}
.playback-bar .prog-tooltip {
@ -566,15 +586,15 @@ html.sidebar-hide-text .GlueDropTarget span {
left: 50%;
transform: translateX(calc(-50%));
padding: 0 5px;
border-radius: 4px;
text-align: center;
color: spiceColor("text");
background-color: spiceColor("button");
pointer-events: none;
}
.playback-bar:not(:active) .prog-tooltip {
transition: transform var(--playbar-movement-anim-speed) ease;
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();
}
.minimal-player .player-controls__buttons {
@ -1078,10 +1098,6 @@ div.GlueDropTarget.personal-library > *.active {
left: calc(var(--sidebar-width) + 10px);
}
.Root.is-connectBarVisible .main-coverSlotExpanded-container {
bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
}
html.right-expanded-cover .main-coverSlotExpanded-container {
right: calc(var(--main-gap) * 2);
left: unset;
@ -1140,11 +1156,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
border-radius: 5px;
}
.connect-device-list-item:focus,
.connect-device-list-item:hover {
background-color: spiceColor("selected-row", 0.3);
}
/* 1.1.56 */
.main-navBar-navBar {
width: var(--sidebar-width) !important;
@ -1190,10 +1201,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
.main-tag-container {
background-color: spiceColor("text");
}
/* progressbar tooltip text color */
.playback-bar .prog-tooltip {
color: spiceColor("sidebar-text") !important;
}
/* edit button of CustomApps */
.reddit-sort-container button.switch,
@ -1265,6 +1272,10 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
display: none;
}
svg[type="dribbblish-icon"] {
overflow: visible;
}
// ! WORKAROUNDS / TEMP FIXES
// Spotify UI breaks after advertisements #63
canvas[width="250"][height="250"] {