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

Fix microinteractions for step editing [SCI-6933]

Browse source
This commit is contained in:
Anton 2022-07-06 14:31:55 +02:00
parent 454c1f01d0
commit b3d7c3ff75
11 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -33,6 +33,7 @@
.task-section-caret { .task-section-caret {
color: $color-volcano; color: $color-volcano;
display: inline-block; display: inline-block;
padding: .5em;
text-decoration: none; text-decoration: none;
.fas { .fas {
@ -399,6 +400,7 @@
.status-info { .status-info {
@include font-h2; @include font-h2;
color: inherit; color: inherit;
padding: .5em;
text-decoration: none; text-decoration: none;
&:hover, &:hover,

4
app/assets/stylesheets/shared_styles/elements/dropdown.scss
View file

@ -4,10 +4,6 @@
.sci-dropdown { .sci-dropdown {
[data-toggle="dropdown"] { [data-toggle="dropdown"] {
&:focus {
box-shadow: none;
}
.caret { .caret {
margin: 8px 0 8px 8px; margin: 8px 0 8px 8px;
} }

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

@ -2,7 +2,7 @@
<div class="task-protocol"> <div class="task-protocol">
<div class="task-section-header" v-if="!inRepository"> <div class="task-section-header" v-if="!inRepository">
<div class="portocol-header-left-part"> <div class="portocol-header-left-part">
<a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content"> <a class="task-section-caret" tabindex="0" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
<i class="fas fa-caret-right"></i> <i class="fas fa-caret-right"></i>
<div class="task-section-title"> <div class="task-section-title">
<h2>{{ i18n.t('Protocol') }}</h2> <h2>{{ i18n.t('Protocol') }}</h2>
@ -14,11 +14,11 @@
</div> </div>
<div class="actions-block"> <div class="actions-block">
<div class="protocol-buttons-group"> <div class="protocol-buttons-group">
<a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)"> <a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)" tabindex="0">
<span class="fas fa-plus" aria-hidden="true"></span> <span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span> <span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a> </a>
<a class="btn btn-default" data-toggle="modal" data-target="#print-protocol-modal"> <a class="btn btn-secondary" data-toggle="modal" data-target="#print-protocol-modal" tabindex="0">
<span class="fas fa-print" aria-hidden="true"></span> <span class="fas fa-print" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.print.button") }}</span> <span>{{ i18n.t("protocols.print.button") }}</span>
</a> </a>
@ -69,15 +69,18 @@
<span>{{ i18n.t("protocols.steps.new_step") }}</span> <span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a> </a>
<div v-if="steps.length > 0" class="protocol-step-actions"> <div v-if="steps.length > 0" class="protocol-step-actions">
<button class="btn btn-light" @click="collapseSteps"> <button class="btn btn-light" @click="collapseSteps" tabindex="0">
<span class="fas fa-caret-up"></span> <span class="fas fa-caret-up"></span>
{{ i18n.t("protocols.steps.collapse_label") }} {{ i18n.t("protocols.steps.collapse_label") }}
</button> </button>
<button class="btn btn-light" @click="expandSteps"> <button class="btn btn-light" @click="expandSteps" tabindex="0">
<span class="fas fa-caret-down"></span> <span class="fas fa-caret-down"></span>
{{ i18n.t("protocols.steps.expand_label") }} {{ i18n.t("protocols.steps.expand_label") }}
</button> </button>
<a v-if="urls.reorder_steps_url" class="btn btn-light" data-toggle="modal" @click="startStepReorder"> <a v-if="urls.reorder_steps_url" class="btn btn-light" data-toggle="modal"
@click="startStepReorder"
@keyup.enter="startStepReorder"
tabindex="0" >
<span class="fas fa-arrows-alt-v" aria-hidden="true"></span> <span class="fas fa-arrows-alt-v" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.reorder_steps.button") }}</span> <span>{{ i18n.t("protocols.reorder_steps.button") }}</span>
</a> </a>

1
app/javascript/vue/protocol/protocolOptions.vue
View file

@ -8,6 +8,7 @@
data-toggle="dropdown" data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true" aria-expanded="true"
tabindex="0"
> >
<span class="fas fa-cog"></span> <span class="fas fa-cog"></span>
<span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span> <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>

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

@ -22,7 +22,11 @@
<span class="fas fa-caret-right"></span> <span class="fas fa-caret-right"></span>
</a> </a>
<div v-if="!inRepository" class="step-complete-container"> <div v-if="!inRepository" class="step-complete-container">
<div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div> <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
@click="changeState"
@keyup.enter="changeState"
tabindex="0"
></div>
</div> </div>
<div class="step-position"> <div class="step-position">
{{ step.attributes.position + 1 }}. {{ step.attributes.position + 1 }}.

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

@ -21,7 +21,7 @@
@dragover.prevent @dragover.prevent
> >
<input type="file" class="hidden" ref=fileSelector @change="uploadFiles" multiple /> <input type="file" class="hidden" ref=fileSelector @change="uploadFiles" multiple />
<div class="title" @click="$refs.fileSelector.click()"> <div class="title" @click="$refs.fileSelector.click()" tabindex="0" @keyup.enter="$refs.fileSelector.click()">
<i class="fas fa-upload"></i> <i class="fas fa-upload"></i>
{{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_title") }} {{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_title") }}
</div> </div>
@ -45,6 +45,8 @@
:data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url" :data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url"
data-object-type="Step" data-object-type="Step"
@click="openMarvinJsModal" @click="openMarvinJsModal"
tabindex="0"
@keyup.enter="openMarvinJsModal"
> >
<span class="new-marvinjs-upload-icon"> <span class="new-marvinjs-upload-icon">
<img :src="step.attributes.marvinjs_context.icon"/> <img :src="step.attributes.marvinjs_context.icon"/>
@ -53,7 +55,7 @@
</a> </a>
</div> </div>
<div class="integration-block wopi" v-if="step.attributes.wopi_enabled"> <div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
<a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light"> <a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
<img :src="step.attributes.wopi_context.icon"/> <img :src="step.attributes.wopi_context.icon"/>
{{ i18n.t('assets.create_wopi_file.button_text') }} {{ i18n.t('assets.create_wopi_file.button_text') }}
</a> </a>

10
app/javascript/vue/protocol/step_elements/checklist.vue
View file

@ -22,10 +22,10 @@
</span> </span>
</div> </div>
<div class="step-element-controls"> <div class="step-element-controls">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="editingName = true"> <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="editingName = true" tabindex="-1">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</button> </button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal"> <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>
@ -56,7 +56,11 @@
@multilinePaste="handleMultilinePaste" @multilinePaste="handleMultilinePaste"
/> />
</Draggable> </Draggable>
<div v-if="element.attributes.orderable.urls.create_item_url" class="btn btn-light step-checklist-add-item" @click="addItem"> <div v-if="element.attributes.orderable.urls.create_item_url"
class="btn btn-light step-checklist-add-item"
tabindex="0"
@keyup.enter="addItem"
@click="addItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
{{ i18n.t('protocols.steps.insert.checklist_item') }} {{ i18n.t('protocols.steps.insert.checklist_item') }}
</div> </div>

4
app/javascript/vue/protocol/step_elements/checklistItem.vue
View file

@ -35,10 +35,10 @@
</div> </div>
</div> </div>
<div class="step-element-controls"> <div class="step-element-controls">
<button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit"> <button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit" tabindex="-1">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</button> </button>
<button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal"> <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>

6
app/javascript/vue/protocol/step_elements/table.vue
View file

@ -22,15 +22,15 @@
</span> </span>
</div> </div>
<div class="step-element-controls"> <div class="step-element-controls">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="enableNameEdit"> <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="enableNameEdit" tabindex="-1">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</button> </button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal"> <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>
</div> </div>
<div :class="'step-table ' + (editingTable ? 'edit' : 'view')"> <div :class="'step-table ' + (editingTable ? 'edit' : 'view')" tabindex="0" @keyup.enter="enableTableEdit">
<div class="enable-edit-mode" v-if="!editingTable && element.attributes.orderable.urls.update_url" @click="enableTableEdit"> <div class="enable-edit-mode" v-if="!editingTable && element.attributes.orderable.urls.update_url" @click="enableTableEdit">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</div> </div>

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

@ -1,14 +1,14 @@
<template> <template>
<div class="step-text-container" :class="{ 'edit': inEditMode }"> <div class="step-text-container" :class="{ 'edit': inEditMode }" @keyup.enter="enableEditMode($event)" tabindex="0">
<div class="action-container" @click="enableEditMode($event)"> <div class="action-container" @click="enableEditMode($event)">
<div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')"> <div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
<i class="fas fa-grip-vertical"></i> <i class="fas fa-grip-vertical"></i>
</div> </div>
<div class="buttons-container"> <div class="buttons-container">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light"> <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="-1">
<i class="fas fa-pen"></i> <i class="fas fa-pen"></i>
</button> </button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal"> <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>
@ -63,6 +63,7 @@
enableEditMode(e) { enableEditMode(e) {
if ($(e.target).hasClass('fas fa-grip-vertical') || $(e.target).hasClass('element-grip')) return if ($(e.target).hasClass('fas fa-grip-vertical') || $(e.target).hasClass('element-grip')) return
if (!this.element.attributes.orderable.urls.update_url) return if (!this.element.attributes.orderable.urls.update_url) return
if (this.inEditMode == true) return
this.inEditMode = true this.inEditMode = true
}, },
disableEditMode() { disableEditMode() {

2
app/javascript/vue/shared/inline_edit.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="sci-inline-edit" :class="{ 'editing': editing }"> <div class="sci-inline-edit" :class="{ 'editing': editing }" tabindex="0" @keyup.enter="enableEdit">
<div class="sci-inline-edit__content"> <div class="sci-inline-edit__content">
<textarea <textarea
ref="input" ref="input"