From 2a47909e32407b1eee98af8741eb3e6aafd60eb3 Mon Sep 17 00:00:00 2001 From: Anton Date: Fri, 21 Jul 2023 10:35:14 +0200 Subject: [PATCH] Update step text element [SCI-8880] --- Gemfile.lock | 2 +- app/assets/stylesheets/application.scss | 1 + .../stylesheets/application.tailwind.css | 3 + .../content}/checklist.scss | 0 .../components => shared/content}/table.scss | 0 .../stylesheets/shared/content/text.scss | 27 ++++++ .../stylesheets/steps/components/text.scss | 83 ------------------- app/assets/stylesheets/steps/step.scss | 2 - .../step_elements/texts_controller.rb | 2 +- app/javascript/vue/protocol/container.vue | 4 +- app/javascript/vue/protocol/modals.vue | 12 --- app/javascript/vue/protocol/step.vue | 6 +- .../content}/checklist.vue | 10 +-- .../content}/checklistItem.vue | 6 +- .../content/mixins}/delete.js | 0 .../content/mixins}/duplicate.js | 0 .../content/modal/delete.vue} | 0 .../content/modal/table_name.vue} | 0 .../content}/table.vue | 10 +-- .../step_elements => shared/content}/text.vue | 28 ++++--- 20 files changed, 66 insertions(+), 130 deletions(-) rename app/assets/stylesheets/{steps/components => shared/content}/checklist.scss (100%) rename app/assets/stylesheets/{steps/components => shared/content}/table.scss (100%) create mode 100644 app/assets/stylesheets/shared/content/text.scss delete mode 100644 app/assets/stylesheets/steps/components/text.scss delete mode 100644 app/javascript/vue/protocol/modals.vue rename app/javascript/vue/{protocol/step_elements => shared/content}/checklist.vue (96%) rename app/javascript/vue/{protocol/step_elements => shared/content}/checklistItem.vue (96%) rename app/javascript/vue/{protocol/mixins/components => shared/content/mixins}/delete.js (100%) rename app/javascript/vue/{protocol/mixins/components => shared/content/mixins}/duplicate.js (100%) rename app/javascript/vue/{protocol/modals/delete_element.vue => shared/content/modal/delete.vue} (100%) rename app/javascript/vue/{protocol/modals/table_name_modal.vue => shared/content/modal/table_name.vue} (100%) rename app/javascript/vue/{protocol/step_elements => shared/content}/table.vue (96%) rename app/javascript/vue/{protocol/step_elements => shared/content}/text.vue (73%) diff --git a/Gemfile.lock b/Gemfile.lock index 349c2cd4e..0818e0901 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -772,7 +772,7 @@ DEPENDENCIES omniauth-okta! omniauth-rails_csrf_protection (~> 1.0) overcommit - pg (~> 1.1) + pg (~> 1.5) pg_search pry pry-byebug diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 91413b0d0..9381a6405 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -91,6 +91,7 @@ @import "reports/*"; @import "settings/*"; @import "shared/*"; +@import "shared/content/*"; @import "steps/*"; @import "themes/*"; diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index bfd0577b9..2720a5108 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -5,6 +5,9 @@ @tailwind components; @tailwind utilities; +.tw-hidden { + @apply hidden +} html { font-size: 16px; diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/shared/content/checklist.scss similarity index 100% rename from app/assets/stylesheets/steps/components/checklist.scss rename to app/assets/stylesheets/shared/content/checklist.scss diff --git a/app/assets/stylesheets/steps/components/table.scss b/app/assets/stylesheets/shared/content/table.scss similarity index 100% rename from app/assets/stylesheets/steps/components/table.scss rename to app/assets/stylesheets/shared/content/table.scss diff --git a/app/assets/stylesheets/shared/content/text.scss b/app/assets/stylesheets/shared/content/text.scss new file mode 100644 index 000000000..c3430cc7c --- /dev/null +++ b/app/assets/stylesheets/shared/content/text.scss @@ -0,0 +1,27 @@ +.content__text-container { + + // TinyMCE table of contents + .mce-toc ul, + .mce-toc li { + list-style-type: none; + } + + .img-responsive { + display: inline; + vertical-align: baseline; + } + + .view-text-element { + a { + pointer-events: initial; + } + } + + img { + max-width: 100%; + } + + &:hover:not(.edit):not(.locked) { + background: $color-concrete; + } +} diff --git a/app/assets/stylesheets/steps/components/text.scss b/app/assets/stylesheets/steps/components/text.scss deleted file mode 100644 index bf47be4e7..000000000 --- a/app/assets/stylesheets/steps/components/text.scss +++ /dev/null @@ -1,83 +0,0 @@ -.step-text-container { - display: flex; - border-radius: 4px; - margin-bottom: 16px; - padding-left: var(--left-component-padding); - position: relative; - width: calc(100% + 16px); - - // TinyMCE table of contents - .mce-toc ul, - .mce-toc li { - list-style-type: none; - } - - .step-element-grip-placeholder { - flex: 0; - } - - .img-responsive { - display: inline; - vertical-align: baseline; - } - - .view-text-element { - a { - pointer-events: initial; - } - } - - .empty-text-element { - color: $color-silver-chalice; - } - - .buttons-container { - background: linear-gradient( - 90deg, - transparent 0%, - $color-concrete 25%, - $color-concrete 100% - ); - border-radius: 4px; - opacity: 0; - padding-left: 2em; - position: absolute; - right: 0; - } - - - .step-element-grip { - align-items: center; - color: $color-silver-chalice; - display: none; - height: 100%; - justify-content: center; - left: 0; - padding: .5em; - position: absolute; - } - - img { - max-width: 100%; - } - - &:hover:not(.edit):not(.locked) { - background: $color-concrete; - - .buttons-container { - display: flex; - opacity: 1; - } - - .step-element-grip { - display: flex; - } - } - - &.edit { - .buttons-container, - .step-element-grip { - display: none; - } - } -} diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss index 8d006c632..27cfbed07 100644 --- a/app/assets/stylesheets/steps/step.scss +++ b/app/assets/stylesheets/steps/step.scss @@ -1,8 +1,6 @@ // scss-lint:disable SelectorDepth // scss-lint:disable NestingDepth -@import "components/*"; - .step-container { --left-component-padding: 2rem; border: $border-transparent; diff --git a/app/controllers/step_elements/texts_controller.rb b/app/controllers/step_elements/texts_controller.rb index e900ebc8c..7377a3782 100644 --- a/app/controllers/step_elements/texts_controller.rb +++ b/app/controllers/step_elements/texts_controller.rb @@ -60,7 +60,7 @@ module StepElements private def step_text_params - params.require(:step_text).permit(:text) + params.require(:text_component).permit(:text) end def load_step_text diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue index 76b90a137..c62facfe7 100644 --- a/app/javascript/vue/protocol/container.vue +++ b/app/javascript/vue/protocol/container.vue @@ -149,7 +149,6 @@ - -
-
- - diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue index 54d07f2f4..8681c47ad 100644 --- a/app/javascript/vue/protocol/step.vue +++ b/app/javascript/vue/protocol/step.vue @@ -199,9 +199,9 @@ } import InlineEdit from '../shared/inline_edit.vue' - import StepTable from './step_elements/table.vue' - import StepText from './step_elements/text.vue' - import Checklist from './step_elements/checklist.vue' + import StepTable from '../shared/content/table.vue' + import StepText from '../shared/content/text.vue' + import Checklist from '../shared/content/checklist.vue' import deleteStepModal from './modals/delete_step.vue' import Attachments from './attachments.vue' import fileModal from './step_attachments/file_modal.vue' diff --git a/app/javascript/vue/protocol/step_elements/checklist.vue b/app/javascript/vue/shared/content/checklist.vue similarity index 96% rename from app/javascript/vue/protocol/step_elements/checklist.vue rename to app/javascript/vue/shared/content/checklist.vue index 52485fa8e..c6082bc82 100644 --- a/app/javascript/vue/protocol/step_elements/checklist.vue +++ b/app/javascript/vue/shared/content/checklist.vue @@ -79,11 +79,11 @@