Simplify data widget section hiding if empty with CSS only

Jean-Tinland · Dec 23, 2023 · 10c9d42 · 10c9d42
1 parent 878658e
commit 10c9d42
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/index.jsx b/index.jsx
@@ -34,9 +34,6 @@ const refreshFrequency = false;
 const settings = Settings.get();
 const { yabaiPath = "/usr/local/bin/yabai", shell } = settings.global;
 const { processWidget } = settings.widgets;
-const hasAnyWidgetEnabled = Object.entries(settings.widgets)
-  .filter(([widgetName]) => widgetName !== "processWidget")
-  .some(([_, enabled]) => enabled);
 const { hideWindowTitle, displayOnlyIcon, displaySkhdMode } = settings.process;
 
 const enableTitleChangedSignal = hideWindowTitle || displayOnlyIcon;
@@ -131,29 +128,27 @@ const render = ({ output, error }) => {
         />
       )}
       <Settings.Wrapper />
-      {hasAnyWidgetEnabled && (
-        <div className="simple-bar__data">
-          <UserWidgets display={displayIndex} />
-          <Zoom.Widget display={displayIndex} />
-          <BrowserTrack.Widget display={displayIndex} />
-          <Spotify.Widget display={displayIndex} />
-          <Crypto.Widget display={displayIndex} />
-          <Stock.Widget display={displayIndex} />
-          <Music.Widget display={displayIndex} />
-          <Mpd.Widget display={displayIndex} />
-          <Weather.Widget display={displayIndex} />
-          <Netstats.Widget display={displayIndex} />
-          <Cpu.Widget display={displayIndex} />
-          <Battery.Widget display={displayIndex} />
-          <Mic.Widget display={displayIndex} />
-          <Sound.Widget display={displayIndex} />
-          <ViscosityVPN.Widget display={displayIndex} />
-          <Wifi.Widget display={displayIndex} />
-          <Keyboard.Widget display={displayIndex} />
-          <DateDisplay.Widget display={displayIndex} />
-          <Time.Widget display={displayIndex} />
-        </div>
-      )}
+      <div className="simple-bar__data">
+        <UserWidgets display={displayIndex} />
+        <Zoom.Widget display={displayIndex} />
+        <BrowserTrack.Widget display={displayIndex} />
+        <Spotify.Widget display={displayIndex} />
+        <Crypto.Widget display={displayIndex} />
+        <Stock.Widget display={displayIndex} />
+        <Music.Widget display={displayIndex} />
+        <Mpd.Widget display={displayIndex} />
+        <Weather.Widget display={displayIndex} />
+        <Netstats.Widget display={displayIndex} />
+        <Cpu.Widget display={displayIndex} />
+        <Battery.Widget display={displayIndex} />
+        <Mic.Widget display={displayIndex} />
+        <Sound.Widget display={displayIndex} />
+        <ViscosityVPN.Widget display={displayIndex} />
+        <Wifi.Widget display={displayIndex} />
+        <Keyboard.Widget display={displayIndex} />
+        <DateDisplay.Widget display={displayIndex} />
+        <Time.Widget display={displayIndex} />
+      </div>
     </div>
   );
 };

diff --git a/lib/styles/core/base.js b/lib/styles/core/base.js
@@ -19,7 +19,7 @@ const baseStyles = /* css */ `
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (min-device-pixel-ratio: 2),
   only screen and (min-resolution: 192dpi),
-  only screen and (min-resolution: 2dppx) { 
+  only screen and (min-resolution: 2dppx) {
   .simple-bar {
     -webkit-font-smoothing: antialiased;
   }
@@ -86,6 +86,9 @@ const baseStyles = /* css */ `
   align-items: stretch;
   margin-left: auto;
 }
+.simple-bar__data:empty {
+  display: none;
+}
 .simple-bar--no-bar-background .simple-bar__data {
   padding: 4px 5px 4px 0;
   background-color: var(--background);