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

Complete implementing popover system main features (#131)

Browse Source 
* Make popover buttons open popover menus and add placeholder messages to all of them.
* Implement all directions for drawing, aligning, and edge-clamping popovers.
* Fix popovers so they are drawn outside their parent panel bounds and not clipped.
* Fix popover HTML to avoid nesting it inside a <button> element.
This commit is contained in:
Keavon Chambers
2021-05-21 12:22:30 -07:00
parent 267331728d
commit b9248b828c
8 changed files with 204 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/panels/Document.vue
+18 -4
View File
@@ -12,13 +12,19 @@
<IconButton :size="24" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
<IconButton :size="24" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
<IconButton :size="24" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
<DropdownButton />
<DropdownButton>
<h3>Align</h3>
<p>More alignment-related buttons will be here</p>
</DropdownButton>
<ItemDivider />
<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
<DropdownButton />
<DropdownButton>
<h3>Flip</h3>
<p>More flip-related buttons will be here</p>
</DropdownButton>
<ItemDivider />
@@ -27,7 +33,10 @@
<IconButton :size="24" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
<IconButton :size="24" title="Boolean Intersect"><BooleanIntersect /></IconButton>
<IconButton :size="24" title="Boolean Difference"><BooleanDifference /></IconButton>
<DropdownButton />
<DropdownButton>
<h3>Boolean</h3>
<p>More boolean-related buttons will be here</p>
</DropdownButton>
</div>
<div class="spacer"></div>
<div class="right side">
@@ -35,7 +44,10 @@
<IconButton :size="24" title="View Mode: Normal"><ViewModeNormal /></IconButton>
<IconButton :size="24" title="View Mode: Outline"><ViewModeOutline /></IconButton>
<IconButton :size="24" title="View Mode: Pixels"><ViewModePixels /></IconButton>
<DropdownButton />
<DropdownButton>
<h3>Display Mode</h3>
<p>More display mode options will be here</p>
</DropdownButton>
</RadioPicker>
<ItemDivider />
@@ -147,6 +159,7 @@ import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiv
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import WorkingColors from "../widgets/WorkingColors.vue";
import { PopoverDirection } from "../widgets/PopoverMount.vue";
import ShelfItem from "../widgets/ShelfItem.vue";
import ItemDivider from "../widgets/ItemDivider.vue";
import IconButton from "../widgets/IconButton.vue";
@@ -304,6 +317,7 @@ export default defineComponent({
return {
viewportSvg: "",
activeTool: "Select",
PopoverDirection,
};
},
});
client/web/src/components/panels/LayerTree.vue
+6 -1
View File
@@ -3,7 +3,10 @@
<LayoutRow :class="'options-bar'">
<NumberInput />
<NumberInput />
<DropdownButton />
<DropdownButton>
<h3>Compositing Options</h3>
<p>More blend and compositing options will be here</p>
</DropdownButton>
</LayoutRow>
<LayoutRow :class="'layer-tree'">
<LayoutCol :class="'list'">
@@ -78,6 +81,7 @@ import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import NumberInput from "../widgets/NumberInput.vue";
import DropdownButton from "../widgets/DropdownButton.vue";
import { PopoverDirection } from "../widgets/PopoverMount.vue";
import IconButton from "../widgets/IconButton.vue";
import IconContainer from "../widgets/IconContainer.vue";
import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
@@ -122,6 +126,7 @@ export default defineComponent({
},
data() {
return {
PopoverDirection,
layers: [] as Array<LayerPanelEntry>,
};
},