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

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

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

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>