mirror of
https://github.com/frappe/books.git
synced 2024-09-20 03:29:00 +00:00
fix(ui/ux): continuous drag for template pane
- remove border radius on
This commit is contained in:
parent
5c1696ea85
commit
bac00b5a36
@ -13,6 +13,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between pe-2 rounded"
|
class="flex items-center justify-between pe-2 rounded"
|
||||||
|
:style="containerStyles"
|
||||||
:class="containerClasses"
|
:class="containerClasses"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
:step="step"
|
:step="step"
|
||||||
:max="df.maxvalue"
|
:max="df.maxvalue"
|
||||||
:min="df.minvalue"
|
:min="df.minvalue"
|
||||||
:style="inputStyles"
|
:style="containerStyles"
|
||||||
@blur="(e) => !isReadOnly && triggerChange(e.target.value)"
|
@blur="(e) => !isReadOnly && triggerChange(e.target.value)"
|
||||||
@focus="(e) => !isReadOnly && $emit('focus', e)"
|
@focus="(e) => !isReadOnly && $emit('focus', e)"
|
||||||
@input="(e) => !isReadOnly && $emit('input', e)"
|
@input="(e) => !isReadOnly && $emit('input', e)"
|
||||||
@ -42,7 +42,7 @@ export default {
|
|||||||
size: String,
|
size: String,
|
||||||
showLabel: Boolean,
|
showLabel: Boolean,
|
||||||
autofocus: Boolean,
|
autofocus: Boolean,
|
||||||
inputStyles: { type: Object, default: () => ({}) },
|
containerStyles: { type: Object, default: () => ({}) },
|
||||||
textRight: { type: [null, Boolean], default: null },
|
textRight: { type: [null, Boolean], default: null },
|
||||||
readOnly: { type: [null, Boolean], default: null },
|
readOnly: { type: [null, Boolean], default: null },
|
||||||
required: { type: [null, Boolean], default: null },
|
required: { type: [null, Boolean], default: null },
|
||||||
|
@ -31,11 +31,16 @@ import MouseFollower from './MouseFollower.vue';
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
emits: ['resize'],
|
emits: ['resize'],
|
||||||
props: { initialX: Number, minX: Number, maxX: Number },
|
props: {
|
||||||
|
initialX: { type: Number, required: true },
|
||||||
|
minX: Number,
|
||||||
|
maxX: Number,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
x: 0,
|
x: 0,
|
||||||
delta: 0,
|
delta: 0,
|
||||||
|
xOnMouseDown: 0,
|
||||||
resizing: false,
|
resizing: false,
|
||||||
listener: null,
|
listener: null,
|
||||||
};
|
};
|
||||||
@ -43,9 +48,9 @@ export default defineComponent({
|
|||||||
methods: {
|
methods: {
|
||||||
onMouseDown(e: MouseEvent) {
|
onMouseDown(e: MouseEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { clientX } = e;
|
|
||||||
|
|
||||||
this.setX(clientX);
|
this.x = e.clientX;
|
||||||
|
this.xOnMouseDown = this.initialX;
|
||||||
this.setResizing(true);
|
this.setResizing(true);
|
||||||
|
|
||||||
document.addEventListener('mousemove', this.mouseMoveListener);
|
document.addEventListener('mousemove', this.mouseMoveListener);
|
||||||
@ -53,18 +58,17 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
mouseUpListener(e: MouseEvent) {
|
mouseUpListener(e: MouseEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { clientX } = e;
|
|
||||||
|
|
||||||
this.setX(clientX);
|
this.x = e.clientX;
|
||||||
this.setResizing(false);
|
this.setResizing(false);
|
||||||
|
|
||||||
this.emitValue(this.x - clientX);
|
this.$emit('resize', this.value);
|
||||||
this.removeListeners();
|
this.removeListeners();
|
||||||
},
|
},
|
||||||
mouseMoveListener(e: MouseEvent) {
|
mouseMoveListener(e: MouseEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { clientX } = e;
|
this.delta = this.x - e.clientX;
|
||||||
this.delta = this.x - clientX;
|
this.$emit('resize', this.value);
|
||||||
},
|
},
|
||||||
removeListeners() {
|
removeListeners() {
|
||||||
document.removeEventListener('mousemove', this.mouseMoveListener);
|
document.removeEventListener('mousemove', this.mouseMoveListener);
|
||||||
@ -80,36 +84,10 @@ export default defineComponent({
|
|||||||
document.body.style.cursor = '';
|
document.body.style.cursor = '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setX(x?: number): void {
|
|
||||||
if (typeof x === 'number') {
|
|
||||||
this.x = x;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const hr = this.$refs.hr;
|
|
||||||
if (!(hr instanceof HTMLDivElement)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.x = hr.getBoundingClientRect().x;
|
|
||||||
},
|
|
||||||
emitValue(delta: number) {
|
|
||||||
if (typeof this.minDelta === 'number') {
|
|
||||||
delta = Math.max(delta, this.minDelta);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof this.maxDelta === 'number') {
|
|
||||||
delta = Math.min(delta, this.maxDelta);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('resize', delta, this.value);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
value() {
|
value() {
|
||||||
if (typeof this.initialX !== 'number') {
|
let value = this.delta + this.xOnMouseDown;
|
||||||
return this.delta;
|
|
||||||
}
|
|
||||||
|
|
||||||
let value = this.delta + this.initialX;
|
|
||||||
if (typeof this.minX === 'number') {
|
if (typeof this.minX === 'number') {
|
||||||
value = Math.max(this.minX, value);
|
value = Math.max(this.minX, value);
|
||||||
}
|
}
|
||||||
@ -121,14 +99,14 @@ export default defineComponent({
|
|||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
minDelta() {
|
minDelta() {
|
||||||
if (typeof this.minX !== 'number' || typeof this.initialX !== 'number') {
|
if (typeof this.minX !== 'number') {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.initialX - this.minX;
|
return this.initialX - this.minX;
|
||||||
},
|
},
|
||||||
maxDelta() {
|
maxDelta() {
|
||||||
if (typeof this.maxX !== 'number' || typeof this.initialX !== 'number') {
|
if (typeof this.maxX !== 'number') {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,11 +34,11 @@
|
|||||||
{{ helperMessage }}
|
{{ helperMessage }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<!-- Template Container -->
|
||||||
<div
|
<div
|
||||||
v-else-if="doc.template && values"
|
v-else-if="doc.template && values"
|
||||||
class="p-4 overflow-auto custom-scroll"
|
class="p-4 overflow-auto custom-scroll"
|
||||||
>
|
>
|
||||||
<!-- Template Container -->
|
|
||||||
<PrintContainer
|
<PrintContainer
|
||||||
ref="printContainer"
|
ref="printContainer"
|
||||||
:template="doc.template"
|
:template="doc.template"
|
||||||
@ -46,6 +46,8 @@
|
|||||||
:scale="scale"
|
:scale="scale"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom Bar -->
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
w-full
|
w-full
|
||||||
@ -58,15 +60,18 @@
|
|||||||
flex-shrink-0
|
flex-shrink-0
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
<!-- Entry Type -->
|
||||||
<FormControl
|
<FormControl
|
||||||
:title="fields.type.label"
|
:title="fields.type.label"
|
||||||
class="w-40 border-r flex-shrink-0"
|
class="w-40 border-r flex-shrink-0"
|
||||||
:df="fields.type"
|
:df="fields.type"
|
||||||
:border="false"
|
:border="false"
|
||||||
:value="doc.get('type')"
|
:value="doc.get('type')"
|
||||||
|
:container-styles="{ 'border-radius': '0px' }"
|
||||||
@change="async (value) => await setType(value)"
|
@change="async (value) => await setType(value)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- Display Doc -->
|
||||||
<FormControl
|
<FormControl
|
||||||
v-if="doc.type"
|
v-if="doc.type"
|
||||||
:title="displayDocField.label"
|
:title="displayDocField.label"
|
||||||
@ -74,9 +79,11 @@
|
|||||||
:df="displayDocField"
|
:df="displayDocField"
|
||||||
:border="false"
|
:border="false"
|
||||||
:value="displayDoc?.name"
|
:value="displayDoc?.name"
|
||||||
|
:container-styles="{ 'border-radius': '0px' }"
|
||||||
@change="(value: string) => setDisplayDoc(value)"
|
@change="(value: string) => setDisplayDoc(value)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- Display Scale -->
|
||||||
<div
|
<div
|
||||||
class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
|
class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
|
||||||
>
|
>
|
||||||
@ -107,20 +114,21 @@
|
|||||||
class="z-20"
|
class="z-20"
|
||||||
:initial-x="panelWidth"
|
:initial-x="panelWidth"
|
||||||
:min-x="22 * 16"
|
:min-x="22 * 16"
|
||||||
@resize="(_: number, value: number) => panelWidth = value"
|
:max-x="maxWidth"
|
||||||
|
@resize="(x: number) => panelWidth = x"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Input Panel -->
|
<!-- Template Panel -->
|
||||||
<div
|
<div
|
||||||
class="border-l bg-white flex flex-col"
|
class="border-l bg-white flex flex-col"
|
||||||
style="height: calc(100vh - var(--h-row-largest) - 1px)"
|
style="height: calc(100vh - var(--h-row-largest) - 1px)"
|
||||||
>
|
>
|
||||||
<!-- Template Name -->
|
<!-- Template Name -->
|
||||||
<FormControl
|
<FormControl
|
||||||
class="w-full border-b z-10 flex-shrink-0"
|
class="w-full border-b flex-shrink-0"
|
||||||
size="small"
|
size="small"
|
||||||
:input-class="['font-semibold text-xl']"
|
:input-class="['font-semibold text-xl text-center']"
|
||||||
:input-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
|
:container-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
|
||||||
:df="fields.name"
|
:df="fields.name"
|
||||||
:border="false"
|
:border="false"
|
||||||
:value="doc.get('name')"
|
:value="doc.get('name')"
|
||||||
@ -139,8 +147,9 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Value Key Hints -->
|
<!-- Value Key Hints Container -->
|
||||||
<div class="border-t mt-auto flex-shrink-0" v-if="hints">
|
<div class="border-t mt-auto flex-shrink-0" v-if="hints">
|
||||||
|
<!-- Value Key Toggle -->
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
flex
|
flex
|
||||||
@ -160,6 +169,8 @@
|
|||||||
class="w-4 h-4 text-gray-600 resize-none"
|
class="w-4 h-4 text-gray-600 resize-none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Value Key Hints -->
|
||||||
<div
|
<div
|
||||||
v-if="showHints"
|
v-if="showHints"
|
||||||
class="overflow-auto custom-scroll p-2 border-t"
|
class="overflow-auto custom-scroll p-2 border-t"
|
||||||
@ -365,6 +376,9 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
maxWidth() {
|
||||||
|
return window.innerWidth - 12 * 16 - 100;
|
||||||
|
},
|
||||||
actions() {
|
actions() {
|
||||||
if (!this.doc) {
|
if (!this.doc) {
|
||||||
return [];
|
return [];
|
||||||
|
Loading…
Reference in New Issue
Block a user