Having trouble configuring workspaces widget eww

Freakzz · 2024-02-28 01:13:58

Hello,

I'm working on a workspaces widget design which I am trying to bring to life but I'm unable to. I have been looking for hours online to no avail, so thought I'd ask for a little help.

Fyi, I'm running hyprland and I'm making my widgets using eww.

So yesterday, I whipped up this design on figma to use as reference as to what I'm trying to achieve.

This is as far as I've gotten. Now there's two problems with this. 1) It's very hard-coded and as its (hopefully) shown in the screenshot, the bar is being stretched vertically. I think this is happening because, the indicators (the bars above each workspace number) are just some big boxes, which are resized using margin-top,bottom,etc.. so the original size of the indicators remains due to the margins. (For reference, here is what it would look like without the margins and without :valign "end") The problem is, I don't know how else to make it so that it doesn't stretch the bar. I have tried one other alternative, which was to use border-top over each workspace, but I gave up on this idea since the top border-radius was not giving me the look I desired (and I found no other solution to make it work really).

2) I'm wondering if I can get some logic working in yuck. As shown in the concept image, Theres a blue indicator for the selected workspace, a red one for urgent, a gray one for non-selected workspaces with apps running and one with no indicator at all for non-selected workspaces with no apps running. Can something like this be done in yuck? Do I need a script to make it work? How?

EDIT: Forgot to include the relevant code snippets...

 ~/.config/eww/modules/bar/eww.yuck
...
(defwidget workspaces []
  (eventbox :onscroll "bash ./scripts/change-active-workspace.sh {} ${current_workspace}" :class "workspaces"
    (box :space-evenly true 
      (label :text "${workspaces}${current_workspace}" :visible false)
      (for workspace in workspaces
        (box :class "workspace-container" :orientation "vertical" 
          (box :class "select" :valign "end") ; this is the indicator
          (eventbox :onclick "hyprctl dispatch workspace ${workspace.id}"
              (box :class "workspace-entry ${workspace.id == current_workspace ? "current" : ""} ${workspace.windows > 0 ? "occupied" : "empty"}"
                    (label :text "${workspace.id}"))))))))

 ~/.config/eww/modules/bar/styles.scss
...
.select {
  background-color: blue;
  border-radius: 8px;
  margin-top: 5px;
  margin-bottom: -10px;
  margin-left: 12px;
  margin-right: 12px;
}

.workspace-entry {
  color: white;
  padding: 0.8rem;
  &.current {
    ; border-top-color: blue;
    margin: 0;
  }
  &.occupied {
    ; border-top-color: red;
  }
}
...

I'm hoping I can at least get some answers here. All advice is greatly appreciated!

Last edited by Freakzz (2024-02-28 01:22:15)

DagothJoker · 2024-11-27 15:44:08

I'm currently trying to implement a similar type of workspace bar. I've had some success using shell scripts to send messages to i3 and parsing the resulting json into an array. Here's what I have so far

 
(deflisten active-workspace 
	   `$HOME/.config/eww/scripts/getactivews`)

(deflisten focused-workspace 
	   :initial "1" 
	   `$HOME/.config/eww/scripts/getfocusedws`)

(defwindow workspaces
           :monitor 0
           :geometry (geometry :x "0%"
                               :y "0%"
                               :width "50%"
                               :height "1%"
                               :anchor "center top")
           :reserve (struts :distance "40px" :side "top")
           :wm-ignore true
           (box :class "workspaces"
	            :orientation "h"
		    :halign "center"
		    :spacing 0
		    :width 0
		    :space-evenly false

(workspace :workspace-title "Main"
	   :workspace-index "1")

(workspace :workspace-title "Disc."
	   :workspace-index "2")

(workspace :workspace-title "Term"
	   :workspace-index "3")

(workspace :workspace-title "4"
	   :workspace-index "4")

(workspace :workspace-title "5"
	   :workspace-index "5")

(workspace :workspace-title "6"
	   :workspace-index "6")

(workspace :workspace-title "7"
	   :workspace-index "7")

(workspace :workspace-title "8"
	   :workspace-index "8")

(workspace :workspace-title "9"
	   :workspace-index "9")

(workspace :workspace-title "Misc"
	   :workspace-index "10")))

(defwidget workspace [workspace-title workspace-index]
	   (revealer :class { arraylength(search(focused-workspace, workspace-index)) > 0 ? "workspaces focused" : "workspaces active" }
	             :reveal { arraylength(search(active-workspace, workspace-index)) > 0 ? true : false }
		     :transition "slideright"
		     :duration 500

		     :width  {  arraylength(search(active-workspace, workspace-index)) > 0 ? 100 : 0 }
		     :height 50
		     :vexpand true
		     :hexpand true
		     :valign "center"
		     :halign "center"

		     (label :class "workspace-label"
			    :text workspace-title)))

getactivews script

 
#!/bin/sh
i3-msg -t subscribe -m '{"type":"workspace"}' |
while read -r _; do
    workspaces_info=$(i3-msg -t get_workspaces)
    active_workspaces=$(echo "$workspaces_info" | jq --unbuffered -r '[.[] | .name] | join(" ")')
    echo "$active_workspaces"
done

getfocusedws script

 
#!/bin/sh
i3-msg -t subscribe -m '{"type":"workspace"}' |
while read -r _; do
    workspaces_info=$(i3-msg -t get_workspaces)
    focused_workspaces=$(echo "$workspaces_info" | jq --unbuffered -r '.[] | select(.focused == true).name')
    echo "$focused_workspaces"
done

I found the shell scripts on https://github.com/xruifan/i3-eww/tree/master/scripts. If you cant use 'jq' I've also been able to parse the json using grep with perl compatible regex '-P'.

Arch Linux

#1 2024-02-28 01:13:58

Having trouble configuring workspaces widget eww

#2 2024-11-27 15:44:08

Re: Having trouble configuring workspaces widget eww

Board footer