diff --git a/CHANGELOG.md b/CHANGELOG.md index d199fe9..bb0bab6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,15 @@ Added: -- New settings area called "Consistency" for things that make it more consistent with the original spotify theme - Ability to hide album name and year in playbar (#85) +- Ability to change Sidebar gap sizes (#90) +- Ability to toggle playbar shadow (#92) Fixed: -- Some sidebar items hawing wrong width on hover [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428) -- Sidebar config buttons being below the text +- Some sidebar items hawing wrong width on hover [(this)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428) +- `Sidebar config` buttons being below the text - Fix #87 by not showing the playing indicator above "Liked Songs" - Queue icon is hidden (#73) (Temporary until a better solution is found) - Playbar album name is now white again Improved: -- Background image now dosen't leak out of the main center area \ No newline at end of file +- Background image now dosen't leak out of the main center area +- Sidebar playlist icon images are now properly displayed and won't look stretched anymore \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 9bd06ff..7c55d2b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -22,6 +22,7 @@ DribbblishShared.config.register({ }); DribbblishShared.config.register({ + area: "Sidebar", type: "checkbox", key: "roundSidebarIcons", name: "Round Sidebar Icons", @@ -40,6 +41,50 @@ DribbblishShared.config.register({ onChange: (val) => $("html").css("--sidebar-icons-hover-animation", val ? "1" : "0") }); +DribbblishShared.config.register({ + area: "Sidebar", + type: "slider", + key: "sidebarGapLeft", + name: "Left Sidebar Gap Size", + description: "Set gap size between sidebar icons (in pixels).", + defaultValue: 5, + data: { + min: 0, + max: 100, + step: 1, + suffix: "px" + }, + onChange: (val) => $("html").css("--sidebar-gap-left", `${val}px`) +}); + +DribbblishShared.config.register({ + area: "Sidebar", + type: "slider", + key: "sidebarGapRight", + name: "Right Sidebar Gap Size", + description: "Set gap size between sidebar icons (in pixels).", + defaultValue: 32, + data: { + min: 0, + max: 100, + step: 1, + suffix: "px" + }, + onChange: (val) => $("html").css("--sidebar-gap-right", `${val}px`) +}); + +waitForElement([".main-nowPlayingBar-container"], ([container]) => { + DribbblishShared.config.register({ + area: "Playbar", + type: "checkbox", + key: "playbarShadow", + name: "Playbar Shadow", + description: "Add a shadow effect underneath the playbar", + defaultValue: true, + onChange: (val) => $(container).toggleClass("with-shadow", val) + }); +}); + waitForElement(["#main"], () => { DribbblishShared.config.register({ type: "select", @@ -52,7 +97,7 @@ waitForElement(["#main"], () => { }); DribbblishShared.config.register({ - area: "Consistency", + area: "Playbar", type: "select", data: { dribbblish: "Dribbblish", spotify: "Spotify" }, key: "playerControlsStyle", @@ -66,7 +111,7 @@ waitForElement(["#main"], () => { }); DribbblishShared.config.register({ - area: "Consistency", + area: "Playbar", type: "checkbox", key: "showAlbumInfoInPlaybar", name: "Show Album Info in Playbar", @@ -619,13 +664,13 @@ async function pickCoverColor(img) { updateColors(textColor, sidebarColor); } -function registerCoverListenner() { - if (!document.querySelector(".main-image-image.cover-art-image")) return setTimeout(registerCoverListenner, 250); +function registerCoverListener() { + if (!document.querySelector(".main-image-image.cover-art-image")) return setTimeout(registerCoverListener, 250); pickCoverColor(document.querySelector(".main-image-image.cover-art-image")); const observer = new MutationObserver((muts) => { const img = document.querySelector(".main-image-image.cover-art-image"); - if (!img) return registerCoverListenner(); + if (!img) return registerCoverListener(); pickCoverColor(img); }); observer.observe(document.querySelector(".main-image-image.cover-art-image"), { @@ -633,7 +678,7 @@ function registerCoverListenner() { attributeFilter: ["src"] }); } -registerCoverListenner(); +registerCoverListener(); // Check latest release every 10m waitForElement([".main-userWidget-box"], ([userWidget]) => { diff --git a/src/styles/main.scss b/src/styles/main.scss index 4e6ffaf..7188eca 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -367,10 +367,13 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type { .main-nowPlayingBar-container { border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); - background-color: unset; - background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%); + background-color: var(--spice-main); border-top: 0; min-width: 518px; + + &.with-shadow { + background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%); + } } .main-buddyFeed-findFriendsButton { @@ -714,6 +717,7 @@ img.playlist-picture { width: 32px; height: 32px; flex: 0 0 32px; + object-fit: cover; background-size: cover; background-position: center; border-radius: var(--sidebar-icons-border-radius); @@ -1027,7 +1031,17 @@ span.main-userWidget-displayName, .main-rootlist-rootlistContent .os-content { display: flex; flex-direction: column; - gap: 5px; + gap: var(--sidebar-gap-left); +} + +.main-buddyFeed-scrollableArea ol { + display: flex; + flex-direction: column; + gap: var(--sidebar-gap-right); +} + +.main-buddyFeed-friendActivity { + padding: 0px 16px; } #spicetify-show-list:empty {