From 034a86119fc74f866f854f3467998248af79b014 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sat, 12 Feb 2022 23:44:50 +0300
Subject: [PATCH] Add card padder icon for items with an image

---
 src/components/cardbuilder/card.scss      | 12 ++++++++++++
 src/components/cardbuilder/cardBuilder.js |  8 +++++++-
 src/themes/appletv/theme.css              |  4 ++++
 src/themes/blueradiance/theme.css         |  4 ++++
 src/themes/light/theme.css                |  4 ++++
 src/themes/purplehaze/theme.css           |  4 ++++
 src/themes/wmc/theme.css                  |  4 ++++
 7 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss
index 7de53d67a..9d1946695 100644
--- a/src/components/cardbuilder/card.scss
+++ b/src/components/cardbuilder/card.scss
@@ -227,6 +227,10 @@ button::-moz-focus-inner {
     background-color: transparent;
 }
 
+.cardPadder {
+    position: relative; // For centering the cardImageIcon
+}
+
 .cardBox:not(.visualCardBox) .cardPadder {
     border-radius: 0.2em;
     background-color: #242424;
@@ -377,6 +381,14 @@ button::-moz-focus-inner {
     color: inherit;
 }
 
+.cardPadder .cardImageIcon {
+    color: #111;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .cardIndicators {
     right: 0.225em;
     top: 0.225em;
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 5b8732602..25374b544 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1344,7 +1344,13 @@ import ServerConnections from '../ServerConnections';
 
             const cardScalableClass = 'cardScalable';
 
-            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
+            let cardPadderIcon = '';
+
+            if (imgUrl) {
+                cardPadderIcon = getDefaultText(item, options);
+            }
+
+            cardImageContainerOpen = `<div class="${cardBoxClass}"><div class="${cardScalableClass}"><div class="cardPadder cardPadder-${shape}">${cardPadderIcon}</div>${cardImageContainerOpen}`;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
 
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css
index d14e7c185..b2e104237 100644
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@@ -481,6 +481,10 @@ a[data-role=button] {
     color: #00a4dc !important;
 }
 
+.cardPadder .cardImageIcon {
+    color: rgba(0, 0, 0, 0.1);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-radius: 0.5rem;
diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css
index 3e7a52166..5c41ec66f 100644
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@@ -475,6 +475,10 @@ a[data-role=button] {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
+.cardPadder .cardImageIcon {
+    color: rgba(0, 0, 0, 0.5);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;
diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css
index 0e74c2596..4b2d0866f 100644
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@@ -466,6 +466,10 @@ a[data-role=button] {
     background-color: #fff;
 }
 
+.cardPadder .cardImageIcon {
+    color: #ddd;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index 1541fda33..cedfcf23d 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -577,6 +577,10 @@ a[data-role=button] {
     border-radius: 0.8em;
 }
 
+.cardPadder .cardImageIcon {
+    color: rgba(0, 0, 0, 0.5);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #ff77f1 !important;
diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css
index ea583b72d..25fa6daf4 100644
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@@ -456,6 +456,10 @@ a[data-role=button] {
     background-color: #0f3562;
 }
 
+.cardPadder .cardImageIcon {
+    color: rgba(0, 0, 0, 0.4);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #fff !important;