Skip to content

Commit 1eb8755

Browse files
blaiyzblaiyz
committed
feat: strip the bar of interactive buttons when click-through is enabled
1 parent b62b8cc commit 1eb8755

File tree

7 files changed

+191
-60
lines changed

7 files changed

+191
-60
lines changed

‎.github/workflows/publish-marketplace.yml‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,68 @@ name: Publish to Zebar Marketplace
33
on:
44
release:
55
types: [published]
6+
workflow_dispatch:
7+
inputs:
8+
version:
9+
description: "Version number (e.g., 1.0.0 or v1.0.0). Leave empty to use latest release."
10+
type: string
11+
required: false
612

713
jobs:
14+
get-version:
15+
runs-on: ubuntu-latest
16+
outputs:
17+
version: ${{ steps.get-version.outputs.version }}
18+
steps:
19+
- name: Checkout code
20+
uses: actions/checkout@v4
21+
- name: Get version
22+
id: get-version
23+
env:
24+
GH_TOKEN: ${{ github.token }}
25+
run: |
26+
if [ -n "${{ github.event.release.tag_name }}" ]; then
27+
echo "version=${{ github.event.release.tag_name }}" >> $GITHUB_OUTPUT
28+
elif [ -n "${{ github.event.inputs.version }}" ]; then
29+
echo "version=${{ github.event.inputs.version }}" >> $GITHUB_OUTPUT
30+
else
31+
TAG=$(gh release view --json tagName -q '.tagName')
32+
echo "version=$TAG" >> $GITHUB_OUTPUT
33+
fi
34+
835
build:
36+
needs: get-version
937
uses: ./.github/workflows/build.yml
1038
with:
11-
version-number: ${{ github.event.release.tag_name }}
39+
version-number: ${{ needs.get-version.outputs.version }}
1240

1341
publish:
14-
if: github.event.release.draft == false
42+
if: github.event_name == 'workflow_dispatch' || github.event.release.draft == false
1543
runs-on: ubuntu-latest
16-
needs: build
44+
needs: [get-version, build]
1745
steps:
1846
- name: Checkout code
1947
uses: actions/checkout@v4
2048

49+
- name: Get release info
50+
id: release
51+
env:
52+
GH_TOKEN: ${{ github.token }}
53+
run: |
54+
TAG="${{ needs.get-version.outputs.version }}"
55+
if [ "${{ github.event_name }}" == "release" ]; then
56+
echo "url=${{ github.event.release.html_url }}" >> $GITHUB_OUTPUT
57+
echo "body=${{ github.event.release.body }}" >> $GITHUB_OUTPUT
58+
else
59+
RELEASE_JSON=$(gh release view "$TAG" --json body,url)
60+
echo "url=$(echo "$RELEASE_JSON" | jq -r '.url')" >> $GITHUB_OUTPUT
61+
echo "body=$(echo "$RELEASE_JSON" | jq -r '.body')" >> $GITHUB_OUTPUT
62+
fi
63+
2164
- name: Extract version from tag
2265
id: version
2366
run: |
24-
TAG="${{ github.event.release.tag_name }}"
67+
TAG="${{ needs.get-version.outputs.version }}"
2568
echo "version=${TAG#v}" >> $GITHUB_OUTPUT
2669
2770
- name: Download build artifact
@@ -64,5 +107,5 @@ jobs:
64107
zebar publish --pack-config ./build/zpack.json \
65108
--version-override ${{ steps.version.outputs.version }} \
66109
--commit-sha $(git rev-parse --short ${{ github.sha }}) \
67-
--release-notes "${{ github.event.release.body }}" \
68-
--release-url ${{ github.event.release.html_url }}
110+
--release-notes "${{ steps.release.outputs.body }}" \
111+
--release-url ${{ steps.release.outputs.url }}

