Merge pull request #29 from jeroentvb/dev

Allow overwriting power bar colors - closes #28
jeroentvb · Jun 26, 2022 · ed4e9b2 · ed4e9b2
2 parents f9bad0d + cbd4400
commit ed4e9b2
Show file tree

Hide file tree

Showing 9 changed files with 879 additions and 844 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@ Spotlight-like quick search bar to navigate to tracks, albums, artists and playl
   - [Installation](#installation)
   - [Usage](#usage)
   - [Settings](#settings)
+  - [Theme](#theme)
 
 ## Installation
 Install via [spicetify-marketplace](https://github.com/CharlieS1103/spicetify-marketplace)
@@ -44,3 +45,18 @@ Settings for the power bar can be found on spotify's settings page. There are se
   * Cmd/Windows
 * **Amount of suggestions per category**. How many suggestions to show per per category. Default is 3. Technically this can be set to 50, but in the power bar it's limited to 10 per category due to it being a better user experience.
 * **Add to queue**. Add the selected suggestion to the queue instead of playing it. When enabled hold `ctrl` (windows/linux) or `cmd` (macOs) when selecting the suggestion to add it to the playback queue. 
+
+## Theme
+To change the colors of the power bar add the following css to your theme (or ask the creator to add styles for power bar). Be sure to change to color values to the desired colors.  
+Alternatively you can add css by creating a snippet using the [marketplace](https://github.com/spicetify/spicetify-marketplace), or [css-editor](https://github.com/FlafyDev/spotify-css-editor).
+
+```css
+#power-bar-container {
+  --power-bar-background-color: #333333;
+  --power-bar-main-text-color: #ffffff;
+  --power-bar-subtext-color: #b3b3b3;
+  --power-bar-active-background-color: #1db954;
+  --power-bar-active-text-color: #121212;
+  --power-bar-border-color: #000000;
+}
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "power-bar",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "author": {
     "name": "jeroentvb",
     "url": "https://github.com/jeroentvb"

diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
@@ -1,3 +1,12 @@
+:root {
+    --power-bar-background-color: var(--spice-tab-active);
+    --power-bar-main-text-color: var(--spice-text);
+    --power-bar-subtext-color: var(--spice-subtext);
+    --power-bar-active-background-color: var(--spice-button);
+    --power-bar-active-text-color: var(--spice-main);
+    --power-bar-border-color: var(--spice-shadow);
+}
+
 #power-bar-container {
     display: flex;
     justify-content: center;
@@ -13,7 +22,7 @@
 
     #power-bar-wrapper {
         max-width: 70rem;
-        background-color: var(--spice-tab-active);
+        background-color: var(--power-bar-background-color);
         border-radius: var(--pb-border-radius);
         box-shadow: 5px 12px 40px 0px var(--spice-shadow);
         height: fit-content;
@@ -26,11 +35,11 @@
         width: 700px;
         font-size: 2em;
         padding: 8px 16px;
-        color: var(--spice-text);
+        color: var(--power-bar-main-text-color);
         background-color: transparent;
 
         &.has-suggestions {
-            border-bottom: 1px solid var(--spice-shadow);
+            border-bottom: 1px solid var(--power-bar-border-color);
         }
 
         &:focus-visible {
@@ -48,6 +57,10 @@
         display: flex;
         flex-direction: column;
         gap: 1em;
+
+        h5 {
+            color: var(--power-bar-subtext-color);
+        }
     }
 
     .suggestions-category {
@@ -59,17 +72,17 @@
     .suggestions-category {
         &:not(:last-child) {
             padding-bottom: 1em;
-            border-bottom: 1px solid var(--spice-shadow);
+            border-bottom: 1px solid var(--power-bar-border-color);
         }
 
         p {
             font-size: 12px;
-            color: var(--spice-subtext);
+            color: var(--power-bar-subtext-color);
         }
     }
 
     .suggestion-item {
-        color: var(--spice-text);
+        color: var(--power-bar-main-text-color);
         display: flex;
         gap: 1em;
         align-items: center;
@@ -91,11 +104,11 @@
         }
 
         &__active {
-            background-color: var(--spice-button);
+            background-color: var(--power-bar-active-background-color);
             border-radius: 8px;
 
             span {
-                color: var(--spice-main) !important;
+                color: var(--power-bar-active-text-color) !important;
             }
         }
 
@@ -105,7 +118,7 @@
             }
 
             &:nth-child(2) {
-                color: var(--spice-subtext);
+                color: var(--power-bar-subtext-color);
                 font-size: 14px;
                 margin-top: -4px;
             }
@@ -115,5 +128,4 @@
     .hidden {
         display: none !important;
     }
-
 }
diff --git a/src/components/PowerBar.tsx b/src/components/PowerBar.tsx
@@ -8,6 +8,7 @@ import navigateUsingUri from '../utils/navigate-using-uri';
 import search from '../services/search';
 import showWhatsNew from '../services/whats-new';
 import Suggestions from './Suggestions';
+import getSettings from '../services/get-settings';
 
 import type { ICategorizedSuggestion, ISuggestion } from '../types/suggestions.model';
 import type { SuggestionClickEmitEvent } from '../types/custom-events.model';
@@ -57,34 +58,7 @@ export default class PowerBar extends React.Component<Record<string, unknown>, L
          selectedSuggestionUri: '',
       };
 
-      this.settings = new SettingsSection('Power bar', 'power-bar-settings', {
-         [RESULTS_PER_CATEGORY]: {
-            type: 'dropdown',
-            description: 'Show amount of suggestions per category',
-            defaultValue: '3',
-            options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-         },
-         [KEY_COMBO]: {
-            type: 'input',
-            description: 'Activation key combo. First key needs to be a modifier (shift, ctrl, alt or cmd/windows key).',
-            defaultValue: [this.isMac ? 'altKey' : 'ctrlKey', 'Space'],
-            events: {
-               onKeyDown: this.handleSettingsInput,
-               onBlur: (e) => {
-                  const currentKeyCombo: string[] = this.settings.getFieldValue(KEY_COMBO);
-                  if (currentKeyCombo.length === 0) {
-                     e.currentTarget.placeholder = 'Please set a valid key combo';
-                     Spicetify.showNotification('Please set a valid key combo for the power bar');
-                  }
-               }
-            }
-         },
-         [ADD_TO_QUEUE]: {
-            type: 'toggle',
-            description: 'Add suggestion to queue instead of playing it when holding ctrl (windows/linux) or cmd (mac)',
-            defaultValue: false,
-         }
-      });
+      this.settings = getSettings(this);
       this.settings.pushSettings();
 
       showWhatsNew();

diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
diff --git a/src/constants/change-notes.ts b/src/constants/change-notes.ts
@@ -1,8 +1,5 @@
 const CHANGE_NOTES = `
-* Remove 'play immediately' setting in favour of 'add to queue'
-   - Default behaviour is navigating to the selected suggestion
-   - To just play and not navigate, hold \`ctrl\` (windows/linux) or \`cmd\` (mac) when selecting it
-   - To add to queue instad of playing the item, enable 'add to queue' and hold hold \`ctrl\` (windows/linux) or \`cmd\` (mac)
+Make it easier to change to colors of the power bar using css. See the readme for more details: [https://github.com/jeroentvb/spicetify-power-bar/blob/master/README.md](https://github.com/jeroentvb/spicetify-power-bar/blob/master/README.md#theme)
 `;
 
 export default CHANGE_NOTES;
diff --git a/src/services/get-settings.ts b/src/services/get-settings.ts
@@ -0,0 +1,34 @@
+import { SettingsSection } from 'spcr-settings';
+import PowerBar from '../components/PowerBar';
+import { ADD_TO_QUEUE, KEY_COMBO, RESULTS_PER_CATEGORY } from '../constants';
+
+export default function getSettings(powerBar: PowerBar) {
+   return new SettingsSection('Power bar', 'power-bar-settings', {
+      [RESULTS_PER_CATEGORY]: {
+         type: 'dropdown',
+         description: 'Show amount of suggestions per category',
+         defaultValue: '3',
+         options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+      },
+      [KEY_COMBO]: {
+         type: 'input',
+         description: 'Activation key combo. First key needs to be a modifier (shift, ctrl, alt or cmd/windows key).',
+         defaultValue: [powerBar.isMac ? 'altKey' : 'ctrlKey', 'Space'],
+         events: {
+            onKeyDown: powerBar.handleSettingsInput,
+            onBlur: (e) => {
+               const currentKeyCombo: string[] = powerBar.settings.getFieldValue(KEY_COMBO);
+               if (currentKeyCombo.length === 0) {
+                  e.currentTarget.placeholder = 'Please set a valid key combo';
+                  Spicetify.showNotification('Please set a valid key combo for the power bar');
+               }
+            }
+         }
+      },
+      [ADD_TO_QUEUE]: {
+         type: 'toggle',
+         description: 'Add suggestion to queue instead of playing it when holding ctrl (windows/linux) or cmd (mac)',
+         defaultValue: false,
+      },
+   });
+}
diff --git a/src/types/spicetify.d.ts b/src/types/spicetify.d.ts
@@ -1198,7 +1198,7 @@ declare namespace Spicetify {
              * You can specify a string for simple text display
              * or a HTML element for interactive config/setting menu
              */
-            content: string | Element;
+            content: string | Element | JSX;
             /**
              * Bigger window
              */