From 74c5117f324c18dc2e502a72654426e63802232a Mon Sep 17 00:00:00 2001
From: Zacharie <guetzac@gmail.com>
Date: Thu, 6 Aug 2020 14:32:08 +0200
Subject: [PATCH] Redesign and bug fix on theme page

---
 admin/themes/clear/theme.css                  |  3 ++-
 .../default/template/configuration_main.tpl   |  6 ++---
 .../default/template/themes_installed.tpl     | 24 +++++++++--------
 admin/themes/default/template/themes_new.tpl  | 27 ++++++++++---------
 admin/themes/default/theme.css                |  3 +--
 admin/themes/roma/theme.css                   |  3 +++
 6 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index 5ee559463..943aacf45 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -210,7 +210,8 @@ INPUT[type="text"].large  { width: 317px; }
 .themeName {color:black;}
 .themeActions span {background-color: #ddd;}
 #themesContent H3 {border-bottom:1px solid #aaa;}
-.themeDefault {}
+.themeSelect {background-color: #fafafa;}
+.themeDefault {background-color: #ffd7ad;}
 
 #pluginsMenuSeparator {border:1px solid #555;}
 
diff --git a/admin/themes/default/template/configuration_main.tpl b/admin/themes/default/template/configuration_main.tpl
index 9e02ac2ce..a7f536c34 100644
--- a/admin/themes/default/template/configuration_main.tpl
+++ b/admin/themes/default/template/configuration_main.tpl
@@ -57,8 +57,8 @@
 jQuery(".themeBoxes a").colorbox();
 
 jQuery("input[name='mail_theme']").change(function() {
-  jQuery("input[name='mail_theme']").parents(".themeBox").removeClass("themeDefault");
-  jQuery(this).parents(".themeBox").addClass("themeDefault");
+  jQuery("input[name='mail_theme']").parents(".themeSelect").removeClass("themeDefault");
+  jQuery(this).parents(".themeSelect").addClass("themeDefault");
 });
 {/footer_script}
 
@@ -188,7 +188,7 @@ jQuery("input[name='mail_theme']").change(function() {
 
         <div class="themeBoxes font-checkbox">
         {foreach from=$main.mail_theme_options item=name key=theme}
-          <div class="themeBox {if $main.mail_theme==$theme}themeDefault{/if}">
+          <div class="themeSelect {if $main.mail_theme==$theme}themeDefault{/if}">
             <label class="font-checkbox">
               <div class="themeName">
                 <span class="icon-dot-circled"></span>
diff --git a/admin/themes/default/template/themes_installed.tpl b/admin/themes/default/template/themes_installed.tpl
index b5f75b058..7e9123f3b 100644
--- a/admin/themes/default/template/themes_installed.tpl
+++ b/admin/themes/default/template/themes_installed.tpl
@@ -7,22 +7,24 @@ jQuery(document).ready(function() {
   $('.themeBox').each(function() {
 
     let screenImage = $(this).find(".preview-box img");
-    let size = $(this).find(".preview-box").width();
+    screenImage.on( 'load', () => {
+      let imageW = screenImage.innerWidth();
+      let imageH = screenImage.innerHeight();
+      let size = $(this).find(".preview-box").innerWidth();
 
-    let theImage = new Image();
-    theImage.src = screenImage.attr("src");
+      console.log(screenImage.innerHeight())
 
-    if (theImage.width > theImage.height) {
-      screenImage.css('height', size+'px');
-      screenImage.css('width', (theImage.width * size / theImage.height)+'px');
-    } else {
-      screenImage.css('width', size+'px');
-      screenImage.css('heigth', (theImage.height * size / theImage.width)+'px');
-    }
+      if (imageW > imageH) {
+        screenImage.css('height', size+'px');
+        screenImage.css('width', (imageW * size / imageH)+'px');
+      } else {
+        screenImage.css('width', size+'px');
+        screenImage.css('heigth', (imageH * size / imageW)+'px');
+      }
+    });
 
     let box = $(this);
     box.find('.showInfo').on('click', function() {
-      console.log('click')
       box.find('.showInfo-dropdown').fadeToggle();
     });
   })
diff --git a/admin/themes/default/template/themes_new.tpl b/admin/themes/default/template/themes_new.tpl
index de1b5bd7d..69383f4c3 100644
--- a/admin/themes/default/template/themes_new.tpl
+++ b/admin/themes/default/template/themes_new.tpl
@@ -7,18 +7,21 @@ jQuery(document).ready(function() {
   $('.themeBox').each(function() {
 
     let screenImage = $(this).find(".preview-box img");
-    let size = $(this).find(".preview-box").width();
+    screenImage.on( 'load', () => {
+      let imageW = screenImage.innerWidth();
+      let imageH = screenImage.innerHeight();
+      let size = $(this).find(".preview-box").innerWidth();
 
-    let theImage = new Image();
-    theImage.src = screenImage.attr("src");
+      console.log(screenImage.innerHeight())
 
-    if (theImage.width > theImage.height) {
-      screenImage.css('height', size+'px');
-      screenImage.css('width', (theImage.width * size / theImage.height)+'px');
-    } else {
-      screenImage.css('width', size+'px');
-      screenImage.css('height', (theImage.height * size / theImage.width)+'px');
-    }
+      if (imageW > imageH) {
+        screenImage.css('height', size+'px');
+        screenImage.css('width', (imageW * size / imageH)+'px');
+      } else {
+        screenImage.css('width', size+'px');
+        screenImage.css('heigth', (imageH * size / imageW)+'px');
+      }
+    });
   })
 }); 
 {/literal}{/footer_script}
@@ -29,8 +32,8 @@ jQuery(document).ready(function() {
 {if not empty($new_themes)}
 <div class="themeBoxes">
 {foreach from=$new_themes item=theme name=themes_loop}
-<div class="themeBox add-theme">
-  <div class="themeShot"><a href="{$theme.screenshot}" class="preview-box" title="{$theme.name}"><img src="{$theme.thumbnail}" onerror="this.src='{$default_screenshot}'"></a></div>
+<div class="themeBox">
+  <div class="themeShot"><a href="{$theme.screenshot}" class="preview-box" title="{$theme.name}"><img src="{$theme.screenshot}" onerror="this.src='{$default_screenshot}'"></a></div>
   <div class="themeName" title="{$theme.name}">{$theme.name}</div>
   <div class="themeActions"><a href="{$theme.install_url}">{'Install'|@translate}</a></div>
 </div>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 8c2598cf9..41fdf00e8 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1478,14 +1478,13 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
 
 .themeBox {display: inline-table;text-align: center;height: 192px;margin: 0px 0px 15px 15px; position: relative;}
 .themeShot a {height: 200px; width: 200px; position: relative; overflow: hidden; display: block;}
-.add-theme .themeShot a {height: 140px !important; width: 140px !important;}
 
 .themeBox IMG {margin:0px; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
 .themeName {font-size:14px; margin:10px; position:relative; text-transform: capitalize; font-weight: bold; text-align: left; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;}
-.add-theme .themeName {max-width: 120px}
 .themeName em {font-weight: normal;}
 .themeName .showInfo {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
 .themeBox .showInfo-dropdown {position: absolute; right: 0px; transform: translateX(38%); display: none; text-align: left; padding-bottom: 0;}
+.themeSelect {box-shadow: 0px 2px 1px #00000024; display: inline-block; text-align: center; padding: 0px 10px 8px 10px; margin-right: 10px; transition: 0.4s ease;}
 .showInfo-dropdown-header {padding: 5px 10px; white-space: nowrap; font-weight: bold; font-size: 12px;}
 .showInfo-dropdown-content {padding: 5px 10px}
 .showInfo-dropdown-action {padding: 8px 10px; border-top: 1px solid #ffffff45; color: white; text-decoration: none !important; display: block; margin-top: 5px; border-radius: 0px 0px 10px 10px; font-weight: bold;}
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index 3731315d7..93a6d3256 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -279,6 +279,9 @@ a.stat-box:hover {
 
 .themeBox {background-color:#333;}
 .themeName {color:#ccc;}
+.themeSelect {background-color: #333; box-shadow: none;}
+.themeDefault {background-color: #f9852c;}
+.themeDefault a, .themeDefault span, .themeDefault .themeName{ color:#333;}
 .themeActions A {border-bottom:none;}
 .themeActions span {background-color: #888888;color: #666666;}
 .showInfo-dropdown-header a {color:#3A3A3A}