eww/system-menu: redesign

home/programs/eww/css/system-menu.scss

@@ -1,156 +1,69 @@
 /* system menu */
 
-.system-menu-box { @include window; }
+.system-menu-window {
+  @include window;
+  background: rgba(0, 0, 0, .5);
+  padding: .25rem;
 
-/* between net/bt and their arrows */
-.separator {
-  font-size: 1rem;
-}
-
-/* date & time */
-.top-row {
-  margin: 1rem 1.5rem 0;
-
-  .time { font-size: 2rem; }
-
-  .date-box {
-    margin: 0 1rem;
-
-    .date {
-      background: unset;
-      margin: 0 .5rem 0 0;
-      padding: 0;
-    }
+  *.text {
+    font-size: .9rem;
   }
-}
-
-/* wifi/bt/airplane button boxes */
-.system-row {
-  margin: .5rem .7rem;
 
-  /* the airplane icon is not properly spaced */
-  .airplane-box button {
-    padding: 1rem 3rem;
-  }
-
-  label {
-    margin: 0 .1rem;
+  > box {
+    @include rounding;
+    background: rgba(255, 255, 255, .15);
+    margin: .25rem;
+    padding: .25rem;
   }
 }
 
 /* wifi/bt/airplane buttons */
-.element {
-  @include rounding;
-  background-color: $bg1;
-  margin: .3rem;
-
-  .enabled button {
-    background: rgba(255, 255, 255, .2);
-    label { color: $base; }
-  }
-  .disabled button {
-    background: rgba(0, 0, 0, .1);
-    label { color: white; }
-  }
-
-  .enabled .separator { background: $base; }
-  .disabled .separator { background: white; }
+.toggle {
+  margin: .2rem;
 
   button {
-    padding: 1rem;
-
-    label {
-      font-size: 1.5rem;
-    }
-
-    :first-child {
-      border-radius: 8px 0 0 8px;
-    }
-
-    :last-child {
-      border-radius: 0 8px 8px 0;
-    }
+    margin-right: .5rem;
+  }
 
-    /* set wifi/bt colors and dim buttons when hovering */
-    &:hover {
-      background-color: rgba(0, 0, 0, .1);
-    }
+  &.enabled button,
+  &.connected button {
+    background: $blue;
+    .icon { color: black; }
   }
 }
 
 /* volume & brightness sliders */
 .sliders {
-  @include rounding;
-  background-color: $bg1;
-  margin: .5rem 1rem;
-  padding: .6rem 1rem;
-
   scale {
-    margin-right: -1rem;
-    min-width: 21.5rem;
-
-    trough { margin-right: 0; }
+    margin-right: -.5rem;
+    min-width: 20rem;
   }
 
-  box { margin: .2rem 0; }
-  label { font-size: 1.2rem; }
-}
-
-.system-row .text, .system-info-box .text {
-  font-size: .9rem;
-}
-
-.volume-slider-box,
-.brightness-slider-box {
-  trough { background-color: $base; }
-}
-
-.volume-bar highlight {
-  @include rounding;
-  background-image: linear-gradient(to right, $teal, $sky);
-}
-
-.brightness-slider-box scale highlight {
-  @include rounding;
-  background-image: linear-gradient(to right, $yellow, $peach);
-}
+  trough { margin-left: 0; }
 
-/* battery & power button */
-.bottom-row {
-  margin: .5rem 1rem;
-
-  .battery-icon {
-    color: $green;
-    font-size: 2rem;
-
-    .low { color: $red; }
+  .icon {
+    font-size: 1.05rem;
+    margin: 0 .3rem;
   }
 
-  .battery-rate { color: $mauve; }
-
-  .battery-status {
-    color: $subtext0;
-    margin: 0 .5rem;
+  .volume highlight {
+    background-image: linear-gradient(to right, $teal, $sky);
   }
 
-  button {
-    background-color: $bg1;
-    border-radius: 50%;
-    margin-bottom: .1rem;
-    padding: 0 .5rem;
-
-    label { font-size: 1.5rem; }
-    &:hover { background-color: $bg1; }
+  .brightness highlight {
+    background-image: linear-gradient(to right, $yellow, $peach);
   }
 }
 
+/* battery & power button */
+.system-menu .battery {
+  .icon {
+    font-size: 1.5rem;
 
-.bt-connected {
-  background-color: $blue;
-  color: $crust;
-}
+    &.low { color: $red; }
+  }
 
-.net-connected {
-  background-color: $mauve;
-  color: $crust;
+  * { transition: none; }
+  .rate { color: #ccc; }
+  .status { margin: 0 .5rem; }
 }

home/programs/eww/modules/bluetooth.yuck

@@ -1,8 +1,7 @@
 (defwidget bluetooth []
   (button
-    :class "module-bt module icon"
+    :class "module-bt module icon ${bluetooth.state == `connected` ? `enabled` : `disabled`}"
     :onclick "blueberry" ; clicking opens blueberry
     :onrightclick "scripts/bluetooth toggle" ; rightclick to turn bluetooth on/off
     :tooltip "${bluetooth.text} ${bluetooth.battery}"
-    :style "color: ${bluetooth.color};"
-    {bluetooth.icon}))
+    {bluetooth.state == "connected" ? "" : bluetooth.state == "enabled" ? "" : ""}))

home/programs/eww/modules/net.yuck

@@ -1,8 +1,9 @@
 (defwidget net []
   (button
-    :class "module icon"
+    :class "module ${net.state}"
     ; forcefully open gnome-control-center in a non-GNOME environment
     :onclick "XDG_CURRENT_DESKTOP=GNOME gnome-control-center &"
-    :tooltip {net.name}
-    :style "color: ${net.color};"
-    {net.icon}))
+    :tooltip {net.text}
+    (label
+      :class "icon"
+      :text {net.icon})))

home/programs/eww/scripts/airplane

@@ -5,8 +5,17 @@ source "$(dirname "$0")"/utils
 
 STATUS="$(rfkill list | sed -n 2p | awk '{print $3}')"
 
-icon() {
-  [ "$STATUS" = "no" ] && echo "" || echo ""
+gen_output() {
+  if [ "$STATUS" = "no" ]; then
+    icon=""
+    state="disabled"
+  else
+    icon=""
+    state="enabled"
+  fi
+  text="Airplane Mode"
+
+  echo '{"text": "'"$text"'", "icon": "'"$icon"'", "state": "'"$state"'"}'
 }
 
 toggle() {
@@ -24,15 +33,15 @@ if [ "$1" = "toggle" ]; then
 else
   last_time=$(get_time_ms)
   STATUS="$(rfkill list | sed -n 2p | awk '{print $3}')"
-  icon
+  gen_output
 
   rfkill event | while read -r _; do
     current_time=$(get_time_ms)
     delta=$((current_time - last_time))
     # 50ms debounce
     if [[ $delta -gt 50 ]]; then
       STATUS="$(rfkill list | sed -n 2p | awk '{print $3}')"
-      icon
+      gen_output
       # reset debounce timer
       last_time=$(get_time_ms)
     fi

home/programs/eww/scripts/bluetooth

@@ -27,24 +27,18 @@ gen_output() {
 
   if [ "$powered" = "yes" ]; then
     if [ "$status" != "Missing device address argument" ]; then
-      icon=""
       text="$name"
-      color="#89b4fa"
-      class="bt-connected"
+      state="connected"
     else
-      icon=""
       text="Disconnected"
-      color="#45475a"
-      class=""
+      state="enabled"
     fi
   else
-    icon=""
     text="Bluetooth off"
-    color="#45475a"
-    class=""
+    state="disabled"
   fi
 
-  echo '{ "icon": "'"$icon"'", "battery": "'"$battery"'", "text": "'"$text"'", "color": "'"$color"'", "class": "'"$class"'" }'
+  echo '{ "state": "'"$state"'", "battery": "'"$battery"'", "text": "'"$text"'" }'
 }
 
 if [ "$1" = "toggle" ]; then

home/programs/eww/scripts/net

@@ -31,16 +31,12 @@ function gen_wifi() {
   fi
 
   icon=${icons[$level]}
-  color="#cba6f7"
-  class="net-connected"
-  name=$(echo "$nm" | jaq -r 'select(.type == "wifi") .connection')
+  text=$(echo "$nm" | jaq -r 'select(.type == "wifi") .connection')
 }
 
 function gen_ethernet() {
   icon=""
-  class="net-connected"
-  color="#cba6f7"
-  name=$(echo "$nm" | jaq -r 'select(.type == "ethernet") .connection')
+  text=$(echo "$nm" | jaq -r 'select(.type == "ethernet") .connection')
 }
 
 function make_content() {
@@ -51,21 +47,17 @@ function make_content() {
   # test ethernet first
   if [[ $ethernet == "connected" ]]; then
     gen_ethernet
+    state="enabled"
   elif [[ $wifi == "connected" ]]; then
     gen_wifi
+    state="enabled"
   else
     icon=""
-    color="#988ba2"
-    class="net-disconnected"
-    name="Disconnected"
+    text="Disconnected"
+    state="disabled"
   fi
 
-  jaq --null-input -r -c \
-    --arg icon "$icon" \
-    --arg name "$name" \
-    --arg color "$color" \
-    --arg class "$class" \
-    '{"icon": $icon, "name": $name, "color": $color, "class": $class}'
+  echo '{"icon": "'"$icon"'", "text": "'"$text"'", "state": "'"$state"'"}'
 }
 
 # first run