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

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 {
color: $color-volcano;
display: inline-block;
padding: .5em;
text-decoration: none;
.fas {
@ -399,6 +400,7 @@
.status-info {
@include font-h2;
color: inherit;
padding: .5em;
text-decoration: none;
&:hover,

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

@ -4,10 +4,6 @@
.sci-dropdown {
[data-toggle="dropdown"] {
&:focus {
box-shadow: none;
}
.caret {
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-section-header" v-if="!inRepository">
<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>
<div class="task-section-title">
<h2>{{ i18n.t('Protocol') }}</h2>
@ -14,11 +14,11 @@
</div>
<div class="actions-block">
<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>{{ i18n.t("protocols.steps.new_step") }}</span>
</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>{{ i18n.t("protocols.print.button") }}</span>
</a>
@ -69,15 +69,18 @@
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
<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>
{{ i18n.t("protocols.steps.collapse_label") }}
</button>
<button class="btn btn-light" @click="expandSteps">
<button class="btn btn-light" @click="expandSteps" tabindex="0">
<span class="fas fa-caret-down"></span>
{{ i18n.t("protocols.steps.expand_label") }}
</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>{{ i18n.t("protocols.reorder_steps.button") }}</span>
</a>

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

@ -8,6 +8,7 @@
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
tabindex="0"
>
<span class="fas fa-cog"></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>
</a>
<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 class="step-position">
{{ step.attributes.position + 1 }}.

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

@ -21,7 +21,7 @@
@dragover.prevent
>
<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>
{{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_title") }}
</div>
@ -45,6 +45,8 @@
:data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url"
data-object-type="Step"
@click="openMarvinJsModal"
tabindex="0"
@keyup.enter="openMarvinJsModal"
>
<span class="new-marvinjs-upload-icon">
<img :src="step.attributes.marvinjs_context.icon"/>
@ -53,7 +55,7 @@
</a>
</div>
<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"/>
{{ i18n.t('assets.create_wopi_file.button_text') }}
</a>

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

@ -22,10 +22,10 @@
</span>
</div>
<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>
</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>
</button>
</div>
@ -56,7 +56,11 @@
@multilinePaste="handleMultilinePaste"
/>
</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>
{{ i18n.t('protocols.steps.insert.checklist_item') }}
</div>

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

@ -35,10 +35,10 @@
</div>
</div>
<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>
</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>
</button>
</div>

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

@ -22,15 +22,15 @@
</span>
</div>
<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>
</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>
</button>
</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">
<i class="fas fa-pen"></i>
</div>

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

@ -1,14 +1,14 @@
<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 v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
<i class="fas fa-grip-vertical"></i>
</div>
<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>
</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>
</button>
</div>
@ -63,6 +63,7 @@
enableEditMode(e) {
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.inEditMode == true) return
this.inEditMode = true
},
disableEditMode() {

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

@ -1,5 +1,5 @@
<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">
<textarea
ref="input"