starred/warmbly
1
0
Fork 0
mirror of https://github.com/warmbly/warmbly.git synced 2026-10-13 08:02:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: move the flow canvas zoom controls to the bottom left, clear of the assistant launcher, in the app and the site mocks

Browse Source
This commit is contained in:
Matthew Meszaros
2026-10-06 05:29:09 -07:00
parent 705651e01a
commit 69f2fef943
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/AutomationsDemo.astro
+3 -3
View File
@@ -9,7 +9,7 @@
* - the tree canvas at the zoom it opens at: StepCard nodes laid out top
* down on a dot grid, the If / else splitting into Yes and No columns, a +
* at the end of each path (a line's own + shows on hover), zoom controls
* bottom right
* bottom left
* - the Test panel (InsightsPanel in a bare FlowPanel, 400px beside the
* canvas): the dry-run intro, the sample event, the steps to run, Run
* test, then one NodeResultRow per node the run touched. The finished run
@@ -202,8 +202,8 @@ const trace: Row[] = [
</div>
</div>
<!-- Panel bottom-right: zoom controls -->
<div class="absolute right-[15px] bottom-[15px] z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white p-0.5 shadow-sm">
<!-- Panel bottom-left: zoom controls -->
<div class="absolute left-3 bottom-3 z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm">
<span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={minusIcon}></svg></span>
<span class="inline-flex h-7 min-w-11 items-center justify-center rounded-md px-1 text-[11.5px] tabular-nums text-slate-600">{Math.round(ZOOM * 100)}%</span>
<span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={plusIcon}></svg></span>
site/src/components/CampaignBuilderMock.astro
+2 -2
View File
@@ -303,8 +303,8 @@ const rootClass = ['cb relative w-full bg-white text-slate-900 flex flex-col', o
<!-- The surface: a dot grid that moves with the view -->
<div class="relative min-h-0 flex-1 overflow-hidden bg-slate-50/40" style="background-image: radial-gradient(circle, #dde3eb 1px, transparent 1.2px); background-size: 20px 20px;">
<!-- ZoomControls (bottom right) -->
<div class="absolute right-3 bottom-3 z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm">
<!-- ZoomControls (bottom left) -->
<div class="absolute left-3 bottom-3 z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm">
<span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={ic.minus}></svg></span>
<span class="inline-flex h-7 min-w-11 items-center justify-center rounded-md px-1 text-[11.5px] tabular-nums text-slate-600">100%</span>
<span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={ic.plus}></svg></span>
web/src/components/app/flow/FlowCanvas.tsx
+1 -1
View File
@@ -794,7 +794,7 @@ function ZoomControls({
<div
data-no-pan
onClick={(e) => e.stopPropagation()}
className="absolute bottom-3 right-3 z-10 flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm backdrop-blur"
className="absolute bottom-3 left-3 z-10 flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm backdrop-blur"
>
<button type="button" className={btn} aria-label="Zoom out" title="Zoom out (⌘−)" onClick={() => onZoom(1 / 1.25)}>
<MinusIcon className="size-3.5" />