adding dropshadows to networkinfo

README.md

@@ -1,3 +1,4 @@
 # My Hyprland setup dotfiles
 These files can be used to reproduce my Hyprland setup on ArchLinux based distros.
 
+<img src=screen.png>

config/eww/eww.scss

@@ -9,8 +9,9 @@
     border-radius: 20px;
     border-color: #db5e5e;
     border-style: solid;
-    border-width: 1px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
 }
+
 .buttons {
     padding: 10px;
     background-color: rgba(172, 89, 89, 0.4);
@@ -18,41 +19,91 @@
     border-color: #2b1111;
     border-style: solid;
     border-width: 1px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
+}
+.header {
+    background-color: #221f1f;
+    border-radius: 20px;
+    padding: 5px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
     
 }
 .topcontent {
     margin-top: 50px;
-    padding: 20px;
-    background-color: rgba(29, 29, 29, 0.2);
-    border-radius: 100px;
-    //border-color: #db5e5e;
-    //border-style: solid;
+    padding: 10px;
+    background-color: #221f1f;
+    border-radius: 20px;
     border-width: 1px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
 }
 .centercontent {
     padding: 20px;
-    //margin: 10px;
-    background-color: rgba(37, 23, 23, 0.4);
+    background-color: #221f1f;
     border-radius: 20px;
-    //border-color: #db5e5e;
-    //border-style: solid;
     border-width: 1px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
+}
+
+.vpncontent {
+    padding-left: 75px;
+    padding-right: 75px;
+    padding-bottom: 0px;
+    border-radius: 20px;
+    background-color: #221f1f;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
+}
+.netcontent {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 7px;
+    padding-bottom: 13px;
+    border-radius: 20px;
+    background-color: #221f1f;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, .6);
 }
 .bottomcontent {
     padding: 10px;
 }
+.neticon {
+    font-size: 50px;
+    padding-left: 70px;
+}
+.nettext {
+    padding-left: 70px;
+}
+.vpnicon { 
+    font-size: 50px;
+}
+.netgraph {
+    background-color: #db5e5e;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #2b1111;
+    color: #bb5a5a;
+}
 .infolabel {
     padding: 20px;
 }
+.name {
+    padding : 0px;
+}
+.translation {
+    padding: 1px;
+    margin-right: 11px;
+    font-size: 80%;
+}
 
-/*
-[scratchpads.network]
-command = "nm-connection editor"
-class = "nm-connection-editor"
-size ="600px 800px"
-margin   = 50
-unfocus = "hide"
-animation = "fromRight"
-multi = true
-
-*/
+.exitbutton {
+    font-size: 140%;
+    padding-right: 10px;
+    
+}
+.infobutton {
+    font-size: 120%;
+    padding-left: 10px;
+    
+}
+.infobutton:hover, .exitbutton:hover {
+    color:#ad3535;
+    transition: all 1s ease;
+}

config/eww/eww.yuck

@@ -7,16 +7,26 @@
                    :interval "30s"
 `./scripts/netinfo.sh 1`)
 
+(defpoll contype :initial "x"
+                 :interval "30s"
+`./scripts/netinfo.sh 1 | cut -c 1`)
+
 (defpoll nameserver :initial "getting info..."
                    :interval "30s"
 `cat /etc/resolv.conf | grep "nameserver" | awk '{print $2}'`)
 
+(defpoll vpnstatus :initial "3"
+                   :interval "30s"
+`./scripts/vpninfo.sh`)
+
 
 (deflisten hostname :initial "getting info..."
 `cat /etc/hostname`)
 
 
 
+
+
 ;       netWindow
 ;   ----------------------------------
 ;   |   content                      |
@@ -31,15 +41,40 @@
 ;   |     --------------------       |
 ;   |                                |
 ;   ----------------------------------
