Rename and organize widget components to conform to design terminology (#132)
This commit is contained in:
Keavon Chambers
parent
b9248b828c
commit
3b0762ef18
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,19 +1,6 @@
|
|||
<template>
|
||||
<div class="working-colors">
|
||||
<div class="swatch-pair">
|
||||
<div class="secondary swatch">
|
||||
<button @click="clickSecondarySwatch" style="background: white"></button>
|
||||
<PopoverMount :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
|
||||
<ColorPicker />
|
||||
</PopoverMount>
|
||||
</div>
|
||||
<div class="primary swatch">
|
||||
<button @click="clickPrimarySwatch" style="background: black"></button>
|
||||
<PopoverMount :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
|
||||
<ColorPicker />
|
||||
</PopoverMount>
|
||||
</div>
|
||||
</div>
|
||||
<SwatchPairInput />
|
||||
<div class="swap-and-reset">
|
||||
<IconButton :size="16">
|
||||
<SwapButton />
|
||||
|
|
@ -27,40 +14,6 @@
|
|||
|
||||
<style lang="scss">
|
||||
.working-colors {
|
||||
.swatch-pair {
|
||||
display: flex;
|
||||
// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px #888 solid;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.popover-mount {
|
||||
top: 50%;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.swap-and-reset {
|
||||
font-size: 0;
|
||||
}
|
||||
|
|
@ -69,34 +22,17 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import PopoverMount, { PopoverDirection } from "./PopoverMount.vue";
|
||||
import ColorPicker from "../popovers/ColorPicker.vue";
|
||||
import IconButton from "./IconButton.vue";
|
||||
import SwatchPairInput from "./inputs/SwatchPairInput.vue";
|
||||
import IconButton from "./buttons/IconButton.vue";
|
||||
import SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
|
||||
import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PopoverMount,
|
||||
ColorPicker,
|
||||
SwatchPairInput,
|
||||
IconButton,
|
||||
SwapButton,
|
||||
ResetColorsButton,
|
||||
},
|
||||
methods: {
|
||||
clickPrimarySwatch() {
|
||||
(this.$refs.primarySwatchPopover as typeof PopoverMount).setOpen();
|
||||
(this.$refs.secondarySwatchPopover as typeof PopoverMount).setClosed();
|
||||
},
|
||||
clickSecondarySwatch() {
|
||||
(this.$refs.secondarySwatchPopover as typeof PopoverMount).setOpen();
|
||||
(this.$refs.primarySwatchPopover as typeof PopoverMount).setClosed();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PopoverDirection,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,15 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&:not(.gap-after) + .icon-button {
|
||||
// The `where` pseduo-class does not contribtue to specificity
|
||||
& + :where(.icon-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.gap-after + .icon-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #666;
|
||||
color: white;
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<div class="dropdown-button">
|
||||
<div class="popover-button">
|
||||
<button @click="clickButton">
|
||||
<component :is="icon" />
|
||||
</button>
|
||||
<PopoverMount :direction="PopoverDirection.Bottom" ref="popover">
|
||||
<Popover :direction="PopoverDirection.Bottom" ref="popover">
|
||||
<slot></slot>
|
||||
</PopoverMount>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.dropdown-button {
|
||||
.popover-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
margin: 2px 4px;
|
||||
|
||||
.popover-mount {
|
||||
.popover {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import DropdownArrow from "../../../assets/svg/16x24-bounds-8x16-icon/dropdown-arrow.svg";
|
||||
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
||||
import PopoverMount, { PopoverDirection } from "./PopoverMount.vue";
|
||||
import DropdownArrow from "../../../../assets/svg/16x24-bounds-8x16-icon/dropdown-arrow.svg";
|
||||
import VerticalEllipsis from "../../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
||||
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
|
||||
|
||||
export enum DropdownButtonIcon {
|
||||
export enum PopoverButtonIcon {
|
||||
"DropdownArrow" = "DropdownArrow",
|
||||
"VerticalEllipsis" = "VerticalEllipsis",
|
||||
}
|
||||
|
|
@ -55,15 +55,15 @@ export default defineComponent({
|
|||
components: {
|
||||
VerticalEllipsis,
|
||||
DropdownArrow,
|
||||
PopoverMount,
|
||||
Popover,
|
||||
PopoverDirection,
|
||||
},
|
||||
props: {
|
||||
icon: { type: String, default: DropdownButtonIcon.DropdownArrow },
|
||||
icon: { type: String, default: PopoverButtonIcon.DropdownArrow },
|
||||
},
|
||||
methods: {
|
||||
clickButton() {
|
||||
(this.$refs.popover as typeof PopoverMount).setOpen();
|
||||
(this.$refs.popover as typeof Popover).setOpen();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div class="menu-bar-input">
|
||||
<div class="entry"><GraphiteLogo width="16" height="16" /></div>
|
||||
<div class="entry"><span>File</span></div>
|
||||
<div class="entry"><span>Edit</span></div>
|
||||
<div class="entry"><span>Document</span></div>
|
||||
<div class="entry"><span>View</span></div>
|
||||
<div class="entry"><span>Help</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-bar-input {
|
||||
display: flex;
|
||||
|
||||
.entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding: 0 8px;
|
||||
|
||||
svg {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #666;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { ApplicationPlatform } from "../../window/MainWindow.vue";
|
||||
import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: { GraphiteLogo },
|
||||
data() {
|
||||
return {
|
||||
ApplicationPlatform,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
line-height: 22px;
|
||||
line-height: 24px;
|
||||
color: #ddd;
|
||||
font-size: inherit;
|
||||
text-align: center;
|
||||
|
|
@ -1,28 +1,37 @@
|
|||
<template>
|
||||
<div class="radio-picker" ref="radioPicker">
|
||||
<div class="radio-input" ref="radioInput">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.radio-picker {
|
||||
button,
|
||||
.dropdown-button {
|
||||
fill: #ddd;
|
||||
.radio-input {
|
||||
.popover-button button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& > * {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
&:first-child,
|
||||
&:first-child button {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:last-child,
|
||||
&:last-child button {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
& + * {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
button {
|
||||
background: #555;
|
||||
fill: #ddd;
|
||||
|
||||
&:hover {
|
||||
background: #666;
|
||||
|
|
@ -32,10 +41,6 @@
|
|||
background: #3194d6;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
& + .icon-button {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -57,7 +62,7 @@ export default defineComponent({
|
|||
mounted() {
|
||||
this.updateActiveIconButton();
|
||||
|
||||
(this.$refs.radioPicker as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
|
||||
(this.$refs.radioInput as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
|
||||
iconButton.addEventListener("click", () => {
|
||||
this.activeIndex = index;
|
||||
this.$emit("changed", index);
|
||||
|
|
@ -70,12 +75,12 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
// This method may be called by the user of this component by setting a `ref="radioPicker"` attribute and calling `(this.$refs.viewModePicker as typeof RadioPicker).setActive(...)`
|
||||
// This method may be called by the user of this component by setting a `ref="radioInput"` attribute and calling `(this.$refs.viewModePicker as typeof RadioInput).setActive(...)`
|
||||
setActive(index: number) {
|
||||
this.activeIndex = index;
|
||||
},
|
||||
updateActiveIconButton() {
|
||||
const iconButtons = (this.$refs.radioPicker as Element).querySelectorAll(".icon-button");
|
||||
const iconButtons = (this.$refs.radioInput as Element).querySelectorAll(".icon-button");
|
||||
iconButtons.forEach((iconButton) => iconButton.classList.remove("active"));
|
||||
iconButtons[this.activeIndex].classList.add("active");
|
||||
},
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="swatch-pair">
|
||||
<div class="secondary swatch">
|
||||
<button @click="clickSecondarySwatch" style="background: white"></button>
|
||||
<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
|
||||
<ColorPicker />
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="primary swatch">
|
||||
<button @click="clickPrimarySwatch" style="background: black"></button>
|
||||
<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
|
||||
<ColorPicker />
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.swatch-pair {
|
||||
display: flex;
|
||||
// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.swatch {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px #888 solid;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.popover {
|
||||
top: 50%;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import ColorPicker from "../../popovers/ColorPicker.vue";
|
||||
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Popover,
|
||||
ColorPicker,
|
||||
},
|
||||
props: {},
|
||||
methods: {
|
||||
clickPrimarySwatch() {
|
||||
(this.$refs.primarySwatchPopover as typeof Popover).setOpen();
|
||||
(this.$refs.secondarySwatchPopover as typeof Popover).setClosed();
|
||||
},
|
||||
clickSecondarySwatch() {
|
||||
(this.$refs.secondarySwatchPopover as typeof Popover).setOpen();
|
||||
(this.$refs.primarySwatchPopover as typeof Popover).setClosed();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PopoverDirection,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="icon-container" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
|
||||
<div class="icon" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-container {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
fill: #ddd;
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&:not(.gap-after) + .icon-container {
|
||||
&:not(.gap-after) + .icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="input-hint">
|
||||
<div class="user-input-label">
|
||||
<span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)">
|
||||
{{ inputKey }}
|
||||
</span>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.input-hint {
|
||||
.user-input-label {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
display: flex;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="popover-mount" :class="direction.toLowerCase()" v-if="open">
|
||||
<div class="popover" :class="direction.toLowerCase()" v-if="open">
|
||||
<div class="tail"></div>
|
||||
<div class="popover" ref="popover">
|
||||
<div class="popover-container" ref="popoverContainer">
|
||||
<div class="popover-content" ref="popoverContent">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.popover-mount {
|
||||
.popover {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
.popover-container {
|
||||
display: flex;
|
||||
|
||||
.top > & {
|
||||
|
|
@ -124,8 +124,8 @@ export default defineComponent({
|
|||
};
|
||||
},
|
||||
updated() {
|
||||
const popoverContainer = this.$refs.popoverContainer as HTMLElement;
|
||||
const popoverContent = this.$refs.popoverContent as HTMLElement;
|
||||
const popover = this.$refs.popover as HTMLElement;
|
||||
const workspace = document.querySelector(".workspace");
|
||||
|
||||
if (popoverContent && workspace) {
|
||||
|
|
@ -134,18 +134,18 @@ export default defineComponent({
|
|||
|
||||
if (this.direction === PopoverDirection.Left || this.direction === PopoverDirection.Right) {
|
||||
const topOffset = popoverBounds.top - workspaceBounds.top - 8;
|
||||
if (topOffset < 0) popover.style.transform = `translate(0, ${-topOffset}px)`;
|
||||
if (topOffset < 0) popoverContainer.style.transform = `translate(0, ${-topOffset}px)`;
|
||||
|
||||
const bottomOffset = workspaceBounds.bottom - popoverBounds.bottom - 8;
|
||||
if (bottomOffset < 0) popover.style.transform = `translate(0, ${bottomOffset}px)`;
|
||||
if (bottomOffset < 0) popoverContainer.style.transform = `translate(0, ${bottomOffset}px)`;
|
||||
}
|
||||
|
||||
if (this.direction === PopoverDirection.Top || this.direction === PopoverDirection.Bottom) {
|
||||
const leftOffset = popoverBounds.left - workspaceBounds.left - 8;
|
||||
if (leftOffset < 0) popover.style.transform = `translate(${-leftOffset}px, 0)`;
|
||||
if (leftOffset < 0) popoverContainer.style.transform = `translate(${-leftOffset}px, 0)`;
|
||||
|
||||
const rightOffset = workspaceBounds.right - popoverBounds.right - 8;
|
||||
if (rightOffset < 0) popover.style.transform = `translate(${rightOffset}px, 0)`;
|
||||
if (rightOffset < 0) popoverContainer.style.transform = `translate(${rightOffset}px, 0)`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<div class="status-bar">
|
||||
<InputHint :inputMouse="'LMB'">Select Object</InputHint>
|
||||
<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
|
||||
<span class="plus">+</span>
|
||||
<InputHint :inputKeys="['⇧']">Grow/Shrink Selection</InputHint>
|
||||
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
|
||||
<div class="divider"></div>
|
||||
<InputHint :inputMouse="'LMBDrag'">Select Area</InputHint>
|
||||
<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
|
||||
<span class="plus">+</span>
|
||||
<InputHint :inputKeys="['⇧']">Grow/Shrink Selection</InputHint>
|
||||
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
|
||||
<div class="divider"></div>
|
||||
<InputHint :inputKeys="['G']">Grab Selected</InputHint>
|
||||
<InputHint :inputKeys="['R']">Rotate Selected</InputHint>
|
||||
<InputHint :inputKeys="['S']">Scale Selected</InputHint>
|
||||
<UserInputLabel :inputKeys="['G']">Grab Selected</UserInputLabel>
|
||||
<UserInputLabel :inputKeys="['R']">Rotate Selected</UserInputLabel>
|
||||
<UserInputLabel :inputKeys="['S']">Scale Selected</UserInputLabel>
|
||||
<div class="divider"></div>
|
||||
<InputHint :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</InputHint>
|
||||
<UserInputLabel :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</UserInputLabel>
|
||||
<span class="plus">+</span>
|
||||
<InputHint :inputKeys="['⇧']">Big Increment Nudge</InputHint>
|
||||
<UserInputLabel :inputKeys="['⇧']">Big Increment Nudge</UserInputLabel>
|
||||
<div class="divider"></div>
|
||||
<InputHint :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</InputHint>
|
||||
<InputHint :inputKeys="['Ctrl', 'D']">Duplicate</InputHint>
|
||||
<UserInputLabel :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
|
||||
<UserInputLabel :inputKeys="['Ctrl', 'D']">Duplicate</UserInputLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -39,18 +39,18 @@
|
|||
background: #888;
|
||||
}
|
||||
|
||||
.input-hint + .input-hint {
|
||||
.user-input-label + .user-input-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import InputHint from "./InputHint.vue";
|
||||
import UserInputLabel from "../../widgets/labels/UserInputLabel.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
InputHint,
|
||||
UserInputLabel,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div class="entry">
|
||||
<GraphiteLogo width="16" height="16" />
|
||||
</div>
|
||||
<div class="entry"><span>File</span></div>
|
||||
<div class="entry"><span>Edit</span></div>
|
||||
<div class="entry"><span>Document</span></div>
|
||||
<div class="entry"><span>View</span></div>
|
||||
<div class="entry"><span>Help</span></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding: 0 8px;
|
||||
|
||||
svg {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #666;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { ApplicationPlatform } from "../MainWindow.vue";
|
||||
import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: { GraphiteLogo },
|
||||
data() {
|
||||
return {
|
||||
ApplicationPlatform,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="header-third">
|
||||
<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
|
||||
<FileMenu v-if="platform !== ApplicationPlatform.Mac" />
|
||||
<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
|
||||
</div>
|
||||
<div class="header-third">
|
||||
<WindowTitle :title="'X-35B Over Death Valley.gdd* - Graphite'" />
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import FileMenu from "./FileMenu.vue";
|
||||
import MenuBarInput from "../../widgets/inputs/MenuBarInput.vue";
|
||||
import WindowTitle from "./WindowTitle.vue";
|
||||
import WindowButtonsWindows from "./WindowButtonsWindows.vue";
|
||||
import WindowButtonsMac from "./WindowButtonsMac.vue";
|
||||
|
|
@ -40,7 +40,7 @@ import { ApplicationPlatform } from "../MainWindow.vue";
|
|||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FileMenu,
|
||||
MenuBarInput,
|
||||
WindowTitle,
|
||||
WindowButtonsWindows,
|
||||
WindowButtonsMac,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="workspace-panel">
|
||||
<div class="panel">
|
||||
<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
|
||||
<div class="tab-group">
|
||||
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
||||
|
|
@ -9,10 +9,10 @@
|
|||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis">
|
||||
<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
|
||||
<h3>Panel Options</h3>
|
||||
<p>More panel-related options will be here</p>
|
||||
</DropdownButton>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<component :is="panelType" />
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.workspace-panel {
|
||||
.panel {
|
||||
background: #111;
|
||||
border-radius: 8px;
|
||||
flex-grow: 1;
|
||||
|
|
@ -135,9 +135,9 @@ import Document from "../panels/Document.vue";
|
|||
import Properties from "../panels/Properties.vue";
|
||||
import LayerTree from "../panels/LayerTree.vue";
|
||||
import Minimap from "../panels/Minimap.vue";
|
||||
import IconButton from "../widgets/IconButton.vue";
|
||||
import DropdownButton, { DropdownButtonIcon } from "../widgets/DropdownButton.vue";
|
||||
import { PopoverDirection } from "../widgets/PopoverMount.vue";
|
||||
import IconButton from "../widgets/buttons/IconButton.vue";
|
||||
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
|
||||
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
||||
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
||||
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
|
||||
|
||||
|
|
@ -148,7 +148,7 @@ export default defineComponent({
|
|||
LayerTree,
|
||||
Minimap,
|
||||
IconButton,
|
||||
DropdownButton,
|
||||
PopoverButton,
|
||||
CloseX,
|
||||
VerticalEllipsis,
|
||||
},
|
||||
|
|
@ -161,7 +161,7 @@ export default defineComponent({
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
DropdownButtonIcon,
|
||||
PopoverButtonIcon,
|
||||
PopoverDirection,
|
||||
};
|
||||
},
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<LayoutRow class="workspace-grid-subdivision">
|
||||
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
|
||||
<WorkspacePanel
|
||||
<Panel
|
||||
:panelType="'Document'"
|
||||
:tabCloseButtons="true"
|
||||
:tabMinWidths="true"
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
|
||||
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
|
||||
<LayoutRow class="workspace-grid-subdivision">
|
||||
<WorkspacePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
|
||||
<Panel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
|
||||
<LayoutRow class="workspace-grid-subdivision">
|
||||
<WorkspacePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
|
||||
<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
|
||||
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 0; height: 0">
|
||||
<WorkspacePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
|
||||
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
|
|
@ -48,13 +48,13 @@
|
|||
import { defineComponent } from "vue";
|
||||
import LayoutRow from "../layout/LayoutRow.vue";
|
||||
import LayoutCol from "../layout/LayoutCol.vue";
|
||||
import WorkspacePanel from "./WorkspacePanel.vue";
|
||||
import Panel from "./Panel.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
WorkspacePanel,
|
||||
Panel,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue