jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add NumberInput component; add scale input and zoom buttons to options bar

This commit is contained in:
Keavon Chambers 2021-04-10 23:27:29 -07:00
parent d5551a0b5c
commit beb534e20b
5 changed files with 123 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/web/assets/svg/24x24-bounds-16x16-icon/zoom-in.svg Normal file
View File

@ -0,0 +1,6 @@
<svg viewBox="0 0 24 24">
<path d="M19.69,18.19l-4-4.01l-1.5,1.5l4,4c0.41,0.41,1.08,0.41,1.5,0C20.1,19.28,20.1,18.61,19.69,18.19z" />
<path d="M10.5,5.41c2.8,0,5.09,2.28,5.09,5.09s-2.28,5.09-5.09,5.09S5.41,13.3,5.41,10.5S7.7,5.41,10.5,5.41 M10.5,4C6.91,4,4,6.91,4,10.5S6.91,17,10.5,17s6.5-2.91,6.5-6.5S14.09,4,10.5,4L10.5,4z" />
<rect x="7" y="9.75" width="7" height="1.5" />
<rect x="9.75" y="7" width="1.5" height="7" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

5
client/web/assets/svg/24x24-bounds-16x16-icon/zoom-out.svg Normal file
View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<path d="M19.69,18.19l-4-4.01l-1.5,1.5l4,4c0.41,0.41,1.08,0.41,1.5,0C20.1,19.28,20.1,18.61,19.69,18.19z" />
<path d="M10.5,5.41c2.8,0,5.09,2.28,5.09,5.09s-2.28,5.09-5.09,5.09S5.41,13.3,5.41,10.5S7.7,5.41,10.5,5.41 M10.5,4C6.91,4,4,6.91,4,10.5S6.91,17,10.5,17s6.5-2.91,6.5-6.5S14.09,4,10.5,4L10.5,4z" />
<rect x="7" y="9.75" width="7" height="1.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 386 B

5
client/web/assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg Normal file
View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<polygon points="3.97,10.5 6.86,15.5 9.74,10.5" />
<path d="M12.22,16.57c-0.19,0-0.37-0.01-0.56-0.02c-0.93-0.08-1.81-0.36-2.62-0.84l0.72-1.22c0.62,0.37,1.31,0.58,2.02,0.65c1.29,0.11,2.56-0.28,3.55-1.12s1.61-2.01,1.72-3.3c0.23-2.67-1.75-5.04-4.42-5.27c-1.29-0.11-2.56,0.28-3.55,1.12c-1,0.84-1.61,2.01-1.72,3.3c-0.04,0.51-0.01,1.03,0.11,1.54L6.1,11.74c-0.15-0.66-0.2-1.33-0.15-1.99C6.1,8.08,6.89,6.56,8.17,5.49c1.29-1.08,2.92-1.59,4.58-1.44c3.45,0.3,6.01,3.35,5.71,6.8c-0.15,1.67-0.93,3.18-2.22,4.26C15.1,16.06,13.69,16.57,12.22,16.57z" />
<path d="M19.81,18.41l-3.33-3.98l-1.49,1.25l3.33,3.98c0.34,0.41,0.96,0.46,1.37,0.12C20.1,19.43,20.15,18.82,19.81,18.41z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 698 B

15
client/web/src/components/panels/Document.vue
View File

@ -30,7 +30,12 @@
<DropdownButton />
</div>
<div class="spacer"></div>
<div class="right side"></div>
<div class="right side">
<IconButton :size="24" title="Zoom Out"><ZoomOut /></IconButton>
<IconButton :size="24" title="Zoom In"><ZoomIn /></IconButton>
<IconButton :size="24" title="Zoom to 100%"><ZoomReset /></IconButton>
<NumberInput />
</div>
</LayoutRow>
<LayoutRow :class="'shelf-and-viewport'">
<LayoutCol :class="'shelf'">
@ -188,6 +193,7 @@ 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 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";
@ -224,6 +230,9 @@ import BooleanSubtractFront from "../../../assets/svg/24x24-bounds-16x16-icon/bo
import BooleanSubtractBack from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-subtract-back.svg";
import BooleanIntersect from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-intersect.svg";
import BooleanDifference from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-difference.svg";
import ZoomReset from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg";
import ZoomIn from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-in.svg";
import ZoomOut from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-out.svg";
const wasm = import("../../../wasm/pkg");
@ -235,6 +244,7 @@ export default defineComponent({
ItemDivider,
IconButton,
DropdownButton,
NumberInput,
SwapButton,
ResetColorsButton,
SelectTool,
@ -271,6 +281,9 @@ export default defineComponent({
BooleanSubtractBack,
BooleanIntersect,
BooleanDifference,
ZoomReset,
ZoomIn,
ZoomOut,
},
methods: {
async canvasMouseDown(e: MouseEvent) {

93
client/web/src/components/widgets/NumberInput.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="number-input">
<button class="arrow left"></button>
<button class="arrow right"></button>
<input type="text" spellcheck="false" value="25%" />
</div>
</template>
<style lang="scss">
.number-input {
width: 96px;
height: 22px;
position: relative;
border: 1px solid #888;
border-radius: 2px;
background: #111;
input {
width: calc(100% - 8px);
margin: 0 4px;
outline: none;
border: none;
background: none;
padding: 0;
line-height: 22px;
color: #ddd;
font-size: 14px;
text-align: center;
&::selection {
background: #3194d6;
}
}
&:not(:hover) .arrow {
display: none;
}
.arrow {
position: absolute;
top: 0;
outline: none;
border: none;
background: #333;
&:hover {
background: #555;
}
&.right {
right: 0;
padding: 8px 6px 8px 7px;
&::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: transparent transparent transparent #ddd;
display: block;
}
}
&.left {
left: 0;
padding: 8px 7px 8px 6px;
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: transparent #ddd transparent transparent;
display: block;
}
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
components: {
},
props: {
},
});
</script>