feat(eww/swaync): make notif-panel same as qs toggle

config/eww/README.md

@@ -1,3 +1 @@
-credits: https://github.com/AlphaTechnolog/dotfiles/tree/openbox
+inspired from: https://github.com/AlphaTechnolog/dotfiles/tree/openbox
-
-it has been slightly modified

config/eww/closer/closer.yuck

@@ -13,7 +13,7 @@
   (eventbox :onclick "$EWW_PATH/notif-toggle.sh off")
 )
 (defwindow closer-notif1  :monitor 0
-                          :geometry (geometry :width "1412px"
+                          :geometry (geometry :width "1360px"
                                               :height "1200px")
                           :stacking "overlay"
                           :focusable false
@@ -23,7 +23,7 @@
 (defwindow closer-notif2  :monitor 0
                           :geometry (geometry :width "100%"
                                               :height "200px"
-                                              :y "1063px")
+                                              :y "1060px")
                           :stacking "overlay"
                           :focusable false
                           :exclusive "ignore"
@@ -31,7 +31,16 @@
 )
 (defwindow closer-notif3  :monitor 0
                           :geometry (geometry :width "100%"
-                                              :height "63px")
+                                              :height "60px")
+                          :stacking "overlay"
+                          :focusable false
+                          :exclusive "ignore"
+  (closer-notif)
+)
+(defwindow closer-notif4  :monitor 0
+                          :geometry (geometry :width "60px"
+                                              :height "100%"
+                                              :x "1860px")
                           :stacking "overlay"
                           :focusable false
                           :exclusive "ignore"

config/eww/scripts/notif-toggle.sh

@@ -8,7 +8,9 @@ on() {
   eww open closer-notif1
   eww open closer-notif2
   eww open closer-notif3
+  eww open closer-notif4
   
+  eww close notif-panel; eww open notif-panel &&
   eww update notif-panel-state=true
 }
 
@@ -20,6 +22,7 @@ off() {
   eww close closer-notif1
   eww close closer-notif2
   eww close closer-notif3
+  eww close closer-notif4
 }
 
 [[ "$1" == "on" ]] && on

config/eww/traybuttons/traybuttons.scss

@@ -21,9 +21,28 @@
 
 .notif-panel {
   font-size: 20px;
+  border-radius: 80px;
   min-height: 37px;
   min-width: 105px;
   padding: 1px 0px 1px 5px;
+
+  .toggle-on {
+    border-top-left-radius: 22px;
+    border-top-right-radius: 22px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom: 0px solid $bg;
+  }
+}
+
+.filler {
+  border-left: 2px solid $contrastbg;
+  border-right: 2px solid $contrastbg;
+  min-height: 14px;
+  min-width: 105px;
+  margin-top: -10px;
+  background-color: $bg;
+  transition: all 0.5s;
 }
 
 .quick-settings-toggle {
@@ -35,7 +54,6 @@
 
 .toggle-off {
   background-color: $bg;
-  //transition: border-color 0.5s ease-in-out;
   color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid #1b1b2b;
@@ -45,7 +63,6 @@
 
 .toggle-on {
   background-color: $bg;
-  //transition: border-color 0.5s ease-in-out;
   color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid $contrastbg;

config/eww/traybuttons/traybuttons.yuck

@@ -126,15 +126,23 @@
 (defvar turn-notif-off "$EWW_PATH/run.sh '$EWW_PATH/notif-toggle.sh off' notif-run &")
 
 (defwidget notif-panel []
-  (eventbox :class "${notif-panel-state == 'true' ? 'toggle-on' : 'toggle-off'}"
+  (box :orientation "v"
-            :onclick "${notif-panel-state == 'true' ? turn-notif-off : turn-notif-on}"
+    (eventbox :class "${notif-panel-state == 'true' ? 'toggle-on' : 'toggle-off'}"
-            :cursor "pointer"
+              :onclick "${notif-panel-state == 'true' ? turn-notif-off : turn-notif-on}"
-            :onhover "eww update notif-run=true"
+              :cursor "pointer"
-            :onhoverlost "eww update notif-run=false"
+              :onhover "eww update notif-run=true"
+              :onhoverlost "eww update notif-run=false"
 
-    (box  :class "notif-panel"
+      (box  :class "notif-panel"
-          :orientation "h"
+            :orientation "v"
-      (label :text " ${notif_icon} ")
+        (label :text " ${notif_icon} ")
+      )
+    )
+    (expander :expanded notif-panel-state
+              :height 0
+      (box :class "filler"
+           :height 0
+      )
     )
   )
 )

config/swaync/config.json

@@ -5,9 +5,9 @@
   "positionY": "top",
   "control-center-positionX": "none",
   "control-center-positionY": "none",
-  "control-center-margin-top": 8,
+  "control-center-margin-top": 6,
   "control-center-margin-bottom": 8,
-  "control-center-margin-right": 8,
+  "control-center-margin-right": 60,
   "control-center-margin-left": 8,
   "control-center-width": 500,
   "control-center-height": 1000,

config/swaync/style.css

@@ -203,7 +203,8 @@
 
 .control-center {
   background: @background-alpha;
-  border-radius: 35px;
+  border-radius: 30px;
+  border-top-right-radius: 0px;
   background-clip: border-box;
   padding: 4px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7),