Merge pull request #12130 from dacook/buu/modal-styles-11065

[BUU] Image modal styles

app/components/confirm_modal_component/confirm_modal_component.scss

@@ -1,22 +0,0 @@
-.modal-actions {
-  display: flex;
-
-  &.justify-space-around {
-    justify-content: space-around;
-  }
-
-  &.justify-end {
-    justify-content: flex-end;
-    input[type="button"] {
-      margin: 0 5px;
-    }
-
-    @media only screen and (max-width: 1024px) {
-      flex-direction: column;
-      justify-content: space-around;
-      input[type="button"] {
-        margin: 5px 0;
-      }
-    }
-  }
-}

app/components/modal_component.rb

@@ -1,10 +1,11 @@
 # frozen_string_literal: true
 
 class ModalComponent < ViewComponent::Base
-  def initialize(id:, close_button: true, instant: false)
+  def initialize(id:, close_button: true, instant: false, modal_class: :small)
     @id = id
     @close_button = close_button
     @instant = instant
+    @modal_class = modal_class
   end
 
   private

app/components/modal_component/modal_component.html.haml

@@ -1,6 +1,6 @@
 %div{ id: @id, "data-controller": "modal", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-modal-instant-value": @instant }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
-  .reveal-modal.fade.small.modal-component{ "data-modal-target": "modal" }
+  .reveal-modal.fade.modal-component{ "data-modal-target": "modal", class: @modal_class }
     = content
 
     - if close_button?

app/components/modal_component/modal_component.scss

@@ -3,6 +3,8 @@
   visibility: visible;
   position: fixed;
   top: 3em;
+  min-height: auto; // reset from reveal-modal
+
   &.in {
     padding: 1.2rem;
   }
@@ -16,9 +18,39 @@
   p {
     margin-bottom: 0.5em;
   }
+
+  img {
+    // Ensure image fits in container
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 /* prevent arrow on selected admin menu item appearing above modal */
 body.modal-open #admin-menu li.selected a::after {
   z-index: 0;
 }
+
+.modal-actions {
+  display: flex;
+  text-align: center; // Ensure text inside fullwidth buttons are centred on small screens
+
+  &.justify-space-around {
+    justify-content: space-around;
+  }
+
+  &.justify-end {
+    justify-content: flex-end;
+    input[type="button"] {
+      margin: 0 5px;
+    }
+
+    @media only screen and (max-width: 1024px) {
+      flex-direction: column;
+      justify-content: space-around;
+      input[type="button"] {
+        margin: 5px 0;
+      }
+    }
+  }
+}

app/views/admin/products_v3/_edit_image.html.haml

@@ -1,7 +1,8 @@
-= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false do
+= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false, modal_class: :fit do
   %h2= t(".title")
 
-  %p= image_tag image.persisted? ? image.url(:product) : Spree::Image.default_image_url(:product)
+  -# Display image in the same way it appears in the shopfront popup
+  %p= image_tag image.persisted? ? image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
 
   -# Submit to controller, because StimulusReflex doesn't support file uploads
   = form_for [:admin, product, image],
@@ -9,8 +10,8 @@
     %input{ type: :hidden, name: :return_url, value: return_url}
     = f.hidden_field :viewable_id, value: product.id
 
-    %p
-      %input{ class: "secondary", type: 'button', value: t('.close'), "data-action": "click->modal#close" }
+    .modal-actions.justify-end
+      %input{ class: "secondary relaxed", type: 'button', value: t('.close'), "data-action": "click->modal#close" }
       -# label.button provides a handy shortcut to open the file selector on click. Unfortunately this trick isn't keyboard accessible though..
-      = f.label :attachment, t(".upload"), class: "button primary icon-upload-alt"
+      = f.label :attachment, t(".upload"), class: "button primary relaxed icon-upload-alt"
       = f.file_field :attachment, accept: "image/*", style: "display: none", "data-action": "change->form#submit"

app/webpacker/css/admin/all.scss

@@ -125,5 +125,4 @@
 @import "components/tom_select";
 
 @import "app/components/modal_component/modal_component";
-@import "app/components/confirm_modal_component/confirm_modal_component";
 @import "app/webpacker/css/admin/trix.scss";

app/webpacker/css/admin/modals.scss

@@ -16,7 +16,7 @@ dialog {
   display: none;
   position: absolute;
   z-index: 1005;
-  width: 100vw;
+  width: 100%;
   top: 0;
   border-radius: 0.4em;
   border: 0px none;
@@ -75,8 +75,6 @@ dialog.full {
   top: 0;
   left: 0;
   height: 100%;
-  height: 100vh;
-  min-height: 100vh;
   max-width: none !important;
   margin-left: 0 !important;
 }
@@ -161,7 +159,7 @@ dialog[open] {
 @media only screen and (max-width: 40em) {
   .reveal-modal,
   dialog {
-    min-height: 100vh;
+    min-height: 100%;
   }
 }
 
@@ -170,6 +168,10 @@ dialog[open] {
   dialog {
     top: 6.25rem;
   }
+  .reveal-modal.fit,
+  dialog.fit {
+    width: fit-content;
+  }
   .reveal-modal.tiny,
   dialog.tiny {
     width: 30%;
@@ -212,7 +214,7 @@ dialog[open] {
   }
   .reveal-modal.full,
   dialog.full {
-    width: 100vw;
+    width: 100%;
     max-width: 62.5rem;
     left: 0;
     right: 0;

app/webpacker/css/admin_v3/all.scss

@@ -129,7 +129,6 @@
 @import "components/tom_select"; // admin_v3
 
 @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";
 

app/webpacker/css/darkswarm/all.scss

@@ -78,4 +78,3 @@ ofn-modal {
 @import '../admin/shared/scroll_bar';
 
 @import 'app/components/modal_component/modal_component';
-@import 'app/components/confirm_modal_component/confirm_modal_component';

spec/system/admin/products_v3/products_spec.rb

@@ -349,7 +349,7 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
         end
 
         expect(page).to have_content /Image has been successfully (updated|created)/
-        expect(product.image.reload.url(:product)).to match /500.jpg$/
+        expect(product.image.reload.url(:large)).to match /500.jpg$/
 
         within row_containing_name("Apples") do
           expect_page_to_have_image('500.jpg')
@@ -359,14 +359,14 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
 
     context "with existing image" do
       let!(:product) { create(:product_with_image, name: "Apples") }
-      let(:current_img_url) { product.image.url(:product) }
+      let(:current_img_url) { product.image.url(:large) }
 
       include_examples "updating image"
     end
 
     context "with default image" do
       let!(:product) { create(:product, name: "Apples") }
-      let(:current_img_url) { Spree::Image.default_image_url(:product) }
+      let(:current_img_url) { Spree::Image.default_image_url(:large) }
 
       include_examples "updating image"
     end