Alan-Manning
commented
3 months ago https://github.com/glzr-io/zebar/assets/110160546/d72d949b-9022-4c1f-915e-7bbb14a7cafa
This is a config that demonstrates some of this where the css is updated when i switch workspace on the center monitor but then not when i switch workspace on the edge monitor. The config i used for this is below:
# Yaml is white-space sensitive (use 2 spaces to indent).
###
# Settings to apply to all windows.
#
# Docs regarding global: https://some-future-docs-link.com
global:
# Whether to enable the browser devtools.
enable_devtools: true
###
# Define a new window with an id of 'bar'. This window can then be opened
# via the Zebar cli by running 'zebar open bar'.
#
# Docs regarding window: https://some-future-docs-link.com
window/bar:
providers: ['self']
# Width of the window in physical pixels.
width: '{{ self.args.MONITOR_WIDTH }}'
# Height of the window in physical pixels.
height: '45'
# X-position of the window in physical pixels.
position_x: '{{ self.args.MONITOR_X }}'
# Y-position of the window in physical pixels.
position_y: '{{ self.args.MONITOR_Y }}'
# Whether to show the window above/below all others.
# Allowed values: 'always_on_top', 'always_on_bottom', 'normal'.
z_order: 'always_on_top'
# Whether the window should be shown in the taskbar.
show_in_taskbar: false
# Whether the window should have resize handles.
resizable: false
# Styles to apply globally within the window. For example, we can use
# this to import the Nerdfonts icon font. Ref https://www.nerdfonts.com/cheat-sheet
# for a cheatsheet of available Nerdfonts icons.
global_styles: |
@import "https://www.nerdfonts.com/assets/css/webfont.css";
# CSS/SCSS styles to apply to the root element within the window.
styles: |
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
height: 100%;
color: #ddedff;
font-family: ui-monospace, monospace;
font-size: 13px;
padding: 0px 24px;
background: rgba(30, 30, 46, 0.85);
group/left:
styles: |
display: flex;
align-items: center;
group/workspaces_outer:
styles: |
display: flex;
align-items: center;
background: #45475a;
padding: 1px 1px;
border-radius: 500px;
template/workspaces:
styles: |
display: flex;
align-items: center;
.workspace {
background: #1e1e2e;
margin: 0px 10px 0px 10px;
width: 30px;
height: 30px;
color: #6c7086;
border: none;
border-radius: 2px;
&.active {
background: #33b1ff;
margin: 0px 5px 0px 5px;
width: 30px;
height: 30px;
color: #1e1e2e;
border: none;
border-radius: 10px;
}
}
providers: ['komorebi']
template: |
@for (workspace of komorebi.currentWorkspaces) {
<button class="workspace {{ workspace === komorebi.focusedWorkspace && 'active' }}">
{{ workspace.name }}
</button>
}
group/center:
styles: |
justify-self: center;
template/clock:
providers: ['date']
# Available date tokens: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
template: |
{{ date.toFormat(date.now, 'EEE d MMM t') }}
group/right:
styles: |
justify-self: end;
display: flex;
.template {
margin-left: 20px;
}
i {
color: #7481b2e1;
margin-right: 7px;
}
template/weather:
providers: ['weather']
template: |
@switch (weather.status) {
@case ('clear_day') {<i class="nf nf-weather-day_sunny"></i>}
@case ('clear_night') {<i class="nf nf-weather-night_clear"></i>}
@case ('cloudy_day') {<i class="nf nf-weather-day_cloudy"></i>}
@case ('cloudy_night') {<i class="nf nf-weather-night_alt_cloudy"></i>}
@case ('light_rain_day') {<i class="nf nf-weather-day_sprinkle"></i>}
@case ('light_rain_night') {<i class="nf nf-weather-night_alt_sprinkle"></i>}
@case ('heavy_rain_day') {<i class="nf nf-weather-day_rain"></i>}
@case ('heavy_rain_night') {<i class="nf nf-weather-night_alt_rain"></i>}
@case ('snow_day') {<i class="nf nf-weather-day_snow"></i>}
@case ('snow_night') {<i class="nf nf-weather-night_alt_snow"></i>}
@case ('thunder_day') {<i class="nf nf-weather-day_lightning"></i>}
@case ('thunder_night') {<i class="nf nf-weather-night_alt_lightning"></i>}
}
{{ weather.celsiusTemp }}°
template/memory:
providers: ['memory']
template: |
<i class="nf nf-fae-chip"></i>
{{ Math.round(memory.usage) }}%
template/cpu:
providers: ['cpu']
styles: |
.high-usage {
color: #900029;
}
template: |
<i class="nf nf-oct-cpu"></i>
<!-- Change the text color if the CPU usage is high. -->
@if (cpu.usage > 85) {
<span class="high-usage">{{ Math.round(cpu.usage) }}%</span>
} @else {
<span>{{ Math.round(cpu.usage) }}%</span>
}
lars-berger
There is a bunch of really wierd behaviour in trying to set this up. The default config loaded fine but when defining a custom css stylings it all went very odd.
I dont really know where to begin but i guess the most important thing is that the css i define in the config.yaml does not appear on all the monitors all the time. Sometimes the css stylings are not applied across the monitors the same. If i set some background color, then quit and relaunch zebar then it will show that on one screen but not the others. Then when i try to change the komorebi workspace on that monitors working bar it will break and show nothing and then start working on the other monitors?
When updating the config and right clicking on the refresh button there it might work and update the change i made in the config, or it may not update the change i made in the config, it may do this on one screens bar only, it might not show anything on one or more of the bars anymore. If i change the komorebi workspace when this is happening it may break it more or it might start magically working with either the new config i updated or the old one?
The most annoying thing by far though is making a change, then quitting the bar and relauching the bar, realising that change broke the bar, undo the change in the config, quit and relauch the bar with the old config that did work, and now the bar doesn't work despite the config working moments ago!
I really dont know what is going on and this is issue is not really usefull for fixing that. I dont even know where to start looking to track down some of these issues. The best i can do if say that i am running the latest komorebi - v0.1.22, OS Name Microsoft Windows 11 Pro N, Version 10.0.22631 Build 22631.
I would love to see some example configs from some users who have a nicely configured bar.
i dont know if there is some settings within komorebi that might be tripping me up, there may be some options in the config for zebar that im missing that might make something work, there may be some dependencies i need but am lacking, maybe im trying to refresh the bar in the wrong way (right click and refresh or quit zebar and relaunch it or do something else?).
Maybe There is some way to preview the css in the config via developer tools or something that means i dont neeed to refresh or realunch so often?
I'm not expecting much from this issue as this is lacking in so many details but this would be a mile long if i tried to capture all these odd things.