diff options
Diffstat (limited to '')
| -rwxr-xr-x | fmurphy/.glzr/zebar/bar/bar.zebar.json | 34 | ||||
| -rwxr-xr-x | fmurphy/.glzr/zebar/bar/index.html | 100 | ||||
| -rwxr-xr-x | fmurphy/.glzr/zebar/bar/styles.css | 130 |
3 files changed, 264 insertions, 0 deletions
diff --git a/fmurphy/.glzr/zebar/bar/bar.zebar.json b/fmurphy/.glzr/zebar/bar/bar.zebar.json new file mode 100755 index 0000000..b06cf19 --- /dev/null +++ b/fmurphy/.glzr/zebar/bar/bar.zebar.json @@ -0,0 +1,34 @@ +{ + "$schema": "https://github.com/glzr-io/zebar/raw/v2.7.0/resources/widget-schema.json", + "htmlPath": "./index.html", + "zOrder": "normal", + "shownInTaskbar": false, + "focused": false, + "resizable": false, + "transparent": true, + "caching": { + "defaultDuration": 604800, + "rules": [] + }, + "privileges": { + "shellCommands": [] + }, + "presets": [ + { + "name": "default", + "anchor": "top_left", + "offsetX": "0px", + "offsetY": "0px", + "width": "100%", + "height": "48px", + "monitorSelection": { + "type": "all" + }, + "dockToEdge": { + "enabled": false, + "edge": null, + "windowMargin": "0px" + } + } + ] +} diff --git a/fmurphy/.glzr/zebar/bar/index.html b/fmurphy/.glzr/zebar/bar/index.html new file mode 100755 index 0000000..a100410 --- /dev/null +++ b/fmurphy/.glzr/zebar/bar/index.html @@ -0,0 +1,100 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <!-- Custom styles. --> + <link rel="stylesheet" type="text/css" href="./styles.css" /> + + <!-- Allows React to be run buildless via "text/babel" script below. --> + <script + src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js" + integrity="sha256-aS0B0wnsaDByLfE16h4MDCP1fQFccysd1YWOcV+gbBo=" + crossorigin="anonymous" + ></script> + </head> + <body> + <div id="root"></div> + + <script type="text/babel" data-type="module"> + import React, { + useState, + useEffect, + } from 'https://esm.sh/react@18?dev'; + import { createRoot } from 'https://esm.sh/react-dom@18/client?dev'; + import * as zebar from 'https://esm.sh/zebar@2'; + + const providers = zebar.createProviderGroup({ + glazewm: { type: 'glazewm' }, + cpu: { type: 'cpu' }, + memory: { type: 'memory' }, + date: { type: 'date', formatting: 'yyyy-LL-dd HH:mm:ss' }, + }); + + createRoot(document.getElementById('root')).render(<App />); + + function App() { + const [output, setOutput] = useState(providers.outputMap); + + useEffect(() => { + providers.onOutput(() => setOutput(providers.outputMap)); + }, []); + + return ( + <div className="app"> + <div className="left"> + {output.glazewm && ( + <div className="workspaces"> + {output.glazewm.currentWorkspaces.map(workspace => ( + <button + className={`workspace ${workspace.hasFocus && 'focused'} ${workspace.isDisplayed && 'displayed'}`} + onClick={() => + output.glazewm.runCommand( + `focus --workspace ${workspace.name}`, + ) + } + key={workspace.name} + > + {workspace.displayName ?? workspace.name} + </button> + ))} + </div> + )} + </div> + + <div className="center"> + {output.date && ( + <div className="date"> + {output.date.formatted} + </div> + )} + </div> + + <div className="right"> + {output.memory && ( + <div className="memory"> + <i className="nf nf-fae-chip"></i> + {Math.round(output.memory.usage)}% + </div> + )} + + {output.cpu && ( + <div className="cpu"> + <i className="nf nf-oct-cpu"></i> + + {/* Change the text color if the CPU usage is high. */} + <span + className={output.cpu.usage > 85 ? 'high-usage' : ''} + > + {Math.round(output.cpu.usage)}% + </span> + </div> + )} + </div> + </div> + ); + } + </script> + </body> +</html> diff --git a/fmurphy/.glzr/zebar/bar/styles.css b/fmurphy/.glzr/zebar/bar/styles.css new file mode 100755 index 0000000..64bdc5e --- /dev/null +++ b/fmurphy/.glzr/zebar/bar/styles.css @@ -0,0 +1,130 @@ +@import 'https://www.nerdfonts.com/assets/css/webfont.css'; + +* { + --red: #f38ba8; + --blue: #89b4fa; + --text: #cdd6f4; + --subtext1: #bac2de; + --subtext0: #a6adc8; + --overlay2: #9399b2; + --overlay1: #7f849c; + --overlay0: #6c7086; + --surface2: #585b70; + --surface1: #45475a; + --surface0: #313244; + --base: #1e1e2e; + --mantle: #181825; + --crust: #11111b; + --primary: var(--blue); + --gap: 5px; + --border: 24px; + box-sizing: border-box; +} + +i { + color: var(--primary); + margin-right: 7px; +} + +div, +span, +p { + cursor: default; + user-select: none; +} + +html, +body, +#root { + height: 100%; + font-size: 12px; + overflow: hidden; + font-family: ui-monospace, monospace; +} + +.app { + display: grid; + position: relative; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + height: 24px; + color: var(--text); + background: var(--base); +} + +.left { + display: flex; + align-items: center; + margin-left: var(--gap); + + .workspaces { + display: flex; + align-items: center; + + .workspace { + background: var(--surface1); + color: var(--text); + margin-right: var(--gap); + padding: 2px 6px; + border: none; + border-radius: 2px; + cursor: pointer; + + &.focused { + background: var(--primary); + color: var(--mantle); + } + + &:hover:not(.focused) { + background: var(--overlay0); + } + } + } +} + +.center { + display: flex; + align-items: center; + justify-self: center; +} + +.right { + display: flex; + align-items: center; + justify-self: end; + + .memory, + .cpu { + margin-right: 20px; + } + + .cpu .high-usage { + color: var(--red); + } +} + +.app::before { + content: ''; + position: absolute; + bottom: calc(var(--border) * -1); + left: 0; + height: var(--border); + width: var(--border); + border-top-left-radius: 50%; + background: transparent; + box-shadow: 0 calc(var(--border) * -0.5) 0 0 var(--base); + z-index: -1; +} + +.app::after { + content: ''; + position: absolute; + bottom: calc(var(--border) * -1); + right: 0; + height: var(--border); + width: var(--border); + border-top-right-radius: 50%; + background: transparent; + box-shadow: 0 calc(var(--border) * -0.5) 0 0 var(--base); + z-index: -1; +} |