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

Generalize and rename overlays as "floating menus"

Browse Source 
Progress towards #135.
This commit is contained in:
Keavon Chambers
2021-05-29 21:55:43 -07:00
parent c75478299a
commit 3d646d2bc3
9 changed files with 283 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
client/web/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -2,15 +2,15 @@
<div class="swatch-pair">
<div class="secondary swatch">
<button @click="clickSecondarySwatch" ref="secondaryButton"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="secondarySwatchFloatingMenu">
<ColorPicker v-model:color="secondaryColor" />
</Popover>
</FloatingMenu>
</div>
<div class="primary swatch">
<button @click="clickPrimarySwatch" ref="primaryButton"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="primarySwatchFloatingMenu">
<ColorPicker v-model:color="primaryColor" />
</Popover>
</FloatingMenu>
</div>
</div>
</template>
@@ -53,7 +53,7 @@
}
}
.popover {
.floating-menu {
top: 50%;
right: -2px;
}
@@ -68,26 +68,26 @@
<script lang="ts">
import { rgbToDecimalRgb } from "@/lib/utils";
import { defineComponent } from "vue";
import ColorPicker from "../../popovers/ColorPicker.vue";
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
import ColorPicker from "../floating-menus/ColorPicker.vue";
import FloatingMenu, { MenuDirection, MenuType } from "../floating-menus/FloatingMenu.vue";
const wasm = import("../../../../wasm/pkg");
export default defineComponent({
components: {
Popover,
FloatingMenu,
ColorPicker,
},
props: {},
methods: {
clickPrimarySwatch() {
this.getRef<typeof Popover>("primarySwatchPopover").setOpen();
this.getRef<typeof Popover>("secondarySwatchPopover").setClosed();
this.getRef<typeof FloatingMenu>("primarySwatchFloatingMenu").setOpen();
this.getRef<typeof FloatingMenu>("secondarySwatchFloatingMenu").setClosed();
},
clickSecondarySwatch() {
this.getRef<typeof Popover>("secondarySwatchPopover").setOpen();
this.getRef<typeof Popover>("primarySwatchPopover").setClosed();
this.getRef<typeof FloatingMenu>("secondarySwatchFloatingMenu").setOpen();
this.getRef<typeof FloatingMenu>("primarySwatchFloatingMenu").setClosed();
},
getRef<T>(name: string) {
@@ -118,7 +118,8 @@ export default defineComponent({
},
data() {
return {
PopoverDirection,
MenuDirection,
MenuType,
primaryColor: { r: 0, g: 0, b: 0, a: 1 },
secondaryColor: { r: 255, g: 255, b: 255, a: 1 },
};