Skip to content

Commit 7d86c66

Browse files
sm17psm17p
committed
fix: toolbar responsive mode size chages
1 parent 7ef4f11 commit 7d86c66

5 files changed

Lines changed: 58 additions & 59 deletions

File tree

‎.changeset/olive-cameras-sneeze.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"amgiflol": patch
3+
---
4+
5+
toolbar responsive mode size changes

‎src/lib/components/ToolbarAction.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@
2424
{disabled}
2525
bind:pressed
2626
{onPressedChange}
27-
class="outline-none rounded-sm data-[state=off]:not-disabled:hover:bg-lime-200 data-[state=off]:not-disabled:hover:text-lime-500 !active:bg-lime-700 !active:text-lime-500 data-[state=on]:bg-lime-700 data-[state=on]:text-white/80 inline-flex size-10 items-center justify-center transition-all not-disabled:active:rounded-3xl not-disabled:active:scale-[0.85]"
27+
class="size-7 sm:size-10 outline-none rounded-sm data-[state=off]:not-disabled:hover:bg-lime-200 data-[state=off]:not-disabled:hover:text-lime-500 !active:bg-lime-700 !active:text-lime-500 data-[state=on]:bg-lime-700 data-[state=on]:text-white/80 inline-flex items-center justify-center transition-all not-disabled:active:rounded-3xl not-disabled:active:scale-[0.85]"
2828
>
2929
{@render children?.({ pressed })}
3030
{#if shortcut}
3131
<kbd
32-
class="text-xs not-prose duration-75 absolute translate-y-3 translate-x-3.5"
32+
class="text-xs not-prose duration-75 absolute translate-y-2 translate-x-2.5 sm:translate-y-3 sm:translate-x-3.5"
3333
>
3434
{shortcut}
3535
</kbd>

‎src/lib/modules/ExtenstionSettings/App.svelte‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<script lang="ts">
22
import { useAppConfig } from "#imports";
3+
import IconOff from "@/assets/icon-off.png";
34
import IconOn from "@/assets/icon.png";
4-
import IconOff from "@/assets/icon.png";
55
import {
66
createMessageHandler,
77
sendMessage,
88
} from "@/lib/core/MessageBus";
99
import { Label, Switch } from "bits-ui";
1010
import { browser } from "wxt/browser";
1111
import "./app.css";
12+
import { fade } from "svelte/transition";
1213
1314
const appConfig = useAppConfig();
1415
@@ -103,24 +104,28 @@
103104
<main class="prose prose-zinc bg-lime-300 p-1">
104105
<div class="grid grid-cols-1 rounded-xl gap-y-6 p-4 border-1 border-zinc-800 min-h-36">
105106
<h1 class="font-bold text-center mt-0 mb-0 text-4xl">
106-
Amgif-lol
107+
Amgif
107108
</h1>
108109
{#if isActive !== undefined}
109-
{#if isActive}
110-
<img
111-
class="justify-self-center-safe"
112-
src={IconOn}
113-
alt="amgiflol on icon"
114-
width={156}
115-
/>
116-
{:else}
117-
<img
118-
class="justify-self-center-safe"
119-
src={IconOff}
120-
alt="amgiflol off icon"
121-
width={156}
122-
/>
123-
{/if}
110+
<div class="grid grid-row-1 grid-col-1">
111+
{#if isActive}
112+
<img
113+
transition:fade|global={{ duration: 150 }}
114+
class="justify-self-center-safe col-span-full row-span-full"
115+
src={IconOn}
116+
alt="amgiflol on icon"
117+
width={156}
118+
/>
119+
{:else}
120+
<img
121+
transition:fade|global={{ duration: 150 }}
122+
class="justify-self-center-safe col-span-full row-span-full"
123+
src={IconOff}
124+
alt="amgiflol off icon"
125+
width={156}
126+
/>
127+
{/if}
128+
</div>
124129
<hr class="mt-0 mb-0 border-zinc-800" />
125130
<div class="flex justify-between space-x-3">
126131
<Label.Root

‎src/lib/modules/Toolbar/ToolbarSettings.svelte‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@
1717
<!-- class="rounded-2xl bg-background-alt flex h-10 items-center gap-1" -->
1818
<DropdownMenu.Root bind:open={uiStore.toolbar.settings.open}>
1919
<DropdownMenu.Trigger
20-
class="outline-none text-zinc-800 rounded-sm data-[state=closed]:not-disabled:hover:bg-lime-200 data-[state=closed]:not-disabled:hover:text-lime-500 !active:bg-lime-700 !active:text-lime-500 data-[state=open]:bg-lime-700 data-[state=open]:text-white/80 inline-flex size-10 items-center justify-center transition-all not-disabled:active:rounded-3xl not-disabled:active:scale-[0.85]"
20+
class="size-7 sm:size-10 outline-none text-zinc-800 rounded-sm data-[state=closed]:not-disabled:hover:bg-lime-200 data-[state=closed]:not-disabled:hover:text-lime-500 !active:bg-lime-700 !active:text-lime-500 data-[state=open]:bg-lime-700 data-[state=open]:text-white/80 inline-flex items-center justify-center transition-all not-disabled:active:rounded-3xl not-disabled:active:scale-[0.85]"
2121
>
2222
<Cog
2323
class={[
24-
"size-6 duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
24+
"size-4 sm:size-6 duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
2525
{ "rotate-[270deg]": uiStore.toolbar.settings.open },
2626
]}
2727
/>
2828
<kbd
29-
class="text-xs not-prose duration-75 absolute translate-y-3 translate-x-3.5"
29+
class="text-xs not-prose duration-75 absolute translate-y-2 translate-x-2.5 sm:translate-y-3 sm:translate-x-3.5"
3030
>
3131
0
3232
</kbd>
@@ -84,23 +84,6 @@
8484
label="Animation Debugger"
8585
/>
8686
</DropdownMenu.Item>
87-
<DropdownMenu.Item
88-
class="hover:bg-lime-200 hover:text-lime-500 border-1 border-transparent rounded-lg grid grid-cols-[24px_1fr] pl-1 outline-0 hover:data-[disabled]:cursor-not-allowed"
89-
closeOnSelect={false}
90-
>
91-
<Tooltip
92-
label="Toolbar will switch position when mouse is in the bottom half of the screen."
93-
side="left"
94-
sideOffset={12}
95-
>
96-
<CircleQuestionMark class="size-4" />
97-
</Tooltip>
98-
<UpvoteAction
99-
disabled={disableForFirefox}
100-
key="auto-move-toolbar"
101-
label="Auto-Move Toolbar"
102-
/>
103-
</DropdownMenu.Item>
10487
<DropdownMenu.Item
10588
class="hover:bg-lime-200 hover:text-lime-500 border-1 border-transparent rounded-lg grid grid-cols-[24px_1fr] pl-1 outline-0 hover:data-[disabled]:cursor-not-allowed"
10689
closeOnSelect={false}
@@ -230,7 +213,7 @@
230213
aria-label="Toolbar Behaviour"
231214
>
232215
<DropdownMenu.GroupHeading>
233-
<h4 class="m-0 ml-5">Side-panel</h4>
216+
<h4 class="m-0 ml-7">Side-panel</h4>
234217
</DropdownMenu.GroupHeading>
235218
<DropdownMenu.Separator
236219
class="-ml-1 -mr-1 block h-px bg-zinc-200"
@@ -269,7 +252,7 @@
269252
aria-label="Toolbar Behaviour"
270253
>
271254
<DropdownMenu.GroupHeading>
272-
<h4 class="m-0 ml-5">Toolbar</h4>
255+
<h4 class="m-0 ml-7">Toolbar</h4>
273256
</DropdownMenu.GroupHeading>
274257
<DropdownMenu.Separator
275258
class="-ml-1 -mr-1 block h-px bg-zinc-200"

‎src/lib/modules/Toolbar/index.svelte‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -141,10 +141,13 @@
141141
<section
142142
onmouseenter={onmouseenterToolbar}
143143
onmouseleave={onmouseleaveToolbar}
144-
class={["fixed p-3 pointer-events-initial h-18 w-full flex", {
145-
"bottom-0 flex-col-reverse": bottom,
146-
"top-0 flex-col": !bottom,
147-
}]}
144+
class={[
145+
"fixed pt-3 pb-1 px-1 sm:px-3 sm:pb-3 pointer-events-initial w-full flex",
146+
{
147+
"bottom-0 flex-col-reverse": bottom,
148+
"top-0 flex-col": !bottom,
149+
},
150+
]}
148151
transition:fly|global={{
149152
y,
150153
duration: 150,
@@ -164,7 +167,7 @@
164167
>
165168
<SquareDashedMousePointer
166169
absoluteStrokeWidth
167-
class="size-5"
170+
class="size-4 sm:size-5"
168171
/>
169172
</ToolbarAction>
170173
{#if trackers.current}
@@ -180,22 +183,22 @@
180183
{@const Icon = trackers.current?.isLocked
181184
? LockKeyhole
182185
: LockKeyholeOpen}
183-
<Icon absoluteStrokeWidth class="size-6" />
186+
<Icon absoluteStrokeWidth class="size-4 sm:size-6" />
184187
</ToolbarAction>
185188
{/if}
186189
<ToolbarAction
187190
bind:pressed={uiStore.svg.showGrid}
188191
label="Show Grid Lines"
189192
shortcut="#"
190193
>
191-
<Grid3x3 absoluteStrokeWidth class="size-6" />
194+
<Grid3x3 absoluteStrokeWidth class="size-4 sm:size-6" />
192195
</ToolbarAction>
193196
<ToolbarAction
194197
bind:pressed={uiStore.svg.showRuler}
195198
label="Show Ruler"
196199
shortcut="$"
197200
>
198-
<Ruler absoluteStrokeWidth class="size-6" />
201+
<Ruler absoluteStrokeWidth class="size-4 sm:size-6" />
199202
</ToolbarAction>
200203
<ToolbarAction
201204
bind:pressed={uiStore.svg.showDistances}
@@ -204,11 +207,11 @@
204207
>
205208
<ChevronsLeftRightEllipsis
206209
absoluteStrokeWidth
207-
class="size-6"
210+
class="size-4 sm:size-6"
208211
/>
209212
</ToolbarAction>
210213
<Separator.Root
211-
class="bg-neutral-200 -my-1 mx-1 w-0.5 self-stretch"
214+
class="bg-neutral-200 -my-1 mx-0.5 sm:mx-1 w-0.5 self-stretch"
212215
/>
213216
<ToolbarAction
214217
disabled={disableForFirefox}
@@ -219,42 +222,45 @@
219222
: "Rainbow Layouts"}
220223
shortcut="6"
221224
>
222-
<Rainbow absoluteStrokeWidth class="size-6" />
225+
<Rainbow absoluteStrokeWidth class="size-4 sm:size-6" />
223226
</ToolbarAction>
224227
<Separator.Root
225-
class="bg-neutral-200 -my-1 mx-1 w-0.5 self-stretch"
228+
class="bg-neutral-200 -my-1 mx-0.5 sm:mx-1 w-0.5 self-stretch"
226229
/>
227230
<ToolbarAction
228231
pressed={designModePressed}
229232
onPressedChange={designMode}
230233
label="Design Mode: Edit any text on the document"
231234
shortcut="7"
232235
>
233-
<TextCursor absoluteStrokeWidth class="size-4" />
236+
<TextCursor absoluteStrokeWidth class="size-3 sm:size-4" />
234237
</ToolbarAction>
235238
<Separator.Root
236-
class="bg-neutral-200 -my-1 mx-1 w-0.5 self-stretch"
239+
class="bg-neutral-200 -my-1 mx-0.5 sm:mx-1 w-0.5 self-stretch"
237240
/>
238241
<ToolbarAction
239242
bind:pressed={uiStore.sidePanel.isVisible}
240243
label="Show Side Panel"
241244
shortcut="8"
242245
>
243-
<PanelRightOpen absoluteStrokeWidth class="size-6" />
246+
<PanelRightOpen
247+
absoluteStrokeWidth
248+
class="size-4 sm:size-6"
249+
/>
244250
</ToolbarAction>
245251
<Separator.Root
246-
class="bg-neutral-200 -my-1 mx-1 w-0.5 self-stretch"
252+
class="bg-neutral-200 -my-1 mx-0.5 sm:mx-1 w-0.5 self-stretch"
247253
/>
248254
<ToolbarAction
249255
pressed={false}
250256
label="Screenshot"
251257
onPressedChange={capture}
252258
shortcut="9"
253259
>
254-
<Camera absoluteStrokeWidth class="size-6" />
260+
<Camera absoluteStrokeWidth class="size-4 sm:size-6" />
255261
</ToolbarAction>
256262
<Separator.Root
257-
class="bg-neutral-200 -my-1 mx-1 w-0.5 self-stretch"
263+
class="bg-neutral-200 -my-1 mx-0.5 sm:mx-1 w-0.5 self-stretch"
258264
/>
259265
<ToolbarSettings />
260266
</div>

0 commit comments

Comments
 (0)