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

Merge pull request #4168 from aignatov-bio/ai-sci-6862-fix-css-step-editing

Browse source 
CSS fixes for step editing [SCI-6862]
This commit is contained in:
aignatov-bio 2022-06-27 11:13:18 +02:00 committed by GitHub
commit 3a5492f875
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 146 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
app/assets/stylesheets/protocols/protocol.scss
View file

@ -17,104 +17,61 @@
box-shadow: $flyout-shadow;
margin: 0 auto;
max-width: 900px;
padding: 10px;
padding: 10px 10px 10px 26px;
}
}
.protocol-repository-header {
.protocol-metadata {
margin-bottom: 2em;
.protocol-info {
align-items: center;
display: flex;
flex-wrap: wrap;
min-height: 40px;
position: relative;
.authors-data {
align-items: center;
display: flex;
.created-at-block,
.last-modified-block,
.edit-authors-block,
.keywords-block,
.added-by-block, {
flex-grow: 1;
margin-bottom: 10px;
margin-right: 20px;
.block-icon {
color: $color-silver;
font-size: 18px;
margin-right: 5px;
.authors-list {
flex-basis: calc(100% - 70px);
flex-grow: 1;
margin-left: .5em;
}
.block-label {
align-items: center;
display: flex;
* {
flex-shrink: 0;
}
}
.edit-authors-block {
.keywords-data {
align-items: center;
display: flex;
flex-basis: 30%;
.edit-authors-container {
display: flex;
.keywords-list {
flex-basis: calc(100% - 90px);
flex-grow: 1;
margin-left: 10px;
position: relative;
margin-left: .5em;
.view-mode,
.input-field {
font-weight: bold;
}
}
}
border-color: transparent;
.protocol-description {
flex-basis: 100%;
margin-bottom: 10px;
.form-group {
margin: 0;
}
}
.keywords-block {
align-items: center;
display: flex;
flex-basis: 100%;
.key-words-container {
display: inline-block;
flex-grow: 1;
margin: 0 40px 0 5px;
.dropdown-selector-container {
.input-field {
border-color: transparent;
&:hover {
border-color: $color-alto;
}
}
&.active {
.input-field {
border-color: $color-alto;
}
}
&.view-mode {
.input-field {
border-color: transparent;
}
&:hover {
border-color: initial;
}
}
}
* {
flex-shrink: 0;
}
}
}
.protocol-description {
margin-bottom: 2em;
}
.protocol-step-actions {
margin-top: 2em;
}
}
.protocol-content {
.protocol-name {
font-size: 1.7em;

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

@ -52,12 +52,6 @@
}
}
&:hover {
.sci-inline-edit__content {
border: $border-default;
}
}
&.editing {
.sci-inline-edit__content {

9
app/assets/stylesheets/steps/components/checklist.scss
View file

@ -21,14 +21,13 @@
&:hover.done .step-checklist-text {
text-decoration: none;
}
.step-checklist-add-item {
margin-left: 9px;
margin-top: 2px;
}
}
}
.step-checklist-add-item {
margin-left: 9px;
}
.step-checklist-item-ghost {
border: 1px solid $brand-primary;
}

9
app/assets/stylesheets/steps/components/text.scss
View file

@ -1,8 +1,7 @@
.step-text-container {
display: block;
margin-bottom: 16px;
margin-left: -16px;
padding-left: 36px;
padding-left: 1.5em;
position: relative;
width: calc(100% + 16px);
@ -30,13 +29,13 @@
.element-grip {
align-items: center;
color: $color-alto;
color: $color-silver-chalice;
display: none;
height: 100%;
justify-content: center;
left: 0;
padding: .5em;
position: absolute;
width: 36px;
}
.tinymce-container {
@ -44,7 +43,7 @@
display: flex;
min-height: 36px;
width: 100%;
.tinymce-status-badge {
display: none;
}

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

@ -6,7 +6,7 @@
.step-container {
border: $border-transparent;
margin: 20px 0 20px -1.5em;
padding: 8px 24px;
padding: 8px 24px 8px 0;
.step-header {
align-items: center;
@ -93,6 +93,10 @@
}
}
.step-elements {
padding-left: 24px;
}
.comments-counter {
@include font-small;
align-items: center;
@ -172,7 +176,6 @@
align-items: center;
display: flex;
min-height: 40px;
padding: 0 0 0 8px;
position: relative;
&.editing-name {
@ -215,7 +218,7 @@
.step-element-grip {
color: $color-silver-chalice;
cursor: grab;
margin-right: 8px;
padding: .5em;
}
.step-element-controls,

6
app/javascript/vue/protocol/attachments.vue
View file

@ -15,6 +15,12 @@
:data-step-id="step.id"
>
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
<li>
<a class="action-link .attachments-view-mode {" @click="$emit('attachments:openFileModal')">
<i class="fas fa-paperclip"></i>
{{ i18n.t('protocols.steps.insert.attachment') }}
</a>
</li>
<li role="separator" class="divider"></li>
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.sort_by") }}</li>
<li v-for="(orderOption, index) in orderOptions" :key="`orderOption_${index}`">

34
app/javascript/vue/protocol/container.vue
View file

@ -44,26 +44,28 @@
</span>
</div>
<ProtocolMetadata v-if="protocol.attributes && protocol.attributes.in_repository" :protocol="protocol" @update="updateProtocol"/>
<Tinymce
v-if="urls.update_protocol_description_url"
:value="protocol.attributes.description"
:value_html="protocol.attributes.description_view"
:placeholder="i18n.t('my_modules.protocols.protocol_status_bar.empty_description_edit_label')"
:updateUrl="urls.update_protocol_description_url"
:objectType="'Protocol'"
:objectId="parseInt(protocol.id)"
:fieldName="'protocol[description]'"
:lastUpdated="protocol.attributes.updated_at"
@update="updateDescription"
/>
<div v-if="urls.update_protocol_description_url" class="protocol-description">
<Tinymce
:value="protocol.attributes.description"
:value_html="protocol.attributes.description_view"
:placeholder="i18n.t('my_modules.protocols.protocol_status_bar.empty_description_edit_label')"
:updateUrl="urls.update_protocol_description_url"
:objectType="'Protocol'"
:objectId="parseInt(protocol.id)"
:fieldName="'protocol[description]'"
:lastUpdated="protocol.attributes.updated_at"
@update="updateDescription"
/>
</div>
<div v-else v-html="protocol.attributes.description_view">
</div>
</div>
<a v-if="urls.add_step_url && protocol.attributes.in_repository" class="btn btn-primary" @click="addStep(steps.length)">
<span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
<div class="protocol-step-actions">
<a v-if="urls.add_step_url && protocol.attributes.in_repository" class="btn btn-primary" @click="addStep(steps.length)">
<span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
<button class="btn btn-light" @click="collapseSteps">
<span class="fas fa-caret-up"></span>
{{ i18n.t("protocols.steps.collapse_label") }}

4
app/javascript/vue/protocol/modals/delete_element.vue
View file

@ -26,6 +26,9 @@
name: 'deleteElementModal',
mounted() {
$(this.$refs.modal).modal('show');
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('cancel');
});
},
methods: {
confirm() {
@ -34,7 +37,6 @@
},
cancel() {
$(this.$refs.modal).modal('hide');
this.$emit('cancel');
}
}
}

4
app/javascript/vue/protocol/modals/delete_step.vue
View file

@ -26,6 +26,9 @@
name: 'deleteStepModal',
mounted() {
$(this.$refs.modal).modal('show');
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('cancel');
});
},
methods: {
confirm() {
@ -34,7 +37,6 @@
},
cancel() {
$(this.$refs.modal).modal('hide');
this.$emit('cancel');
}
}
}

4
app/javascript/vue/protocol/modals/reorderable_items_modal.vue
View file

@ -61,6 +61,9 @@
},
mounted() {
$(this.$refs.modal).modal('show');
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('close');
});
},
methods: {
close() {
@ -68,7 +71,6 @@
this.$nextTick(() => {
$(this.$refs.modal).modal('hide');
this.$emit('close');
});
}
}

71
app/javascript/vue/protocol/protocolMetadata.vue
View file

@ -1,51 +1,54 @@
<template>
<div class="protocol-metadata">
<div class="data-block">
<p class="data-block">
<span class="fas block-icon fa-calendar-alt"></span>
{{ i18n.t("protocols.header.created_at") }}
{{ protocol.attributes.created_at_formatted }}
</div>
<div class="data-block">
<b>{{ protocol.attributes.created_at_formatted }}</b>
</p>
<p class="data-block">
<span class="fas block-icon fa-user"></span>
{{ i18n.t("protocols.header.added_by") }}
<img :src="protocol.attributes.added_by.avatar"/>
{{ protocol.attributes.added_by.name }}
</div>
<div class="data-block">
</p>
<p class="data-block">
<span class="fas block-icon fa-edit"></span>
{{ i18n.t("protocols.header.updated_at") }}
{{ protocol.attributes.updated_at_formatted }}
</div>
<div class="data-block">
<b>{{ protocol.attributes.updated_at_formatted }}</b>
</p>
<p class="data-block authors-data">
<span class="fas block-icon fa-graduation-cap"></span>
{{ i18n.t("protocols.header.authors") }}
<InlineEdit
v-if="protocol.attributes.urls.update_protocol_authors_url"
:value="protocol.attributes.authors"
:placeholder="i18n.t('protocols.header.no_authors')"
:allowBlank="true"
:attributeName="`${i18n.t('Protocol')} ${i18n.t('authors')}`"
@update="updateAuthors"
/>
<span v-else>
<span>{{ i18n.t("protocols.header.authors") }}</span>
<span class="authors-list" v-if="protocol.attributes.urls.update_protocol_authors_url">
<InlineEdit
:value="protocol.attributes.authors"
:placeholder="i18n.t('protocols.header.no_authors')"
:allowBlank="true"
:attributeName="`${i18n.t('Protocol')} ${i18n.t('authors')}`"
@update="updateAuthors"
/>
</span>
<span class="authors-list" v-else>
{{ protocol.attributes.authors }}
</span>
</div>
<div class="data-block">
</p>
<p class="data-block keywords-data">
<span class="fas block-icon fa-font"></span>
{{ i18n.t("protocols.header.keywords") }}
<DropdownSelector
:inputTagMode="true"
:options="this.protocol.attributes.keywords"
:selectorId="'keywordsSelector'"
:singleSelect="false"
:closeOnSelect="false"
:noEmptyOption="false"
:selectAppearance="'tag'"
:viewMode="protocol.attributes.urls.update_protocol_keywords_url == null"
@dropdown:changed="updateKeywords"
/>
</div>
<span>{{ i18n.t("protocols.header.keywords") }}</span>
<span class="keywords-list">
<DropdownSelector
:inputTagMode="true"
:options="this.protocol.attributes.keywords"
:selectorId="'keywordsSelector'"
:singleSelect="false"
:closeOnSelect="false"
:noEmptyOption="false"
:selectAppearance="'tag'"
:viewMode="protocol.attributes.urls.update_protocol_keywords_url == null"
@dropdown:changed="updateKeywords"
/>
</span>
</p>
</div>
</template>
<script>

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

@ -107,23 +107,26 @@
</div>
</div>
<div class="collapse in" :id="'stepBody' + step.id">
<template v-for="(element, index) in elements">
<component
:is="elements[index].attributes.orderable_type"
:key="index"
:element.sync="elements[index]"
:inRepository="inRepository"
:reorderElementUrl="urls.reorder_elements_url"
@component:delete="deleteElement"
@update="updateElement"
@reorder="openReorderModal"
/>
</template>
<Attachments :step="step"
:attachments="attachments"
@attachments:order="changeAttachmentsOrder"
@attachments:viewMode="changeAttachmentsViewMode"
@attachment:viewMode="updateAttachmentViewMode"/>
<div class="step-elements">
<template v-for="(element, index) in elements">
<component
:is="elements[index].attributes.orderable_type"
:key="index"
:element.sync="elements[index]"
:inRepository="inRepository"
:reorderElementUrl="urls.reorder_elements_url"
@component:delete="deleteElement"
@update="updateElement"
@reorder="openReorderModal"
/>
</template>
<Attachments :step="step"
:attachments="attachments"
@attachments:openFileModal="showFileModal = true"
@attachments:order="changeAttachmentsOrder"
@attachments:viewMode="changeAttachmentsViewMode"
@attachment:viewMode="updateAttachmentViewMode"/>
</div>
</div>
<deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
<fileModal v-if="showFileModal"

4
app/javascript/vue/protocol/step_attachments/delete_modal.vue
View file

@ -32,6 +32,9 @@
},
mounted() {
$(this.$refs.modal).modal('show');
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('cancel');
});
},
methods: {
confirm() {
@ -40,7 +43,6 @@
},
cancel() {
$(this.$refs.modal).modal('hide');
this.$emit('cancel');
}
}
}

4
app/javascript/vue/protocol/step_attachments/file_modal.vue
View file

@ -89,11 +89,13 @@
this.$emit('attachmentsChanged');
this.$nextTick(this.cancel);
});
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('cancel');
});
},
methods: {
cancel() {
$(this.$refs.modal).modal('hide');
this.$emit('cancel');
},
dropFile(e) {
if (e.dataTransfer && e.dataTransfer.files.length) {

8
app/javascript/vue/protocol/step_elements/text.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="step-text-container" :class="{ 'edit': inEditMode }">
<div class="action-container" @click="enableEditMode">
<div class="action-container" @click="enableEditMode($event)">
<div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
<i class="fas fa-grip-vertical"></i>
</div>
@ -60,7 +60,8 @@
}
},
methods: {
enableEditMode() {
enableEditMode(e) {
if ($(e.target).hasClass('fas')) return
if (!this.element.attributes.orderable.urls.update_url) return
this.inEditMode = true
},
@ -70,7 +71,8 @@
update(data) {
this.element.attributes.orderable.text_view = data.data.attributes.text_view
this.element.attributes.orderable.text = data.data.attributes.text
this.element.attributes.orderable.udpated_at = data.data.attributes.udpated_at
this.element.attributes.orderable.name = data.data.attributes.name
this.element.attributes.orderable.updated_at = data.data.attributes.updated_at
this.$emit('update', this.element, true)
}
}