Use icons for Activate/Deactive/Settings links

An unchecked checkbox icon is used for Activate (to show that it's
currently inactive). A checked checkbox icon is used for Deactivate (to
show that it's currently active). A gear icon is used for the Settings
link.

The checkbox icons are placed on the left side of the name, as checkboxes
usually appear. The gear icon is placed floated to the right side of the
name, to have a clean look.

The plugin list is more compact, and it's much easier to identify which
plugins are currently active, and which have settings. No need to read
any words!

The previously used words (with language dependency) is still used as the
tooltip (title) that is shown when the mouse hovers over the icons.

In the themes page, the checked checkbox icon denotes the curently active
theme, but doesn't do anything when clicked. This is by design, since only
one theme can be active at a time. For consistency sake, a circle (radio
button style) was not used.

Signed-off-by: ADTC <send2adtc@gmail.com>
This commit is contained in:
ADTC 2017-03-13 21:31:02 +08:00
parent c9fc277b14
commit e969cc95b2
3 changed files with 16 additions and 13 deletions

View File

@ -591,6 +591,11 @@ tr.theme-installed {
background: #F2F7FF !important; background: #F2F7FF !important;
} }
div.plugin-name i.settings-icon {
float: right;
margin-top: 3px;
}
div.plugin-links > a { div.plugin-links > a {
display: inline-block; display: inline-block;
margin-top: 5px; margin-top: 5px;

View File

@ -20,25 +20,21 @@ foreach($plugins['all'] as $Plugin)
echo ' echo '
<tr '.($Plugin->installed()?'class="plugin-installed"':'class="plugin-notInstalled"').'> <tr '.($Plugin->installed()?'class="plugin-installed"':'class="plugin-notInstalled"').'>
<td> <td>
<div class="plugin-name">'.$Plugin->name().'</div> <div class="plugin-name">
<div class="plugin-links">
'; ';
if($Plugin->installed()) { if($Plugin->installed()) {
echo '<a class="uninstall" href="'.HTML_PATH_ADMIN_ROOT.'uninstall-plugin/'.$Plugin->className().'" title="'.$L->g('Deactivate').'"><i class="uk-icon-check-square-o"></i></a> ';
if(method_exists($Plugin, 'form')) { if(method_exists($Plugin, 'form')) {
echo '<a class="configure" href="'.HTML_PATH_ADMIN_ROOT.'configure-plugin/'.$Plugin->className().'">'.$L->g('Settings').'</a>'; echo '<a class="configure" href="'.HTML_PATH_ADMIN_ROOT.'configure-plugin/'.$Plugin->className().'" title="'.$L->g('Settings').'"><i class="uk-icon-cog settings-icon"></i></a> ';
echo '<span class="separator"> | </span>';
} }
echo '<a class="uninstall" href="'.HTML_PATH_ADMIN_ROOT.'uninstall-plugin/'.$Plugin->className().'">'.$L->g('Deactivate').'</a>';
} }
else { else {
echo '<a class="install" href="'.HTML_PATH_ADMIN_ROOT.'install-plugin/'.$Plugin->className().'">'.$L->g('Activate').'</a>'; echo '<a class="install" href="'.HTML_PATH_ADMIN_ROOT.'install-plugin/'.$Plugin->className().'" title="'.$L->g('Activate').'"><i class="uk-icon-square-o"></i></a> ';
} }
echo ' echo '
</div> '.$Plugin->name().'</div>
</td>'; </td>';
echo '<td>'; echo '<td>';

View File

@ -20,16 +20,18 @@ foreach($themes as $theme)
echo ' echo '
<tr '.($theme['dirname']==$Site->theme()?'class="theme-installed"':'class="theme-notInstalled"').'> <tr '.($theme['dirname']==$Site->theme()?'class="theme-installed"':'class="theme-notInstalled"').'>
<td> <td>
<div class="plugin-name">'.$theme['name'].'</div> <div class="plugin-name">
<div class="plugin-links">
'; ';
if($theme['dirname']!=$Site->theme()) { if($theme['dirname']!=$Site->theme()) {
echo '<a class="install" href="'.HTML_PATH_ADMIN_ROOT.'install-theme/'.$theme['dirname'].'">'.$L->g('Activate').'</a>'; echo '<a class="install" href="'.HTML_PATH_ADMIN_ROOT.'install-theme/'.$theme['dirname'].'" title="'.$L->g('Activate').'"><i class="uk-icon-square-o"></i></a> ';
}
else {
echo '<i class="uk-icon-check-square-o"></i> ';
} }
echo ' echo '
</div> '.$theme['name'].'</div>
</td>'; </td>';
echo '<td>'; echo '<td>';