fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 15:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move scrollable behavior into LayoutRow/LayoutCol

Browse Source
This commit is contained in:
Keavon Chambers
2022-01-22 23:02:59 -08:00
parent 3bf5023ef8
commit 45d75bd13f
11 changed files with 153 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+26 -20
View File
@@ -1,6 +1,6 @@
<template>
<LayoutCol :class="'document'">
<LayoutRow :class="'options-bar scrollable-x'">
<LayoutCol class="document">
<LayoutRow class="options-bar" :scrollableX="true">
<div class="left side">
<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
@@ -66,9 +66,9 @@
/>
</div>
</LayoutRow>
<LayoutRow :class="'shelf-and-viewport'">
<LayoutCol :class="'shelf'">
<div class="tools scrollable-y">
<LayoutRow class="shelf-and-viewport">
<LayoutCol class="shelf">
<LayoutCol class="tools" :scrollableY="true">
<ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => (dialog.comingSoon(289), false) && selectTool('Crop')" />
<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
@@ -104,50 +104,52 @@
<ShelfItemInput icon="VectorRectangleTool" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" :action="() => selectTool('Rectangle')" />
<ShelfItemInput icon="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" />
<ShelfItemInput icon="VectorShapeTool" title="Shape Tool (Y)" :active="activeTool === 'Shape'" :action="() => selectTool('Shape')" />
</div>
</LayoutCol>
<div class="spacer"></div>
<div class="working-colors">
<LayoutCol class="working-colors">
<SwatchPairInput />
<div class="swap-and-reset">
<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
</div>
</div>
</LayoutCol>
</LayoutCol>
<LayoutCol :class="'viewport'">
<LayoutRow :class="'bar-area'">
<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Horizontal'" :class="'top-ruler'" />
<LayoutCol class="viewport">
<LayoutRow class="bar-area">
<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Horizontal'" class="top-ruler" />
</LayoutRow>
<LayoutRow :class="'canvas-area'">
<LayoutCol :class="'bar-area'">
<LayoutRow class="canvas-area">
<LayoutCol class="bar-area">
<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
</LayoutCol>
<LayoutCol :class="'canvas-area'">
<LayoutCol class="canvas-area">
<div class="canvas" ref="canvas" :style="{ cursor: canvasCursor }" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)">
<svg class="artboards" v-html="artboardSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
<svg class="artwork" v-html="artworkSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
</div>
</LayoutCol>
<LayoutCol :class="'bar-area'">
<LayoutCol class="bar-area">
<PersistentScrollbar
:direction="'Vertical'"
:handlePosition="scrollbarPos.y"
@update:handlePosition="(newValue: number) => translateCanvasY(newValue)"
v-model:handleLength="scrollbarSize.y"
@pressTrack="(delta: number) => pageY(delta)"
:class="'right-scrollbar'"
class="right-scrollbar"
/>
</LayoutCol>
</LayoutRow>
<LayoutRow :class="'bar-area'">
<LayoutRow class="bar-area">
<PersistentScrollbar
:direction="'Horizontal'"
:handlePosition="scrollbarPos.x"
@update:handlePosition="(newValue: number) => translateCanvasX(newValue)"
v-model:handleLength="scrollbarSize.x"
@pressTrack="(delta: number) => pageX(delta)"
:class="'bottom-scrollbar'"
class="bottom-scrollbar"
/>
</LayoutRow>
</LayoutCol>
@@ -191,9 +193,13 @@
min-height: 8px;
}
.working-colors .swap-and-reset {
.working-colors {
flex: 0 0 auto;
display: flex;
.swap-and-reset {
flex: 0 0 auto;
display: flex;
}
}
}
frontend/src/components/panels/LayerTree.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template>
<LayoutCol :class="'layer-tree-panel'">
<LayoutRow :class="'options-bar'">
<LayoutCol class="layer-tree-panel">
<LayoutRow class="options-bar">
<DropdownInput
v-model:selectedIndex="blendModeSelectedIndex"
@update:selectedIndex="(newSelectedIndex: number) => setLayerBlendMode(newSelectedIndex)"
@@ -28,8 +28,8 @@
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
</LayoutRow>
<LayoutRow :class="'layer-tree scrollable-y'">
<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateInsertLine($event)" @dragend="drop()">
<LayoutRow class="layer-tree" :scrollableY="true">
<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateInsertLine($event)" @dragend="drop()">
<div class="layer-row" v-for="({ entry: layer }, index) in layers" :key="String(layer.path.slice(-1))">
<div class="visibility">
<IconButton