Move the Layer Tree panel's New Folder and Delete icons into the options bar

This commit is contained in:
Keavon Chambers
2022-05-06 13:19:00 -07:00
parent 1fd4c99832
commit 7729b6219e
+8 -27
View File
@@ -21,20 +21,16 @@
:disabled="opacityNumberInputDisabled" :disabled="opacityNumberInputDisabled"
/> />
<Separator :type="'Related'" /> <!-- <PopoverButton>
<PopoverButton>
<h3>Compositing Options</h3> <h3>Compositing Options</h3>
<p>The contents of this popover menu are coming soon</p> <p>The contents of this popover menu are coming soon</p>
</PopoverButton> </PopoverButton> -->
</LayoutRow>
<LayoutRow class="button-bar"> <Separator :type="'Section'" />
<LayoutRow></LayoutRow>
<LayoutRow> <!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
<!-- TODO: Remember to make these tooltip input hints customized to macOS also --> <IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="24" />
<IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="16" /> <IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="24" />
<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="16" />
</LayoutRow>
</LayoutRow> </LayoutRow>
<LayoutRow class="layer-tree" :scrollableY="true"> <LayoutRow class="layer-tree" :scrollableY="true">
<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()"> <LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
@@ -121,19 +117,6 @@
} }
} }
.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 { .layer-tree {
margin-top: 4px; margin-top: 4px;
// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel // Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
@@ -311,7 +294,6 @@ import { BlendMode, DisplayDocumentLayerTreeStructure, UpdateDocumentLayer, Laye
import LayoutCol from "@/components/layout/LayoutCol.vue"; import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue"; import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue"; import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue"; import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue"; import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
@@ -643,7 +625,6 @@ export default defineComponent({
LayoutRow, LayoutRow,
LayoutCol, LayoutCol,
Separator, Separator,
PopoverButton,
NumberInput, NumberInput,
IconButton, IconButton,
IconLabel, IconLabel,