+(defwidget header []
+    (box :orientation "h" :class "header"
+         ;:halign "center"
+         :valign "start"
+        (button :class "infobutton" :valign "center" :halign "start" :onclick "pypr toggle networkinfo && hyprctl dispatch bringactivetotop" "")
+        (box :valign "start":orientation "v" :halign "center" :class "namebox"
+        (label :valign "start" :halign "end" :text "ネットワーク" :class "name")
+        (label :valign "start" :halign "end" :text "[Network]" :class "translation"))
+        (button  :class "exitbutton" :valign "center" :halign "end" :onclick "eww close network" "")
+    ))
+
 (defwidget topcontent []
 (box :orientation "h" :class "topcontent"
-     :halign "center"
-     :valign "start"
-    (infobox :name "Hostname:" :info hostname)
-))
+     :valign "center"
+    (box :orientation "v"
+        (box :halign "start" :width 65 :class "neticon"
+            {contype == "e"
+                ? "󰈀"
+            : contype == "w"
+                ? ""
+                : ""})
+        (box :halign "start" :class "device" :class "nettext"
+            {contype == "e"
+                ? "Wired"
+            : contype == "w"
+                ? "Wireless"
+                : "Unknown connection type"})
+            );)
+    (infobox :halign "start" :class "hostname" :name "Hostname:" :info hostname)))
+
 (defwidget content []
     (box :orientation "v" :class "content"
          :halign "end"
+    (header)
     (topcontent)
     (centercontent)
     (lowercontent)
@@ -48,7 +83,7 @@
 (defwidget centercontent []
 (box :orientation "h" :class "centercontent"
      :halign "end"
-     :valign "start"
+     :valign "center"
     (infobox :name "Interface:" :info interface)
     (infobox :name "IP Address:" :info ipaddress)
     (infobox :name "DNS Server:" :info nameserver)
@@ -56,11 +91,33 @@
 ))
 (defwidget lowercontent[]
     (box :orientation "h" :class "lowercontent"
+         (vpncontent)
+         (netcontent)))
+(defwidget netcontent[]
+    (box :orientation "h" :class "netcontent"
          :halign "center"
          :valign "center"
          (netbox :type "Download":dev interface :speed {EWW_NET[interface].NET_DOWN})
          (netbox :type "Upload":dev interface :speed {EWW_NET[interface].NET_UP})))
-
+(defwidget vpncontent[]
+    (box :orientation "v" :class "vpncontent"
+         :halign "center"
+         :valign "center"
+         (label :text "VPN Status:")
+         (box :width 65 :class "vpnicon"
+            { vpnstatus == 1
+                ? "󱚨"
+            : vpnstatus == 2
+                ? "󰣫"
+                : "󰍀"
+                })
+         (box :width 65
+         { vpnstatus == 1
+             ? "Connected"
+         : vpnstatus == 2
+             ? "Tailscale"
+             : "Disconnected"
+             })))
 (defwidget bottomcontent []
     (box :orientation "h" :class "bottomcontent"
          :halign "end"
@@ -69,8 +126,8 @@
 
 (defwidget infobox [name info]
 (box :orientation "v" :class "infobox"
-     :halign "center"
-     :valign "center"
+     ;:halign "center"
+     ;:valign "center"
     (infolabel :text name)
     (infolabel :text info)))
 
@@ -78,15 +135,24 @@
     (box :orientation "horizontal" :class "buttons"
          :halign "end"
          :valign "end"
-
     (button :onclick "pypr toggle network && hyprctl dispatch bringactivetotop"
         "Open Connection Editor")))
-
+;; Labels:
 (defwidget infolabel [text]
     (label :text text :class "infolabel"
-           :halign "center"
-           :valign "center"))
-
+           ;:halign "center"
+           ;:valign "center"
+           ))
+;;*
+;(defwidget headlabel [text]
+;    (label :text text :class "headlabel"
+;           :halign "center"
+;           :valign "center"))
+;(defwidget sublabel [text]
+;(label :text text :class "sublabel"
+;            :halign "center"
+;            :valign "center"))
+;*/
 (defwidget netbox [type dev speed]
     (box :orientation "v" :class "netbox"
          :halign "center"
@@ -95,27 +161,27 @@
          (netGraph :speed speed)
          (box :width 65
             {speed / 1000000 > 0.5
-                ? "${round(speed / 1000000, 0)} Mb"
+                ? "${round(speed / 1000000, 0)} Mbit/s"
             : speed / 1000 > 0.5
-                ? "${round(speed / 1000, 0)} Kb"
-                : "${round(speed, 0)} b"})))
+                ? "${round(speed / 1000, 0)} Kbit/s"
+                : "${round(speed, 0)} bit/s"})))
                 
 
 (defwidget netGraph [speed]
-    (graph :value speed :time-range "30s"))
+    (graph :class "netgraph" :value speed :time-range "30s"))
 
 
 (defwindow network
     :class network_window
     :monitor 1
     :geometry (geometry :x "20px"
-                        :y "50px"
+                        :y "0px"
                         :width "560px"
-                        :height "85%"
+                        :height "80%"
                         :anchor "right center")
     :stacking "fg"
         ;:reserve (struts :distance "10px" :side "top") ;;only for x11
         ;:windowtype "dock" ;;only for x11
         ;:wm-ignore false ;;only for x11
-    
+    ;(header)
     (content))

config/eww/scripts/vpninfo.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+if  ip --brief addr | grep -q "tun" ; then
+    echo 1
+elif ip --brief addr | grep -q "tail" ; then
+    echo 2
+else
+    echo 3
+fi