Add functionality for #90 and #92

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)
+- 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
+- `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
+- 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

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() {
+function registerCoverListener() {
-    if (!document.querySelector(".main-image-image.cover-art-image")) return setTimeout(registerCoverListenner, 250);
+    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]) => {

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-color: var(--spice-main);
-    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
     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 {