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