#1467 Redesign of the extension update page

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

@@ -1,3 +1,50 @@
+/* -------------
+Head Buttons
+------------- 
+
+.head-button-1
+
+or
+
+.head-button-2
+
+*/
+
+.head-button-1, .head-button-2 {
+    position: relative;
+	padding: 10px;
+	border-radius: 5px;
+	font-weight: bold;
+	display: flex;
+	align-items: baseline;
+	cursor: pointer;
+    margin-right: 10px;
+}
+
+.head-button-1:active, .head-button-2:active {
+    box-shadow: none;
+    transform: translateY(2px);
+}
+
+.head-button-1 {
+    color: white;
+    background: #ffa646;
+    box-shadow: 0px 2px #bb7932;
+}
+
+.head-button-1:hover {
+    background: #ff7700;
+}
+
+.head-button-2 {
+    background: #fafafa;
+    box-shadow: 0px 2px #00000024;
+}
+
+.head-button-2:hover {
+    background: #eee;
+}
+
 /* -------------
 Advanced filter 
 ------------- 

admin/themes/default/template/updates_ext.tpl

@@ -1,6 +1,7 @@
 {combine_script id='jquery.ajaxmanager' load='footer' require='jquery' path='themes/default/js/plugins/jquery.ajaxmanager.js'}
 {combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js'}
 {combine_css path="themes/default/js/plugins/jquery.jgrowl.css"}
+{combine_css path="admin/themes/default/css/components/general.css"}
 
 {footer_script require='jquery.ui.effect-blind,jquery.ajaxmanager,jquery.jgrowl'}
 var pwg_token = '{$PWG_TOKEN}';
@@ -165,9 +166,9 @@ $("#update_all").click(function() {
 {if $isWebmaster == 1}
 
 <div class="autoupdate_bar">
-<input type="submit" id="update_all" value="{'Update All'|@translate}">
+<div class="head-button-1 icon-ok-circled" id="update_all">{'Update All'|@translate}</div>
-<input type="submit" id="ignore_all" value="{'Ignore All'|@translate}" onClick="ignoreAll(); return false;">
+<div class="head-button-2 icon-block" id="ignore_all" onClick="ignoreAll(); return false;">{'Ignore All'|@translate}</div>
-<input type="submit" id="reset_ignore" value="{'Reset ignored updates'|@translate}" onClick="resetIgnored(); return false;" {if !$SHOW_RESET}style="display:none;"{/if}>
+<div class="head-button-2 icon-ccw" id="reset_ignore" onClick="resetIgnored(); return false;" {if !$SHOW_RESET}style="display:none;"{/if}>{'Reset ignored updates'|@translate}</div>
 </div>
 <div class="autoupdate_bar" style="display:none;">
 {'Please wait...'|@translate}<br><img src="admin/themes/default/images/ajax-loader-bar.gif">
@@ -195,12 +196,13 @@ $("#update_all").click(function() {
             {$extension.EXT_NAME}
           </div>
           <div class="pluginDesc" id="desc_{$extension.ID}">
-            {'New Version'|@translate} : {$extension.NEW_VERSION}
+            <span class="plugin-version plugin-version-old icon-flow-branch" title="{"Current Version"|@translate}">{$extension.CURRENT_VERSION}</span> <i class="icon-right"></i> <span class="plugin-version icon-flow-branch" title="{"New Version"|@translate}">{$extension.NEW_VERSION}</span>
-            | {'By %s'|@translate:$extension.AUTHOR}
+            <div class="plugin-revision-info"><span>{$extension.REV_DESC}</span></div>
+            <a href='{$extension.EXT_URL}' target="_blank" class="plugin-update-link icon-info-circled-1">{'More information'|@translate}</a>
           </div>
           <div class="pluginActions">
             <a href="#" onClick="updateExtension('{$type}', '{$extension.EXT_ID}', {$extension.REVISION_ID});" class="updateExtension pluginActionLevel1"> <i class="icon-ok-circled"></i> {'Install'|@translate}</a>
-            <a href="{$extension.URL_DOWNLOAD}" class="pluginActionLevel2"> <i class="icon-plus-circled"></i> {'Download'|@translate}</a>
+            <a href="{$extension.URL_DOWNLOAD}" class="pluginActionLevel2"> <i class="icon-download"></i> {'Download'|@translate}</a>
             <a href="#" onClick="ignoreExtension('{$type}', '{$extension.EXT_ID}'); return false;" class="ignoreExtension pluginActionLevel2"><i class="icon-block"></i>{'Ignore this update'|@translate}</a>
           </div>
         </div>

admin/themes/default/template/user_list.tpl

@@ -951,25 +951,6 @@ $(".icon-help-circled").tipTip({
   padding-bottom:10px;
 }
 
-.user-header-button {
-  position:relative;
-}
-
-.user-header-button-label {
-	position: relative;
-	padding: 10px;
-	box-shadow: 0px 2px #00000024;
-	border-radius: 5px;
-	font-weight: bold;
-	display: flex;
-	align-items: baseline;
-	cursor: pointer;
-}
-
-
-.user-header-button-label p {
-  margin:0;
-}
 
 #AddUserSuccess {
   display:none;

admin/themes/default/theme.css

@@ -2209,6 +2209,41 @@ h2:lang(en) { text-transform:capitalize; }
   margin-right: 5px;
 }
 
+.autoupdate_bar {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+
+.plugin-version {
+  border-radius: 5px;
+  color: white;
+  padding: 0px 5px;
+  background: #ff7700;
+  font-weight: bold;
+}
+
+.plugin-version-old {
+  color: rgb(59, 59, 59);
+  background: #ddd;
+}
+
+.plugin-revision-info {
+  display: inline-grid;
+  max-width: 40%;
+  margin-left: 5px;
+}
+
+.plugin-revision-info span{
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.plugin-update-link {
+  margin-left: 5px;
+}
+
 .pluginImage .screenshot {
   background-image: url(path-to-file/img.jpg);
   background-repeat:no-repeat;
@@ -2830,7 +2865,7 @@ legend {text-align:left;}
 
 .pluginContainer.line-form .pluginBox .pluginDesc{
   margin:  auto 10px auto 10px;
-  display: block !important;
+  display: flex !important;
   align-items: center;
 
   white-space: nowrap;
@@ -2839,6 +2874,7 @@ legend {text-align:left;}
 
   max-width: 1000px;
   flex: 1;
+  height: 100%;
 }
 
 /* Classic view */
