#1467 Plugin download page general redesign

Implements the new general design (thanks to Clement's and Jule's mockup)
Allows the display or the hiding of non-compatible plugins
Add advanced filters in the page (harmonization with the advanced filters in the user manager)
Add the display of a screenshot, the rating and the tags for each plugins
Add Piwigo's Certification levels for each plugins
Add the file admin/themes/default/css/components/general.css to save css compnents that will be used in diffenrent places in the admin

admin/include/plugins.class.php

@@ -376,7 +376,7 @@ DELETE FROM '. PLUGINS_TABLE .'
   }
 
   // Retrieve PEM versions
-  function get_versions_to_check($version=PHPWG_VERSION)
+  function get_versions_to_check($beta_test=false, $version=PHPWG_VERSION)
   {
     global $conf;
 
@@ -384,30 +384,66 @@ DELETE FROM '. PLUGINS_TABLE .'
     $url = PEM_URL . '/api/get_version_list.php?category_id='. $conf['pem_plugins_category'] .'&format=php';
     if (fetchRemote($url, $result) and $pem_versions = @unserialize($result))
     {
-      if (!preg_match('/^\d+\.\d+\.\d+$/', $version))
+      $i = 0;
+
+      // If the actual version exist, put the PEM id in $versions_to_check
+      while ($i < count($pem_versions) && count($versions_to_check) == 0) 
       {
-        $version = $pem_versions[0]['name'];
+        if (get_branch_from_version($pem_versions[$i]['name']) == get_branch_from_version($version))
-      }
-      $branch = get_branch_from_version($version);
-      foreach ($pem_versions as $pem_version)
-      {
-        if (strpos($pem_version['name'], $branch) === 0)
         {
-          $versions_to_check[] = $pem_version['id'];
+          $versions_to_check[] = $pem_versions[$i]['id'];
+        }
+        $i++;
+      }
+
+      // If $beta_test is true, search the previous version
+      if ($beta_test) 
+      {
+        // If the actual version is not in PEM, put the latest PEM version
+        if (count($versions_to_check) == 0)
+        {
+          $versions_to_check[] = $pem_versions[0]['id'];
+        } 
+        else // Else search the next version in PEM 
+        {
+          $has_found_previous_version = false;
+          while ($i < count($pem_versions) && !$has_found_previous_version)
+          {
+            if ($pem_versions[$i]['id'] != $versions_to_check[0])
+            {
+              $versions_to_check[] = $pem_versions[$i]['id'];
+              $has_found_previous_version = true;
+            }
+            $i++;
+          }  
         }
       }
+
+      // if (!preg_match('/^\d+\.\d+\.\d+$/', $version))
+      // {
+      //   $version = $pem_versions[0]['name'];
+      // }
+      // $branch = get_branch_from_version($version);
+      // foreach ($pem_versions as $pem_version)
+      // {
+      //   if (strpos($pem_version['name'], $branch) === 0)
+      //   {
+      //     $versions_to_check[] = $pem_version['id'];
+      //   }
+      // }
     }
     return $versions_to_check;
   }
 
   /**
    * Retrieve PEM server datas to $server_plugins
+   * $beta_test parameter add plugins compatible with the previous version
    */
