Implement popover component and beginnings of color picker (#128)
This commit is contained in:
Keavon Chambers
parent
b7b329c85a
commit
a439b27d2b
|
|
@ -8,12 +8,18 @@ body,
|
|||
#app {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
background: #222;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-family: "Source Sans Pro", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #ddd;
|
||||
background: #222;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -81,20 +81,7 @@
|
|||
<ShelfItem title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')"><ShapeTool /></ShelfItem>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="working-colors">
|
||||
<div class="swatch-pair">
|
||||
<button class="secondary swatch" style="background: white"></button>
|
||||
<button class="primary swatch" style="background: black"></button>
|
||||
</div>
|
||||
<div class="swap-and-reset">
|
||||
<IconButton :size="16">
|
||||
<SwapButton />
|
||||
</IconButton>
|
||||
<IconButton :size="16">
|
||||
<ResetColorsButton />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<WorkingColors />
|
||||
</LayoutCol>
|
||||
<LayoutCol :class="'viewport'">
|
||||
<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove">
|
||||
|
|
@ -129,30 +116,6 @@
|
|||
.shelf-and-viewport {
|
||||
.shelf {
|
||||
flex: 0 0 32px;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.working-colors {
|
||||
.swatch {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px #888 solid;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
box-sizing: unset;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.primary.swatch {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewport {
|
||||
|
|
@ -183,14 +146,13 @@ import { defineComponent } from "vue";
|
|||
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool } from "../../response-handler";
|
||||
import LayoutRow from "../layout/LayoutRow.vue";
|
||||
import LayoutCol from "../layout/LayoutCol.vue";
|
||||
import WorkingColors from "../widgets/WorkingColors.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 SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
|
||||
import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
|
||||
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";
|
||||
|
|
@ -238,14 +200,13 @@ export default defineComponent({
|
|||
components: {
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
WorkingColors,
|
||||
ShelfItem,
|
||||
ItemDivider,
|
||||
IconButton,
|
||||
DropdownButton,
|
||||
RadioPicker,
|
||||
NumberInput,
|
||||
SwapButton,
|
||||
ResetColorsButton,
|
||||
SelectTool,
|
||||
CropTool,
|
||||
NavigateTool,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="popover-color-picker" @click="notImplemented">
|
||||
<div class="color-picker">
|
||||
<div class="selection-circle"></div>
|
||||
</div>
|
||||
<div class="hue-picker">
|
||||
<div class="selection-pincers"></div>
|
||||
</div>
|
||||
<div class="opacity-picker">
|
||||
<div class="selection-pincers"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.popover-color-picker {
|
||||
display: flex;
|
||||
|
||||
.color-picker {
|
||||
--hue: #ff0000;
|
||||
width: 256px;
|
||||
background-blend-mode: multiply;
|
||||
background: linear-gradient(to bottom, #ffffff, #000000), linear-gradient(to right, #ffffff, var(--hue));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.color-picker,
|
||||
.hue-picker,
|
||||
.opacity-picker {
|
||||
height: 256px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hue-picker,
|
||||
.opacity-picker {
|
||||
width: 24px;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hue-picker {
|
||||
background-blend-mode: screen;
|
||||
background: linear-gradient(to top, #ff0000ff 16.666%, #ff000000 33.333%, #ff000000 66.666%, #ff0000ff 83.333%),
|
||||
linear-gradient(to top, #00ff0000 0%, #00ff00ff 16.666%, #00ff00ff 50%, #00ff0000 66.666%), linear-gradient(to top, #0000ff00 33.333%, #0000ffff 50%, #0000ffff 83.333%, #0000ff00 100%);
|
||||
}
|
||||
|
||||
.opacity-picker {
|
||||
background: linear-gradient(to bottom, #ff0000, transparent);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
|
||||
linear-gradient(#fff, #fff);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 8px 8px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-circle {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
box-sizing: border-box;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-pincers {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
border-style: solid;
|
||||
border-width: 4px 0 4px 4px;
|
||||
border-color: transparent transparent transparent black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
border-style: solid;
|
||||
border-width: 4px 4px 4px 0;
|
||||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
props: {},
|
||||
methods: {
|
||||
notImplemented() {
|
||||
alert("Color picker is not functional yet");
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div class="popover-mount" v-if="open">
|
||||
<div class="tail left"></div>
|
||||
<div class="popover">
|
||||
<div class="popover-content" ref="popoverContent">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.popover-mount {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tail {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
z-index: 1;
|
||||
|
||||
&.top {
|
||||
border-width: 0 6px 8px 6px;
|
||||
border-color: transparent transparent #222222e6 transparent;
|
||||
margin-left: -6px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-width: 8px 6px 0 6px;
|
||||
border-color: #222222e6 transparent transparent transparent;
|
||||
margin-left: -6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-width: 6px 8px 6px 0;
|
||||
border-color: transparent #222222e6 transparent transparent;
|
||||
margin-top: -6px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-width: 6px 0 6px 8px;
|
||||
border-color: transparent transparent transparent #222222e6;
|
||||
margin-top: -6px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.popover-content {
|
||||
background: #222222e6;
|
||||
box-shadow: #000 0 0 4px;
|
||||
border-radius: 4px;
|
||||
color: #eee;
|
||||
font-size: inherit;
|
||||
padding: 8px;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
// This `position: relative` is used to allow `top`/`right`/`bottom`/`left` properties to shift the content back from overflowing the workspace
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
props: {
|
||||
open: { type: Boolean, default: false },
|
||||
},
|
||||
updated() {
|
||||
const popoverContent = this.$refs.popoverContent as HTMLElement;
|
||||
const workspace = document.querySelector(".workspace");
|
||||
if (popoverContent && workspace) {
|
||||
const workspaceBounds = workspace.getBoundingClientRect();
|
||||
|
||||
const popoverBounds = popoverContent.getBoundingClientRect();
|
||||
|
||||
const bottomOffset = workspaceBounds.bottom - popoverBounds.bottom - 8;
|
||||
if (bottomOffset < 0) popoverContent.style.top = `${bottomOffset}px`;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="working-colors">
|
||||
<div class="swatch-pair">
|
||||
<button @click="clickSwatch(SwatchSelection.Secondary)" class="secondary swatch" style="background: white">
|
||||
<PopoverMount :open="swatchOpen === SwatchSelection.Secondary">
|
||||
<ColorPicker />
|
||||
</PopoverMount>
|
||||
</button>
|
||||
<button @click="clickSwatch(SwatchSelection.Primary)" class="primary swatch" style="background: black">
|
||||
<PopoverMount :open="swatchOpen === SwatchSelection.Primary">
|
||||
<ColorPicker />
|
||||
</PopoverMount>
|
||||
</button>
|
||||
</div>
|
||||
<div class="swap-and-reset">
|
||||
<IconButton :size="16">
|
||||
<SwapButton />
|
||||
</IconButton>
|
||||
<IconButton :size="16">
|
||||
<ResetColorsButton />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px #888 solid;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
box-sizing: unset;
|
||||
outline: none;
|
||||
position: relative;
|
||||
|
||||
.popover-mount {
|
||||
right: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.primary.swatch {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
.swap-and-reset {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import PopoverMount from "./PopoverMount.vue";
|
||||
import ColorPicker from "../popovers/ColorPicker.vue";
|
||||
import IconButton from "./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 enum SwatchSelection {
|
||||
"None" = "None",
|
||||
"Primary" = "Primary",
|
||||
"Secondary" = "Secondary",
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PopoverMount,
|
||||
ColorPicker,
|
||||
IconButton,
|
||||
SwapButton,
|
||||
ResetColorsButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swatchOpen: SwatchSelection.None,
|
||||
SwatchSelection,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickSwatch(selection: SwatchSelection) {
|
||||
if (this.swatchOpen !== selection) this.swatchOpen = selection;
|
||||
else this.swatchOpen = SwatchSelection.None;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue