mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-29 03:35:25 +08:00
Step header fixes [SCI-6948] (#4217)
This commit is contained in:
artoscinote
GitHub
parent
a51ce1c322
commit
5cb53c774c
4 changed files with 103 additions and 70 deletions
|
|
@ -1,11 +1,4 @@
|
|||
.task-protocol {
|
||||
.protocol-name {
|
||||
.sci-inline-edit__view.blank,
|
||||
textarea {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.protocol-step-actions {
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,16 @@
|
|||
grid-template-columns: auto repeat(2, max-content);
|
||||
transition: .4s $timing-function-sharp;
|
||||
|
||||
&.editing .sci-inline-edit__content {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.sci-inline-edit__content {
|
||||
border: $border-transparent;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
line-height: 1em;
|
||||
margin-left: -.25em;
|
||||
min-height: 36px;
|
||||
padding-left: .25em;
|
||||
|
|
@ -31,12 +34,10 @@
|
|||
textarea {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
line-height: 1em;
|
||||
min-height: 1em;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
padding-top: 2px;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -9,37 +9,33 @@
|
|||
padding: 8px 24px 8px 0;
|
||||
|
||||
.step-header {
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
margin-bottom: 1.2em;
|
||||
|
||||
.step-collapse-link {
|
||||
display: inline-block;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
.step-element-header {
|
||||
border-radius: 4px;
|
||||
flex-basis: 80%;
|
||||
|
||||
&:not(.collapsed) {
|
||||
@include rotate(90deg);
|
||||
.step-name-edit-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.step-state {
|
||||
border: 2px solid $color-alto;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
&:hover .step-name-edit-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
background: $brand-success;
|
||||
border: 2px solid $brand-success;
|
||||
.step-collapse-link {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
|
||||
&::after {
|
||||
@include font-awesome;
|
||||
color: $color-white;
|
||||
content: $font-fas-check;
|
||||
&:not(.collapsed) {
|
||||
@include rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -67,11 +63,46 @@
|
|||
textarea {
|
||||
text-decoration: initial;
|
||||
}
|
||||
|
||||
.step-state {
|
||||
border: 2px solid $color-alto;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
|
||||
&.completed {
|
||||
background: $brand-success;
|
||||
border: 2px solid $brand-success;
|
||||
|
||||
&::after {
|
||||
@include font-awesome;
|
||||
color: $color-white;
|
||||
content: $font-fas-check;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-position {
|
||||
@include font-main;
|
||||
flex-shrink: 0;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.step-name-container {
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.step-actions-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-basis: 20%;
|
||||
|
||||
.dropdown-menu {
|
||||
white-space: nowrap;
|
||||
|
|
@ -205,6 +236,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.step-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sci-inline-edit {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,46 +5,48 @@
|
|||
@dragenter.prevent="!showFileModal ? dragingFile = true : null"
|
||||
@dragleave.prevent="!showFileModal ? dragingFile = false : null"
|
||||
@dragover.prevent
|
||||
:class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar }"
|
||||
:class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar, 'editing-name': editingName }"
|
||||
>
|
||||
<div class="drop-message">
|
||||
{{ i18n.t('protocols.steps.drop_message', { position: step.attributes.position }) }}
|
||||
<StorageUsage v-if="step.attributes.storage_limit" :step="step"/>
|
||||
</div>
|
||||
<div class="step-header step-element-header">
|
||||
<div v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</div>
|
||||
<a class="step-collapse-link"
|
||||
:href="'#stepBody' + step.id"
|
||||
data-toggle="collapse"
|
||||
data-remote="true">
|
||||
<span class="fas fa-caret-right"></span>
|
||||
</a>
|
||||
<div v-if="!inRepository" class="step-complete-container">
|
||||
<div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
|
||||
@click="changeState"
|
||||
@keyup.enter="changeState"
|
||||
tabindex="0"
|
||||
:title="step.attributes.completed ? i18n.t('protocols.steps.status.uncomplete') : i18n.t('protocols.steps.status.complete')"
|
||||
></div>
|
||||
</div>
|
||||
<div class="step-position">
|
||||
{{ step.attributes.position + 1 }}.
|
||||
</div>
|
||||
<div class="step-name-container" :class="{'strikethrough': step.attributes.completed}">
|
||||
<InlineEdit
|
||||
v-if="urls.update_url"
|
||||
:value="step.attributes.name"
|
||||
:characterLimit="255"
|
||||
:allowBlank="false"
|
||||
:attributeName="`${i18n.t('Step')} ${i18n.t('name')}`"
|
||||
:editOnload="step.newStep == true"
|
||||
@update="updateName"
|
||||
/>
|
||||
<span v-else>
|
||||
{{ step.attributes.name }}
|
||||
</span>
|
||||
<div class="step-header">
|
||||
<div class="step-element-header">
|
||||
<div class="step-controls">
|
||||
<div v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</div>
|
||||
<a class="step-collapse-link"
|
||||
:href="'#stepBody' + step.id"
|
||||
data-toggle="collapse"
|
||||
data-remote="true">
|
||||
<span class="fas fa-caret-right"></span>
|
||||
</a>
|
||||
<div v-if="!inRepository" class="step-complete-container">
|
||||
<div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div>
|
||||
</div>
|
||||
<div class="step-position">
|
||||
{{ step.attributes.position + 1 }}.
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-name-container">
|
||||
<InlineEdit
|
||||
v-if="urls.update_url"
|
||||
:value="step.attributes.name"
|
||||
:characterLimit="255"
|
||||
:allowBlank="false"
|
||||
:attributeName="`${i18n.t('Step')} ${i18n.t('name')}`"
|
||||
:autofocus="editingName"
|
||||
@editingEnabled="editingName = true"
|
||||
@editingDisabled="editingName = false"
|
||||
@update="updateName"
|
||||
/>
|
||||
<span v-else>
|
||||
{{ step.attributes.name }}
|
||||
</span>
|
||||
</div>
|
||||
<i v-if="!editingName" class="step-name-edit-icon fas fa-pen" @click="editingName = true"></i>
|
||||
</div>
|
||||
<div class="step-actions-container">
|
||||
<div ref="actionsDropdownButton" v-if="urls.update_url" class="dropdown">
|
||||
|
|
@ -205,7 +207,8 @@
|
|||
showClipboardPasteModal: false,
|
||||
showCommentsSidebar: false,
|
||||
dragingFile: false,
|
||||
reordering: false
|
||||
reordering: false,
|
||||
editingName: false
|
||||
}
|
||||
},
|
||||
mixins: [UtilsMixin, AttachmentsMixin],
|
||||
|
|
@ -226,7 +229,7 @@
|
|||
this.loadElements();
|
||||
},
|
||||
mounted() {
|
||||
$(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar)
|
||||
$(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar);
|
||||
$(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition);
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue