diff options
Diffstat (limited to 'examples/js')
| -rw-r--r-- | examples/js/simple-bar/style.scss | 50 | ||||
| -rw-r--r-- | examples/js/simple-bar/widget/Bar.tsx | 23 |
2 files changed, 41 insertions, 32 deletions
diff --git a/examples/js/simple-bar/style.scss b/examples/js/simple-bar/style.scss index 1dcf729..f5f771a 100644 --- a/examples/js/simple-bar/style.scss +++ b/examples/js/simple-bar/style.scss @@ -13,31 +13,45 @@ window.Bar { font-size: 1.1em; font-weight: bold; - button { - all: unset; - background-color: transparent; + label { + margin: 0 8px; + } + + .Workspaces { + button { + all: unset; + background-color: transparent; - &:hover label { - background-color: color.adjust($fg, $alpha: -0.84); - border-color: color.adjust($accent, $alpha: -0.8); + &:hover label { + background-color: color.adjust($fg, $alpha: -0.84); + border-color: color.adjust($accent, $alpha: -0.8); + } + + &:active label { + background-color: color.adjust($fg, $alpha: -0.8) + } } - &:active label { - background-color: color.adjust($fg, $alpha: -0.8) + label { + transition: 200ms; + padding: 0 8px; + margin: 2px; + border-radius: $radius; + border: 1pt solid transparent; } - } - label { - transition: 200ms; - padding: 0 8px; - margin: 2px; - border-radius: $radius; - border: 1pt solid transparent; + .focused label { + color: $accent; + border-color: $accent; + } } - .Workspaces .focused label { - color: $accent; - border-color: $accent; + .SysTray { + margin-right: 8px; + + button { + padding: 0 4px; + } } .FocusedClient { diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx index 8a0126e..54a14b0 100644 --- a/examples/js/simple-bar/widget/Bar.tsx +++ b/examples/js/simple-bar/widget/Bar.tsx @@ -11,22 +11,16 @@ import Tray from "gi://AstalTray" function SysTray() { const tray = Tray.get_default() - return <box> - {bind(tray, "items").as(items => items.map(item => { - if (item.iconThemePath) - App.add_icons(item.iconThemePath) - - const menu = item.create_menu() - - return <button + return <box className="SysTray"> + {bind(tray, "items").as(items => items.map(item => ( + <menubutton tooltipMarkup={bind(item, "tooltipMarkup")} - onDestroy={() => menu?.destroy()} - onClickRelease={self => { - menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null) - }}> + usePopover={false} + actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])} + menuModel={bind(item, "menu-model")}> <icon gIcon={bind(item, "gicon")} /> - </button> - }))} + </menubutton> + ))} </box> } @@ -95,6 +89,7 @@ function Workspaces() { return <box className="Workspaces"> {bind(hypr, "workspaces").as(wss => wss + .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces .sort((a, b) => a.id - b.id) .map(ws => ( <button |