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

Add "New Folder"/"Delete Selected" buttons to layer panel

Browse Source 
Closes #532
This commit is contained in:
Keavon Chambers
2022-03-02 21:55:40 -08:00
parent 1b1a6a2a12
commit a62147ce36
8 changed files with 67 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+1
View File
@@ -53,6 +53,7 @@
<LayoutCol class="working-colors">
<SwatchPairInput />
<LayoutRow class="swap-and-reset">
<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
</LayoutRow>
frontend/src/components/panels/LayerTree.vue
+28
View File
@@ -28,6 +28,14 @@
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
</LayoutRow>
<LayoutRow class="button-bar">
<LayoutRow></LayoutRow>
<LayoutRow>
<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
<IconButton :action="createEmptyFolder" :icon="'NewLayer'" title="New Folder (Ctrl+Shift+N)" :size="16" />
<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="16" />
</LayoutRow>
</LayoutRow>
<LayoutRow class="layer-tree" :scrollableY="true">
<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
<LayoutRow
@@ -111,7 +119,21 @@
}
}
.button-bar {
height: 24px;
flex: 0 0 auto;
justify-content: space-between;
align-items: center;
margin: 0 4px;
.layout-row {
flex: 0 0 auto;
gap: 4px;
}
}
.layer-tree {
margin-top: 4px;
// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
margin-bottom: -1px;
position: relative;
@@ -366,6 +388,12 @@ export default defineComponent({
markTopOffset(height: number): string {
return `${height}px`;
},
async createEmptyFolder() {
this.editor.instance.create_empty_folder();
},
async deleteSelectedLayers() {
this.editor.instance.delete_selected_layers();
},
async toggleLayerVisibility(path: BigUint64Array) {
this.editor.instance.toggle_layer_visibility(path);
},