From 0ffd3dcee3f01044209eaf8d81e7eae5f12a2e16 Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 26 Oct 2023 12:01:48 +0200 Subject: [PATCH 1/8] Add image paster [SCI-9588] --- app/assets/stylesheets/tailwind/inputs.css | 2 +- app/javascript/vue/protocol/container.vue | 26 ++++++- app/javascript/vue/protocol/step.vue | 16 +--- app/javascript/vue/results/result.vue | 3 +- app/javascript/vue/results/results.vue | 25 ++++++- .../attachments/clipboard_paste_modal.vue | 74 +++++++++++++++---- .../content/attachments/mixins/paste.js | 27 +++++++ config/locales/en.yml | 7 +- 8 files changed, 143 insertions(+), 37 deletions(-) create mode 100644 app/javascript/vue/shared/content/attachments/mixins/paste.js diff --git a/app/assets/stylesheets/tailwind/inputs.css b/app/assets/stylesheets/tailwind/inputs.css index 963aa94bd..805ce15b1 100644 --- a/app/assets/stylesheets/tailwind/inputs.css +++ b/app/assets/stylesheets/tailwind/inputs.css @@ -1,7 +1,7 @@ @layer components { .sci-label { - @apply text-sm font-medium text-sn-grey; + @apply text-sm font-medium text-sn-dark-grey; } .sci-input-container-v2 { diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue index 3314ee999..aacbaa6ea 100644 --- a/app/javascript/vue/protocol/container.vue +++ b/app/javascript/vue/protocol/container.vue @@ -210,6 +210,14 @@ @publish="publishProtocol" @cancel="closePublishModal" /> + @@ -221,6 +229,8 @@ import Tinymce from '../shared/tinymce.vue' import ReorderableItemsModal from '../shared/reorderable_items_modal.vue' import PublishProtocol from './modals/publish_protocol.vue' + import clipboardPasteModal from '../shared/content/attachments/clipboard_paste_modal.vue' + import AssetPasteMixin from '../shared/content/attachments/mixins/paste.js' import UtilsMixin from '../mixins/utils.js' import stackableHeadersMixin from '../mixins/stackableHeadersMixin'; @@ -234,8 +244,8 @@ required: true } }, - components: { Step, InlineEdit, ProtocolOptions, Tinymce, ReorderableItemsModal, ProtocolMetadata, PublishProtocol}, - mixins: [UtilsMixin, stackableHeadersMixin, moduleNameObserver], + components: { Step, InlineEdit, ProtocolOptions, Tinymce, ReorderableItemsModal, ProtocolMetadata, PublishProtocol, clipboardPasteModal}, + mixins: [UtilsMixin, stackableHeadersMixin, moduleNameObserver, AssetPasteMixin], computed: { inRepository() { return this.protocol.attributes.in_repository @@ -245,7 +255,7 @@ }, urls() { return this.protocol.attributes.urls || {} - } + }, }, data() { return { @@ -433,6 +443,16 @@ $('.my_module-name .view-mode').trigger('click'); $('.my_module-name .input-field').focus(); }, 300) + }, + uploadFilesToStep(file, stepId) { + this.$children.find(child => child.step?.id == stepId).uploadFiles(file); + }, + firstObjectInViewport() { + let step = $('.step-container:not(.locked)').toArray().find(element => { + const { top, bottom } = element.getBoundingClientRect() + return bottom > 0 && top < window.innerHeight + }) + return step ? step.dataset.id : null } } } diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue index 52f00dfa4..577da8d84 100644 --- a/app/javascript/vue/protocol/step.vue +++ b/app/javascript/vue/protocol/step.vue @@ -4,7 +4,8 @@ @drop.prevent="dropFile" @dragenter.prevent="dragEnter($event)" @dragover.prevent - :class="{ 'draging-file': dragingFile, 'editing-name': editingName }" + :data-id="step.id" + :class="{ 'draging-file': dragingFile, 'editing-name': editingName, 'locked': !urls.update_url }" >
{{ i18n.t('protocols.steps.drop_message', { position: step.attributes.position + 1 }) }} @@ -134,12 +135,6 @@
- { diff --git a/app/javascript/vue/results/result.vue b/app/javascript/vue/results/result.vue index 655bd3eac..2b51d941a 100644 --- a/app/javascript/vue/results/result.vue +++ b/app/javascript/vue/results/result.vue @@ -3,7 +3,8 @@ @drop.prevent="dropFile" @dragenter.prevent="dragEnter($event)" @dragover.prevent - :class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile }" + :data-id="result.id" + :class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile, 'locked': locked }" >
+ @@ -43,10 +51,13 @@ import stackableHeadersMixin from '../mixins/stackableHeadersMixin'; import moduleNameObserver from '../mixins/moduleNameObserver'; + import clipboardPasteModal from '../shared/content/attachments/clipboard_paste_modal.vue' + import AssetPasteMixin from '../shared/content/attachments/mixins/paste.js' + export default { name: 'Results', - components: { ResultsToolbar, Result }, - mixins: [stackableHeadersMixin, moduleNameObserver], + components: { ResultsToolbar, Result, clipboardPasteModal }, + mixins: [stackableHeadersMixin, moduleNameObserver, AssetPasteMixin], props: { url: { type: String, required: true }, canCreate: { type: String, required: true }, @@ -136,6 +147,16 @@ }, dragEnter(id) { this.activeDragResult = id; + }, + uploadFilesToResult(file, resultId) { + this.$children.find(child => child.result?.id == resultId).uploadFiles(file); + }, + firstObjectInViewport() { + let result = $('.result-wrapper:not(.locked)').toArray().find(element => { + const { top, bottom } = element.getBoundingClientRect() + return bottom > 0 && top < window.innerHeight + }) + return result ? result.dataset.id : null } } } diff --git a/app/javascript/vue/shared/content/attachments/clipboard_paste_modal.vue b/app/javascript/vue/shared/content/attachments/clipboard_paste_modal.vue index 9340e7924..67ad2e34a 100644 --- a/app/javascript/vue/shared/content/attachments/clipboard_paste_modal.vue +++ b/app/javascript/vue/shared/content/attachments/clipboard_paste_modal.vue @@ -12,29 +12,66 @@