adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-08-09 18:23:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

issue #1175 redesign plugin manager

Browse Source 
* design based on Samuel's mockup + Hannah's adaptations
* on each plugin actions shown as buttons in a single column (better compatibility with verbose languages such as German)
* description always shown (no more need of the "show details" action)
* filter based on plugin title/description (javascript, no page reload)
* hide inactive plugins if they are 8 or more
* plugins no longer shown in the admin left menu, they instead get a "settings" action if relevant. Compatible with the old trigger get_admin_plugin_menu_links but new method is to simply add a "Has Setting : true" in the main.inc.php header
This commit is contained in:
Zacharieg
2020-04-22 14:41:52 +02:00
committed by GitHub
parent 669f3ff864
commit 0a268bcce1
7 changed files with 268 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/default/template/admin.tpl
-8
View File
@@ -91,14 +91,6 @@ jQuery(document).ready(function() {
<ul>
<li><a href="{$U_PLUGINS}"><i class="icon-equalizer"></i>{'Manage'|@translate}</a></li>
</ul>
{if !empty($plugin_menu_items)}
<div id="pluginsMenuSeparator"></div>
<ul class="scroll">
{foreach from=$plugin_menu_items item=menu_item}
<li><a href="{$menu_item.URL}">{$menu_item.NAME}</a></li>
{/foreach}
</ul>
{/if}
</dd>
</dl>
<dl>
admin/themes/default/template/plugins_installed.tpl
+147 -91
View File
@@ -5,6 +5,12 @@
var incompatible_msg = '{'WARNING! This plugin does not seem to be compatible with this version of Piwigo.'|@translate|@escape:'javascript'}';
var activate_msg = '\n{'Do you want to activate anyway?'|@translate|@escape:'javascript'}';
var showInactivePlugins = function() {
jQuery(".showInactivePlugins").fadeOut(complete=function(){
jQuery(".plugin-inactive").fadeIn();
})
}
/* group action */
var pwg_token = '{$PWG_TOKEN}';
var confirmMsg = '{'Are you sure?'|@translate|@escape:'javascript'}';
@@ -82,6 +88,76 @@ jQuery(document).ready(function() {
'keepAlive':true,
'activation':'click'
});
jQuery('.fullInfo').tipTip({
'delay' : 500,
'fadeIn' : 200,
'fadeOut' : 200,
'maxWidth':'300px',
'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 () {
jQuery(".pluginFilter input").on("input", function() {
let text = jQuery(this).val().toLowerCase();
var searchNumber = 0;
jQuery('.pluginBoxes').each(function () {
let searchNumberInBox = 0;
let pluginBoxes = jQuery(this);
pluginBoxes.find(".pluginMiniBox").each(function() {
if (text == "") {
jQuery(this).fadeIn()
searchNumberInBox++;
} else {
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){
jQuery(this).fadeIn()
searchNumberInBox++;
} else {
jQuery(this).fadeOut()
}
}
})
if (searchNumberInBox == 0) {
pluginBoxes.fadeOut();
} else {
if (pluginBoxes.hasClass("plugin-inactive")) {
showInactivePlugins()
} else {
pluginBoxes.fadeIn();
}
}
searchNumber += searchNumberInBox;
});
console.log(searchNumber);
if (searchNumber == 0) {
jQuery(".emptyResearch").fadeIn();
} else {
jQuery(".emptyResearch").fadeOut();
}
});
});
/* Show Inactive plugins or button to show them*/
jQuery( document ).ready(function () {
jQuery(".showInactivePlugins button").on('click', showInactivePlugins)
});
});
{/literal}
{/footer_script}
@@ -90,36 +166,45 @@ jQuery(document).ready(function() {
<h2>{'Plugins'|@translate}</h2>
</div>
<div class="showDetails">
{if $show_details}
<a href="{$base_url}&amp;show_details=0">{'hide details'|@translate}</a>
{else}
<a href="{$base_url}&amp;show_details=1">{'show details'|@translate}</a>
{/if}
</div>
{if isset($plugins)}
{assign var='field_name' value='null'} {* <!-- 'counter' for fieldset management --> *}
{counter start=0 assign=i} {* <!-- counter for 'deactivate all' link --> *}
<div class="pluginFilter">
<p class="icon-filter">{'Filter'|@translate}</p>
<input type="text" placeholder="{'Name'|@translate}, {'Description'|@translate}">
</div>
<div class="emptyResearch"> {'No plugins found'|@translate} </div>
{foreach from=$plugins item=plugin name=plugins_loop}
{if $field_name != $plugin.STATE}
{if $field_name != 'null'}
</fieldset>
{/if}
{/if}
<fieldset class="pluginBoxes">
<fieldset class="pluginBoxes plugin-{$plugin.STATE}" {if $plugin.STATE == 'inactive'}{if $count_types_plugins["inactive"]>8}style="display:none"{/if}{/if}>
<legend>
{if $plugin.STATE == 'active'}
{'Active Plugins'|@translate}
{elseif $plugin.STATE == 'inactive'}
{'Inactive Plugins'|@translate}
{elseif $plugin.STATE == 'missing'}
{'Missing Plugins'|@translate}
{elseif $plugin.STATE == 'merged'}
{'Obsolete Plugins'|@translate}
{/if}
<div class="pluginBoxesTitle">
<p>
{if $plugin.STATE == 'active'}
{'Active Plugins'|@translate}
{elseif $plugin.STATE == 'inactive'}
{'Inactive Plugins'|@translate}
{elseif $plugin.STATE == 'missing'}
{'Missing Plugins'|@translate}
{elseif $plugin.STATE == 'merged'}
{'Obsolete Plugins'|@translate}
{/if}
</p>
<div class="pluginBoxesCount">{$count_types_plugins[$plugin.STATE]}</div>
</div>
{if $plugin.STATE == 'active'}
<div class="deactivate_all"><a>{'Deactivate all'|@translate}</a></div>
{/if}
</legend>
{assign var='field_name' value=$plugin.STATE}
{/if}
@@ -131,91 +216,62 @@ jQuery(document).ready(function() {
{assign var='author' value='<u>'|cat:$plugin.AUTHOR|cat:'</u>'}
{/if}
{/if}
{if $show_details}
<div id="{$plugin.ID}" class="pluginBox {$plugin.STATE}">
<table>
<tr>
<td class="pluginBoxNameCell">
{$plugin.NAME}
</td>
<td>{$plugin.DESC}</td>
</tr>
<tr class="pluginActions">
<td>
{if $plugin.STATE == 'active'}
<a href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
| <a href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>
{elseif $plugin.STATE == 'inactive'}
<a href="{$plugin.U_ACTION}&amp;action=activate" class="activate">{'Activate'|@translate}</a>
| <a href="{$plugin.U_ACTION}&amp;action=delete" onclick="return confirm(confirmMsg);">{'Delete'|@translate}</a>
{elseif $plugin.STATE == 'missing'}
<a href="{$plugin.U_ACTION}&amp;action=uninstall" onclick="return confirm(confirmMsg);">{'Uninstall'|@translate}</a>
{elseif $plugin.STATE == 'merged'}
<a href="{$plugin.U_ACTION}&amp;action=delete">{'Delete'|@translate}</a>
{/if}
</td>
<td>
{'Version'|@translate} {$plugin.VERSION}
{if not empty($author)}
| {'By %s'|@translate:$author}
{/if}
{if not empty($plugin.VISIT_URL)}
| <a class="externalLink" href="{$plugin.VISIT_URL}">{'Visit plugin site'|@translate}</a>
{/if}
</td>
</tr>
</table>
</div> {*<!-- pluginBox -->*}
{if not empty($plugin.VISIT_URL)}
{assign var='version' value="<a class='externalLink' href='"|cat:$plugin.VISIT_URL|cat:"'>"|cat:$plugin.VERSION|cat:"</a>"}
{else}
{if not empty($plugin.VISIT_URL)}
{assign var='version' value="<a class='externalLink' href='"|cat:$plugin.VISIT_URL|cat:"'>"|cat:$plugin.VERSION|cat:"</a>"}
{else}
{assign var='version' value=$plugin.VERSION}
{/if}
<div id="{$plugin.ID}" class="pluginMiniBox {$plugin.STATE}">
{assign var='version' value=$plugin.VERSION}
{/if}
<div id="{$plugin.ID}" class="pluginMiniBox {$plugin.STATE}">
<div class="pluginBar {if $plugin.STATE == 'active'}pluginBarActive{else}pluginBarInactive{/if}" {if $plugin.STATE == 'active'}#ffa646{else}grey{/if}></div>
<div class="pluginContent">
<a class="icon-info-circled-1 showInfo" title="{if !empty($author)}{'By %s'|@translate:$author} | {/if}{'Version'|@translate} {$version}"></a>
<div class="pluginMiniBoxNameCell">
{$plugin.NAME}
<a class="icon-info-circled-1 showInfo" title="{if !empty($author)}{'By %s'|@translate:$author} | {/if}{'Version'|@translate} {$version}<br/>{$plugin.DESC|@escape:'html'}"></a>
</div>
<div class="pluginDesc">
{$plugin.DESC}
</div>
<div class="pluginActions">
<div>
{if $plugin.STATE == 'active'}
<a href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
| <a href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>
{if $plugin.SETTINGS_URL != ''}
<a href="{$plugin.SETTINGS_URL}" class="pluginActionLevel1 icon-cog">{'Settings'|@translate}</a>
{else}
<div class="pluginUnavailableAction icon-cog">{'Settings'|@translate}</div>
{/if}
<a class="pluginActionLevel2 icon-cancel-circled" href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
<a class="pluginActionLevel3 icon-back-in-time" href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>
{elseif $plugin.STATE == 'inactive'}
<a href="{$plugin.U_ACTION}&amp;action=activate" class="activate">{'Activate'|@translate}</a>
| <a href="{$plugin.U_ACTION}&amp;action=delete" onclick="return confirm(confirmMsg);">{'Delete'|@translate}</a>
<div class="pluginEmptyInput"></div>
<a class="pluginActionLevel1 icon-plus" href="{$plugin.U_ACTION}&amp;action=activate" class="activate">{'Activate'|@translate}</a>
<a class="pluginActionLevel3" href="{$plugin.U_ACTION}&amp;action=delete" onclick="return confirm(confirmMsg);">{'Delete'|@translate}</a>
{elseif $plugin.STATE == 'missing'}
<a href="{$plugin.U_ACTION}&amp;action=uninstall" onclick="return confirm(confirmMsg);">{'Uninstall'|@translate}</a>
<div class="pluginEmptyInput"></div>
<div class="pluginEmptyInput"></div>
<a class="pluginActionLevel3" href="{$plugin.U_ACTION}&amp;action=uninstall" onclick="return confirm(confirmMsg);">{'Uninstall'|@translate}</a>
{elseif $plugin.STATE == 'merged'}
<a href="{$plugin.U_ACTION}&amp;action=delete">{'Delete'|@translate}</a>
{/if}
</div>
<div class="pluginEmptyInput"></div>
<div class="pluginEmptyInput"></div>
<a class="pluginActionLevel3" href="{$plugin.U_ACTION}&amp;action=delete">{'Delete'|@translate}</a>
{/if}
</div>
</div> {*<!-- pluginMiniBox -->*}
</div>
</div> {*<!-- pluginMiniBox -->*}
{/if}
{if $plugin.STATE == 'active'}
{counter}
{if $active_plugins == $i}
<div class="deactivate_all"><a>{'Deactivate all'|@translate}</a></div>
{counter}
{/if}
{/if}
{/foreach}
{/foreach}
</fieldset>
<div class="showInactivePlugins" {if $count_types_plugins["inactive"]<=8}style="display:none"{/if} >
<div class="showInactivePluginsInfo">
{assign var='badge_inactive' value='<span class="pluginBoxesCount">%s</span>'|@sprintf:$count_types_plugins["inactive"]}
<div>{'You have %s inactive plugins'|translate:$badge_inactive}</div>
</div>
<button class="buttonLike" id="showInactivePluginsAction">{'Show inactive plugins'|@translate}</button>
</div>
{/if}