-  function get_server_plugins($new=false)
+  function get_server_plugins($new=false, $beta_test=false)
   {
     global $user, $conf;
 
-    $versions_to_check = $this->get_versions_to_check();
+    $versions_to_check = $this->get_versions_to_check($beta_test);
     if (empty($versions_to_check))
     {
       return false;
@@ -424,7 +460,7 @@ DELETE FROM '. PLUGINS_TABLE .'
     }
 
     // Retrieve PEM plugins infos
-    $url = PEM_URL . '/api/get_revision_list.php';
+    $url = PEM_URL . '/api/get_revision_list-next.php';
     $get_data = array(
       'category_id' => $conf['pem_plugins_category'],
       'format' => 'php',

admin/include/themes.class.php

@@ -509,7 +509,7 @@ SELECT
     }
 
     // Retrieve PEM themes infos
-    $url = PEM_URL . '/api/get_revision_list.php';
+    $url = PEM_URL . '/api/get_revision_list-next.php';
     $get_data = array_merge($get_data, array(
       'last_revision_only' => 'true',
       'version' => implode(',', $versions_to_check),

admin/plugins_new.php

@@ -81,7 +81,15 @@ $template->assign('order_options',
 // +-----------------------------------------------------------------------+
 // |                     start template output                             |
 // +-----------------------------------------------------------------------+
-if ($plugins->get_server_plugins(true))
+
+$beta_test = false;
+
+if(isset($_GET['beta-test']) && $_GET['beta-test'] == 'true') 
+{
+  $beta_test = true;
+}
+
+if ($plugins->get_server_plugins(true, $beta_test))
 {
   /* order plugins */
   if (pwg_get_session_var('plugins_new_order') != null)
@@ -107,6 +115,27 @@ if ($plugins->get_server_plugins(true))
       . '&pwg_token='.get_pwg_token()
     ;
 
+    $last_revision_diff = date_diff(date_create($plugin['revision_date']), date_create());
+
+    $certification = 1;
+
+    if (get_branch_from_version($plugin['compatible_with_versions'][0]) !== get_branch_from_version(PHPWG_VERSION)) 
+    {
+      $certification = -1;
+    } 
+    elseif ($last_revision_diff->days < 90)
+    {
+      $certification = 3;
+    }
+    elseif ($last_revision_diff->days < 180) 
+    {
+      $certification = 2;
+    }
+    elseif ($last_revision_diff->y > 3)
+    {
+      $certification = 0;
+    }
+
     $template->append('plugins', array(
       'ID' => $plugin['extension_id'],
       'EXT_NAME' => $plugin['extension_name'],
@@ -114,12 +143,21 @@ if ($plugins->get_server_plugins(true))
       'SMALL_DESC' => trim($small_desc, " \r\n"),
       'BIG_DESC' => $ext_desc,
       'VERSION' => $plugin['revision_name'],
-      'REVISION_DATE' => preg_replace('/[^0-9]/', '', $plugin['revision_date']),
+      'REVISION_DATE' => preg_replace('/[^0-9]/', '', strtotime($plugin['revision_date'])),
       'AUTHOR' => $plugin['author_name'],
       'DOWNLOADS' => $plugin['extension_nb_downloads'],
       'URL_INSTALL' => $url_auto_install,
-      'URL_DOWNLOAD' => $plugin['download_url'] . '&amp;origin=piwigo_download'));
+      'CERTIFICATION' => $certification,
+      'RATING' => $plugin['rating_score'],
+      'NB_RATINGS' => $plugin['nb_ratings'],
+      'SCREENSHOT' => (key_exists('screenshot_url', $plugin)) ? $plugin['screenshot_url']:'',
+      'TAGS' => $plugin["tags"],
+    ));
+
+    $template->assign('BETA_TEST', $beta_test);
   }
+
+  
 }
 else
 {

admin/themes/clear/theme.css

@@ -212,10 +212,8 @@ INPUT[type="text"].large  { width: 317px; }
 #pwgHead A:hover, #footer A:hover {color:white;}
 
 .AlbumViewSelector {background: #fafafa;}
-.pluginBox, .pluginMiniBox {background-color:#ddd;color:#353535;border-color:#ddd;}
+.pluginName {color:#111;}
-.pluginBoxNameCell, .pluginMiniBoxNameCell {color:#111;}
+.pluginBox.incompatible {border-color:#a00 !important;}
-.pluginBox.incompatible, .pluginMiniBox.incompatible {border-color:#a00 !important;}
-.pluginBoxes .merged, .pluginBoxes .missing  {background-color:#d99;border:1px solid #a00;}
 
 .languageBox {background-color:#ddd;}
 .languageName {color:black;}
@@ -673,7 +671,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 .addFilesButtonChanged:hover {background-color: #BBB;}
 
 #checkActions a, .deleteDerivButtons a {background-color: #E8E8E8;}
-#filterList select, .pictureLevels select, #permitAction select {background-color: #FFF; color: #4E4E4E; border: 2px solid #7070704f !important; outline: none !important;}
+#filterList select, .pictureLevels select, #permitAction select, .sort-by select {background-color: #FFF; color: #4E4E4E; border: 2px solid #7070704f !important; outline: none !important;}
 #filter_category .selectize-input.items.full.has-options.has-items, #filter_tags .selectize-input.items.not-full.has-options,
 #filter_tags .selectize-input.items.not-full, #filter_search input, #action_associate .selectize-input.items.full.has-options.has-items,
 #action_dissociate .selectize-input.items.full.has-options.has-items {

admin/themes/default/css/components/general.css

@@ -0,0 +1,147 @@
+/* -------------
+Advanced filter 
+------------- 
+ 
+.advanced-filter-btn.icon-filter(.advanced-filter-open)
+...
+.advanced-filter(.advanced-filter-open)
+    .advanced-filter-header
+        .advanced-filter-title
+        .advanced-filter-close.icon-cancel
+    .advanced-filter-container
+        .advanced-filter-item
+            .advanced-filter-item-label
+            .advanced-filter-item-container
+                // Put here your filter
+        ...
+*/
+
+.advanced-filter-btn {
+    width: 70px;
+    z-index: 2;
+    position: relative;
+    cursor: pointer;
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    background-color: #F3F3F3;
+}
+
+.advanced-filter-btn::before { /* Change icon size */
+  font-size: 14px;
+}
+
+.advanced-filter-btn.advanced-filter-open::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 16px;
+  background-color: inherit;
+  bottom: -16px;
+  left: 0;
+  position: absolute;
+}
+
+.advanced-filter {
+    display: none;
+    padding: 15px;
+    font-size: 1em;
+    flex-direction: column;
+
+    background-color: #F3F3F3;
+}
+
+.advanced-filter.advanced-filter-open {
+    display: flex;
+}
+
+.advanced-filter-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.advanced-filter-title {
+    font-weight: bold;
+
+    color: #3e3e3e;
+}
+
+.advanced-filter-close {
+    font-size: 1.8em;
+    color: #C5C5C5;
+    cursor: pointer;
+}
+
+.advanced-filter-close:hover {
+    color: #ff7700;
+}
+
+.advanced-filter-container {
+    display: flex;
+}
+
+.advanced-filter-item:not(:last-child) {
+    margin-right: 30px;
+}
+
+.advanced-filter-item-label {
+    text-align: left;
+    display: flex;
+    margin-bottom: 5px;
+
+    color:#3e3e3e;
+}
+
+.advanced-filter-item-container {
+    position: relative;
+    text-align: left;
+    width: 100%;
+}
+
+/* Set Margin if the last element is a slider */
+.advanced-filter-item:last-child .advanced-filter-item-container .slider-bar-wrapper {
+    margin-right: 10px;
+}
+
+/* -------------
+Advanced filter Select 
+------------- 
+
+.advanced-filter-select-container
+    select.advanced-filter-select 
+
+or (generated by selectize.js)
+
+.advanced-filter-item-container 
+    .selectize-control 
+        .selectize-input
+*/
+
+.user-action-select-container::before, .advanced-filter-select-container::before {
+  content: '\e835'; font-size: 14px; position: absolute; font-family: "fontello"; color: #6E6E6E; pointer-events: none;
+}
+
+.advanced-filter-select-container::before {
+    top: 8px; right:10px
+}
+
+.advanced-filter-select {
+    display: block;
+    border: solid 1px #D4D4D4;
+    padding: 8px 10px;
+    height: 34px;
+    background: white;
+}
+
+.advanced-filter-item-container .selectize-control .selectize-input {
+    border: solid 1px #D4D4D4 !important;
+    padding: 8px 10px !important;
+    height: 34px;
+    background: white !important;
+    box-shadow: none !important;
+}
+
+.advanced-filter-item-container .selectize-control .selectize-input .item {
+    padding-right: 0 !important;
+}

admin/themes/default/images/certification/Certification.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="45.746754"
+   height="72.061806"
+   viewBox="0 0 12.103829 19.066352"
+   version="1.1"
+   id="svg14427"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14424" />
+  <g
+     id="layer1"
+     transform="translate(-44.571001,-119.90368)"
+     style="fill:#000000;fill-opacity:1">
+    <path
+       id="path11018"
+       style="fill:#000000;fill-opacity:1;stroke-width:0.0887824"
+       class="cls-2"
+       d="m 54.457973,119.90368 c -1.374746,0.031 -1.272563,0.81873 -4.359689,0.83804 h -1.340617 c -0.02415,1e-4 -0.376483,-5.3e-4 -0.203744,0 h -0.775965 a 3.2068395,3.2068395 0 0 0 -3.206957,3.20696 v 5.68991 a 3.2068395,3.2068395 0 0 0 2.701652,3.157 v 5.6355 a 0.53894602,0.53894602 0 0 0 0.808416,0.46674 l 1.733338,-1.00086 a 1.6168338,1.6168338 0 0 1 1.616926,0 l 1.733428,1.00086 a 0.53894928,0.53894928 0 0 0 0.808418,-0.46674 v -5.6355 a 3.2068395,3.2068395 0 0 0 2.701651,-3.157 v -7.53474 l -0.0024,-0.005 c 9.5e-5,-0.009 7.07e-4,-0.018 7.07e-4,-0.0271 0,-1.20088 -1.014247,-2.1679 -2.215125,-2.1679 z m 0.04804,1.3727 a 0.75971554,0.75971554 0 0 1 0.759645,0.75965 0.75971554,0.75971554 0 0 1 -0.759645,0.75964 0.75971554,0.75971554 0 0 1 -0.759645,-0.75964 0.75971554,0.75971554 0 0 1 0.759645,-0.75965 z m -3.88319,1.92806 a 3.5891384,3.5891384 0 0 1 3.589287,3.58911 3.5891384,3.5891384 0 0 1 -3.589287,3.5891 3.5891384,3.5891384 0 0 1 -3.589106,-3.5891 3.5891384,3.5891384 0 0 1 3.589106,-3.58911 z m 0,1.04808 a 2.5412337,2.5412337 0 0 0 -2.541299,2.54121 2.5412337,2.5412337 0 0 0 2.541299,2.54121 2.5412337,2.5412337 0 0 0 2.541208,-2.54121 2.5412337,2.5412337 0 0 0 -2.541208,-2.54121 z" />
+  </g>
+</svg>

admin/themes/default/images/certification/CertificationBlue.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="45.746754"
+   height="72.061806"
+   viewBox="0 0 12.103829 19.066352"
+   version="1.1"
+   id="svg14427"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14424" />
+  <g
+     id="layer1"
+     transform="translate(-44.571001,-119.90368)"
+     style="fill:#2883c3;fill-opacity:1">
+    <path
+       id="path11018"
+       style="fill:#2883c3;fill-opacity:1;stroke-width:0.0887824"
+       class="cls-2"
+       d="m 54.457973,119.90368 c -1.374746,0.031 -1.272563,0.81873 -4.359689,0.83804 h -1.340617 c -0.02415,1e-4 -0.376483,-5.3e-4 -0.203744,0 h -0.775965 a 3.2068395,3.2068395 0 0 0 -3.206957,3.20696 v 5.68991 a 3.2068395,3.2068395 0 0 0 2.701652,3.157 v 5.6355 a 0.53894602,0.53894602 0 0 0 0.808416,0.46674 l 1.733338,-1.00086 a 1.6168338,1.6168338 0 0 1 1.616926,0 l 1.733428,1.00086 a 0.53894928,0.53894928 0 0 0 0.808418,-0.46674 v -5.6355 a 3.2068395,3.2068395 0 0 0 2.701651,-3.157 v -7.53474 l -0.0024,-0.005 c 9.5e-5,-0.009 7.07e-4,-0.018 7.07e-4,-0.0271 0,-1.20088 -1.014247,-2.1679 -2.215125,-2.1679 z m 0.04804,1.3727 a 0.75971554,0.75971554 0 0 1 0.759645,0.75965 0.75971554,0.75971554 0 0 1 -0.759645,0.75964 0.75971554,0.75971554 0 0 1 -0.759645,-0.75964 0.75971554,0.75971554 0 0 1 0.759645,-0.75965 z m -3.88319,1.92806 a 3.5891384,3.5891384 0 0 1 3.589287,3.58911 3.5891384,3.5891384 0 0 1 -3.589287,3.5891 3.5891384,3.5891384 0 0 1 -3.589106,-3.5891 3.5891384,3.5891384 0 0 1 3.589106,-3.58911 z m 0,1.04808 a 2.5412337,2.5412337 0 0 0 -2.541299,2.54121 2.5412337,2.5412337 0 0 0 2.541299,2.54121 2.5412337,2.5412337 0 0 0 2.541208,-2.54121 2.5412337,2.5412337 0 0 0 -2.541208,-2.54121 z" />
+  </g>
+</svg>

admin/themes/default/images/certification/CertificationGhost.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64.861732"
+   height="65.720177"
+   viewBox="0 0 17.161334 17.388463"
+   version="1.1"
+   id="svg14427"
+   sodipodi:docname="ghost.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="6.6332529"
+     inkscape:cx="56.759482"
+     inkscape:cy="36.935121"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14427" />
+  <defs
+     id="defs14424" />
+  <path
+     id="path2"
+     style="fill:#acacac;fill-opacity:1;stroke-width:0.0762726"
+     d="M 12.094073,0 C 10.726372,0.03084165 10.824171,0.81277311 7.7670868,0.83542439 H 6.2642761 c 0.020075,1.3789e-4 -0.2266159,-3.1689e-4 -0.1282594,0 h -0.702841 c -0.4199119,0 -0.8356949,0.0827132 -1.2236405,0.24341701 C 3.8215814,1.2395337 3.4690358,1.4750785 3.1721074,1.7720004 2.8751843,2.0689302 2.6396407,2.4214745 2.4789485,2.8094283 2.3182497,3.1973741 2.2355315,3.6131571 2.2355315,4.0330691 v 4.641909 C 1.8894314,15.435237 0.23342124,14.363047 0.02243034,15.924462 c -0.22132,1.637728 1.23934546,1.901422 2.43447156,0.39641 0.3495808,-0.440171 0.9738218,-1.327908 2.3017365,0 0.3078291,0.307836 1.416356,1.547159 2.213101,0.354102 1.2784834,-1.914522 2.3017317,-1.062326 2.8772097,0 0.5754009,1.062326 1.5935139,1.060287 2.6558399,-0.843023 1.062327,-1.903386 2.122178,0.577441 2.788574,0.843023 1.327906,0.52918 2.390277,-0.531111 1.593532,-2.036125 -0.391812,-0.739997 -0.841045,-0.796838 -1.726266,-2.611595 -0.583028,-1.195116 -0.841086,-2.6569901 -0.841086,-3.939515 0,-0.1070574 -0.006,-0.2086055 -0.01505,-0.3076237 V 2.1937342 l -0.0024,-0.00504 c 1.52e-4,-0.00901 7.49e-4,-0.017927 7.49e-4,-0.026957 C 14.30282,0.96431718 13.291446,3.146e-5 12.09404,3.146e-5 Z m 0.04783,1.3687371 c 0.418356,0 0.757365,0.3391429 0.757365,0.757514 0,0.4183713 -0.339009,0.7575128 -0.757365,0.7575128 -0.418432,0 -0.757513,-0.3391415 -0.757513,-0.7575128 0,-0.4183711 0.339081,-0.757514 0.757513,-0.757514 z M 8.2700164,3.2910488 c 1.9765316,0 3.5787106,1.6023128 3.5787106,3.5788585 0,1.9765312 -1.602179,3.5787097 -3.5787106,3.5787097 -1.9765312,0 -3.5788587,-1.6021785 -3.5788587,-3.5787097 0,-1.9765457 1.6023275,-3.5788585 3.5788587,-3.5788585 z m -1.522e-4,1.0450256 c -1.3994528,0 -2.5339828,1.13442 -2.5339828,2.5338329 0,1.3994514 1.13453,2.5339828 2.5339828,2.5339828 1.3994514,0 2.5338328,-1.1345314 2.5338328,-2.5339828 0,-1.3994129 -1.1343814,-2.5338329 -2.5338328,-2.5338329 z" />
+</svg>

admin/themes/default/images/certification/CertificationOrange.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="45.746754"
+   height="72.061806"
+   viewBox="0 0 12.103829 19.066352"
+   version="1.1"
+   id="svg14427"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14424" />
+  <g
+     id="layer1"
+     transform="translate(-44.571001,-119.90368)"
+     style="fill:#ffa744;fill-opacity:1">
+    <path
+       id="path11018"
+       style="fill:#ffa744;fill-opacity:1;stroke-width:0.0887824"
+       class="cls-2"
+       d="m 54.457973,119.90368 c -1.374746,0.031 -1.272563,0.81873 -4.359689,0.83804 h -1.340617 c -0.02415,1e-4 -0.376483,-5.3e-4 -0.203744,0 h -0.775965 a 3.2068395,3.2068395 0 0 0 -3.206957,3.20696 v 5.68991 a 3.2068395,3.2068395 0 0 0 2.701652,3.157 v 5.6355 a 0.53894602,0.53894602 0 0 0 0.808416,0.46674 l 1.733338,-1.00086 a 1.6168338,1.6168338 0 0 1 1.616926,0 l 1.733428,1.00086 a 0.53894928,0.53894928 0 0 0 0.808418,-0.46674 v -5.6355 a 3.2068395,3.2068395 0 0 0 2.701651,-3.157 v -7.53474 l -0.0024,-0.005 c 9.5e-5,-0.009 7.07e-4,-0.018 7.07e-4,-0.0271 0,-1.20088 -1.014247,-2.1679 -2.215125,-2.1679 z m 0.04804,1.3727 a 0.75971554,0.75971554 0 0 1 0.759645,0.75965 0.75971554,0.75971554 0 0 1 -0.759645,0.75964 0.75971554,0.75971554 0 0 1 -0.759645,-0.75964 0.75971554,0.75971554 0 0 1 0.759645,-0.75965 z m -3.88319,1.92806 a 3.5891384,3.5891384 0 0 1 3.589287,3.58911 3.5891384,3.5891384 0 0 1 -3.589287,3.5891 3.5891384,3.5891384 0 0 1 -3.589106,-3.5891 3.5891384,3.5891384 0 0 1 3.589106,-3.58911 z m 0,1.04808 a 2.5412337,2.5412337 0 0 0 -2.541299,2.54121 2.5412337,2.5412337 0 0 0 2.541299,2.54121 2.5412337,2.5412337 0 0 0 2.541208,-2.54121 2.5412337,2.5412337 0 0 0 -2.541208,-2.54121 z" />
+  </g>
+</svg>

admin/themes/default/images/certification/CertificationWarning.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="45.613075"
+   height="49.295925"
+   viewBox="0 0 12.06846 13.042879"
+   version="1.1"
+   id="svg14427"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14424" />
+  <g
+     id="layer1"
+     transform="translate(-51.823864,-123.68477)"
+     style="fill:#ff5252;fill-opacity:1">
+    <path
+       id="path825"
+       style="fill:#ff5252;fill-opacity:1;stroke-width:0.0749591"
+       d="m 61.674738,123.68477 c -1.082895,0.0248 -1.247155,0.52689 -2.772666,0.74953 h -3.880731 c -0.4199,0 -0.835626,0.0843 -1.223564,0.24796 -0.387937,0.16368 -0.74041,0.40359 -1.037323,0.70604 -0.296913,0.30245 -0.532499,0.66158 -0.693191,1.05674 -0.160689,0.39517 -0.243399,0.81869 -0.243399,1.24645 v 5.77907 c 0,0.86383 0.336947,1.69233 0.93659,2.30309 0.599645,0.61085 1.412866,0.954 2.260887,0.954 h 5.673322 c 0.419923,0 0.83567,-0.0842 1.223658,-0.24786 0.387987,-0.16364 0.7405,-0.40359 1.037413,-0.70605 0.296989,-0.30245 0.532476,-0.66155 0.693189,-1.05674 0.160713,-0.39518 0.2434,-0.81865 0.2434,-1.24644 v -7.58114 -0.0717 l -0.0019,-0.004 c -0.04108,-1.18579 -1.038452,-2.1288 -2.215675,-2.1288 z m 0.04376,1.42421 c 0.413999,0 0.749616,0.33564 0.749616,0.74962 0,0.41399 -0.335617,0.74953 -0.749616,0.74953 -0.414,0 -0.74962,-0.33554 -0.74962,-0.74953 0,-0.41398 0.33562,-0.74962 0.74962,-0.74962 z m -5.008303,1.49933 c 0.04527,-5.3e-4 0.09009,0.002 0.13419,0.008 h 2.055409 c 0.180131,0 0.346499,0.0678 0.471121,0.17895 7.4e-5,9e-5 1.76e-4,1.8e-4 3.53e-4,3.5e-4 v -1.7e-4 c 0.306372,0.20993 0.464709,0.5935 0.371755,0.96986 l -0.940509,3.80899 c -0.09032,0.36569 -0.393385,0.62863 -0.749619,0.68608 -0.0152,0.005 -0.03052,0.009 -0.04586,0.0134 -0.49186,0.13043 -1.000315,-0.16107 -1.131858,-0.64698 l -1.046711,-3.86669 h 7.5e-5 c -0.131283,-0.48496 0.162508,-0.99014 0.653534,-1.12037 0.07606,-0.0202 0.15272,-0.0304 0.228175,-0.0314 z m 1.035498,6.44637 c 0.786547,0 1.42421,0.63766 1.42421,1.42421 0,0.78655 -0.637663,1.42421 -1.42421,1.42421 -0.786547,0 -1.424211,-0.63766 -1.424211,-1.42421 0,-0.78655 0.637664,-1.42421 1.424211,-1.42421 z" />
+  </g>
+</svg>

admin/themes/default/js/plugins_installated.js

@@ -6,7 +6,7 @@ function setDisplayClassic() {
     $(".pluginActions").show();
     $(".pluginActionsSmallIcons").hide();
 
-    $(".pluginMiniBoxNameCell").removeClass("pluginMiniBoxNameCellCompact");
+    $(".pluginName").removeClass("pluginNameCompact");
 
     // normalTitle();
 }
@@ -19,7 +19,7 @@ function setDisplayCompact() {
     $(".pluginActions").hide();
     $(".pluginActionsSmallIcons").show();
 
-    $(".pluginMiniBoxNameCell").addClass("pluginMiniBoxNameCellCompact");
+    $(".pluginName").addClass("pluginNameCompact");
 
     // reduceTitle()
 }
@@ -35,7 +35,7 @@ function setDisplayLine() {
 }
 
 function reduceTitle() {
-    var x = document.getElementsByClassName("pluginMiniBoxNameCell");
+    var x = document.getElementsByClassName("pluginName");
     var length = 22;
 
     for (const div of x) {
@@ -51,7 +51,7 @@ function reduceTitle() {
 }
 
 function normalTitle() {
-    var x = document.getElementsByClassName("pluginMiniBoxNameCell");
+    var x = document.getElementsByClassName("pluginName");
 
     for (const div of x) {
         div.innerHTML = div.dataset.title
@@ -277,13 +277,13 @@ $(document).ready(function () {
 
 
     $("#seeAll").on("change", function () {
-        $(".pluginMiniBox").show();
+        $(".pluginBox").show();
         $('.search-input').trigger("input");
     })
 
     $("#seeActive").on("change", function () {
-        $(".pluginMiniBox").show();
+        $(".pluginBox").show();
-        $(".pluginMiniBox").each(function () {
+        $(".pluginBox").each(function () {
             if (!$(this).hasClass("plugin-active")) {
                 $(this).hide();
             }
@@ -292,8 +292,8 @@ $(document).ready(function () {
     })
 
     $("#seeInactive").on("change", function () {
-        $(".pluginMiniBox").show();
+        $(".pluginBox").show();
-        $(".pluginMiniBox").each(function () {
+        $(".pluginBox").each(function () {
             if (!$(this).hasClass("plugin-inactive")) {
                 $(this).hide();
             }
@@ -302,8 +302,8 @@ $(document).ready(function () {
     })
 
     $("#seeOther").on("change", function () {
-        $(".pluginMiniBox").show();
+        $(".pluginBox").show();
-        $(".pluginMiniBox").each(function () {
+        $(".pluginBox").each(function () {
             if (($(this).hasClass("plugin-active") || $(this).hasClass("plugin-inactive"))) {
                 $(this).hide();
             }
@@ -360,7 +360,7 @@ $(document).ready(function () {
      * Delete
      */
     $(".pluginContent").find('.dropdown-option.delete-plugin-button').on('click', function () {
-        let plugin_name = $(this).closest(".pluginContent").find(".pluginMiniBoxNameCell").html().trim();
+        let plugin_name = $(this).closest(".pluginContent").find(".pluginName").html().trim();
         let plugin_id = $(this).closest(".pluginContent").parent().attr("id");
         $.confirm({
           title: delete_plugin_msg.replace("%s",plugin_name),
@@ -384,7 +384,7 @@ $(document).ready(function () {
        * Restore
        */
       $(".pluginContent").find('.dropdown-option.plugin-restore').on('click', function () {
-        let plugin_name = $(this).closest(".pluginContent").find(".pluginMiniBoxNameCell").html().trim();
+        let plugin_name = $(this).closest(".pluginContent").find(".pluginName").html().trim();
         let plugin_id = $(this).closest(".pluginContent").parent().attr("id");
         $.confirm({
           title: restore_plugin_msg.replace('%s', plugin_name),
@@ -408,7 +408,7 @@ $(document).ready(function () {
        * Uninstall
        */
       $(".pluginContent").find('.uninstall-plugin-button').on('click', function () {
-        let plugin_name = $(this).closest(".pluginContent").find(".pluginMiniBoxNameCell").html().trim();
+        let plugin_name = $(this).closest(".pluginContent").find(".pluginName").html().trim();
         let plugin_id = $(this).closest(".pluginContent").parent().attr("id");
         $.confirm({
           title: uninstall_plugin_msg.replace('%s', plugin_name),

admin/themes/default/js/plugins_new.js

@@ -0,0 +1,297 @@
+var sortOrder = 'date';
+var sortPlugins = (function (a, b) {
+    if (sortOrder == 'downloads' || sortOrder == 'revision' || sortOrder == 'date')
+        return parseInt($(a).data(sortOrder))
+            < parseInt($(b).data(sortOrder)) ? 1 : -1;
+    else
+        return $(a).data(sortOrder).toLowerCase()
+            > $(b).data(sortOrder).toLowerCase() ? 1 : -1;
+});
+
+$(function () {
+
+    let betaTestPlugins = $('#showBetaTestPlugin')[0].hasAttribute('checked');
+    let filters = {};
+
+    $(".advanced-filter-btn").click(advanced_filter_button_click);
+    $(".advanced-filter span.icon-cancel").click(advanced_filter_hide);
+
+    function advanced_filter_button_click() {
+        if (!$(".advanced-filter").hasClass("advanced-filter-open")) {
+            advanced_filter_show();
+        } else {
+            advanced_filter_hide();
+        }
+    }
+
+    function advanced_filter_show() {
+        $(".advanced-filter-btn, .advanced-filter").addClass("advanced-filter-open");
+    }
+
+    function advanced_filter_hide() {
+        $(".advanced-filter-btn, .advanced-filter").removeClass("advanced-filter-open");
+    }
+
+    jQuery('select[name="selectOrder"]').change(function () {
+        sortOrder = this.value;
+        $('.pluginBox').sortElements(sortPlugins);
+        $.get("admin.php?plugins_new_order=" + sortOrder);
+    });
+
+    jQuery('#search').on("input", function () {
+        applyFilter('search', this.value.toUpperCase());
+        jQuery("#search").trigger("click");
+    });
+
+    $('.search-cancel').on('click', () => {
+        applyFilter('search', '');
+    })
+
+    $(".buttonInstall").each(function () {
+        let plugin_name = $(this).closest(".pluginBox").data('name');
+        $(this).pwg_jconfirm_follow_href({
+            alert_title: str_install_title.replace("%s", plugin_name),
+            alert_confirm: str_confirm_msg,
+            alert_cancel: str_cancel_msg
+        });
+    });
+
+    jQuery('.certification').tipTip({
+        'delay': 0,
+        'fadeIn': 200,
+        'fadeOut': 200
+    });
+
+    $('.pluginRating').each((i, node) => {
+        let ratingContainer = $(node);
+        let rating = ratingContainer.data('rating');
+        displayStars(ratingContainer.find('.rating-star-container'), rating);
+    })
+
+    let authorNames = [{ value: '', text: str_all }];
+    let tagsNames = [{ value: '', text: str_all }]
+    
+    $('.pluginBox').each((i,el) => {
+        let author = $(el).data('author');
+        author.split(', ').forEach(name => {
+            if (!authorNames.find(el => el.value == name)) {
+                authorNames.push({ value: name, text: name})
+            }
+        });
+
+        let tags = $(el).data('tags');
+        tags.split(', ').forEach(tag => {
+            if (!tagsNames.find(el => el.value == tag)) {
+                tagsNames.push({ value: tag, text: tag })
+            }
+        });
+    })
+
+    // initialize the Selectize control
+    $select = $('#author-filter').selectize({
+        onChange: function (value) {
+            applyFilter('author', value);
+        },
+        plugins: ['remove_button'],
+    });
+
+    // fetch the instance
+    let selectizeAuthor = $select[0].selectize;
+    selectizeAuthor.addOption(authorNames);
+
+    // initialize the Selectize control
+    $select = $('#tag-filter').selectize({
+        onChange: function (value) {
+            applyFilter('tag', value);
+        },
+        plugins: ['remove_button'],
+    });
+
+    // fetch the instance
+    let selectizeTag = $select[0].selectize;
+    selectizeTag.addOption(tagsNames);
+
+    $('.notation-filter-slider').slider({
+        range: 'min',
+        value: 0,
+        min: 0,
+        max: 5,
+        step: 0.5,
+        slide: function(event, ui) {
+            updateRatingFilterLabel(ui.value);
+            applyFilter("rating", ui.value);
+        }
+    })
+
+    $('.revision-date-filter-slider').slider({
+        range: 'min',
+        value: 0,
+        min: 0,
+        max: 6,
+        slide: function (event, ui) {
+            let month;
+            [month, _] = value_to_month(ui.value);
+            updateRevisionFilterLabel(ui.value);
+            applyFilter("revision", month);
+        }
+    });
+
+    function value_to_month(val) {
+        switch (val) {
+            case 6:
+                return [1, str_x_month.replace('%d', 1)];
+                break;
+            case 5:
+                return [3, str_x_months.replace('%d', 3)];
+                break;
+            case 4:
+                return [6, str_x_months.replace('%d', 6)];
+                break;
+            case 3:
+                return [12, str_x_year.replace('%d', 1)];
+                break;
+            case 2:
+                return [24, str_x_years.replace('%d', 2)];
+                break;
+            case 1:
+                return [60, str_x_years.replace('%d', 5)];
+                break;
+            default:
+                return [240, str_x_years.replace('%d', 20)];
+                break;
+        }
+    }
+
+    let minCertification = betaTestPlugins ? -1 : 0;
+
+    $('.certification-filter-slider').slider({
+        range: 'min',
+        value: minCertification,
+        min: minCertification,
+        max: 3,
+        slide: function (event, ui) {
+            updateCertificationFilterLabel(ui.value);
+            applyFilter("certification", ui.value);
+        }
+    });
+
+    function monthDiff(d1, d2) {
+        var months;
+        months = (d2.getFullYear() - d1.getFullYear()) * 12;
+        months -= d1.getMonth();
+        months += d2.getMonth();
+        return months <= 0 ? 0 : months;
+    }
+
+    updateRatingFilterLabel(0);
+    updateCertificationFilterLabel(minCertification);
+    updateRevisionFilterLabel(0);
+
+    function displayStars(element, rating) {
+
+        element.find('span').addClass('icon-star-empty');
+        element.find('span i').attr('class','');
+
+        rating = Math.round(rating * 2);
+
+        if (rating % 2 == 1) {
+            $(element).find('span[data-star=' + ((rating - 1) / 2) + '] i').addClass('icon-star-half')
+            rating -= 1;
+        }
+
+        while (rating > 0) {
+            rating -= 2;
+            $(element).find('span[data-star=' + (rating / 2) + '] i').addClass('icon-star')
+            $(element).find('span[data-star=' + (rating / 2) + ']').removeClass('icon-star-empty')
+        }
+    }
+
+    function updateRatingFilterLabel(value) {
+        displayStars($('.advanced-filter-rating .rating-star-container'), value);
+    }
+
+    function updateCertificationFilterLabel(value) {
+        let certifNode = $('.advanced-filter-certification .certification');
+        certifNode.attr('data-certification', value);
+        certifNode.attr('title', strs_certification[String(value)]);
+        certifNode.tipTip({
+            'delay': 0,
+            'fadeIn': 200,
+            'fadeOut': 200
+        });
+    }
+
+    function updateRevisionFilterLabel(val) {
+        let label;
+        [_, label] = value_to_month(val);
+        $('.revision-date').html(label);
+    }
+
+    filters = {
+        "search": $('#search').val(),
+        "author": '',
+        "tag": '',
+        "rating": $('.notation-filter-slider').slider('value'),
+        "certification": $('.certification-filter-slider').slider('value'),
+        "revision": value_to_month($('.certification-filter-slider').slider('value'))[0],
+    }
+
+    selectizeAuthor.setValue('');
+    selectizeTag.setValue('');
+
+
+    function applyFilter(changed, value) {
+
+        filters[changed] = value;
+
+        sort((pluginBox) => {
+            let pluginRating = pluginBox.find('.pluginRating').data('rating') || 0;
+            let pluginCertification = pluginBox.find('.certification').data('certification');
+            let pluginAuthors = pluginBox.data('author').split(', ');
+            let pluginName = pluginBox.data('name').toUpperCase();
+            let pluginTags = pluginBox.data('tags').split(', ');
+            let pluginRevisionOld = monthDiff(new Date(pluginBox.data('revision')*1000), new Date()); // number of months between the last revision date and now
+            
+            return (pluginRating >= filters.rating)
+                && (pluginCertification >= filters.certification)
+                && (filters.search === '' || pluginName.indexOf(filters.search) != -1)
+                && (filters.author === '' || pluginAuthors.includes(filters.author))
+                && (filters.tag === '' || pluginTags.includes(filters.tag))
+                && pluginRevisionOld <= filters['revision'];
+        })
+    }
+
+    // Display or not plugin with a function handler
+    function sort(sortFunction) {
+        $('.pluginBox').each((i, el) => {
+            if (sortFunction($(el))) {
+                $(el).show();
+            } else {
+                $(el).hide();
+            }
+        })
+    }
+
+    function clearSort() {
+        $('.pluginBox').show();
+    }
+
+    // Crop the names of plugins if there are too long
+    $('.pluginName span').each((i,el) => {
+        let name = $(el)
+        if (name.html().length > 30) {
+            name.html(name.html().slice(0,30) + '...');
+        }
+    })
+
+    $('#showBetaTestPlugin').on('change', (e) => {
+        let queryParams = new URLSearchParams(window.location.search);
+
+        queryParams.set("beta-test", e.currentTarget.checked.toString());
+
+        history.replaceState(null, null, "?" + queryParams.toString());
+
+        window.location.reload(true);
+    })
+
+});

admin/themes/default/js/user_list.js

@@ -190,7 +190,7 @@ $( document ).ready(function() {
                 data.language = jQuery("#permitActionUserList select[name=language]").val();
                 break;
             case 'recent_period':
-                data.recent_period = recent_period_values[$('#permitActionUserList .period-select-bar .select-bar-container').slider("option", "value")];;
+                data.recent_period = recent_period_values[$('#permitActionUserList .period-select-bar .slider-bar-container').slider("option", "value")];;
                 break;
             case 'expand':
                 data.expand = $("#permitActionUserList .user-list-checkbox[name=expand_yes]").attr("data-selected") === "1" ? true : false;
@@ -285,8 +285,8 @@ $( document ).ready(function() {
 
     $("#permitActionUserList select[name=selectAction]").val("-1");
 
-    $("#advanced_filter_button").click(advanced_filter_button_click);
+    $(".advanced-filter-btn").click(advanced_filter_button_click);
-    $("#advanced-filter-container span.icon-cancel").click(advanced_filter_hide);
+    $(".advanced-filter span.icon-cancel").click(advanced_filter_hide);
     $(".advanced-filter-select").change(update_user_list);
     $("#user_search").on("input", update_user_list);
 
@@ -459,7 +459,7 @@ function getRecentPeriodInfoFromIdx(idx) {
 }
 
 /* Photos bar slider */
-jQuery('#UserList .photos-select-bar .select-bar-container').slider({
+jQuery('#UserList .photos-select-bar .slider-bar-container').slider({
     range: "min",
     min: 0,
     max: nb_image_page_values.length - 1,
@@ -476,7 +476,7 @@ jQuery('#UserList .photos-select-bar .select-bar-container').slider({
 });
 
 
-jQuery('#GuestUserList .photos-select-bar .select-bar-container').slider({
+jQuery('#GuestUserList .photos-select-bar .slider-bar-container').slider({
     range: "min",
     min: 0,
     max: nb_image_page_values.length - 1,
@@ -493,7 +493,7 @@ jQuery('#GuestUserList .photos-select-bar .select-bar-container').slider({
 });
 
 $('#permitActionUserList .photos-select-bar .nb-img-page-infos').html(getNbImagePageInfoFromIdx(0));
-jQuery('#permitActionUserList .photos-select-bar .select-bar-container').slider({
+jQuery('#permitActionUserList .photos-select-bar .slider-bar-container').slider({
     range: "min",
     min: 0,
     max: nb_image_page_values.length - 1,
@@ -510,7 +510,7 @@ jQuery('#permitActionUserList .photos-select-bar .select-bar-container').slider(
 });
 
 /* recent_period slider */
-$('#UserList .period-select-bar .select-bar-container').slider({
+$('#UserList .period-select-bar .slider-bar-container').slider({
     range: "min",
     min: 0,
     max: recent_period_values.length - 1,
@@ -526,7 +526,7 @@ $('#UserList .period-select-bar .select-bar-container').slider({
     }
 });
 
-$('#GuestUserList .period-select-bar .select-bar-container').slider({
+$('#GuestUserList .period-select-bar .slider-bar-container').slider({
     range: "min",
     min: 0,
     max: recent_period_values.length - 1,
@@ -542,7 +542,7 @@ $('#GuestUserList .period-select-bar .select-bar-container').slider({
     }
 });
 
-$('#permitActionUserList .period-select-bar .select-bar-container').slider({
+$('#permitActionUserList .period-select-bar .slider-bar-container').slider({
     range: "min",
     min: 0,
     max: recent_period_values.length - 1,
@@ -557,7 +557,7 @@ $('#permitActionUserList .period-select-bar .select-bar-container').slider({
         $('#permitActionUserList .period-select-bar input[name=recent_period]').val(recent_period_values[ui.value]).trigger('change');
     }
 });
-$('#permitActionUserList .photos-select-bar .select-bar-container').slider("option", "value", 0);
+$('#permitActionUserList .photos-select-bar .slider-bar-container').slider("option", "value", 0);
 let period_info = getRecentPeriodInfoFromIdx(0);
 $('#permitActionUserList .period-select-bar .recent_period_infos').html(period_info);
 
@@ -666,23 +666,20 @@ Advanced filter
 ------------------*/
 
 function advanced_filter_button_click() {
-    if ($("#advanced-filter-container").css("display") === "none") {
+    if (!$(".advanced-filter").hasClass("advanced-filter-open")) {
-        advanced_filter_show(); 
+        advanced_filter_show();
     } else { 
-        advanced_filter_hide(); 
+        advanced_filter_hide();
     }
+    update_user_list();
 }
 
 function advanced_filter_show() {
-    $("#advanced-filter-container").show();
+    $(".advanced-filter-btn, .advanced-filter").addClass("advanced-filter-open");
-    $("#advanced_filter_button").addClass("extended-filter-btn");
-    // update_user_list();
 }
 
 function advanced_filter_hide() {
-    $("#advanced-filter-container").hide();
+    $(".advanced-filter-btn, .advanced-filter").removeClass("advanced-filter-open");
-    $("#advanced_filter_button").removeClass("extended-filter-btn");
-    // update_user_list();
 }
 
 let months = [];
@@ -694,24 +691,24 @@ function getDateStr(date) {
 }
 
 function setupRegisterDates(register_dates) {
-    $('#advanced-filter-container .dates-select-bar .select-bar-container').slider({
+    $('.advanced-filter .dates-select-bar .slider-bar-container').slider({
         range: true,
         min: 0,
         max: register_dates.length - 1,
         values: [0, register_dates.length - 1],
         change: function( event, ui ) {
-            $("#advanced-filter-container .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[ui.values[0]]), getDateStr(register_dates[ui.values[1]])));
+            $(".advanced-filter .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[ui.values[0]]), getDateStr(register_dates[ui.values[1]])));
         },
         slide: function( event, ui ) {
-            $("#advanced-filter-container .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[ui.values[0]]), getDateStr(register_dates[ui.values[1]])));
+            $(".advanced-filter .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[ui.values[0]]), getDateStr(register_dates[ui.values[1]])));
         },
         stop: function( event, ui ) {
-            $("#advanced-filter-container .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[ui.values[0]]), getDateStr(register_dates[ui.values[1]])));
+            $(".advanced-filter .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[ui.values[0]]), getDateStr(register_dates[ui.values[1]])));
             update_user_list();
         }
     });
 
-    $("#advanced-filter-container .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[0]), getDateStr(register_dates[register_dates.length - 1])));
+    $(".advanced-filter .dates-infos").html(sprintf(dates_infos, getDateStr(register_dates[0]), getDateStr(register_dates[register_dates.length - 1])));
             
 }
 /*------------------
@@ -1111,7 +1108,7 @@ function fill_user_edit_preferences(user_to_edit, pop_in) {
     let slider_key_photos = getSliderKeyFromValue(parseInt(user_to_edit.nb_image_page), nb_image_page_values);
     let slider_key_period = getSliderKeyFromValue(parseInt(user_to_edit.recent_period), recent_period_values);
     
-    pop_in.find('.photos-select-bar .select-bar-container').slider("option", "value", slider_key_photos);
+    pop_in.find('.photos-select-bar .slider-bar-container').slider("option", "value", slider_key_photos);
     pop_in.find('.user-property-theme select option').each(function () {
         if ($(this).val() == user_to_edit.theme) {
             $(this).prop('selected', true);
@@ -1122,7 +1119,7 @@ function fill_user_edit_preferences(user_to_edit, pop_in) {
             $(this).prop('selected', true);
         }
     });
-    pop_in.find('.period-select-bar .select-bar-container').slider("option", "value", slider_key_period);
+    pop_in.find('.period-select-bar .slider-bar-container').slider("option", "value", slider_key_period);
     pop_in.find('.user-list-checkbox[name="expand_all_albums"]').attr('data-selected', user_to_edit.expand == 'true' ? '1' : '0');
     pop_in.find('.user-list-checkbox[name="show_nb_comments"]').attr('data-selected', user_to_edit.show_nb_comments == 'true' ? '1' : '0');
     pop_in.find('.user-list-checkbox[name="show_nb_hits"]').attr('data-selected', user_to_edit.show_nb_hits == 'true' ? '1' : '0');   
@@ -1267,8 +1264,8 @@ function fill_ajax_data_from_properties(ajax_data, pop_in) {
 function fill_ajax_data_from_preferences(ajax_data, pop_in) {
     ajax_data['theme'] = pop_in.find('.user-property-theme select').val();
     ajax_data['language'] = pop_in.find('.user-property-lang select').val();
-    ajax_data['nb_image_page'] = nb_image_page_values[pop_in.find('.photos-select-bar .select-bar-container').slider("option", "value")];
+    ajax_data['nb_image_page'] = nb_image_page_values[pop_in.find('.photos-select-bar .slider-bar-container').slider("option", "value")];
-    ajax_data['recent_period'] = recent_period_values[pop_in.find('.period-select-bar .select-bar-container').slider("option", "value")];
+    ajax_data['recent_period'] = recent_period_values[pop_in.find('.period-select-bar .slider-bar-container').slider("option", "value")];
     ajax_data['expand'] = pop_in.find('.user-list-checkbox[name="expand_all_albums"]').attr('data-selected') == '1' ? true : false;
     ajax_data['show_nb_comments'] = pop_in.find('.user-list-checkbox[name="show_nb_comments"]').attr('data-selected') == '1' ? true : false ;
     ajax_data['show_nb_hits'] = pop_in.find('.user-list-checkbox[name="show_nb_hits"]').attr('data-selected') == '1' ? true : false ;
@@ -1522,13 +1519,13 @@ function update_user_list() {
     if ($("#user_search").val().length != 0) {
       update_data["filter"] = $("#user_search").val();
     }
-    if ($("#advanced-filter-container").css("display") !== "none") {
+    if ($(".advanced-filter").hasClass('advanced-filter-open') !== "none") {
         update_data["status"] = $(".advanced-filter-select[name=filter_status]").val();
         update_data["group_id"] = $(".advanced-filter-select[name=filter_group]").val();
         update_data["min_level"] = $(".advanced-filter-select[name=filter_level]").val();
         update_data["max_level"] = $(".advanced-filter-select[name=filter_level]").val();
-        update_data["min_register"] = register_dates[$(".dates-select-bar .select-bar-container").slider("option", "values")[0]];
+        update_data["min_register"] = register_dates[$(".dates-select-bar .slider-bar-container").slider("option", "values")[0]];
-        update_data["max_register"] = register_dates[$(".dates-select-bar .select-bar-container").slider("option", "values")[1]];
+        update_data["max_register"] = register_dates[$(".dates-select-bar .slider-bar-container").slider("option", "values")[1]];
     }
     jQuery.ajax({
         url: "ws.php?format=json&method=pwg.users.getList",

admin/themes/default/template/plugins_installed.tpl

@@ -93,7 +93,13 @@ jQuery(document).ready(function() {
       dataType: 'json',
       success: function(data) {
         for (i=0;i<data.length;i++) {
-          jQuery('#'+data[i]+' .pluginMiniBoxNameCell').prepend('<i class="icon-attention" title="'+incompatible_msg+'"></i> ');
+          {/literal}
+          {if $show_details}
+            jQuery('#'+data[i]+' .pluginName').prepend('<a class="warning" title="'+incompatible_msg+'"></a>')
+          {else}
+            jQuery('#'+data[i]+' .pluginName').prepend('<span class="warning" title="'+incompatible_msg+'"></span>')
+          {/if}
+          {literal}
           jQuery('#'+data[i]).addClass('incompatible');
           jQuery('#'+data[i]+' .activate').each(function () {
             $(this).pwg_jconfirm_follow_href({
@@ -120,21 +126,6 @@ jQuery(document).ready(function() {
     'keepAlive':false,
   });
 
-  /* Add the '...' for the overflow of the description line*/
-  jQuery( document ).ready(function () {
-    jQuery('.pluginDesc').each(function () {
-      var el = jQuery(this).context;
-      var wordArray = el.innerHTML.split(' ');
-      if (el.scrollHeight > el.offsetHeight) {
-        jQuery(this).attr('title', jQuery(this).html())
-      }
-      while(el.scrollHeight > el.offsetHeight) {
-          wordArray.pop();
-          el.innerHTML = wordArray.join(' ') + '...';
-      }
-    })
-  });
-
   /*Add the filter research*/
   jQuery( document ).ready(function () {
     document.onkeydown = function(e) {
@@ -152,7 +143,7 @@ jQuery(document).ready(function() {
       var searchInactive = 0;
       var searchOther = 0;
       
-        $(".pluginMiniBox").each(function() {
+        $(".pluginBox").each(function() {
           if (text == "") {
             jQuery(".nbPluginsSearch").hide();
             if ($("#seeAll").is(":checked")) {
@@ -185,8 +176,8 @@ jQuery(document).ready(function() {
             nb_plugin.other = searchOther;
 
           } else {
+            let name = jQuery(this).find(".pluginName").text().toLowerCase();
             jQuery(".nbPluginsSearch").show();
-            let name = jQuery(this).find(".pluginMiniBoxNameCell").text().toLowerCase();
             let description = jQuery(this).find(".pluginDesc").text().toLowerCase();
             if (name.search(text) != -1 || description.search(text) != -1){
               searchNumber++;
@@ -249,7 +240,7 @@ jQuery(document).ready(function() {
 
 $(document).mouseup(function (e) {
   e.stopPropagation();
-  $(".pluginMiniBox").each(function() {  
+  $(".pluginBox").each(function() {  
     if ($(this).find(".showOptions").has(e.target).length === 0) {
       $(this).find(".PluginOptionsBlock").hide();
     }
@@ -257,11 +248,39 @@ $(document).mouseup(function (e) {
 });
 
 function actualizeFilter() {
-
     $("label[for='seeAll'] .filter-badge").html(nb_plugin.all);
     $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
     $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
     $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
+    //console.log(nb_plugin)
+    $(".filterLabel").show();
+    $(".pluginMiniBox").each(function () {
+        if (nb_plugin.active == 0) {
+            $("label[for='seeActive']").hide();
+            if ($("#seeActive").is(":checked")) {
+              $("#seeAll").trigger("click")
+            }
+        }
+        if (nb_plugin.inactive == 0) {
+            $("label[for='seeInactive']").hide();
+            if ($("#seeInactive").is(":checked")) {
+              $("#seeAll").trigger("click")
+            }
+        }
+        if (nb_plugin.other == 0) {
+            $("label[for='seeOther']").hide();
+            if ($("#seeOther").is(":checked")) {
+              $("#seeAll").trigger("click")
+            }
+        }
+    })
+}
+
+jQuery(".pluginBox").each(function(index){
+
+    $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
+    $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
+    $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
 
     //console.log(nb_plugin)
 
@@ -347,7 +366,7 @@ jQuery(".pluginMiniBox").each(function(index){
     {assign var='version' value=$plugin.VERSION}
   {/if}
 
-  <div id="{$plugin.ID}" class="pluginMiniBox {$plugin.STATE} plugin-{$plugin.STATE}">
+<div id="{$plugin.ID}" class="pluginBox pluginMiniBox {$plugin.STATE} plugin-{$plugin.STATE}">
 
     <div class="AddPluginSuccess pluginNotif">
       <label class="icon-ok">
@@ -426,7 +445,7 @@ jQuery(".pluginMiniBox").each(function(index){
           <a class="dropdown-option icon-back-in-time plugin-restore separator-top">{'Restore'|@translate}</a>
           <a class="dropdown-option icon-trash delete-plugin-button separator-top">{'Delete'|@translate}</a>
       </div>
-      <div class="pluginMiniBoxNameCell" data-title="{$plugin.NAME}">
+      <div class="pluginName" data-title="{$plugin.NAME}">
         {$plugin.NAME}
       </div>
       <div class="pluginDesc">
@@ -530,7 +549,7 @@ jQuery(".pluginMiniBox").each(function(index){
   display: flex;
 }
 
-.pluginMiniBox.active .pluginActionsSmallIcons a span {
+.pluginBox.active .pluginActionsSmallIcons a span {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -539,7 +558,7 @@ jQuery(".pluginMiniBox").each(function(index){
   border-radius: 5px;
 }
 
-.pluginMiniBox.active .pluginActionsSmallIcons a span:hover {
+.pluginBox.active .pluginActionsSmallIcons a span:hover {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -548,7 +567,7 @@ jQuery(".pluginMiniBox").each(function(index){
   border-radius: 5px;
 }
 
-.pluginMiniBox.inactive .pluginActionsSmallIcons a span {
+.pluginBox.inactive .pluginActionsSmallIcons a span {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -562,7 +581,7 @@ jQuery(".pluginMiniBox").each(function(index){
   text-decoration: none;
 }
 
-.pluginMiniBox {
+.pluginBox {
   transition: 0.5s;
   position: relative;
 }
@@ -669,26 +688,26 @@ jQuery(".pluginMiniBox").each(function(index){
   background: transparent;
 }
 
-.pluginContainer.line .pluginMiniBox {
+.pluginContainer.line .pluginBox {
   width: 100%;
   height: 50px;
 
   margin: 0 0 10px 0;
 }
 
-.pluginContainer.line .pluginMiniBox .pluginContent{
+.pluginContainer.line .pluginBox .pluginContent{
   display: flex;
   flex-direction: row;
   align-items: center;
   width: calc(100% - 35px);
 }
 
-.pluginContainer.line .pluginMiniBox .pluginActions{
+.pluginContainer.line .pluginBox .pluginActions{
   width: auto;
   margin: 0 25px 0 auto;
 }
 
-.pluginContainer.line .pluginMiniBox .PluginOptionsBlock{
+.pluginContainer.line .pluginBox .PluginOptionsBlock{
   display:none;
   position:absolute;
   right: 30px;
@@ -697,7 +716,7 @@ jQuery(".pluginMiniBox").each(function(index){
   transform: translateY(calc(50% - 30px));
 }
 
-.pluginContainer.line .pluginMiniBox .dropdown::after {
+.pluginContainer.line .pluginBox .dropdown::after {
   content: " ";
   position: absolute;
   bottom: 55%;
@@ -710,15 +729,15 @@ jQuery(".pluginMiniBox").each(function(index){
 }
 
 
-.pluginContainer.line .pluginMiniBox .pluginActions a,
+.pluginContainer.line .pluginBox .pluginActions a,
-.pluginContainer.classic .pluginMiniBox .pluginActions a{
+.pluginContainer.classic .pluginBox .pluginActions a{
   margin: 0;
   padding: 2px 10px;
   border-radius: 5px;
   color: #3c3c3c;
 }
 
-.pluginContainer.line .pluginMiniBox .pluginDesc{
+.pluginContainer.line .pluginBox .pluginDesc{
   margin:  auto 10px auto 10px;
   display: block !important;
   align-items: center;
@@ -740,7 +759,7 @@ jQuery(".pluginMiniBox").each(function(index){
   flex-wrap: wrap;
 }
 
-.pluginContainer.classic .pluginMiniBoxNameCell {
+.pluginContainer.classic .pluginName {
   position: relative;
   margin-right: 10px;
 }
@@ -750,7 +769,7 @@ jQuery(".pluginMiniBox").each(function(index){
   top: 45px;
 }
 
-.pluginContainer.classic .pluginMiniBox .pluginActions {
+.pluginContainer.classic .pluginBox .pluginActions {
   position: absolute;
   top: 47px;
   right: 17px;
@@ -769,13 +788,13 @@ jQuery(".pluginMiniBox").each(function(index){
   flex-wrap: wrap;
 }
 
-.pluginContainer.compact .pluginMiniBox {
+.pluginContainer.compact .pluginBox {
   width: 350px;
 
   margin: 15px 15px 0 0;
 }
 
-.pluginContainer.compact .pluginMiniBox .pluginContent {
+.pluginContainer.compact .pluginBox .pluginContent {
   display: flex;
   flex-direction: row;
 

admin/themes/default/template/plugins_new.tpl

@@ -1,123 +1,213 @@
 {combine_script id='jquery.sort' load='footer' path='themes/default/js/plugins/jquery.sort.js'}
 
+{combine_script id='jquery.ui.slider' require='jquery.ui' load='header' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
+{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
+
+{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
+
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 {combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
+{combine_script id='pluginsNew' load='footer' require='jquery.ui.effect-blind,jquery.sort' path='admin/themes/default/js/plugins_new.js'}
 {combine_css path="themes/default/js/plugins/jquery-confirm.min.css"}
 
-{footer_script require='jquery.ui.effect-blind,jquery.sort'}
+{combine_css path="admin/themes/default/css/components/general.css"}
-const install_title = '{'Are you sure you want to install this plugin?'|@translate|@escape:'javascript'}';
-const confirm_msg = '{"Yes, I am sure"|@translate}';
-const cancel_msg = "{"No, I have changed my mind"|@translate}";
-let title = '{'Are you sure you want to install the plugin "%s"?'|@translate|@escape:'javascript'}';
-{literal}
-var sortOrder = 'date';
-var sortPlugins = (function(a, b) {
-  if (sortOrder == 'downloads' || sortOrder == 'revision' || sortOrder == 'date')
-    return parseInt($(a).find('input[name="'+sortOrder+'"]').val())
-      < parseInt($(b).find('input[name="'+sortOrder+'"]').val()) ? 1 : -1;
-  else
-    return $(a).find('input[name="'+sortOrder+'"]').val().toLowerCase()
-      > $(b).find('input[name="'+sortOrder+'"]').val().toLowerCase()  ? 1 : -1;
-});
 
-jQuery(document).ready(function(){
+{footer_script}
-	jQuery("td[id^='desc_']").click(function() {
+const str_confirm_msg = '{"Yes, I am sure"|@translate}';
-		id = this.id.split('_');
+const str_cancel_msg = "{"No, I have changed my mind"|@translate}";
-		nb_lines = jQuery("#bigdesc_"+id[1]).html().split('<br>').length;
+const str_install_title = '{'Are you sure you want to install the plugin "%s"?'|@translate|@escape:'javascript'}';
-
+const strs_certification = {
-		jQuery("#smalldesc_"+id[1]).toggle('blind', 1);
+  "-1" : '{'This plugin is incompatible with your version'|@translate}',
-		if (jQuery(this).hasClass('bigdesc')) {
+  "0" : '{'This plugin have no update since 3 years ! It may be outdated'|@translate}',
-			jQuery("#bigdesc_"+id[1]).toggle('blind', 1);
+  "1" : '{'This plugin has no recent update'|@translate}', 
-		} else {
+  "2" : '{'This plugin was updated less than 6 months ago'|@translate}',
-			jQuery("#bigdesc_"+id[1]).toggle('blind', 50 + (nb_lines * 30));
+  "3" : '{'This plugin have been updated recently'|@translate}',
-		}
+};
-		jQuery(this).toggleClass('bigdesc');
+const str_all = '{"All of them"|@translate}'
-		return false;
+const str_x_month = '{"%d month"|@translate}';
-	});
+const str_x_months = '{"%d months"|@translate}';
-
+const str_x_year = '{"%d year"|@translate}';
-  jQuery('select[name="selectOrder"]').change(function() {
+const str_x_years = '{"%d years"|@translate}';
-    sortOrder = this.value;
+{/footer_script}
-    $('.pluginBox').sortElements(sortPlugins);
-    $.get("admin.php?plugins_new_order="+sortOrder);
-  });
-  
-  jQuery('#filter').keyup(function(){
-    var filter = $(this).val();
-    if (filter.length>2) {
-      $('.pluginBox').hide();
-      $('#availablePlugins .pluginBox input[name="name"]').each(function(){
-        if ($(this).val().toUpperCase().indexOf(filter.toUpperCase()) != -1) {
-          $(this).parents('div').show();
-        }
-      });
-    } else {
-      $('.pluginBox').show();
-    }
-  jQuery("#filter").focus();
-  });
-  $(".install-plugin-button").each(function() {
-    let plugin_name = $(this).closest(".pluginBox").find("input[name=\"name\"]").val();
-    $(this).pwg_jconfirm_follow_href({
-      alert_title: title.replace("%s", plugin_name),
-      alert_confirm: confirm_msg,
-      alert_cancel: cancel_msg
-    });
-  });
-});
-{/literal}{/footer_script}
 
 <div class="titrePage">
-<span class="sort">
+  <div class="sort">
-<i class="icon-filter"></i> {'Filter'|@translate} <input type="text" id="filter">
+    <div class="sort-actions">
-<i class="icon-sort-number-up"></i> {'Sort order'|@translate}
+      <div class="beta-test-plugin-switch">
-{html_options name="selectOrder" options=$order_options selected=$order_selected}
+        <label class="switch">
-</span>
+          <input type="checkbox" id="showBetaTestPlugin" {if $BETA_TEST}checked{/if}>
+          <span class="slider round"></span>
+        </label>
+        <label for='showBetaTestPlugin'>{'Show beta test plugins'|@translate}</label>
+      </div>
+      
+      <div class="sort-by">
+      <label>{'Sort order'|@translate}</label>
+      <div class="select-container">
+        {html_options name="selectOrder" options=$order_options selected=$order_selected}
+      </div>
+      </div>
+      
+      <div class="advanced-filter-btn icon-filter"> <span>{'Filters'|@translate}</span></div>
+      
+      <div id="search-plugin">
+          <span class="icon-search search-icon"> </span>
+          <span class="icon-cancel search-cancel"></span>
+          <input class="search-input" type="text" placeholder="{'Search'|@translate}" id="search">
+      </div>
+    
+    </div>
+
+    <div class="advanced-filter advanced-filter-new-plugin">
+      <div class="advanced-filter-header">
+        <span class="advanced-filter-title">{'Advanced filter'|@translate}</span>
+        <span class="advanced-filter-close icon-cancel"></span>
+      </div>
+      <div class="advanced-filter-container">
+        
+        <div class="advanced-filter-item advanced-filter-author">
+          <label class="advanced-filter-item-label" for="author-filter">{'Author'|@translate}</label>
+          <div class="advanced-filter-item-container">
+            <select name="author-filter" id="author-filter"></select>
+          </div>
+        </div>
+
+        <div class="advanced-filter-item advanced-filter-tag">
+          <label class="advanced-filter-item-label" for="tag-filter">{'Tag'|@translate}</label>
+          <div class="advanced-filter-item-container">
+            <select name="tag-filter" id="tag-filter"></select>
+          </div>
+        </div>
+
+        <div class="advanced-filter-item advanced-filter-rating">
+          <label class="advanced-filter-item-label" for="notation-filter">
+            {'Rating greater than'|@translate}
+            <span class="rating-star-container">
+              <span data-star="0"><i></i></span>
+              <span data-star="1"><i></i></span>
+              <span data-star="2"><i></i></span>
+              <span data-star="3"><i></i></span>
+              <span data-star="4"><i></i></span>
+            </span>
+          </label>
+          <div class="advanced-filter-item-container">
+            <div id="notation-filter" class="select-bar"></div>
+            <div class="slider-bar-wrapper">
+            <div class="slider-bar-container notation-filter-slider"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="advanced-filter-item advanced-filter-revision-date">
+            <label class="advanced-filter-item-label" for="revision-date-filter">
+                {'Last revision date is newer than '|@translate}<span class="revision-date"></span>
+            </label>
+            <div class="advanced-filter-item-container">
+                <div id="revision-date" class="select-bar"></div>
+                <div class="slider-bar-wrapper">
+                    <div class="slider-bar-container revision-date-filter-slider"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="advanced-filter-item advanced-filter-certification">
+          <label class="advanced-filter-item-label" for="certification-filter">
+              {'Certification higher or equal to '|@translate}
+              <span><i class="certification" title=""></i></span>
+          </label>
+          <div class="advanced-filter-item-container">
+            <div id="certification-filter" class="select-bar"></div>
+              <div class="slider-bar-wrapper">
+                  <div class="slider-bar-container certification-filter-slider"></div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <h2>{'Plugins'|@translate}</h2>
 </div>
 
 {if not empty($plugins)}
 <div id="availablePlugins">
-<fieldset>
+
-<legend></legend>
+{assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]}
+
 {foreach from=$plugins item=plugin name=plugins_loop}
-<div class="pluginBox" id="plugin_{$plugin.ID}">
+<div class="pluginBox pluginBigBox" id="plugin_{$plugin.ID}"
-<input type="hidden" name="date" value="{$plugin.ID}">
+  data-id="{$plugin.ID}"
-<input type="hidden" name="name" value="{$plugin.EXT_NAME}">
+  data-date="{$plugin.ID}"
-<input type="hidden" name="revision" value="{$plugin.REVISION_DATE}">
+  data-name="{$plugin.EXT_NAME}"
-<input type="hidden" name="downloads" value="{$plugin.DOWNLOADS}">
+  data-revision="{$plugin.REVISION_DATE}"
-<input type="hidden" name="author" value="{$plugin.AUTHOR}">
+  data-downloads="{$plugin.DOWNLOADS}"
-  <table>
+  data-author="{$plugin.AUTHOR}"
-    <tr>
+  data-tags="{implode(', ', $plugin.TAGS)}"
-      <td class="pluginBoxNameCell">{$plugin.EXT_NAME}</td>
+>
-{if $plugin.BIG_DESC != $plugin.SMALL_DESC}
+  <div class="pluginContent">
-      <td id="desc_{$plugin.ID}" class="pluginDesc">
+    <div class="pluginImage">
-        <span id="smalldesc_{$plugin.ID}">
+      {if $plugin.SCREENSHOT == ''}
-          <img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/plus.gif" alt="">{$plugin.SMALL_DESC}...
+        <span class="noImage {$color_tab[$plugin.ID%5]}"><i class="icon-puzzle"></i></span>
-        </span>
+      {else}
-        <span id="bigdesc_{$plugin.ID}" style="display:none;">
+        <span class="screenshot" style="background-image: url({$plugin.SCREENSHOT});"></span>
-          <img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/minus.gif" alt="">{$plugin.BIG_DESC|@nl2br}<br>&nbsp;
+      {/if}
-        </span>
+    </div>
-      </td>
+    <div class="pluginInfo">
-{else}
+      <div>
-      <td>{$plugin.BIG_DESC|@nl2br}</td>
+        <div class="pluginName">
-{/if}
+          <span title="{$plugin.EXT_NAME}">{$plugin.EXT_NAME}</span>
-    </tr>
+          <i class="certification" data-certification={$plugin.CERTIFICATION}
-    <tr>
+            {if $plugin.CERTIFICATION == 3}
-      <td>
+              title="{'This plugin have been updated recently'|@translate}"
-        <a href="{$plugin.URL_INSTALL}" class="install-plugin-button">{'Install'|@translate}</a>
+            {elseif $plugin.CERTIFICATION == 2}
-        |  <a href="{$plugin.URL_DOWNLOAD}">{'Download'|@translate}</a>
+              title="{'This plugin was updated less than 6 months ago'|@translate}"
-      </td>
+            {elseif $plugin.CERTIFICATION == 1}
-      <td>
+              title="{'This plugin has no recent update'|@translate}"
-        <em>{'Downloads'|@translate}: {$plugin.DOWNLOADS}</em>
+            {elseif $plugin.CERTIFICATION == 0}
-        {'Version'|@translate} {$plugin.VERSION}
+              title="{'This plugin have no update since 3 years ! It may be outdated'|@translate}"
-        | {'By %s'|@translate:$plugin.AUTHOR}
+            {elseif $plugin.CERTIFICATION == -1}
-        | <a class="externalLink" href="{$plugin.EXT_URL}">{'Visit plugin site'|@translate}</a>
+              title="{'  This plugin is incompatible with your version'|@translate}"
-      </td>
+            {/if}
-    </tr>
+          ></i>
-  </table>
+        </div>
+        <div class="pluginAuthorVersion">{'By %s'|@translate:$plugin.AUTHOR}</div>
+      </div>
+
+      <div>
+        {if !is_null($plugin.RATING)}
+          <div class="pluginRating" data-rating="{$plugin.RATING}" title="{'On %d rating(s)'|@translate:$plugin.NB_RATINGS}">
+            <div class="rating-star-container">
+              <span data-star="0"><i></i></span>
+              <span data-star="1"><i></i></span>
+              <span data-star="2"><i></i></span>
+              <span data-star="3"><i></i></span>
+              <span data-star="4"><i></i></span>
+            </div>
+            <span class="rating">{$plugin.RATING}</span>
+          </div>
+        {/if}
+        <div class="pluginDownload" title="{$plugin.DOWNLOADS} {'Downloads'|@translate}"><i class="icon-download">{$plugin.DOWNLOADS}</i></div>
+        <div class="pluginDownload" title="{'Version'|@translate} {$plugin.VERSION}"><i class="icon-flow-branch"></i>{'Version'|@translate} {$plugin.VERSION}</div>
+        <a class="pluginLink" href="{$plugin.EXT_URL}"><i class="icon-link"></i>{'Website'|@translate}</a>
+      </div>
+
+      <div class="pluginInstall">
+        <a class="buttonLike buttonInstall" href="{$plugin.URL_INSTALL}"><i class="icon-plus-circled"></i>{'Add'|@translate}</a>
+      </div>
+    </div>
+    <div class="pluginMoreInfo">
+      <div class="pluginTags" title="{'Tags'|@translate} : {implode(', ', $plugin.TAGS)}">
+      {foreach from=$plugin.TAGS key=tag_id item=tag_label}
+        <span data-id="{$tag_id}">{$tag_label}</span>
+      {/foreach}
+      </div>
+      <div class="pluginDesc" >
+      {$plugin.BIG_DESC|@nl2br}
+      </div>
+    </div>
+  </div>
 </div>
 {/foreach}
-</fieldset>
 </div>
 {else}
 <p>{'There is no other plugin available.'|@translate}</p>

admin/themes/default/template/updates_ext.tpl

@@ -191,7 +191,7 @@ $("#update_all").click(function() {
 <div class="pluginBox" id="plugins_{$plugin.EXT_ID}" {if $plugin.IGNORED}style="display:none;"{/if}>
   <table>
     <tr>
-      <td class="pluginBoxNameCell">
+      <td class="pluginName">
         {$plugin.EXT_NAME}
       </td>
       <td>
@@ -233,7 +233,7 @@ $("#update_all").click(function() {
 <div class="pluginBox" id="themes_{$theme.EXT_ID}" {if $theme.IGNORED}style="display:none;"{/if}>
   <table>
     <tr>
-      <td class="pluginBoxNameCell">
+      <td class="pluginName">
         {$theme.EXT_NAME}
       </td>
       <td>
@@ -275,7 +275,7 @@ $("#update_all").click(function() {
 <div class="pluginBox" id="languages_{$language.EXT_ID}" {if $language.IGNORED}style="display:none;"{/if}>
   <table>
     <tr>
-      <td class="pluginBoxNameCell">
+      <td class="pluginName">
         {$language.EXT_NAME}
       </td>
       <td>

admin/themes/default/template/user_list.tpl

@@ -13,6 +13,8 @@
 
 {combine_script id='jquery.tipTip' load='header' path='themes/default/js/plugins/jquery.tipTip.minified.js'}
 
+{combine_css path="admin/themes/default/css/components/general.css"}
+
 {combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *}
 
 {footer_script}
@@ -141,7 +143,7 @@ $(".icon-help-circled").tipTip({
       <div class="not-in-selection-mode" style="width: 264px; height:2px">
       </div>
     </div>
-    <div id="advanced_filter_button" class="icon-filter">
+    <div class="advanced-filter-btn icon-filter">
       <span>{'Filters'|@translate}</span>
     </div>
     <div id='search-user'>
@@ -152,47 +154,47 @@ $(".icon-help-circled").tipTip({
           <span class="icon-cancel search-cancel"></span>
           <input id="user_search" class='search-input' type='text' placeholder='{'Search'|@translate}'>
         </div>
-    <div id="advanced-filter-container">
+    <div class="advanced-filter">
-      <div class="advanced-filters-header">
+      <div class="advanced-filter-header">
-        <span class="advanced-filter-title">{'Advanced filters'|@translate}</span>
+        <span class="advanced-filter-title">{'Advanced filter'|@translate}</span>
         <span class="advanced-filter-close icon-cancel"></span>
       </div>
-      <div class="advanced-filters">
+      <div class="advanced-filter-container">
-        <div class="advanced-filter-status">
+      <div class="advanced-filter-status advanced-filter-item">
-          <label class="advanced-filter-label">{'Status'|@translate}</label>
+          <label class="advanced-filter-item-label">{'Status'|@translate}</label>
-          <div class="advanced-filter-select-container">
+          <div class="advanced-filter-select-container advanced-filter-item-container">
             <select class="user-action-select advanced-filter-select" name="filter_status">
               <option value="" label="" selected></option>
               {html_options options=$pref_status_options}
             </select>
           </div>
         </div>
-        <div class="advanced-filter-level">
+        <div class="advanced-filter-level advanced-filter-item">
-          <label class="advanced-filter-label">{'Privacy level'|@translate}</label>
+          <label class="advanced-filter-item-label">{'Privacy level'|@translate}</label>
-          <div class="advanced-filter-select-container">
+          <div class="advanced-filter-select-container advanced-filter-item-container">
             <select class="user-action-select advanced-filter-select" name="filter_level" size="1">
               <option value="" label="" selected></option>
               {html_options options=$level_options}
             </select>
           </div>
         </div>
-        <div class="advanced-filter-group">
+        <div class="advanced-filter-group advanced-filter-item">
-          <label class="advanced-filter-label">{'Group'|@translate}</label>
+          <label class="advanced-filter-item-label">{'Group'|@translate}</label>
-          <div class="advanced-filter-select-container">
+          <div class="advanced-filter-select-container advanced-filter-item-container">
             <select class="user-action-select advanced-filter-select" name="filter_group">
               <option value="" label="" selected></option>
               {html_options options=$association_options}
             </select>
           </div>
         </div>
-        <div class="advanced-filter-date">
+        <div class="advanced-filter-date advanced-filter-item">
           <div class="advanced-filter-date-title" style="display:flex">
-            <span class="advanced-filter-label">{'Registered'|@translate}</span>
+            <span class="advanced-filter-item-label">{'Registered'|@translate}</span>
             <span class='dates-infos'></span>
           </div>
           <div class="dates-select-bar">
-              <div class="select-bar-wrapper">
+              <div class="slider-bar-wrapper">
-                <div class="select-bar-container"></div>
+                <div class="slider-bar-container"></div>
               </div>
             </div>
         </div>
@@ -359,8 +361,8 @@ $(".icon-help-circled").tipTip({
             <div class="user-property-label photos-select-bar">{'Photos per page'|translate}
               <br/>
               <span class="nb-img-page-infos"></span>
-              <div class="select-bar-wrapper">
+              <div class="slider-bar-wrapper">
-                <div class="select-bar-container"></div>
+                <div class="slider-bar-container"></div>
               </div>
               <input name="nb_image_page" />
             </div>
@@ -390,8 +392,8 @@ $(".icon-help-circled").tipTip({
             <div class="user-property-label period-select-bar">{'Recent period'|translate}
               <br />
               <span class="recent_period_infos"></span>
-              <div class="select-bar-wrapper">
+              <div class="slider-bar-wrapper">
-                <div class="select-bar-container"></div>
+                <div class="slider-bar-container"></div>
               </div>
             </div>
           </div>
@@ -635,8 +637,8 @@ $(".icon-help-circled").tipTip({
       </div>
       <div class="user-property-label photos-select-bar">{'Photos per page'|translate}
         <span class="nb-img-page-infos"></span>
-        <div class="select-bar-wrapper">
+        <div class="slider-bar-wrapper">
-          <div class="select-bar-container"></div>
+          <div class="slider-bar-container"></div>
         </div>
         <input name="recent_period" />
       </div>
@@ -658,8 +660,8 @@ $(".icon-help-circled").tipTip({
       </div>
       <div class="user-property-label period-select-bar">{'Recent period'|translate}
         <span class="recent_period_infos"></span>
-        <div class="select-bar-wrapper">
+        <div class="slider-bar-wrapper">
-          <div class="select-bar-container"></div>
+          <div class="slider-bar-container"></div>
         </div>
       </div>
       
@@ -793,8 +795,8 @@ $(".icon-help-circled").tipTip({
         </div>
         <div class="user-property-label photos-select-bar">{'Photos per page'|translate}
           <span class="nb-img-page-infos"></span>
-          <div class="select-bar-wrapper">
+          <div class="slider-bar-wrapper">
-            <div class="select-bar-container"></div>
+            <div class="slider-bar-container"></div>
           </div>
           <input name="recent_period" />
         </div>
@@ -816,8 +818,8 @@ $(".icon-help-circled").tipTip({
         </div>
         <div class="user-property-label period-select-bar">{'Recent period'|translate}
           <span class="recent_period_infos"><!-- 7 days --></span>
-          <div class="select-bar-wrapper">
+          <div class="slider-bar-wrapper">
-            <div class="select-bar-container"></div>
+            <div class="slider-bar-container"></div>
           </div>
         </div>
 
@@ -1388,45 +1390,10 @@ $(".icon-help-circled").tipTip({
   margin-left: 220px;
 }
 
-.advanced-filter-select-container {
-  position: relative;
-  text-align:left;
-  width:100%;
-}
-
 .user-action-select-container {
   position:relative;
 }
 
-
-.select-bar-wrapper {
-    padding-left:10px;
-    margin-top: 20px;
-    margin-bottom: 30px;
-}
-
-.select-bar-wrapper .select-bar-container {
-  height: 2px;
-}
-
-.select-bar-wrapper .ui-slider-horizontal .ui-slider-handle{
-    background-color:#ffaf58;
-    border: 1px solid #ffaf58;
-    border-radius:25px;
-    top: -.7em !important;
-    width: 1.4em;
-    height: 1.4em;
-}
-
-.select-bar-wrapper .ui-slider-horizontal .ui-slider-range {
-  background-color: #ffaf58;
-}
-
-.select-bar-wrapper .ui-slider-horizontal{
-    border:none;
-    border-radius:25px;
-}
-
 .user-list-checkbox {
     margin-bottom:15px;
 }
@@ -1894,24 +1861,12 @@ Advanced filter
   margin-left: 500px;
 }
 
-#advanced_filter_button {
+.advanced-filter-btn {
-
-  width: 70px;
-
   position: absolute;
-  z-index: 2;
   right: 650px;
-
-
-  cursor:pointer;
-  padding:10px;
   margin-right:10px;
 }
 
-#advanced_filter_button.icon-filter::before {
-  transform: scale(1.2);
-}
-
 #search-user {
   position: absolute;
   z-index: 2;
@@ -1929,7 +1884,7 @@ Advanced filter
   font-size:1em;
 }
 
-.advanced-filters-header {
+.advanced-filter-header {
   display:flex;
   justify-content:space-between;
   margin-bottom:10px;
@@ -1939,18 +1894,7 @@ Advanced filter
   font-weight:bold;
 }
 
-.advanced-filters {
-  display:flex;
-  padding:5px;
-}
-
 .advanced-filter-status, 
-.advanced-filter-level,
-.advanced-filter-group {
-  margin-right: 30px;
-  min-width: 130px;
-}
-
 .advanced-filter-level {
   max-width: 160px;
   width: 16%;
@@ -1977,7 +1921,7 @@ Advanced filter
   flex-direction: row;
 }
 
-.select-bar-wrapper {
+.slider-bar-wrapper {
   margin-top: 12px;
 }
 

admin/themes/default/theme.css

@@ -150,6 +150,34 @@ TABLE.plugins A { border: 0; }
 TABLE.plugins TR TD { padding: 4px 10px; }
 TABLE.languages TR TD { padding: 7px 20px; }
 
+/* Slider */
+.slider-bar-wrapper {
+    padding-left:10px;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+
+.slider-bar-wrapper .slider-bar-container {
+  height: 2px;
+}
+
+.slider-bar-wrapper .ui-slider-horizontal .ui-slider-handle{
+    background-color:#ffaf58;
+    border: 1px solid #ffaf58;
+    border-radius:25px;
+    top: -.7em !important;
+    width: 1.4em;
+    height: 1.4em;
+}
+
+.slider-bar-wrapper .ui-slider-horizontal .ui-slider-range {
+  background-color: #ffaf58;
+}
+
+.slider-bar-wrapper .ui-slider-horizontal{
+    border:none;
+    border-radius:25px;
+}
 
 /* Category List */
 .categoryContainer {
@@ -1885,8 +1913,6 @@ h2:lang(en) { text-transform:capitalize; }
 #helpContent LI, #ftpPage LI {margin-top:10px;}
 #helpContent P.nextStepLink {text-align:center; font-weight:bold; margin-bottom:20px;}
 
-#availablePlugins FIELDSET  {border:none;}
-
 /**
  * Informations box in administration
  */
@@ -1954,63 +1980,231 @@ h2:lang(en) { text-transform:capitalize; }
 #checkActions {text-align:left; margin:0 0 20px 0;}
 .ActionUserList #checkActions {margin: 20px 0 20px 0;}
 
-.pluginBoxes {
-  border: none;
-  padding: 20px;
-  padding-top: 0;
-  min-height: 271px;
-  text-align:left;
-}
-
-.pluginBoxesContainer {
-  position:relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: left;
-
-}
-
-.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: 160px; z-index: 2; transform: translateY(6px);}
-
-.pluginBoxesCount {
-  background-color: rgb(150, 150, 150);
-  color: white;
-  border-radius: 25px;
-  text-align: center;
-  padding: 2px 10px;
-  font-weight: bold;
-  font-size: 12px;
-}
-
-.pluginBox {
-  margin-bottom:10px;
-  border-width:1px;
-  border-style:solid;
-  border-radius:5px;
-  -moz-border-radius:5px;
- }
-.pluginBox table {width:99%;}
-.pluginBox td {text-align:left;}
-.pluginBox td.pluginDesc img {vertical-align:middle;}
-.pluginBoxNameCell {width:180px; vertical-align:top;}
-.pluginBoxes .inactive, .pluginBoxes .uninstalled {}
 .emptyResearch {opacity: 0.3;text-align: center;left: 45%;font-weight: bold;font-size: 30px; position: absolute; display: none;}
 
-.pluginMiniBox {
+/* Plugin */
+
+.sort {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.sort-actions {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  margin-bottom: 10px;
+}
+
+.sort-actions > * {
+  margin-left: 12px;
+}
+
+.sort-by {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.sort-by label {
+  color: #A4A4A4;
+  font-weight: bold;
+  font-size: 1.1em;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+}
+
+.sort-by select {
+  display: block;
+  padding: 10px 18px;
+  width: 290px;
+
+}
+
+.sort-by .select-container::before {
+  right: 15px;
+  bottom: 50%;
+  transform: translateY(50%);
+}
+
+#search-plugin {
+  position: relative;
+}
+
+#availablePlugins {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 2em;
+}
+
+.advanced-filter-new-plugin .advanced-filter-container {
+  display: grid !important;
+  grid-template-columns: repeat(5, 20%);
+}
+
+.revision-date {
+  color: #f70;
+  margin-left: 5px;
+}
+
+.pluginFilter {justify-content: end;position: absolute;right: 160px; z-index: 2; transform: translateY(6px);}
+
+.pluginBox {
   display:flex;
-  width:260px;
+  margin: 0 15px 15px 0;
-  margin:15px;
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;
-  margin-left: 0;
-  /* box-shadow: 0px 0px 5px #acacac; */
   box-shadow: 1px 1px 0px 1px #e0e0e0;
 }
+
+.pluginMiniBox {
+  width: 260px;
+}
+
+.pluginBigBox {
+  max-width: calc(50% - 15px);
+  min-width: calc(50% - 15px);
+  flex-grow: 1;
+  height: calc(180px + 2 * 15px);
+  overflow: hidden;
+}
+
+@media (max-width: 1700px) {
+  .pluginBigBox {
+    max-width: 100%;
+    min-width: 100%;
+    margin-right: 0!important;
+  }
+}
+
+.pluginBigBox .pluginContent {
+  display: grid;
+  grid-template-columns: 180px 195px auto;
+}
+
+.pluginImage {
+  position: relative;
+  overflow: hidden;
+}
+
+.pluginImage span {
+  height: 180px;
+  width: 180px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+  box-sizing: border-box;
+}
+
+.pluginImage .noImage i {
+  font-size: 40px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+}
+
+.pluginBigBox .pluginInfo, .pluginBigBox .pluginMoreInfo {
+  margin-left: 15px;
+  height: 180px;
+  overflow: hidden; 
+}
+
+.pluginInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+.pluginRating {
+  display: flex;
+}
+
+.rating-star-container {
+  margin-right: 5px;
+  display: flex;
+}
+
+.rating-star-container span, .pluginRating .rating-star-container span i{
+  width: 14px;
+  display: block;
+}
+
+.rating-star-container span {
+  position: relative;
+}
+
+.rating-star-container span i {
+  color: #ff7700;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.rating-star-container span .icon-star-half {
+  left: -3px;
+}
+
+.certification {
+  width: 18px;
+  height: 24px;
+  background-size: contain;
+  background-position: top;
+  display: inline-block;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+}
+
+.advanced-filter-certification .advanced-filter-item-label span{
+  margin-left: 5px;
+  height: 19px;
+}
+
+.certification[data-certification="3"] {
+  background-image: url("images/certification/CertificationBlue.svg");
+}
+
+.certification[data-certification="2"] {
+  background-image: url("images/certification/CertificationOrange.svg");
+}
+
+.certification[data-certification="-1"] {
+  background-image: url("images/certification/CertificationWarning.svg");
+}
+
+.certification[data-certification="0"] {
+  background-image: url("images/certification/CertificationGhost.svg");
+}
+
+.certification[data-certification="1"] {
+  background-image: url("images/certification/Certification.svg");
+  opacity: 0.3;
+}
+
+.pluginInstall {
+  display: flex;
+  align-items: center;
+}
+
+.buttonInstall {
+  margin-left: 0px !important;
+  margin-right: 5px;
+}
+
+.pluginImage .screenshot {
+  background-image: url(path-to-file/img.jpg);
+  background-repeat:no-repeat;
+  background-position: center center;
+  background-size: cover;
+}
+.pluginBox table {width:99%;}
+.pluginBox td {text-align:left;}
+
 .PluginOptionsBlock a:hover { color: white ;}
 .pluginContent {
   width: 100%;
@@ -2025,26 +2219,69 @@ h2:lang(en) { text-transform:capitalize; }
   /* border-radius: 5px; */
 }
 
-.pluginMiniBoxNameCell {
+.pluginName {
   font-size: 14px;
   font-weight: bold;
 }
 
-.pluginMiniBoxNameCellCompact {
+.pluginName span {
+  overflow: hidden;
+}
+
+.pluginNameCompact {
   width: min-content;
   max-width: 170px;
   white-space: nowrap;
   cursor: default;
 }
 
+.pluginMoreInfo {
+  margin-left: 15px;
+  position: relative;
+}
+
 .pluginDesc {
-  margin-top: 43px;
   font-size: 12px;
   color: grey;
   line-height: 1.5em;
-  height: 3em;
   position: relative;
   overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+}
+
+.pluginMiniBox .pluginDesc {
+  margin-top: 43px;
+  height: 3em;
+  -webkit-line-clamp: 2;
+  -moz-line-clamp: 2;
+  -ms-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.pluginBigBox .pluginDesc {
+  height: auto;
+  -webkit-line-clamp: 8;
+  -moz-line-clamp: 8;
+  -ms-line-clamp: 8;
+  line-clamp: 8;
+}
+
+.pluginTags {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pluginTags > span {
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  padding: 3px 10px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  white-space: nowrap;
 }
 
 .pluginActions a {
@@ -2081,7 +2318,7 @@ h2:lang(en) { text-transform:capitalize; }
   font-size: 16px;
 }
 
-.plugin-inactive .pluginMiniBox{
+.plugin-inactive .pluginBox{
   border-radius:5px;
 }
 
@@ -2092,7 +2329,7 @@ h2:lang(en) { text-transform:capitalize; }
   background-color:#ff9b32;
 }
 
-.pluginMiniBox .PluginOptionsIcons,
+.pluginBox .PluginOptionsIcons,
 .themeBox .PluginOptionsIcons{ 
   display:flex;
   position:absolute;
@@ -2153,22 +2390,22 @@ h2:lang(en) { text-transform:capitalize; }
   color: #8c8c8c;
 }
 
-.pluginContainer.line .pluginMiniBox:hover .pluginContent{
+.pluginContainer.line .pluginBox:hover .pluginContent{
   transition: 0.4s;
   background: #ffd7ad;
 }
 
-.pluginContainer.line .pluginMiniBox:hover.plugin-inactive .slider {
+.pluginContainer.line .pluginBox:hover.plugin-inactive .slider {
   transition: 0.4s;
   background: #999999;
 }
 
-.pluginContainer.line .pluginMiniBox:hover .pluginContent .pluginActions a{
+.pluginContainer.line .pluginBox:hover .pluginContent .pluginActions a{
   /* color: #ffffff; */
   opacity: 1;
 }
 
-.pluginContainer.line .pluginMiniBox.inactive:hover .pluginContent .pluginActions a{
+.pluginContainer.line .pluginBox.inactive:hover .pluginContent .pluginActions a{
   background: transparent;
   opacity: 0.7;
 }
@@ -5055,8 +5292,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 #action_delete_derivatives input[name="del_derivatives_type[]"], #action_generate_derivatives input[name="generate_derivatives_type[]"] {margin-right: 3px;}
 .actionButtons:first-child::after,#filter_prefilter::before,#filter_category::before,#filter_level::before,
 .permitActionListButton div::before, #action_level::after, .pictureLevels::before,
-.user-action-select-container::before, .advanced-filter-select-container::before,
+.user-property-select-container::before, .sort-by .select-container::before {
-.user-property-select-container::before  {
   content: '\e835'; font-size: 17px; position: absolute; font-family: "fontello"; color: #6E6E6E; pointer-events: none;
 }
 .permitActionListButton div::before {margin-left: 250px; margin-top: 11px;}
@@ -5064,8 +5300,6 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 .permitActionListButton div.hidden::after {display: none;}
 .user-action-select-container::before {top: 5px; right:10px}
 .user-property-select-container::before {margin-top: 10px; margin-left:270px;}
-.advanced-filter-select-container::before {top: 5px; right:10px}
-.advanced-filter-select {border: solid 1px #d4d4d4;}
 #filter_prefilter::before {margin-left: 257px; margin-top: 35px;}
 #filter_category .selectize-control.single .selectize-input::after {content: none;}
 #filter_category {width: 600px;}
@@ -5073,7 +5307,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 #filter_level::before {margin-top: 34px; margin-left: 260px;}
 #batchManagerGlobal #action_level::after {margin-top: -56px; margin-left: 254px;}
 #filter_search input {width: 300px; box-sizing: border-box; padding: 11px 18px;}
-#applyFilter, #addFilter,#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, .sort-by select{
 	font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
 	-webkit-appearance: none;
 	font-weight: 700;
@@ -5402,18 +5636,6 @@ color:#FF7B00;
   background: #DDDDDD;
 }
 
-#advanced_filter_button, #advanced-filter-container {
-  background-color:#F3F3F3;
-}
-
-.advanced-filter-label, .advanced-filter-title {
-  color:#3e3e3e;
-}
-
-.advanced-filter-close {
-  color: #C5C5C5;
-}
-
 .user-action-select {
   background: white;
 }
@@ -5458,7 +5680,7 @@ color:#FF7B00;
   background-color: #F3F3F3;
 }
 
-.select-bar-wrapper .ui-slider-horizontal{
+.slider-bar-wrapper .ui-slider-horizontal{
   background-color:#e3e3e3;
 }
 

admin/themes/roma/theme.css

@@ -287,11 +287,10 @@ a.stat-box:hover {
 
 #helpContent, #pLoaderPage, #ftpPage, #ftpPage LEGEND {color:#aaa;}
 
-.pluginBox, .pluginContent, .pluginMiniBox, .groups li, .groups .GroupContainer {background-color:#333;color:#999;border-right-color:#333; box-shadow: none;}
+.pluginBox, .pluginContent, .groups .GroupContainer {background-color:#333;color:#999;border-right-color:#333; box-shadow: none;border-left: none;}
-.pluginMiniBox {border-left: none;}
+
-.pluginBoxNameCell, .pluginMiniBoxNameCell {color:#aaa;}
+.pluginName {color:#aaa;}
-.pluginBox.incompatible, .pluginMiniBox.incompatible {border-color:#800 !important;}
+.pluginBox.incompatible {border-color:#800 !important;}
-.pluginBoxes .merged, .pluginBoxes .missing {background-color:#422;border:1px solid #800;}
 .pluginActionLevel1, .pluginActionLevel2 {color: #333;}
 .pluginActionLevel2 {background-color: #bbbbbb;}
 .pluginFilter {color: #c1c1c1;}
@@ -884,7 +883,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 }
 
 #checkActions a, .deleteDerivButtons a {background-color: #393939;}
-#addFilter, #filterList select, .pictureLevels select, #permitAction select {background-color: #444444; color: #BFBFBF}
+#addFilter, #filterList select, .pictureLevels select, #permitAction select, .sort-by select {background-color: #444444; color: #BFBFBF}
 #filter_category .selectize-input.items.full.has-options.has-items, #filter_tags .selectize-input.items.not-full.has-options, 
 #filter_tags .selectize-input.items.not-full, #filter_search input, #action_associate .selectize-input.items.full.has-options.has-items,
 #action_dissociate .selectize-input.items.full.has-options.has-items {
@@ -1218,52 +1217,52 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   color: #bababa;
 }
 
-.pluginMiniBox.plugin-active .pluginActionsSmallIcons a span {
+.pluginBox.plugin-active .pluginActionsSmallIcons a span {
   background: #ffa744 !important;
   color: #3c3c3c !important;
 }
 
-.pluginContainer.line .pluginMiniBox:hover .pluginContent{
+.pluginContainer.line .pluginBox:hover .pluginContent{
   transition: 0.4s;
   background: #333333;
 }
 
-.pluginContainer.line .pluginMiniBox:hover.plugin-inactive .slider {
+.pluginContainer.line .pluginBox:hover.plugin-inactive .slider {
   transition: 0.4s;
   background: #777777;
 }
 
-.pluginContainer .pluginMiniBox.plugin-inactive .slider {
+.pluginContainer .pluginBox.plugin-inactive .slider {
   transition: 0.4s;
   background: #777777;
 }
 
-.pluginContainer.line .pluginMiniBox:hover .pluginContent .pluginActions a{
+.pluginContainer.line .pluginBox:hover .pluginContent .pluginActions a{
   /* color: #ffffff; */
   opacity: 1;
 }
 
-.pluginContainer.line .pluginMiniBox.inactive:hover .pluginContent .pluginActions a{
+.pluginContainer.line .pluginBox.inactive:hover .pluginContent .pluginActions a{
   background: transparent;
   opacity: 1;
   color: #777777;
 }
 
-.pluginContainer.line .pluginMiniBox:hover .pluginUnavailableAction {
+.pluginContainer.line .pluginBox:hover .pluginUnavailableAction {
   opacity: 0.5 !important;
 }
 
-.pluginContainer.line .pluginMiniBox.plugin-inactive:hover .pluginUnavailableAction {
+.pluginContainer.line .pluginBox.plugin-inactive:hover .pluginUnavailableAction {
   color: #3c3c3c !important;
   background: #dddddddd !important;
 }
 
-.pluginMiniBox.active .pluginActionsSmallIcons a span {
+.pluginBox.active .pluginActionsSmallIcons a span {
   background: #ffa500;
   color: #3c3c3c;
 }
 
-.pluginMiniBox.active .pluginActionsSmallIcons a span:hover {
+.pluginBox.active .pluginActionsSmallIcons a span:hover {
   background: #ff7700;
   color: #111;
 }
@@ -1290,6 +1289,14 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   color: #ffd5dc
 }
 
+.pluginTags > span {
+  background-color: #444;
+}
+
+.pluginLink {
+  color: #999;
+}
+
 .addAlbum label{
   color:#aaa;
   margin:-5px 0;
@@ -1423,11 +1430,11 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   background: transparent;
 }
 
-#advanced_filter_button, #advanced-filter-container {
+.advanced-filter-btn, .advanced-filter {
   background-color:#333;
 }
 
-.advanced-filter-label, .advanced-filter-title, .advanced-filter-close {
+.advanced-filter-item-label, .advanced-filter-title, .advanced-filter-close {
   color:#777;
 }
 
@@ -1489,7 +1496,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   background-color: #333;
 }
 
-.select-bar-wrapper .ui-slider-horizontal{
+.slider-bar-wrapper .ui-slider-horizontal{
   background-color:#666;
 }
 

admin/themes_new.php

@@ -103,8 +103,8 @@ if ($themes->get_server_themes(true)) // only new themes
       'new_themes',
       array(
         'name' => $theme['extension_name'],
-        'thumbnail' => PEM_URL.'/upload/extension-'.$theme['extension_id'].'/thumbnail.jpg',
+        'thumbnail' => (key_exists('thumbnail_src', $theme)) ? $theme['thumbnail_src']:'',
-        'screenshot' => PEM_URL.'/upload/extension-'.$theme['extension_id'].'/screenshot.jpg',
+        'screenshot' => (key_exists('screenshot_url', $theme)) ? $theme['screenshot_url']:'',
         'install_url' => $url_auto_install,
         )
       );