From 137489f492e92b34fe8ad934682dc6bd0f496f0c Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 11 Jan 2024 13:33:06 +1100 Subject: [PATCH] Refactor: move basic modal styles to generic parent component The style was already being shared with a sibling component. Now we can instantiate a plain old 'modal'. --- .../confirm_modal_component.html.haml | 2 +- .../help_modal_component/help_modal_component.html.haml | 2 +- app/components/modal_component/modal_component.html.haml | 8 ++++++++ .../modal_component.scss} | 3 ++- .../spree/admin/orders/bulk/_invoice_modal.html.haml | 2 +- app/webpacker/css/admin/all.scss | 2 +- app/webpacker/css/admin_v3/all.scss | 2 +- app/webpacker/css/darkswarm/all.scss | 2 +- spec/javascripts/stimulus/help_modal_controller_test.js | 2 +- spec/system/admin/enterprise_roles_spec.rb | 2 +- 10 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 app/components/modal_component/modal_component.html.haml rename app/components/{help_modal_component/help_modal_component.scss => modal_component/modal_component.scss} (69%) diff --git a/app/components/confirm_modal_component/confirm_modal_component.html.haml b/app/components/confirm_modal_component/confirm_modal_component.html.haml index 5fe1d1300b..1184602a67 100644 --- a/app/components/confirm_modal_component/confirm_modal_component.html.haml +++ b/app/components/confirm_modal_component/confirm_modal_component.html.haml @@ -1,6 +1,6 @@ %div{ id: @id, "data-controller": "modal #{@controller}", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-#{@controller}-reflex-value": @reflex } .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" } - .reveal-modal.fade.tiny.help-modal{ "data-modal-target": "modal" } + .reveal-modal.fade.tiny.modal-component{ "data-modal-target": "modal" } = content = render @message if @message diff --git a/app/components/help_modal_component/help_modal_component.html.haml b/app/components/help_modal_component/help_modal_component.html.haml index af7d602724..adc6c54822 100644 --- a/app/components/help_modal_component/help_modal_component.html.haml +++ b/app/components/help_modal_component/help_modal_component.html.haml @@ -1,6 +1,6 @@ %div{ id: @id, "data-controller": "help-modal", "data-action": "keyup@document->help-modal#closeIfEscapeKey" } .reveal-modal-bg.fade{ "data-help-modal-target": "background", "data-action": "click->help-modal#close" } - .reveal-modal.fade.small.help-modal{ "data-help-modal-target": "modal" } + .reveal-modal.fade.small.modal-component{ "data-help-modal-target": "modal" } = content - if close_button? diff --git a/app/components/modal_component/modal_component.html.haml b/app/components/modal_component/modal_component.html.haml new file mode 100644 index 0000000000..8c13b1dee0 --- /dev/null +++ b/app/components/modal_component/modal_component.html.haml @@ -0,0 +1,8 @@ +%div{ id: @id, "data-controller": "modal", "data-action": "keyup@document->modal#closeIfEscapeKey" } + .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" } + .reveal-modal.fade.small.modal-component{ "data-modal-target": "modal" } + = content + + - if close_button? + .text-center + %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: t('js.admin.modals.close'), "data-action": "click->modal#close" } diff --git a/app/components/help_modal_component/help_modal_component.scss b/app/components/modal_component/modal_component.scss similarity index 69% rename from app/components/help_modal_component/help_modal_component.scss rename to app/components/modal_component/modal_component.scss index d323b47992..5223d23824 100644 --- a/app/components/help_modal_component/help_modal_component.scss +++ b/app/components/modal_component/modal_component.scss @@ -1,4 +1,5 @@ -.help-modal { +// class name 'modal' is already taken by 'custom-alert' and 'custom-confirm'. +.modal-component { visibility: visible; position: fixed; top: 3em; diff --git a/app/views/spree/admin/orders/bulk/_invoice_modal.html.haml b/app/views/spree/admin/orders/bulk/_invoice_modal.html.haml index 07c2f30121..53f7982f25 100644 --- a/app/views/spree/admin/orders/bulk/_invoice_modal.html.haml +++ b/app/views/spree/admin/orders/bulk/_invoice_modal.html.haml @@ -1,6 +1,6 @@ %div{ id: "bulk_invoices_modal", "data-controller": "modal", "data-modal-instant-value": true, "data-action": "keyup@document->modal#closeIfEscapeKey" } .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#remove" } - .reveal-modal.fade.tiny.help-modal{ "data-modal-target": "modal" } + .reveal-modal.fade.tiny.modal-component{ "data-modal-target": "modal" } %div.fullwidth.align-center %h4.modal-title = t('js.admin.orders.index.compiling_invoices') diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss index 56d522ae75..2cb175b8f7 100644 --- a/app/webpacker/css/admin/all.scss +++ b/app/webpacker/css/admin/all.scss @@ -124,6 +124,6 @@ @import "~tom-select/src/scss/tom-select.default"; @import "components/tom_select"; -@import "app/components/help_modal_component/help_modal_component"; +@import "app/components/modal_component/modal_component"; @import "app/components/confirm_modal_component/confirm_modal_component"; @import "app/webpacker/css/admin/trix.scss"; diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 664a4fda11..274e76a76e 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -128,7 +128,7 @@ @import "~tom-select/src/scss/tom-select.default"; @import "components/tom_select"; // admin_v3 -@import "app/components/help_modal_component/help_modal_component"; +@import "app/components/modal_component/modal_component"; @import "app/components/confirm_modal_component/confirm_modal_component"; @import "app/components/vertical_ellipsis_menu/component"; // admin_v3 and only V3 @import "app/webpacker/css/admin/trix.scss"; diff --git a/app/webpacker/css/darkswarm/all.scss b/app/webpacker/css/darkswarm/all.scss index a78b2c30e2..be25b548d5 100644 --- a/app/webpacker/css/darkswarm/all.scss +++ b/app/webpacker/css/darkswarm/all.scss @@ -77,5 +77,5 @@ ofn-modal { @import "../shared/question-mark-icon"; @import '../admin/shared/scroll_bar'; -@import 'app/components/help_modal_component/help_modal_component'; +@import 'app/components/modal_component/modal_component'; @import 'app/components/confirm_modal_component/confirm_modal_component'; diff --git a/spec/javascripts/stimulus/help_modal_controller_test.js b/spec/javascripts/stimulus/help_modal_controller_test.js index 1120ede695..944cdea04c 100644 --- a/spec/javascripts/stimulus/help_modal_controller_test.js +++ b/spec/javascripts/stimulus/help_modal_controller_test.js @@ -34,7 +34,7 @@ describe("HelpModalController", () => { data-action="click->help-modal#close">