@@ -5993,7 +6029,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   background: orange;
 }
 
-.user-header-button-label {
+.head-button {
   background-color: #fafafa;
 }
 

admin/themes/roma/theme.css

@@ -1357,8 +1357,12 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   color: #c1c1c1;
 }
 
-.user-header-button-label {
+.head-button-2 {
-  background-color: #333;
+  background-color: #333 !important;
+}
+
+.head-button-2:hover {
+  background-color: #222 !important;
 }
 
 .user-container {

admin/updates_ext.php

@@ -60,13 +60,10 @@ foreach ($autoupdate->types as $type)
         'REVISION_ID' => $ext_info['revision_id'],
         'EXT_ID' => $ext_id,
         'EXT_NAME' => $fs_ext['name'],
-        'EXT_URL' => PEM_URL.'/extension_view.php?eid='.$ext_info['extension_id'],
+        'EXT_URL' => PEM_URL.'/extension_view.php?eid='.$ext_info['extension_id'].'#changelog',
-        'EXT_DESC' => trim($ext_info['extension_description'], " \n\r"),
         'REV_DESC' => trim($ext_info['revision_description'], " \n\r"),
         'CURRENT_VERSION' => $fs_ext['version'],
         'NEW_VERSION' => $ext_info['revision_name'],
-        'AUTHOR' => $ext_info['author_name'],
-        'DOWNLOADS' => $ext_info['extension_nb_downloads'],
         'URL_DOWNLOAD' => $ext_info['download_url'] . '&origin=piwigo_download',
         'IGNORED' => in_array($ext_id, $conf['updates_ignored'][$type]),
         )

language/en_UK/admin.lang.php

@@ -1271,6 +1271,8 @@ $lang['Purge Cache'] = 'Purge Cache';
 $lang['Rename "%s"'] = 'Rename "%s"';
 $lang['Yes, rename'] = 'Yes, rename';
 $lang['Tag name'] = 'Tag name';
+$lang['Current Version'] = 'Current Version';
+$lang['More information'] = 'More information';
 
 $lang['Visited'] = 'Visited';
 $lang['Downloaded'] = 'Downloaded';

language/fr_FR/admin.lang.php

@@ -1278,3 +1278,5 @@ $lang['Downloaded'] = 'Téléchargé';
 $lang['Personnalized filters'] = 'Filtres personnalisés';
 $lang['Object'] = 'Objet';
 $lang['Memories'] = 'Souvenirs';
+$lang['Current Version'] = 'Version actuelle';
+$lang['More information'] = 'Plus d\'information';