mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-03 21:49:23 +08:00
Fix label templates, inline edit, checklist and step [SCI-8792] (#5766)
* Fix label templates, inline edit, checklist and step [SCI-8792] * Add mouse selection to protocol name on task and protocol desc. * Fix css hound suggestions
This commit is contained in:
ivanscinote
GitHub
parent
f21a4ec17b
commit
5519cfe75f
11 changed files with 50 additions and 39 deletions
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.title-row {
|
||||
@include font-h1;
|
||||
align-items: end;
|
||||
align-items: flex-start;
|
||||
background: $color-white;
|
||||
border-bottom: $border-tertiary;
|
||||
display: flex;
|
||||
|
|
@ -18,9 +18,8 @@
|
|||
|
||||
.label-template-icon {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: auto;
|
||||
margin-right: 5px;
|
||||
margin-top: 13px;
|
||||
margin-top: 2px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,12 @@
|
|||
|
||||
.tinymce-view {
|
||||
border-color: transparent;
|
||||
padding: .1em 0;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $color-silver;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,8 @@
|
|||
display: flex;
|
||||
|
||||
img {
|
||||
background: var(--sn-white);
|
||||
border-radius: 3px;
|
||||
margin-right: .25em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
.sci-inline-edit {
|
||||
column-gap: .25em;
|
||||
display: grid;
|
||||
grid-template-columns: auto repeat(2, max-content);
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
transition: .4s $timing-function-sharp border;
|
||||
|
||||
&.editing .sci-inline-edit__content {
|
||||
|
|
@ -16,15 +15,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: -.25em;
|
||||
min-height: 36px;
|
||||
margin-right: .5rem;
|
||||
min-height: 30px;
|
||||
padding-left: .25em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
textarea,
|
||||
.sci-inline-edit__view {
|
||||
min-height: 36px;
|
||||
padding: .3em .2em .2em;
|
||||
line-height: 26px;
|
||||
min-height: 30px;
|
||||
padding: .1em .2em;
|
||||
}
|
||||
|
||||
.sci-inline-edit__view {
|
||||
|
|
@ -36,6 +37,11 @@
|
|||
&.blank {
|
||||
color: $color-silver-chalice;
|
||||
}
|
||||
|
||||
&.hover-border:hover {
|
||||
border: 1px solid $color-silver;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -76,6 +82,10 @@
|
|||
}
|
||||
|
||||
.sci-inline-edit__control {
|
||||
margin: 0 .25em;
|
||||
max-height: 30px;
|
||||
max-width: 30px;
|
||||
|
||||
&.btn-disabled {
|
||||
background: $color-silver-chalice;
|
||||
color: $color-concrete;
|
||||
|
|
|
|||
|
|
@ -38,10 +38,8 @@
|
|||
}
|
||||
|
||||
.sn-icon {
|
||||
line-height: 36px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +68,6 @@
|
|||
&::after {
|
||||
@include font-awesome;
|
||||
top: 0;
|
||||
line-height: 36px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
|
||||
.step-checklist-items {
|
||||
.sci-inline-edit {
|
||||
margin-top: 2px;
|
||||
margin-top: 5px;
|
||||
|
||||
.sci-inline-edit__content {
|
||||
margin-bottom: 7px;
|
||||
margin-left: 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
border-radius: 50%;
|
||||
height: 4px;
|
||||
margin-right: .5em;
|
||||
margin-top: 1.3em;
|
||||
margin-top: 1em;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.step-container {
|
||||
--left-component-padding: 2rem;
|
||||
border: $border-transparent;
|
||||
margin: 6px 0 6px -1.5em;
|
||||
margin: 6px 0 6px -1em;
|
||||
padding: 8px 24px 8px 0;
|
||||
|
||||
.step-header {
|
||||
|
|
@ -15,11 +15,12 @@
|
|||
margin-bottom: 1.2em;
|
||||
|
||||
.step-element-header {
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-basis: 80%;
|
||||
position: relative;
|
||||
padding-top: .4em;
|
||||
|
||||
.step-name-edit-icon {
|
||||
background: linear-gradient(90deg,
|
||||
|
|
@ -63,6 +64,7 @@
|
|||
}
|
||||
|
||||
.step-name-container {
|
||||
align-self: baseline;
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
|
@ -73,12 +75,14 @@
|
|||
}
|
||||
|
||||
.step-state {
|
||||
align-self: center;
|
||||
border: 1px solid $color-alto;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
margin-bottom: -.5em;
|
||||
|
||||
&:hover {
|
||||
border-color: $brand-success;
|
||||
|
|
@ -154,7 +158,7 @@
|
|||
|
||||
.step-timestamp {
|
||||
position: relative;
|
||||
margin-left: 30px;
|
||||
margin-left: 40px;
|
||||
bottom: 17px;
|
||||
width: 356px;
|
||||
height: 15px;
|
||||
|
|
@ -166,19 +170,10 @@
|
|||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.step-element-name {
|
||||
.sci-inline-edit__view,
|
||||
textarea {
|
||||
padding-bottom: .1em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-element-grip-placeholder {
|
||||
height: 24px;
|
||||
width: 28px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.comments-counter {
|
||||
|
|
@ -269,7 +264,7 @@
|
|||
}
|
||||
|
||||
.step-element-header {
|
||||
align-items: flex-start;
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
min-height: 40px;
|
||||
|
|
@ -284,7 +279,7 @@
|
|||
|
||||
.step-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
min-height: 35px;
|
||||
}
|
||||
|
||||
|
|
@ -304,12 +299,10 @@
|
|||
}
|
||||
|
||||
.step-element-controls {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
$color-concrete 15%,
|
||||
$color-concrete 100%
|
||||
);
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
$color-concrete 15%,
|
||||
$color-concrete 100%);
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
|
|
@ -339,7 +332,6 @@
|
|||
.step-element-grip {
|
||||
color: $color-silver-chalice;
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
padding: .5em;
|
||||
|
||||
&.step-element-grip--draggable {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
:attributeName="i18n.t('label_templates.show.name_error_prefix')"
|
||||
:autofocus="editingName"
|
||||
:editOnload="newLabel"
|
||||
:customClasses="['hover-border']"
|
||||
@editingEnabled="editingName = true"
|
||||
@editingDisabled="editingName = false"
|
||||
@update="updateName"
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
:attributeName="i18n.t('label_templates.show.description_error_prefix')"
|
||||
:placeholder="i18n.t('label_templates.show.description_placeholder')"
|
||||
:autofocus="editingDescription"
|
||||
:customClasses="['hover-border']"
|
||||
@editingEnabled="editingDescription = true"
|
||||
@editingDisabled="editingDescription = false"
|
||||
@update="updateDescription"
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
:placeholder="i18n.t('my_modules.protocols.protocol_status_bar.enter_name')"
|
||||
:allowBlank="!inRepository"
|
||||
:attributeName="`${i18n.t('Protocol')} ${i18n.t('name')}`"
|
||||
:customClasses="['hover-border']"
|
||||
@update="updateName"
|
||||
/>
|
||||
<span v-else>
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@
|
|||
templateOption(option) {
|
||||
return `
|
||||
<div class="label-template-option" data-toggle="tooltip" data-placement="right" title="${option.params.description}">
|
||||
<img src="${option.params.icon}"></img>
|
||||
<img src="${option.params.icon}" style=""></img>
|
||||
${option.label}
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
@keyup.escape="cancelEdit"
|
||||
></textarea>
|
||||
<div v-else-if="smartAnnotation" @click="enableEdit($event)" class="sci-inline-edit__view" v-html="sa_value || placeholder" :class="{ 'blank': isBlank }"></div>
|
||||
<div v-else @click="enableEdit($event)" class="sci-inline-edit__view" :class="{ 'blank': isBlank }">{{newValue || placeholder}}</div>
|
||||
<div v-else @click="enableEdit($event)" class="sci-inline-edit__view" :class="[isBlank ? 'blank' : '', ...customClasses]">{{newValue || placeholder}}</div>
|
||||
<div v-if="editing && error" class="sci-inline-edit__error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
|
@ -49,7 +49,8 @@
|
|||
multilinePaste: { type: Boolean, default: false },
|
||||
smartAnnotation: { type: Boolean, default: false },
|
||||
editOnload: { type: Boolean, default: false },
|
||||
defaultValue: { type: String, default: '' }
|
||||
defaultValue: { type: String, default: '' },
|
||||
customClasses: { type: Array, default: [] }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue