mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add RadioPicker; add view mode picker to document options bar

Browse source
This commit is contained in:
Keavon Chambers 2021-04-11 01:57:30 -07:00
parent b01cd7e8b9
commit d0ddc1f49c
6 changed files with 135 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/web/assets/svg/24x24-bounds-16x16-icon/view-mode-normal.svg Normal file
View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 67 B

3
client/web/assets/svg/24x24-bounds-16x16-icon/view-mode-outline.svg Normal file
View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path d="M12,5c3.86,0,7,3.14,7,7s-3.14,7-7,7s-7-3.14-7-7S8.14,5,12,5 M12,4c-4.42,0-8,3.58-8,8s3.58,8,8,8s8-3.58,8-8S16.42,4,12,4L12,4z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 173 B

23
client/web/assets/svg/24x24-bounds-16x16-icon/view-mode-pixels.svg Normal file
View file

@ -0,0 +1,23 @@
<svg viewBox="0 0 24 24">
<rect x="11" y="5" width="2" height="2" />
<rect x="17" y="8" width="2" height="2" />
<rect x="17" y="11" width="2" height="2" />
<rect x="17" y="14" width="2" height="2" />
<rect x="11" y="17" width="2" height="2" />
<rect x="14" y="17" width="2" height="2" />
<rect x="8" y="17" width="2" height="2" />
<rect x="5" y="14" width="2" height="2" />
<rect x="5" y="11" width="2" height="2" />
<rect x="5" y="8" width="2" height="2" />
<rect x="8" y="5" width="2" height="2" />
<rect x="14" y="14" width="2" height="2" />
<rect x="8" y="14" width="2" height="2" />
<rect x="11" y="14" width="2" height="2" />
<rect x="14" y="11" width="2" height="2" />
<rect x="8" y="11" width="2" height="2" />
<rect x="11" y="11" width="2" height="2" />
<rect x="14" y="8" width="2" height="2" />
<rect x="8" y="8" width="2" height="2" />
<rect x="11" y="8" width="2" height="2" />
<rect x="14" y="5" width="2" height="2" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 962 B

22
client/web/src/components/panels/Document.vue
View file

@ -31,6 +31,15 @@
</div>
<div class="spacer"></div>
<div class="right side">
<RadioPicker :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 />
</RadioPicker>
<ItemDivider />
<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>
@ -116,7 +125,7 @@
.side {
height: 100%;
flex: 0 1 auto;
flex: 0 0 auto;
display: flex;
align-items: center;
margin: 0 8px;
@ -193,6 +202,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 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";
@ -233,6 +243,9 @@ import BooleanDifference from "../../../assets/svg/24x24-bounds-16x16-icon/boole
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";
import ViewModeNormal from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-normal.svg";
import ViewModeOutline from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-outline.svg";
import ViewModePixels from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-pixels.svg";
const wasm = import("../../../wasm/pkg");
@ -244,6 +257,7 @@ export default defineComponent({
ItemDivider,
IconButton,
DropdownButton,
RadioPicker,
NumberInput,
SwapButton,
ResetColorsButton,
@ -284,6 +298,9 @@ export default defineComponent({
ZoomReset,
ZoomIn,
ZoomOut,
ViewModeNormal,
ViewModeOutline,
ViewModePixels,
},
methods: {
async canvasMouseDown(e: MouseEvent) {
@ -310,6 +327,9 @@ export default defineComponent({
const { select_tool } = await wasm;
select_tool(toolName);
},
async viewModeChanged(toolIndex: number) {
console.log(`The view mode has been changed to index match the icon at index ${toolIndex}`);
},
},
mounted() {
registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {

3
client/web/src/components/widgets/NumberInput.vue
View file

@ -8,7 +8,7 @@
<style lang="scss">
.number-input {
width: 96px;
width: 64px;
height: 22px;
position: relative;
border: 1px solid #888;
@ -26,6 +26,7 @@
color: #ddd;
font-size: 14px;
text-align: center;
font-family: inherit;
&::selection {
background: #3194d6;

83
client/web/src/components/widgets/RadioPicker.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="radio-picker" ref="radioPicker">
<slot></slot>
</div>
</template>
<style lang="scss">
.radio-picker {
font-size: 0;
button {
fill: #fff;
border-radius: 0;
margin: 0;
&:first-child {
border-radius: 2px 0 0 2px;
}
&:last-child {
border-radius: 0 2px 2px 0;
}
}
.icon-button {
background: #888;
& + .icon-button {
margin-left: 1px;
}
&:hover {
background: #555;
}
&.active {
background: #3194d6;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
components: {
},
props: {
initialIndex: { type: Number, required: true },
setIndex: { type: Function, required: false },
},
data() {
return {
activeIndex: this.initialIndex,
};
},
mounted() {
this.updateActiveIconButton();
(this.$refs.radioPicker as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
iconButton.addEventListener("click", () => {
this.activeIndex = index;
this.$emit("changed", index);
});
});
},
watch: {
activeIndex() { this.updateActiveIconButton(); },
},
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(...)`
setActive(index: number) {
this.activeIndex = index;
},
updateActiveIconButton() {
const iconButtons = (this.$refs.radioPicker as Element).querySelectorAll(".icon-button");
iconButtons.forEach((iconButton) => iconButton.classList.remove("active"));
iconButtons[this.activeIndex].classList.add("active");
},
},
});
</script>