mirror of
https://github.com/js0ny/dotfiles.git
synced 2025-12-21 16:53:00 +00:00
feat(glazewm): Change Windows TWM to GlazeWM
This commit is contained in:
js0ny
parent
4657765e21
commit
22ca99086c
16 changed files with 999 additions and 253 deletions
22
platforms/win/glzr/zebar/minimal/bar.zebar.json
Normal file
22
platforms/win/glzr/zebar/minimal/bar.zebar.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://github.com/glzr-io/zebar/raw/v2.4.0/resources/widget-schema.json",
|
||||
"htmlPath": "./index.html",
|
||||
"zOrder": "normal",
|
||||
"shownInTaskbar": false,
|
||||
"focused": false,
|
||||
"resizable": false,
|
||||
"transparent": true,
|
||||
"presets": [
|
||||
{
|
||||
"name": "default",
|
||||
"anchor": "top_left",
|
||||
"offsetX": "0px",
|
||||
"offsetY": "0px",
|
||||
"width": "100%",
|
||||
"height": "40px",
|
||||
"monitorSelection": {
|
||||
"type": "all"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
29
platforms/win/glzr/zebar/minimal/index.html
Normal file
29
platforms/win/glzr/zebar/minimal/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Base styles for better consistency across platforms (aka. CSS reset). -->
|
||||
<link rel="stylesheet" type="text/css" href="../normalize.css" />
|
||||
|
||||
<!-- Custom styles. -->
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
|
||||
<!-- Add empty favicon to suppress not found errors. -->
|
||||
<link rel="icon" href="data:;" />
|
||||
|
||||
<!-- 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" src="./scripts.jsx">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
197
platforms/win/glzr/zebar/minimal/scripts.jsx
Normal file
197
platforms/win/glzr/zebar/minimal/scripts.jsx
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
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({
|
||||
// network: { type: 'network' },
|
||||
glazewm: { type: 'glazewm' },
|
||||
cpu: { type: 'cpu' },
|
||||
date: { type: 'date', formatting: 'HH:mm:ss MMM月d日 EEE', locale: 'zh-CN' },
|
||||
battery: { type: 'battery' },
|
||||
memory: { type: 'memory' },
|
||||
weather: { type: 'weather' },
|
||||
});
|
||||
|
||||
function getNetworkIcon(networkOutput) {
|
||||
switch (networkOutput.defaultInterface?.type) {
|
||||
case 'ethernet':
|
||||
return <i className="nf nf-md-ethernet_cable"></i>;
|
||||
case 'wifi':
|
||||
if (networkOutput.defaultGateway?.signalStrength >= 80) {
|
||||
return <i className="nf nf-md-wifi_strength_4"></i>;
|
||||
} else if (
|
||||
networkOutput.defaultGateway?.signalStrength >= 65
|
||||
) {
|
||||
return <i className="nf nf-md-wifi_strength_3"></i>;
|
||||
} else if (
|
||||
networkOutput.defaultGateway?.signalStrength >= 40
|
||||
) {
|
||||
return <i className="nf nf-md-wifi_strength_2"></i>;
|
||||
} else if (
|
||||
networkOutput.defaultGateway?.signalStrength >= 25
|
||||
) {
|
||||
return <i className="nf nf-md-wifi_strength_1"></i>;
|
||||
} else {
|
||||
return <i className="nf nf-md-wifi_strength_outline"></i>;
|
||||
}
|
||||
default:
|
||||
return (
|
||||
<i className="nf nf-md-wifi_strength_off_outline"></i>
|
||||
);
|
||||
}
|
||||
}
|
||||
// Get icon to show for how much of the battery is charged.
|
||||
function getBatteryIcon(batteryOutput) {
|
||||
if (batteryOutput.chargePercent > 90)
|
||||
return <i className="nf nf-fa-battery_4"></i>;
|
||||
if (batteryOutput.chargePercent > 70)
|
||||
return <i className="nf nf-fa-battery_3"></i>;
|
||||
if (batteryOutput.chargePercent > 40)
|
||||
return <i className="nf nf-fa-battery_2"></i>;
|
||||
if (batteryOutput.chargePercent > 20)
|
||||
return <i className="nf nf-fa-battery_1"></i>;
|
||||
return <i className="nf nf-fa-battery_0"></i>;
|
||||
}
|
||||
// Get icon to show for current weather status.
|
||||
function getWeatherIcon(weatherOutput) {
|
||||
switch (weatherOutput.status) {
|
||||
case 'clear_day':
|
||||
return <i className="nf nf-weather-day_sunny"></i>;
|
||||
case 'clear_night':
|
||||
return <i className="nf nf-weather-night_clear"></i>;
|
||||
case 'cloudy_day':
|
||||
return <i className="nf nf-weather-day_cloudy"></i>;
|
||||
case 'cloudy_night':
|
||||
return <i className="nf nf-weather-night_alt_cloudy"></i>;
|
||||
case 'light_rain_day':
|
||||
return <i className="nf nf-weather-day_sprinkle"></i>;
|
||||
case 'light_rain_night':
|
||||
return <i className="nf nf-weather-night_alt_sprinkle"></i>;
|
||||
case 'heavy_rain_day':
|
||||
return <i className="nf nf-weather-day_rain"></i>;
|
||||
case 'heavy_rain_night':
|
||||
return <i className="nf nf-weather-night_alt_rain"></i>;
|
||||
case 'snow_day':
|
||||
return <i className="nf nf-weather-day_snow"></i>;
|
||||
case 'snow_night':
|
||||
return <i className="nf nf-weather-night_alt_snow"></i>;
|
||||
case 'thunder_day':
|
||||
return <i className="nf nf-weather-day_lightning"></i>;
|
||||
case 'thunder_night':
|
||||
return <i className="nf nf-weather-night_alt_lightning"></i>;
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<i className="logo nf nf-custom-windows"></i>
|
||||
{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?.formatted}</div>
|
||||
|
||||
<div className="right">
|
||||
{output.glazewm && (
|
||||
<>
|
||||
{output.glazewm.bindingModes.map(bindingMode => (
|
||||
<button
|
||||
className="binding-mode"
|
||||
key={bindingMode.name}
|
||||
onClick={() =>
|
||||
output.glazewm.runCommand(
|
||||
`wm-disable-binding-mode --name ${bindingMode.name}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
{bindingMode.displayName ?? bindingMode.name}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
className={`tiling-direction nf ${output.glazewm.tilingDirection === 'horizontal' ? 'nf-md-swap_horizontal' : 'nf-md-swap_vertical'}`}
|
||||
onClick={() =>
|
||||
output.glazewm.runCommand('toggle-tiling-direction')
|
||||
}
|
||||
></button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{output.network && (
|
||||
<div className="network">
|
||||
{getNetworkIcon(output.network)}
|
||||
{output.network.defaultGateway?.ssid}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{output.battery && (
|
||||
<div className="battery">
|
||||
{/* Show icon for whether battery is charging. */}
|
||||
{output.battery.isCharging && (
|
||||
<i className="nf nf-md-power_plug charging-icon"></i>
|
||||
)}
|
||||
{getBatteryIcon(output.battery)}
|
||||
{Math.round(output.battery.chargePercent)}%
|
||||
</div>
|
||||
)}
|
||||
|
||||
{output.weather && (
|
||||
<div className="weather">
|
||||
{getWeatherIcon(output.weather)}
|
||||
{Math.round(output.weather.celsiusTemp)}°C
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
platforms/win/glzr/zebar/minimal/styles.css
Normal file
115
platforms/win/glzr/zebar/minimal/styles.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/**
|
||||
* Import the Nerdfonts icon font.
|
||||
* Ref https://www.nerdfonts.com/cheat-sheet for a cheatsheet of available Nerdfonts icons.
|
||||
*/
|
||||
@import 'https://www.nerdfonts.com/assets/css/webfont.css';
|
||||
|
||||
i {
|
||||
color: rgb(115 130 175 / 95%);
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(255 255 255 / 90%);
|
||||
font-family: "JetBrainsMono Nerd Font", "LXGW Wenkai", ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
border-bottom: 1px solid rgb(255 255 255 / 5%);
|
||||
background: linear-gradient(rgb(0 0 0 / 90%), rgb(5 2 20 / 85%));
|
||||
}
|
||||
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 4px 1.5vw;
|
||||
}
|
||||
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.binding-mode,
|
||||
.tiling-direction,
|
||||
.network,
|
||||
.memory,
|
||||
.cpu,
|
||||
.battery {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.workspaces {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
.binding-mode,
|
||||
.tiling-direction {
|
||||
background: rgb(255 255 255 / 15%);
|
||||
color: rgb(255 255 255 / 90%);
|
||||
border-radius: 2px;
|
||||
line-height: 1;
|
||||
padding: 4px 8px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.binding-mode {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.cpu .high-usage {
|
||||
color: #900029;
|
||||
}
|
||||
|
||||
.battery {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.battery .charging-icon {
|
||||
position: absolute;
|
||||
font-size: 7px;
|
||||
left: -8px;
|
||||
top: 3px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue