mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-12 08:04:34 +08:00
Fix inline edit vue component [SCI-9254]
This commit is contained in:
Anton
parent
67c6d66ff1
commit
982da48bbe
4 changed files with 21 additions and 88 deletions
|
|
@ -15,13 +15,11 @@
|
|||
margin-bottom: 1.2em;
|
||||
|
||||
.step-element-header {
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
position: relative;
|
||||
padding-top: .4em;
|
||||
gap: .5em;
|
||||
gap: 1rem;
|
||||
|
||||
.step-name-edit-icon {
|
||||
background: linear-gradient(90deg,
|
||||
|
|
@ -44,7 +42,7 @@
|
|||
}
|
||||
|
||||
.step-collapse-link {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
|
@ -212,62 +210,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.step-element-header {
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
min-height: 40px;
|
||||
position: relative;
|
||||
|
||||
&.editing-name {
|
||||
.step-element-controls {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.step-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 35px;
|
||||
}
|
||||
|
||||
.sci-inline-edit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.step-element-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 2em;
|
||||
position: relative;
|
||||
|
||||
.step-element-number {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-element-controls {
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
$color-concrete 15%,
|
||||
$color-concrete 100%);
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.fas {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-element-controls,
|
||||
.step-element-grip {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.step-element-grip {
|
||||
color: $color-silver-chalice;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
<div class="step-header">
|
||||
<div class="step-element-header" :class="{ 'no-hover': !urls.update_url }">
|
||||
<div class="step-controls gap-4 mr-4">
|
||||
<div class="flex items-center gap-4 py-1 border-0 border-y border-transparent border-solid">
|
||||
<a class="step-collapse-link hover:no-underline focus:no-underline"
|
||||
:href="'#stepBody' + step.id"
|
||||
data-toggle="collapse"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
{{ step.attributes.position + 1 }}.
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-name-container flex-grow" :class="{'step-element--locked': !urls.update_url}">
|
||||
<div class="step-name-container basis-[calc(100%_-_100px)]" :class="{'step-element--locked': !urls.update_url}">
|
||||
<InlineEdit
|
||||
:value="step.attributes.name"
|
||||
:class="{ 'step-element--locked': !urls.update_url }"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<i class="sn-icon sn-icon-drag"></i>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 grow" :class="{ 'done': checklistItem.attributes.checked }">
|
||||
<div v-if="!inRepository" class="sci-checkbox-container my-2.5 w-6" :class="{ 'disabled': !toggleUrl }">
|
||||
<div v-if="!inRepository" class="sci-checkbox-container my-1.5 border-y border-transparent border-solid w-6" :class="{ 'disabled': !toggleUrl }">
|
||||
<input ref="checkbox"
|
||||
type="checkbox"
|
||||
class="sci-checkbox"
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
:characterLimit="10000"
|
||||
:placeholder="'Add a checklist item...'"
|
||||
:allowBlank="true"
|
||||
:singleLine="false"
|
||||
:autofocus="editingText"
|
||||
:attributeName="`${i18n.t('ChecklistItem')} ${i18n.t('name')}`"
|
||||
:multilinePaste="true"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="w-full">
|
||||
<div class="w-full relative">
|
||||
<template v-if="editing">
|
||||
<input type="text"
|
||||
v-if="singleLine"
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
'border-b-sn-science-blue': !error,
|
||||
}"
|
||||
:placeholder="placeholder"
|
||||
v-model="newValue"
|
||||
@keydown="handleKeypress"
|
||||
@paste="handlePaste"
|
||||
@blur="handleBlur"
|
||||
|
|
@ -18,13 +19,14 @@
|
|||
@focus="setCaretAtEnd"/>
|
||||
<textarea v-else
|
||||
ref="input"
|
||||
class="overflow-hidden inline-block box-size outline-none p-0 py-1 border-0 border-solid border-b w-full border-t-transparent"
|
||||
class="overflow-hidden inline-block outline-none px-0 py-1 border-0 border-solid border-b w-full border-t-transparent"
|
||||
:class="{
|
||||
'inline-edit-placeholder text-sn-grey caret-black': isBlank,
|
||||
'border-sn-delete-red': error,
|
||||
'border-sn-science-blue': !error,
|
||||
}"
|
||||
:placeholder="placeholder"
|
||||
v-model="newValue"
|
||||
@keydown="handleKeypress"
|
||||
@paste="handlePaste"
|
||||
@blur="handleBlur"
|
||||
|
|
@ -33,8 +35,9 @@
|
|||
</template>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
class="sci-cursor-edit border-0 py-1 outline-none inline-block border-solid border-y border-transparent"
|
||||
:class="{ 'text-sn-grey': isBlank }"
|
||||
:class="{ 'text-sn-grey': isBlank, 'pb-1.5': !singleLine }"
|
||||
@click="enableEdit($event)"
|
||||
>
|
||||
<span v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
|
||||
|
|
@ -42,7 +45,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="mt-2 whitespace-nowrap text-xs font-normal"
|
||||
class="mt-2 whitespace-nowrap text-xs font-normal absolute bottom-[-.75rem]"
|
||||
:class="{'text-sn-delete-red': editing && error}"
|
||||
>
|
||||
{{ editing && error ? error : timestamp }}
|
||||
|
|
@ -97,8 +100,8 @@
|
|||
newValue() {
|
||||
if (this.newValue.length === 0 && this.editing) {
|
||||
this.focus();
|
||||
this.setCaretPosition();
|
||||
}
|
||||
this.refreshTexareaHeight();
|
||||
},
|
||||
autofocus() {
|
||||
this.handleAutofocus();
|
||||
|
|
@ -160,26 +163,11 @@
|
|||
this.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
// Fixing Firefox specific caret placement issue
|
||||
setCaretPosition() {
|
||||
const range = document.createRange();
|
||||
const sel = window.getSelection();
|
||||
range.setStart(this.$refs.input, 0);
|
||||
range.collapse(true);
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
},
|
||||
setCaretAtEnd() {
|
||||
if (this.isBlank || this.isContentDefault) return;
|
||||
|
||||
const el = this.$refs.input;
|
||||
let range = document.createRange();
|
||||
range.selectNodeContents(el);
|
||||
range.collapse(false);
|
||||
|
||||
let selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
el.focus();
|
||||
},
|
||||
enableEdit(e) {
|
||||
if (e && $(e.target).hasClass('atwho-user-popover')) return;
|
||||
|
|
@ -250,7 +238,6 @@
|
|||
this.newValue = this.allowNewLine ? e.target.textContent : e.target.textContent.replace(/^[\n\r]+|[\n\r]+$/g, '');
|
||||
|
||||
sel.collapse(sel.anchorNode, offset);
|
||||
this.refreshTexareaHeight()
|
||||
},
|
||||
handleKeypress(e) {
|
||||
if (e.key == 'Escape') {
|
||||
|
|
@ -264,6 +251,8 @@
|
|||
}
|
||||
},
|
||||
update() {
|
||||
this.refreshTexareaHeight();
|
||||
|
||||
if (!this.dirty && !this.isBlank) {
|
||||
this.editing = false;
|
||||
return;
|
||||
|
|
@ -271,8 +260,8 @@
|
|||
|
||||
if(this.error) return;
|
||||
if(!this.$refs.input) return;
|
||||
|
||||
this.newValue = this.$refs.input.value.trim() // Fix for smart annotation
|
||||
|
||||
this.editing = false;
|
||||
this.$emit('editingDisabled');
|
||||
this.$emit('update', this.newValue);
|
||||
|
|
@ -280,7 +269,8 @@
|
|||
refreshTexareaHeight() {
|
||||
if (this.editing && !this.singleLine) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px';
|
||||
this.$refs.input.style.height = '0px';
|
||||
this.$refs.input.style.height = this.$refs.input.scrollHeight - 3 + 'px';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue