diff options
Diffstat (limited to 'examples/js/simple-bar')
| -rw-r--r-- | examples/js/simple-bar/style.scss | 50 | ||||
| -rw-r--r-- | examples/js/simple-bar/widget/Bar.tsx | 13 |
2 files changed, 38 insertions, 25 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 f5e96cb..87cc20d 100644 --- a/examples/js/simple-bar/widget/Bar.tsx +++ b/examples/js/simple-bar/widget/Bar.tsx @@ -11,17 +11,16 @@ import Tray from "gi://AstalTray" function SysTray() { const tray = Tray.get_default() - return <box> - {bind(tray, "items").as(items => items.map(item => { - - return <menubutton + return <box className="SysTray"> + {bind(tray, "items").as(items => items.map(item => ( + <menubutton tooltipMarkup={bind(item, "tooltipMarkup")} usePopover={false} - actionGroup={bind(item, "action-group").as(ag => { return { prefix: "dbusmenu", actionGroup: ag}})} - menuModel={bind(item, "menu-model")} > + actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])} + menuModel={bind(item, "menu-model")}> <icon gIcon={bind(item, "gicon")} /> </menubutton> - }))} + ))} </box> } |