scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-29 11:45:18 +08:00
Code Issues Projects Releases Packages Wiki Activity

Step header fixes [SCI-6948] (#4217)

Browse source
This commit is contained in:
artoscinote 2022-07-11 10:45:25 +02:00 committed by GitHub
parent a51ce1c322
commit 5cb53c774c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 103 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/stylesheets/my_modules/protocol.scss
View file

@ -1,11 +1,4 @@
.task-protocol {
.protocol-name {
.sci-inline-edit__view.blank,
textarea {
font-weight: bold;
}
}
.protocol-step-actions {
margin-left: -6px;
}

7
app/assets/stylesheets/shared/inline_edit.scss
View file

@ -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 {

76
app/assets/stylesheets/steps/step.scss
View file

@ -9,12 +9,27 @@
padding: 8px 24px 8px 0;
.step-header {
align-items: center;
align-items: flex-start;
display: flex;
margin-bottom: 1.2em;
.step-element-header {
border-radius: 4px;
flex-basis: 80%;
.step-name-edit-icon {
display: none;
}
&:hover .step-name-edit-icon {
cursor: pointer;
display: inline-block;
margin-right: 16px;
}
.step-collapse-link {
display: inline-block;
flex-shrink: 0;
line-height: 24px;
text-align: center;
width: 24px;
@ -23,25 +38,6 @@
@include rotate(90deg);
}
}
.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;
}
}
}
.strikethrough {
@ -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%;
}

27
app/javascript/vue/protocol/step.vue
View file

@ -5,13 +5,15 @@
@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 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>
@ -22,30 +24,30 @@
<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 :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div>
</div>
<div class="step-position">
{{ step.attributes.position + 1 }}.
</div>
<div class="step-name-container" :class="{'strikethrough': step.attributes.completed}">
</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')}`"
:editOnload="step.newStep == true"
: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">
<button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@ -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: {