mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Inline edit and checklist improvements [SCI-7031] (#4340)
* Inline edit and checklist improvements [SCI-7031] * Fix smart annotations in inline edit [SCI-7031]
This commit is contained in:
artoscinote
GitHub
parent
f1013c59fd
commit
a37c236518
|
|
@ -4,20 +4,15 @@
|
|||
column-gap: .25em;
|
||||
display: grid;
|
||||
grid-template-columns: auto repeat(2, max-content);
|
||||
margin-top: .3em;
|
||||
transition: .4s $timing-function-sharp;
|
||||
transition: .4s $timing-function-sharp border;
|
||||
|
||||
&.editing .sci-inline-edit__content {
|
||||
background-color: $color-white;
|
||||
|
||||
.sci-inline-edit__content {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sci-inline-edit__content {
|
||||
border: $border-transparent;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: -.25em;
|
||||
|
|
@ -26,7 +21,14 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
textarea,
|
||||
.sci-inline-edit__view {
|
||||
min-height: 36px;
|
||||
padding: .3em .2em .2em;
|
||||
}
|
||||
|
||||
.sci-inline-edit__view {
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
|
|
@ -37,12 +39,11 @@
|
|||
}
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
min-height: 1em;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $brand-focus;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -61,14 +62,16 @@
|
|||
}
|
||||
|
||||
&.editing {
|
||||
margin-top: 0;
|
||||
|
||||
.sci-inline-edit__content {
|
||||
background-color: $color-white;
|
||||
border-color: $brand-focus;
|
||||
|
||||
&.error {
|
||||
border-color: $brand-danger;
|
||||
margin-bottom: 16px;
|
||||
|
||||
textarea {
|
||||
border-color: $brand-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
|
||||
.sci-checkbox-container {
|
||||
margin: 8px 0;
|
||||
margin: 11px 0;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -157,14 +157,10 @@
|
|||
padding-left: calc(var(--left-component-padding) * 2);
|
||||
|
||||
.step-element-name {
|
||||
.sci-inline-edit__view {
|
||||
margin-bottom: .25em;
|
||||
padding-top: .25em;
|
||||
}
|
||||
|
||||
.sci-inline-edit__content textarea {
|
||||
margin-bottom: .25em;
|
||||
margin-top: .25em;
|
||||
.sci-inline-edit__view,
|
||||
textarea {
|
||||
padding-bottom: .1em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="step-checklist-item" :class="{ 'step-element--locked': !(updateUrl || toggleUrl) }">
|
||||
<div class="step-checklist-item" :class="{ 'step-element--locked': checklistItem.id && !(updateUrl || toggleUrl) }">
|
||||
<div class="step-element-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
|
||||
<div v-if="reorderChecklistItemUrl" class="step-element-grip step-element-grip--draggable" :class="{ 'step-element-grip--disabled': !draggable }">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div v-else class="sci-checkbox-view-mode"></div>
|
||||
<div class="step-checklist-text">
|
||||
<InlineEdit
|
||||
:class="{ 'step-element--locked': !updateUrl }"
|
||||
:class="{ 'step-element--locked': checklistItem.id && !updateUrl }"
|
||||
:value="checklistItem.attributes.text"
|
||||
:sa_value="checklistItem.attributes.sa_text"
|
||||
:characterLimit="10000"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@blur="handleBlur"
|
||||
@keyup.escape="cancelEdit"
|
||||
></textarea>
|
||||
<div v-else @click="enableEdit($event)" class="sci-inline-edit__view" v-html="sa_value || value || placeholder" :class="{ 'blank': isBlank }"></div>
|
||||
<div v-else @click="enableEdit($event)" class="sci-inline-edit__view" v-html="(smartAnnotation ? sa_value : value) || placeholder" :class="{ 'blank': isBlank }"></div>
|
||||
<div v-if="editing && error" class="sci-inline-edit__error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
data() {
|
||||
return {
|
||||
editing: false,
|
||||
dirty: false,
|
||||
newValue: ''
|
||||
}
|
||||
},
|
||||
|
|
@ -142,6 +143,8 @@
|
|||
this.$emit('editingDisabled');
|
||||
},
|
||||
handlePaste(e) {
|
||||
this.dirty = true;
|
||||
|
||||
if (!this.multilinePaste) return;
|
||||
let lines = (e.originalEvent || e).clipboardData.getData('text/plain').split(/[\n\r]/);
|
||||
lines = lines.filter((l) => l).map((l) => l.trim());
|
||||
|
|
@ -152,6 +155,7 @@
|
|||
}
|
||||
},
|
||||
handleInput() {
|
||||
this.dirty = true;
|
||||
if (!this.allowNewLine) {
|
||||
this.newValue = this.newValue.replace(/^[\n\r]+|[\n\r]+$/g, '');
|
||||
}
|
||||
|
|
@ -162,6 +166,8 @@
|
|||
this.cancelEdit();
|
||||
} else if (e.key == 'Enter' && this.saveOnEnter) {
|
||||
this.update();
|
||||
} else {
|
||||
this.dirty = true;
|
||||
}
|
||||
},
|
||||
resize() {
|
||||
|
|
@ -171,9 +177,14 @@
|
|||
this.$refs.input.style.height = (this.$refs.input.scrollHeight) + "px";
|
||||
},
|
||||
update() {
|
||||
if (!this.dirty && !this.isBlank) {
|
||||
this.editing = false;
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if(this.error) return;
|
||||
if(!this.editing) return;
|
||||
if(!this.$refs.input) return;
|
||||
this.newValue = this.$refs.input.value // Fix for smart annotation
|
||||
this.newValue = this.newValue.trim();
|
||||
this.editing = false;
|
||||
|
|
|
|||
Loading…
Reference in a new issue