Design fixes on theme manager, batch manager, add photos and plugin m…

…anager

admin/themes/clear/theme.css

@@ -209,8 +209,6 @@ INPUT[type="text"].large  { width: 317px; }
 .themeBox {background-color:#fafafa; box-shadow: 0px 0px 5px #acacac;}
 .themeName {color:black;}
 .themeActions span {background-color: #ddd;}
-.themeActions a {background-color: #ffc17e; color: #222;}
-.themeActions a:hover {background-color: #ff7700; color: white; text-decoration: none;}
 #themesContent H3 {border-bottom:1px solid #aaa;}
 .themeDefault {}
 
@@ -261,16 +259,27 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
   font-weight: bold;
 }
 
-#batchManagerGlobal #applyFilter {
+#batchManagerGlobal #applyFilter,#batchManagerGlobal .addFilter-button {
   color: #3C3C3C;
   background-color: #ececec;
 }
 
-#batchManagerGlobal #applyFilter:hover {
-  color: white;
+#batchManagerGlobal #applyFilter:hover, #batchManagerGlobal .addFilter-button:hover {
+  color: #111;
+  background-color: #ff9b32 ;
+}
+
+#batchManagerGlobal .addFilter-button.highlight {
+  color: #3C3C3C;
   background-color: #ffc17e;
 }
 
+#batchManagerGlobal .addFilter-button.highlight:hover {
+  background-color: #ff7700;
+  color: white;
+  text-decoration: none;
+}
+
 .slider-info {color:#ff7700;font-weight:bold;}
 
 .selectedComment {background-color:#C2F5C2;}

admin/themes/default/js/batchManagerGlobal.js

@@ -12,6 +12,7 @@ function filter_enable(filter) {
 
   /* hide the no filter message */
   $('.noFilter').hide();
+  $('.addFilter-button').removeClass('highlight');
 }
 
 function filter_disable(filter) {
@@ -27,6 +28,7 @@ function filter_disable(filter) {
   /* show the no filter message if no filter selected */
   if ($('#filterList li:visible').length == 0) {
     $('.noFilter').show();
+    $('.addFilter-button').addClass('highlight');
   }
 
 }

admin/themes/default/template/photos_add_direct.tpl

@@ -312,7 +312,7 @@ jQuery(document).ready(function(){
     </fieldset>
 *}
     <fieldset class="selectFiles">
-      <legend><span class="icon-docs icon-yellow"></span>{'Select files'|@translate}</legend>
+      <legend><span class="icon-file-image icon-yellow"></span>{'Select files'|@translate}</legend>
       <div class="selectFilesButtonBlock">
         <button id="addFiles" class="buttonGradient">{'Add Photos'|translate}<i class="icon-plus-circled"></i></button>
         <div class="selectFilesinfo">

admin/themes/default/template/plugins_installed.tpl

@@ -212,13 +212,13 @@ jQuery(".pluginMiniBox").each(function(index){
       <div class="pluginBoxesTitle">
         <p>
         {if $plugin.STATE == 'active'}
-          {'Active Plugins'|@translate}
+          <span class="icon-purple icon-toggle-on"></span>{'Active Plugins'|@translate}
         {elseif $plugin.STATE == 'inactive'}
-          {'Inactive Plugins'|@translate}
+          <span class="icon-red icon-toggle-off"></span>{'Inactive Plugins'|@translate}
         {elseif $plugin.STATE == 'missing'}
-          {'Missing Plugins'|@translate}
+          <span class="icon-green icon-toggle-off"></span>{'Missing Plugins'|@translate}
         {elseif $plugin.STATE == 'merged'}
-          {'Obsolete Plugins'|@translate}
+          <span class="icon-yellow icon-toggle-off"></span>{'Obsolete Plugins'|@translate}
         {/if}
         </p>
         <div class="pluginBoxesCount">{$count_types_plugins[$plugin.STATE]}</div>

admin/themes/default/template/themes_installed.tpl

@@ -5,6 +5,21 @@ jQuery(document).ready(function() {
   $("a.preview-box").colorbox();
   
   $('.themeBox').each(function() {
+
+    let screenImage = $(this).find(".preview-box img");
+    let size = $(this).find(".preview-box").width();
+
+    let theImage = new Image();
+    theImage.src = screenImage.attr("src");
+
+    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');
+    }
+
     let box = $(this);
     box.find('.showInfo').on('click', function() {
       console.log('click')
@@ -89,9 +104,9 @@ jQuery(document).ready(function() {
         <a href="{$theme.ADMIN_URI}" class="icon-cog">{'Configuration'|@translate}</a>
   {/if}
   {if not $theme.IS_DEFAULT}
-        <a href="{$set_default_baseurl}{$theme.ID}" class="tiptip" title="{'Set as default theme for unregistered and new users'|@translate}">{'Set default'|@translate}</a>
+        <a href="{$set_default_baseurl}{$theme.ID}" class="tiptip" title="{'Set as default theme for unregistered and new users'|@translate}">{'Set as default'|@translate}</a>
   {else}
-        <span class="tiptip" title="{'Theme is already set to default'|@translate}">{'Set default'|@translate}</span>
+        <span class="tiptip" title="{'Theme is already set to default'|@translate}">{'Set as default'|@translate}</span>
   {/if}
 {else}
   {if $theme.ACTIVABLE}

admin/themes/default/template/themes_new.tpl

@@ -1,7 +1,25 @@
 {include file='include/colorbox.inc.tpl'} 
 {footer_script}{literal}
+
 jQuery(document).ready(function() {
   $("a.preview-box").colorbox(); 
+
+  $('.themeBox').each(function() {
+
+    let screenImage = $(this).find(".preview-box img");
+    let size = $(this).find(".preview-box").width();
+
+    let theImage = new Image();
+    theImage.src = screenImage.attr("src");
+
+    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');
+    }
+  })
 }); 
 {/literal}{/footer_script}
 <div class="titrePage">
@@ -11,7 +29,7 @@ jQuery(document).ready(function() {
 {if not empty($new_themes)}
 <div class="themeBoxes">
 {foreach from=$new_themes item=theme name=themes_loop}
-<div class="themeBox">
+<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="themeName" title="{$theme.name}">{$theme.name}</div>
   <div class="themeActions"><a href="{$theme.install_url}">{'Install'|@translate}</a></div>

admin/themes/default/theme.css

@@ -1476,30 +1476,30 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
 #thePopuphelpPage #pwgHead {display:none}
 #thePopuphelpPage #footer  {display:none}
 
-.themeBox {display: inline-table;text-align: center;height: 192px;margin: 0px 0px 15px 15px;overflow: hidden; position: relative;}
-.themeShot a {height: 140px; width: 200px; position: relative; overflow: hidden; display: block;}
+.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%);
-width: 100%;
-max-height: 100%;}
+.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;}
 .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;}
 .showInfo-dropdown-action:hover {background-color: rgba(0, 0, 0, 0.192); color: white;}
-.themeActions {display: flex;flex-direction: column; color: white;}
+.themeActions {display: flex;flex-direction: column;}
 .themeActions DIV {display: table-cell; vertical-align: middle; line-height:18px;}
 .themeActions span, .themeActions a {padding: 6px 5px; margin: 0px 10px 10px 10px; font-weight: bold; font-size: 12px;}
+.themeActions span {font-size: 11px; background-color: #ddd; opacity: 0.5; color: ;}
+
+.themeActions a:nth-child(1) {background-color: #ffc17e; color: #222;}
+.themeActions a:nth-child(1):hover {background-color: #ff7700; color: white; text-decoration: none;}
 
-.themeActions a {background-color: #ffc17e; color: #222;}
-.themeActions a:hover {background-color: #ff7700; color: white; text-decoration: none;}
+.themeActions a:nth-child(2) {background-color: #ececec; color: #222;}
+.themeActions a:nth-child(2):hover {background-color: #ff9b32; color: #111; text-decoration: none;}
 
 #themesContent H3 {font-size:16px; text-align:left; border-bottom:1px solid #444; letter-spacing:1px; margin:5px;}
 .themeBoxes {min-height:0;text-align:left;}
@@ -1605,7 +1605,7 @@ h2:lang(en) { text-transform:capitalize; }
 
 .pluginBoxesTitle {font-size: 16px;}
 .pluginBoxesTitle p {margin-right: 10px;}
-
+.pluginBoxesTitle span {border-radius: 50%; margin-right: 5px; padding: 4px}
 
 .pluginBoxesTitle {display: flex;align-items: center}
 .pluginFilter {justify-content: end;position: absolute;right: 20px; z-index: 2; transform: translateY(6px);}
@@ -1710,7 +1710,7 @@ h2:lang(en) { text-transform:capitalize; }
   background-color: #ececec;
 }
 .plugin-inactive .pluginContent .pluginActionLevel1:hover{
-  background-color:#ffc17e;
+  background-color:#ff9b32;
 }
 
 .pluginMiniBox .PluginOptionsIcons,
@@ -1888,7 +1888,7 @@ LEGEND SPAN {
   list-style-type:none;
   background-color: #fafafa;
   padding: 10px;
-  margin: 0px 5px 10px 5px;
+  margin: 0px 10px 10px 0px;
   box-shadow: 0px 2px 1px #00000024;
   border-radius: 5px;
   position: relative;
@@ -1945,27 +1945,6 @@ LEGEND SPAN {
   margin-right: 10px;
 }
 
-.filterActions .addFilter-button {
-  margin-left: 0;
-  float: left;
-  height: 45.6px;
-  font-size: 1em;
-  border: none;
-  cursor: pointer;
-  transition: ease 0.2s;
-  background-color: #ff9b32;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  padding: 0px 8px;
-  color: white;
-  justify-content: center;
-}
-
-.filterActions .addFilter-button:hover {
-background-color: #ff7700
-}
-
 .addFilter-dropdown {
   z-index: 100;
   padding: 5px 0px;
@@ -4035,7 +4014,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 #filter_tags .selectize-control.multi.plugin-remove_button {width: 300px !important;}
 #filter_category .selectize-input.items.full.has-options.has-items {padding: 10px 18px; width: 610px; margin-bottom: 5px;}
 #filterList .selectize-input.items.not-full.has-options {margin-bottom: 5px;}
-#applyFilter {margin-left: 0;float: left;height: 45.6px;font-size: 1em;border: none;cursor: pointer;transition: ease 0.2s;display: flex;align-items: center;justify-content: center;}
+#applyFilter, .addFilter-button {margin-left: 0;float: left;height: 45.6px;font-size: 1em;border: none;cursor: pointer;transition: ease 0.2s;display: flex;align-items: center;justify-content: center; padding: 0px 10px;}
 #applyFilter.activated {background-color: #FFA646; color: #3C3C3C;}
 #removeFilters {margin-top: 20px; margin-left: 13px;}
 .filter_search_input {padding: 10px 0px; width: 300px;}
@@ -4067,7 +4046,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 #filter_level::before {margin-top: 34px; margin-left: 260px;}
 #action_level::after {margin-top: -56px; margin-left: 254px;}
 #filter_search input {width: 300px; box-sizing: border-box; padding: 11px 18px;}
-#applyFilter,#filterList select, #filter_tags .selectize-input.items.not-full.has-options, .pictureLevels select, #permitAction select{
+#applyFilter, #addFilter,#filterList select, #filter_tags .selectize-input.items.not-full.has-options, .pictureLevels select, #permitAction select{
 	font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
 	-webkit-appearance: none;
 	font-weight: 700;