Upload files to ".glzr/zebar"
This commit is contained in:
Alexander Pieck
parent
361241aff4
commit
d8b083c3a1
3 changed files with 245 additions and 0 deletions
235
.glzr/zebar/config.yaml
Normal file
235
.glzr/zebar/config.yaml
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
# Yaml is white-space sensitive (use 2 spaces to indent).
|
||||
|
||||
###
|
||||
# Define a new window with an id of 'bar'. This window can then be opened
|
||||
# via the Zebar cli by running 'zebar open bar --args <ARGS...>'.
|
||||
#
|
||||
# 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: '32'
|
||||
# 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.
|
||||
shown_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 styles to apply to the root element within the window. Using CSS
|
||||
# nesting, we can also target nested elements (e.g. below we set the
|
||||
# color and margin-right of icons).
|
||||
styles: |
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: rgb(255 255 255 / 90%);
|
||||
# font-family: ui-monospace, monospace;
|
||||
font-family: "VictorMono Nerd Font";
|
||||
font-weight: 800;
|
||||
font-size: 0.85rem;
|
||||
padding: 4px 24px;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 5%);;
|
||||
background: linear-gradient(rgb(0 0 0 / 90%), rgb(5 2 20 / 85%));
|
||||
|
||||
i {
|
||||
color: rgb(115 130 175 / 95%);
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
group/left:
|
||||
styles: |
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
template/logo:
|
||||
styles: |
|
||||
margin-right: 20px;
|
||||
template: |
|
||||
<i class="nf nf-fa-windows"></i>
|
||||
|
||||
template/glazewm_workspaces:
|
||||
styles: |
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.workspace {
|
||||
background: rgb(255 255 255 / 5%);
|
||||
margin-right: 4px;
|
||||
padding: 4px 8px;
|
||||
color: rgb(255 255 255 / 90%);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&.displayed {
|
||||
background: rgb(255 255 255 / 15%);
|
||||
}
|
||||
|
||||
&.focused,
|
||||
&:hover {
|
||||
background: rgb(75 115 255 / 50%);
|
||||
}
|
||||
}
|
||||
providers: ['glazewm']
|
||||
events:
|
||||
- type: 'click'
|
||||
fn_path: 'script.js#focusWorkspace'
|
||||
selector: '.workspace'
|
||||
template: |
|
||||
@for (workspace of glazewm.currentWorkspaces) {
|
||||
<button
|
||||
class="workspace {{ workspace.hasFocus ? 'focused' : '' }} {{ workspace.isDisplayed ? 'displayed' : '' }}"
|
||||
id="{{ workspace.name }}"
|
||||
>
|
||||
{{ workspace.displayName ?? 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:ss') }}
|
||||
|
||||
group/right:
|
||||
styles: |
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
|
||||
.template {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
template/glazewm_other:
|
||||
providers: ['glazewm']
|
||||
styles: |
|
||||
.binding-mode,
|
||||
.tiling-direction {
|
||||
background: rgb(255 255 255 / 15%);
|
||||
color: rgb(255 255 255 / 90%);
|
||||
border-radius: 2px;
|
||||
padding: 4px 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
template: |
|
||||
@for (bindingMode of glazewm.bindingModes) {
|
||||
<span class="binding-mode">
|
||||
{{ bindingMode.displayName ?? bindingMode.name }}
|
||||
</span>
|
||||
}
|
||||
|
||||
@if (glazewm.tilingDirection === 'horizontal') {
|
||||
<i class="tiling-direction nf nf-md-swap_horizontal"></i>
|
||||
} @else {
|
||||
<i class="tiling-direction nf nf-md-swap_vertical"></i>
|
||||
}
|
||||
|
||||
template/network:
|
||||
providers: ['network']
|
||||
template: |
|
||||
<!-- Show icon based on signal strength. -->
|
||||
@if (network.defaultInterface?.type === 'ethernet') {
|
||||
<i class="nf nf-md-ethernet_cable"></i>
|
||||
} @else if (network.defaultInterface?.type === 'wifi') {
|
||||
@if (network.defaultGateway?.signalStrength >= 80) {<i class="nf nf-md-wifi_strength_4"></i>}
|
||||
@else if (network.defaultGateway?.signalStrength >= 65) {<i class="nf nf-md-wifi_strength_3"></i>}
|
||||
@else if (network.defaultGateway?.signalStrength >= 40) {<i class="nf nf-md-wifi_strength_2"></i>}
|
||||
@else if (network.defaultGateway?.signalStrength >= 25) {<i class="nf nf-md-wifi_strength_1"></i>}
|
||||
@else {<i class="nf nf-md-wifi_strength_outline"></i>}
|
||||
{{ network.defaultGateway?.ssid }}
|
||||
} @else {
|
||||
<i class="nf nf-md-wifi_strength_off_outline"></i>
|
||||
}
|
||||
|
||||
# template/ip:
|
||||
# providers: ['ip']
|
||||
# template: |
|
||||
# <i class="nf-md-ip_network"></i>
|
||||
# {{address}}
|
||||
|
||||
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>
|
||||
}
|
||||
|
||||
template/battery:
|
||||
providers: ['battery']
|
||||
styles: |
|
||||
position: relative;
|
||||
color: #13a243;
|
||||
font-weight: 600;
|
||||
|
||||
.charging-icon {
|
||||
color: #13a243;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
font-size: 0.8rem;
|
||||
left: 7px;
|
||||
top: 2px;
|
||||
}
|
||||
template: |
|
||||
<!-- Show icon for whether battery is charging. -->
|
||||
@if (battery.isCharging) {<i class="nf-md-battery_charging"></i>}
|
||||
|
||||
<!-- Show icon for how much of the battery is charged. -->
|
||||
@if (battery.chargePercent > 90) {<i class="nf-md-battery"></i>}
|
||||
@else if (battery.chargePercent > 70) {<i class="nf-md-battery_70"></i>}
|
||||
@else if (battery.chargePercent > 40) {<i class="nf-md-battery_40"></i>}
|
||||
@else if (battery.chargePercent > 20) {<i class="nf-md-battery_20"></i>}
|
||||
@else {<i class="nf-md-battery_outline"></i>}
|
||||
|
||||
{{ Math.round(battery.chargePercent) }}%
|
||||
|
||||
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 }}°
|
||||
5
.glzr/zebar/script.js
Normal file
5
.glzr/zebar/script.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export function focusWorkspace(event, context) {
|
||||
console.log('Focus button clicked!', event, context);
|
||||
const id = event.target.id;
|
||||
context.providers.glazewm.focusWorkspace(id);
|
||||
}
|
||||
5
.glzr/zebar/start.bat
Normal file
5
.glzr/zebar/start.bat
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@echo off
|
||||
@REM Start hidden powershell script, which runs `zebar open bar --args ...` for every monitor.
|
||||
powershell -WindowStyle hidden -Command ^
|
||||
$monitors = zebar monitors; ^
|
||||
foreach ($monitor in $monitors) { Start-Process -WindowStyle Hidden -FilePath \"zebar\" -ArgumentList \"open bar --args $monitor\" };
|
||||
Loading…
Add table
Add a link
Reference in a new issue