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

Rename and organize widget components to conform to design terminology (#132)

Browse Source
This commit is contained in:
Keavon Chambers
2021-05-21 13:10:32 -07:00
parent b9248b828c
commit 3b0762ef18
17 changed files with 251 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/panels/Document.vue
+17 -17
View File
@@ -12,19 +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>
<PopoverButton>
<h3>Align</h3>
<p>More alignment-related buttons will be here</p>
</DropdownButton>
</PopoverButton>
<ItemDivider />
<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
<DropdownButton>
<PopoverButton>
<h3>Flip</h3>
<p>More flip-related buttons will be here</p>
</DropdownButton>
</PopoverButton>
<ItemDivider />
@@ -33,22 +33,22 @@
<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>
<PopoverButton>
<h3>Boolean</h3>
<p>More boolean-related buttons will be here</p>
</DropdownButton>
</PopoverButton>
</div>
<div class="spacer"></div>
<div class="right side">
<RadioPicker :initialIndex="0" @changed="viewModeChanged">
<RadioInput :initialIndex="0" @changed="viewModeChanged">
<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>
<PopoverButton>
<h3>Display Mode</h3>
<p>More display mode options will be here</p>
</DropdownButton>
</RadioPicker>
</PopoverButton>
</RadioInput>
<ItemDivider />
@@ -159,13 +159,13 @@ 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 { PopoverDirection } from "../widgets/overlays/Popover.vue";
import ShelfItem from "../widgets/ShelfItem.vue";
import ItemDivider from "../widgets/ItemDivider.vue";
import IconButton from "../widgets/IconButton.vue";
import DropdownButton from "../widgets/DropdownButton.vue";
import RadioPicker from "../widgets/RadioPicker.vue";
import NumberInput from "../widgets/NumberInput.vue";
import IconButton from "../widgets/buttons/IconButton.vue";
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
import RadioInput from "../widgets/inputs/RadioInput.vue";
import NumberInput from "../widgets/inputs/NumberInput.vue";
import SelectTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-select.svg";
import CropTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-crop.svg";
import NavigateTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-navigate.svg";
@@ -217,8 +217,8 @@ export default defineComponent({
ShelfItem,
ItemDivider,
IconButton,
DropdownButton,
RadioPicker,
PopoverButton,
RadioInput,
NumberInput,
SelectTool,
CropTool,
client/web/src/components/panels/LayerTree.vue
+10 -10
View File
@@ -3,10 +3,10 @@
<LayoutRow :class="'options-bar'">
<NumberInput />
<NumberInput />
<DropdownButton>
<PopoverButton>
<h3>Compositing Options</h3>
<p>More blend and compositing options will be here</p>
</DropdownButton>
</PopoverButton>
</LayoutRow>
<LayoutRow :class="'layer-tree'">
<LayoutCol :class="'list'">
@@ -20,7 +20,7 @@
<div class="layer">
<div class="layer-thumbnail"></div>
<div class="layer-type-icon">
<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
<Icon :size="24" title="Path"><NodeTypePath /></Icon>
</div>
<div class="layer-name">
<span>{{ layer.name }}</span>
@@ -79,11 +79,11 @@ import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
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 NumberInput from "../widgets/inputs/NumberInput.vue";
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
import IconButton from "../widgets/buttons/IconButton.vue";
import Icon from "../widgets/labels/Icon.vue";
import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg";
import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
@@ -94,10 +94,10 @@ export default defineComponent({
components: {
LayoutRow,
LayoutCol,
DropdownButton,
PopoverButton,
NumberInput,
IconButton,
IconContainer,
Icon,
EyeVisible,
EyeHidden,
NodeTypePath,