From aa48cdbbfdc80f8772b9529c8f7698e2f61932f6 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 14 Sep 2021 07:58:59 +0200
Subject: [PATCH] Media picker 3 preview with checkered background (#10939)

* Set property editor limit width on parent like other property editors

* Use checkered background in media picker 3 preview like the legacy media picker
---
 .../components/mediacard/umb-media-card.less  | 54 +++++++++++--------
 .../umb-media-picker3-property-editor.less    |  4 +-
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
index de3840b4d7..3d06c8b16f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
+++ b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
@@ -1,4 +1,4 @@
-.umb-media-card, 
+.umb-media-card,
 umb-media-card {
     position: relative;
     display: inline-block;
@@ -7,11 +7,8 @@ umb-media-card {
     border-radius: @baseBorderRadius;
     //box-shadow: 0 1px 2px rgba(0,0,0,.2);
     overflow: hidden;
-
     transition: box-shadow 120ms;
-
     cursor: pointer;
-
     .umb-outline();
 
     &:hover {
@@ -24,7 +21,7 @@ umb-media-card {
             position: absolute;
             border: 2px solid @ui-active-border;
             border-radius: @baseBorderRadius;
-            top:0;
+            top: 0;
             bottom: 0;
             left: 0;
             right: 0;
@@ -36,28 +33,34 @@ umb-media-card {
     }
 
     &.--sortable-placeholder {
+        box-shadow: none;
+
         &::after {
             content: "";
             position: absolute;
-            background-color:rgba(@ui-drop-area-color, .05);
+            background-color: rgba(@ui-drop-area-color, .05);
             border: 2px solid rgba(@ui-drop-area-color, .1);
             border-radius: @baseBorderRadius;
             box-shadow: 0 0 4px rgba(@ui-drop-area-color, 0.05);
-            top:0;
+            top: 0;
             bottom: 0;
             left: 0;
             right: 0;
             animation: umb-block-card--sortable-placeholder 400ms ease-in-out alternate infinite;
+
             @keyframes umb-block-card--sortable-placeholder {
-                0%   { opacity: 1; }
-                100% { opacity: 0.5; }
+                0% {
+                    opacity: 1;
+                }
+
+                100% {
+                    opacity: 0.5;
+                }
             }
         }
-        box-shadow: none;
     }
 
     .__status {
-
         position: absolute;
         top: 0;
         left: 0;
@@ -72,22 +75,26 @@ umb-media-card {
 
     .__showcase {
         position: relative;
+        display: flex;
         max-width: 100%;
         min-height: 120px;
         max-height: 240px;
         text-align: center;
-        //padding-bottom: 10/16*100%;
-        //background-color: @gray-12;
+        align-items: center;
+        justify-content: center;
+
+        .checkeredBackground();
 
         img {
             object-fit: contain;
             max-height: 240px;
         }
-        
+
         umb-file-icon {
             width: 100%;
             padding-bottom: 100%;
             display: block;
+
             .umb-file-icon {
                 position: absolute;
                 top: 0;
@@ -100,7 +107,7 @@ umb-media-card {
             }
         }
     }
-    
+
     .__info {
         position: absolute;
         text-align: left;
@@ -108,15 +115,17 @@ umb-media-card {
         width: 100%;
         background-color: #fff;
         padding-top: 6px;
-        padding-bottom: 7px;// 7 + 1 to compentiate for the -1 substraction in margin-bottom.
-        
+        padding-bottom: 7px; // 7 + 1 to compentiate for the -1 substraction in margin-bottom.
+
         opacity: 0;
         transition: opacity 120ms;
 
         &.--error {
             opacity: 1;
             background-color: @errorBackground;
-            .__name, .__subname {
+
+            .__name,
+            .__subname {
                 color: @errorText;
             }
         }
@@ -127,11 +136,11 @@ umb-media-card {
             color: @ui-action-type;
             margin-left: 16px;
             margin-bottom: -1px;
-            
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
+
         .__subname {
             color: @gray-4;
             font-size: 12px;
@@ -146,6 +155,7 @@ umb-media-card {
         .__info {
             opacity: 1;
         }
+
         .__info:not(.--error) {
             .__name {
                 color: @ui-action-type-hover;
@@ -162,25 +172,25 @@ umb-media-card {
         border-radius: 16px;
         padding-left: 5px;
         padding-right: 5px;
-
         opacity: 0;
         transition: opacity 120ms;
+
         .__action {
             position: relative;
             display: inline-block;
             padding: 5px;
             font-size: 18px;
-            
             color: @ui-action-discreet-type;
+
             &:hover {
                 color: @ui-action-discreet-type-hover;
             }
         }
     }
+
     &:hover, &:focus, &:focus-within {
         .__actions {
             opacity: 1;
         }
     }
-
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
index d02c0b055c..bb62307bd7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
@@ -1,10 +1,10 @@
 .umb-mediapicker3 {
-    
+    .umb-property-editor--limit-width();
+
     .umb-media-card-grid {
         padding: 20px;
         border: 1px solid @inputBorder;
         box-sizing: border-box;
-        .umb-property-editor--limit-width();
 
         &.--singleMode {
             max-width: 202px;