‎src/components/NowPlaying.svelte‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import SmoothDiv from "./SmoothDiv.svelte";
1212
import type { MediaSession } from "zebar";
1313
import { untrack } from "svelte";
14+
import { toggleModes } from "$lib/binding_modes.svelte";
1415
1516
let media = $derived(providers.media);
1617
let mediaTimeout: number | null = null;
@@ -53,15 +54,18 @@
5354
{#if isOnPrimaryMonitor() && media && shownSession}
5455
<div
5556
transition:fly={{ y: 20, duration: config.transitionDuration }}
56-
class="flex items-stretch"
57+
class="flex items-stretch relative"
5758
>
58-
<button
59-
class="transition px-2 hover:text-zb-accent hover:scale-125"
60-
aria-label="Previous"
61-
onclick={() => media.previous()}
62-
>
63-
<SkipBack />
64-
</button>
59+
{#if !toggleModes.clickThrough}
60+
<button
61+
class="transition hover:text-zb-accent hover:scale-125 relative flex justify-end items-center"
62+
aria-label="Previous"
63+
onclick={() => media.previous()}
64+
transition:fly={{ y: 20, duration: config.transitionDuration }}
65+
>
66+
<SkipBack class="{toggleModes.clickThrough ? 'absolute' : ''} mx-2" />
67+
</button>
68+
{/if}
6569
<button
6670
class="relative px-1 gap-x-2 overflow-hidden inline-flex items-center justify-center group transition hover:text-zb-accent"
6771
aria-label="Toggle"
@@ -101,13 +105,20 @@
101105
</span>
102106
</SmoothDiv>
103107
</button>
104-
<button
105-
class="transition px-2 hover:text-zb-accent hover:scale-125"
106-
aria-label="Next"
107-
onclick={() => media.next()}
108-
>
109-
<SkipForward />
110-
</button>
108+
<SmoothDiv height={false} outerClass="flex justify-end" innerClass="flex justify-end">
109+
{#if !toggleModes.clickThrough}
110+
<button
111+
class="transition h-full hover:text-zb-accent hover:scale-125 relative flex items-center justify-end"
112+
aria-label="Next"
113+
onclick={() => media.next()}
114+
transition:fly={{ y: 20, duration: config.transitionDuration }}
115+
>
116+
<SkipForward
117+
class="{toggleModes.clickThrough ? 'absolute' : ''} mx-2"
118+
/>
119+
</button>
120+
{/if}
121+
</SmoothDiv>
111122
</div>
112123
{/if}
113124
</SmoothDiv>

‎src/components/RightGroup.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
{#if config.showWeatherSection && weather}
3232
<div
3333
class="truncate flex items-center pr-2 {!isOnPrimaryMonitor()
34-
? 'pl-2'
34+
? 'pl-1'
3535
: ''}"
3636
>
3737
<span class="text-2xl">

‎src/components/SmoothDiv.svelte‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,18 @@
88
type Props = {
99
innerClass?: string;
1010
outerClass?: string;
11+
width?: boolean;
12+
height?: boolean;
1113
children: Snippet;
1214
};
1315
14-
let { innerClass, outerClass, children }: Props = $props();
16+
let {
17+
innerClass,
18+
outerClass,
19+
width = true,
20+
height = true,
21+
children
22+
}: Props = $props();
1523
const widthSpring = new Spring(0);
1624
const heightSpring = new Spring(0);
1725
@@ -28,13 +36,26 @@
2836

2937
<div
3038
class="relative {outerClass}"
31-
style="width: {widthSpring.current}px; height: {heightSpring.current}px;"
39+
style="{width ? `width: ${widthSpring.current}px;` : ''} {height
40+
? `height: ${heightSpring.current}px;`
41+
: ''}"
3242
>
33-
<div
34-
class="w-fit h-fit {innerClass}"
35-
bind:clientWidth={widthSpring.target}
36-
bind:clientHeight={heightSpring.target}
37-
>
38-
{@render children()}
39-
</div>
43+
{#if width && height}
44+
<div
45+
class="w-fit h-fit {innerClass}"
46+
bind:clientWidth={widthSpring.target}
47+
bind:clientHeight={heightSpring.target}
48+
>
49+
{@render children()}
50+
</div>
51+
{:else if width}
52+
<div class="w-fit h-full {innerClass}" bind:clientWidth={widthSpring.target}>
53+
{@render children()}
54+
</div>
55+
{:else if height}
56+
<div class="h-fit w-full {innerClass}" bind:clientHeight={heightSpring.target}>
57+
{@render children()}
58+
</div>
59+
{/if}
60+
<!-- At least one dimension should be true, otherwise no point using this component instead of div -->
4061
</div>

‎src/components/VolumeControl/VolumeControl.svelte‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
import RangeSlider from "svelte-range-slider-pips";
1010
import SmoothDiv from "../SmoothDiv.svelte";
1111
import "./VolumeControl.css";
12+
import { toggleModes } from "$lib/binding_modes.svelte";
13+
import { fly } from "svelte/transition";
14+
import { config } from "$lib/config.svelte";
1215
1316
let audio = $derived(providers.audio);
1417
let device = $derived(audio?.defaultPlaybackDevice);
@@ -30,11 +33,14 @@
3033
{#if device}
3134
<div class="flex items-stretch h-full mr-1" onwheel={onMouseWheel}>
3235
<div class="h-full overflow-hidden flex items-center">
33-
<SmoothDiv outerClass="flex justify-end">
36+
<SmoothDiv outerClass="flex justify-end" innerClass="flex justify-end">
3437
{#if sliderOpen}
38+
{#if toggleModes.clickThrough}
39+
<div class="w-2"></div>
40+
{/if}
3541
<RangeSlider
3642
id="VolumeSlider"
37-
class="w-24 mr-2"
43+
class="w-24"
3844
float
3945
min={0}
4046
max={100}
@@ -48,31 +54,80 @@
4854
{/if}
4955
</SmoothDiv>
5056
</div>
51-
<button
52-
class="transition px-1 text-lg hover:text-zb-accent hover:scale-125 {sliderOpen
53-
? 'rotate-180'
54-
: ''}"
55-
aria-label="Open volume slider"
56-
onclick={() => (sliderOpen = !sliderOpen)}><ChevronLeft /></button
57+
<SmoothDiv
58+
height={false}
59+
outerClass="h-full flex justify-end"
60+
innerClass="flex justify-end"
5761
>
58-
<button
59-
class="transition px-1 mr-1 text-lg stroke-2 hover:text-zb-accent hover:scale-125"
60-
aria-label="Mute"
61-
onclick={() => audio?.setMute(!muted)}
62+
{#if !toggleModes.clickThrough}
63+
<button
64+
class="h-full flex items-center justify-end transition text-lg hover:text-zb-accent hover:scale-125 relative"
65+
aria-label="Open volume slider"
66+
onclick={() => (sliderOpen = !sliderOpen)}
67+
transition:fly={{ y: 20, duration: config.transitionDuration }}
68+
>
69+
<ChevronLeft
70+
class="{toggleModes.clickThrough ? 'absolute' : ''} {sliderOpen
71+
? 'rotate-180'
72+
: ''} transition mx-1"
73+
/>
74+
</button>
75+
{/if}
76+
</SmoothDiv>
77+
<SmoothDiv
78+
height={false}
79+
outerClass="h-full flex justify-end"
80+
innerClass="flex justify-end"
6281
>
63-
{#if device}
64-
{#if muted || volume === 0}
65-
<VolumeX />
66-
{:else if volume <= 33}
67-
<Volume />
68-
{:else if volume > 33 && volume <= 66}
69-
<Volume1 />
70-
{:else}
71-
<Volume2 />
72-
{/if}
73-
{:else}
74-
<VolumeOff />
82+
{@const visible = !sliderOpen || !toggleModes.clickThrough}
83+
{#if visible}
84+
<button
85+
class="h-full flex items-center justify-end transition text-lg stroke-2 hover:text-zb-accent hover:scale-125 relative"
86+
aria-label="Mute"
87+
onclick={() => audio?.setMute(!muted)}
88+
transition:fly={{ y: 20, duration: config.transitionDuration }}
89+
>
90+
<!--
91+
One might ask: Why does this guy repeat the same class logic for each icon?
92+
For some reason, the conditional for 'absolute' doesn't work when I put it in a wrapper div, nor when I put
93+
it in the parent button. Might have something to do with svelte transitions? And why does it work just fine
94+
with the icon components? Go figure. I've spent way too long on this.
95+
-->
96+
{#if device}
97+
{#if muted || volume === 0}
98+
<VolumeX
99+
class="{!visible ? 'absolute' : ''} {toggleModes.clickThrough
100+
? 'ml-2'
101+
: 'ml-1'} mr-2"
102+
/>
103+
{:else if volume <= 33}
104+
<Volume
105+
class="{!visible ? 'absolute' : ''} {toggleModes.clickThrough
106+
? 'ml-2'
107+
: 'ml-1'} mr-2"
108+
/>
109+
{:else if volume > 33 && volume <= 66}
110+
<Volume1
111+
class="{!visible ? 'absolute' : ''} {toggleModes.clickThrough
112+
? 'ml-2'
113+
: 'ml-1'} mr-2"
114+
/>
115+
{:else}
116+
<Volume2
117+
class="{!visible ? 'absolute' : ''} {toggleModes.clickThrough
118+
? 'ml-2'
119+
: 'ml-1'} mr-2"
120+
/>
121+
{/if}
122+
{:else}
123+
<VolumeOff
124+
class="{!visible ? 'absolute' : ''} {toggleModes.clickThrough
125+
? 'ml-2'
126+
: 'ml-1'} mr-2"
127+
/>
128+
{/if}
129+
</button>
75130
{/if}
76-
</button>
131+
</SmoothDiv>
77132
</div>
78133
{/if}

‎src/components/Workspaces.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</script>
5252

5353
{#if glazewm}
54-
<div class="flex items-center">
54+
<div class="flex items-center h-full">
5555
<SmoothDiv outerClass="flex justify-end" innerClass="flex items-center">
5656
{#each glazewm.currentWorkspaces as workspace (workspace.id)}
5757
{@const globalIndex = glazewm.allWorkspaces.findIndex((ws) =>
@@ -63,9 +63,11 @@
6363
class="mr-2"
6464
>
6565
<Button
66-
class="box-border min-w-14 px-2 text-zb-ws-{globalIndex} {workspace.isDisplayed
66+
class="h-[2rem] box-border text-zb-ws-{globalIndex} {workspace.isDisplayed
6767
? `border-zb-ws-${globalIndex} hover:border-blend-70 active:!border-blend-50`
68-
: ''}"
68+
: ''} {toggleModes.clickThrough
69+
? 'aspect-square'
70+
: 'min-w-14 px-2'}"
6971
callback={() =>
7072
glazewm!.runCommand(`focus --workspace ${workspace.name}`)}
7173
>

‎static/zpack.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"rosé pine",
1111
"catppuccin",
1212
"weather",
13-
"themes",
1413
"system stats",
1514
"autotiler",
1615
"volume"

0 commit comments

Comments
 (0)