feat: eww style changes

This commit is contained in:
hesam-init 2024-07-03 01:52:27 +03:30
parent e78c4d3c1d
commit caf64be4bf
8 changed files with 106 additions and 86 deletions

View file

@ -1,17 +1,23 @@
.reveal-on-hover {
padding: 6px 0px;
padding: 12px 0px;
}
.reveal-on-click {
color: $surface2;
padding: 4px 0px;
@extend .widget;
label {
@extend .icon;
color: $surface2;
padding: 4px 0px;
}
}
.separator {
padding: get-token(padding, small);
.dot {
padding: 3px;
padding: 2px;
border-radius: 100%;

View file

@ -4,8 +4,8 @@
.widget {
padding: get-token(padding, small);
margin: get-token(margin, small);
border-radius: get-token(border-radius);
margin: get-token(margin);
border-radius: get-token(border-radius, small);
background-color: $surface0;
}

View file

@ -1,15 +1,19 @@
.clock {
@extend .widget;
font-size: get-token(font-sizes, large);
font-weight: bolder;
label {
font-size: get-token(font-sizes, large);
font-weight: bold;
}
}
.language {
@extend .widget;
font-size: get-token(font-sizes, small);
font-weight: bolder;
label {
font-size: get-token(font-sizes);
font-weight: bold;
}
}
.logo {
@ -33,18 +37,26 @@
.workspace {
@extend .animation;
border-radius: get-token(border-radius);
min-height: 16px;
background-color: $surface2;
border-radius: get-token(border-radius);
&.current {
min-height: 48px;
min-height: 42px;
background-color: $accent;
}
}
}
.bar-media-player {
@extend .widget;
label {
font-size: get-token(font-sizes, large);
}
}
.media-player {
@extend .panel-widget;

View file

@ -16,8 +16,8 @@ $design-tokens: (
large: 6px,
),
border-radius: (
small: 6px,
default: 8px,
small: 8px,
default: 10px,
large: 16px,
),
);

View file

@ -32,13 +32,14 @@
:orientation "v"
:class "widget"
:space-evenly false
:class "reveal-on-click"
(eventbox
:cursor "pointer"
:visible {direction == "up"}
:onclick `${EWW_CMD} update ${varname}=${!var}`
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text ""))
(revealer
:reveal var
@ -52,6 +53,6 @@
:visible {direction == "down"}
:onclick `${EWW_CMD} update ${varname}=${!var}`
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text ""))
))

View file

@ -1,18 +1,20 @@
(defwidget PlayerCtl [?cover]
(defwidget BarMediaPlayer [?cover]
(eventbox
:cursor "pointer"
(box
:class "widget player-ctl"
:class "bar-media-player"
:orientation "v"
:spacing spacing-default
:space-evenly false
:spacing spacing-default
(eventbox
:onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
:visible cover
(image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
(button :onclick "playerctl previous"
(label :class "icon" :text "󰒮"))
(button :onclick "playerctl play-pause"
@ -21,70 +23,70 @@
(label :class "icon" :text "󰒭")))))
(defwidget MediaPlayer [h permashow]
(box
:class "media-player"
(overlay
(box
:orientation "v"
:halign "fill"
:height h
:class { pcover != "" ? "player-cover" : ""}
:style "background-image: url('${pcover}')"
:visible {permashow ? true : pcover != "" })
(box
:orientation "h"
:space-evenly false
:halign "center"
:valign "center"
:spacing spacing-large
(image :image-width 100 :image-height 100 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover })
(box
:class "media-player"
(overlay
(box
:orientation "v"
:halign "fill"
:height h
:class { pcover != "" ? "player-cover" : ""}
:style "background-image: url('${pcover}')"
:visible {permashow ? true : pcover != "" })
(box
:orientation "h"
:space-evenly false
:width 200
:halign "center"
:valign "center"
:class "player-info"
:spacing spacing-small
(box
:orientation "v"
:space-evenly false
:visible true
(scroll
:hscroll true
:vscroll false
(label :text psong))
(scroll
:hscroll true
:vscroll false
(label :text partist))
)
:spacing spacing-large
(image :image-width 100 :image-height 100 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover })
(box
:orientation "h"
:class "player-controls"
(button :onclick "playerctl previous"
(label :text "󰒮"))
(button :onclick "playerctl play-pause"
(label :text { pstatus == "Playing" ? "" : ""} ))
(button :onclick "playerctl next"
(label :text "󰒭"))))))
)
:orientation "v"
:space-evenly false
:width 200
:halign "center"
:valign "center"
:class "player-info"
:spacing spacing-small
(box
:orientation "v"
:space-evenly false
:visible true
(scroll
:hscroll true
:vscroll false
(label :text psong))
(scroll
:hscroll true
:vscroll false
(label :text partist))
)
(box
:orientation "h"
:class "player-controls"
(button :onclick "playerctl previous"
(label :text "󰒮"))
(button :onclick "playerctl play-pause"
(label :text { pstatus == "Playing" ? "" : ""} ))
(button :onclick "playerctl next"
(label :text "󰒭"))))))
)
)
(defwindow MusicPlayerPopup
:geometry (geometry
:width "440"
:height "200"
:anchor "center left")
:width "440"
:height "200"
:anchor "center left")
:stacking "overlay"
:monitor 0
(box
@ -114,14 +116,14 @@
:style "margin-top: 10px;"
(button :onclick "playerctl previous"
(label :text "󰒮"))
(button :style "padding-right: 3px;" :onclick "playerctl play-pause"
(button :style "padding-right: 3px;" :onclick "playerctl play-pause"
(label :text { pstatus == "Playing" ? "" : ""}))
(button :onclick "playerctl next" (label :text "󰒭")))
(scale
(scale
:class "seektime"
:value { ptime.position}
:orientation "h"
;; :onchange "playerctl position {}"
:min 0
:max { ptime.duration}
:tooltip { ptime.readable})))))
:tooltip { ptime.readable})))))

View file

@ -6,20 +6,21 @@
:orientation "v"
:space-evenly false
:class "clock"
:spacing spacing-small
(label :text thour)
(label :text tmin))))
(defwindow CalendarPopup
:geometry (geometry
:width "100"
:height "35"
:anchor "bottom left")
:width "100"
:height "35"
:anchor "bottom left")
:stacking "overlay"
:monitor 0
(box
:class "popup"
(box
:class "widget"
(calendar :day calendar_day :year calendar_year))))

View file

@ -48,7 +48,7 @@
(Separator :orientation "h" :dots "[1, 2, 3]" :visible true)
(PlayerCtl :cover false)
(BarMediaPlayer :cover false)
))
(defwidget BarBottom []
@ -57,7 +57,6 @@
:space-evenly false
:valign "end"
(Sliders)
(Language)
))
@ -86,7 +85,6 @@
:orientation "v"
:space-evenly false
:spacing spacing-default
:valign "end"
(RevealOnHover
:var {revealWifiEssid}