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

Add suffix widget non-rounding; add disabled state to many widgets

Browse Source
This commit is contained in:
Keavon Chambers
2022-11-04 17:09:03 -07:00
parent afc84d30f8
commit 71680ab005
28 changed files with 218 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/assists/PivotAssist.vue
+27 -19
View File
@@ -1,14 +1,14 @@
<template>
<div class="pivot-assist">
<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }" tabindex="-1"><div></div></button>
<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }" tabindex="-1"><div></div></button>
<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }" tabindex="-1"><div></div></button>
<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }" tabindex="-1"><div></div></button>
<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }" tabindex="-1"><div></div></button>
<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }" tabindex="-1"><div></div></button>
<div class="pivot-assist" :class="{ disabled }">
<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }" tabindex="-1" :disabled="disabled"><div></div></button>
<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }" tabindex="-1" :disabled="disabled"><div></div></button>
</div>
</template>
@@ -18,6 +18,8 @@
flex: 0 0 auto;
width: 24px;
height: 24px;
--pivot-border-color: var(--color-5-dullgray);
--pivot-fill-active: var(--color-e-nearwhite);
button {
position: absolute;
@@ -26,16 +28,11 @@
margin: 0;
padding: 0;
background: var(--color-1-nearblack);
border: 1px solid var(--color-5-dullgray);
&:hover {
border-color: transparent;
background: var(--color-6-lowergray);
}
border: 1px solid var(--pivot-border-color);
&.active {
border-color: transparent;
background: var(--color-e-nearwhite);
background: var(--pivot-fill-active);
}
&.col-1::before,
@@ -44,7 +41,7 @@
pointer-events: none;
width: 2px;
height: 0;
border-top: 1px solid var(--color-5-dullgray);
border-top: 1px solid var(--pivot-border-color);
position: absolute;
top: 1px;
right: -3px;
@@ -56,7 +53,7 @@
pointer-events: none;
width: 0;
height: 2px;
border-left: 1px solid var(--color-5-dullgray);
border-left: 1px solid var(--pivot-border-color);
position: absolute;
bottom: -3px;
right: 1px;
@@ -91,6 +88,16 @@
margin: -2px;
}
}
&:not(.disabled) button:not(.active):hover {
border-color: transparent;
background: var(--color-6-lowergray);
}
&.disabled button {
--pivot-border-color: var(--color-4-dimgray);
--pivot-fill-active: var(--color-8-uppergray);
}
}
</style>
@@ -103,6 +110,7 @@ export default defineComponent({
emits: ["update:position"],
props: {
position: { type: String as PropType<string>, required: true },
disabled: { type: Boolean as PropType<boolean>, default: false },
},
methods: {
setPosition(newPosition: PivotPosition) {