MDL-49329 admin: Improve the styling of the Plugins check screen

The intention here is to make the table a little bit more compact (using
less columns) and to make use of the bootstrap based label elements if
available.
This commit is contained in:
David Mudrák
2015-10-08 23:32:02 +02:00
parent 74fad2ce3d
commit fd17898c0c
5 changed files with 83 additions and 71 deletions
+51 -29
View File
@@ -870,16 +870,14 @@ class core_admin_renderer extends plugin_renderer_base {
$table = new html_table();
$table->id = 'plugins-check';
$table->head = array(
get_string('displayname', 'core_plugin'),
get_string('rootdir', 'core_plugin'),
get_string('source', 'core_plugin'),
get_string('displayname', 'core_plugin').' / '.get_string('rootdir', 'core_plugin'),
get_string('versiondb', 'core_plugin'),
get_string('versiondisk', 'core_plugin'),
get_string('requires', 'core_plugin'),
get_string('status', 'core_plugin'),
get_string('source', 'core_plugin').' / '.get_string('status', 'core_plugin'),
);
$table->colclasses = array(
'displayname', 'rootdir', 'source', 'versiondb', 'versiondisk', 'requires', 'status',
'displayname', 'versiondb', 'versiondisk', 'requires', 'status',
);
$table->data = array();
@@ -914,27 +912,51 @@ class core_admin_renderer extends plugin_renderer_base {
if ($this->page->theme->resolve_image_location('icon', $plugin->type . '_' . $plugin->name, null)) {
$icon = $this->output->pix_icon('icon', '', $plugin->type . '_' . $plugin->name, array('class' => 'smallicon pluginicon'));
} else {
$icon = $this->output->pix_icon('spacer', '', 'moodle', array('class' => 'smallicon pluginicon noicon'));
$icon = '';
}
$displayname = $icon . ' ' . $plugin->displayname;
$displayname = new html_table_cell($displayname);
$rootdir = new html_table_cell($plugin->get_dir());
if ($isstandard = $plugin->is_standard()) {
$row->attributes['class'] .= ' standard';
$source = new html_table_cell(get_string('sourcestd', 'core_plugin'));
} else {
$row->attributes['class'] .= ' extension';
$source = new html_table_cell(get_string('sourceext', 'core_plugin'));
}
$displayname = new html_table_cell(
$icon.
html_writer::span($plugin->displayname, 'pluginname').
html_writer::div($plugin->get_dir(), 'plugindir')
);
$versiondb = new html_table_cell($plugin->versiondb);
$versiondisk = new html_table_cell($plugin->versiondisk);
if ($isstandard = $plugin->is_standard()) {
$row->attributes['class'] .= ' standard';
$sourcelabel = html_writer::span(get_string('sourcestd', 'core_plugin'), 'sourcetext label');
} else {
$row->attributes['class'] .= ' extension';
$sourcelabel = html_writer::span(get_string('sourceext', 'core_plugin'), 'sourcetext label label-info');
}
$coredependency = $plugin->is_core_dependency_satisfied($version);
$otherpluginsdependencies = $pluginman->are_dependencies_satisfied($plugin->get_other_required_plugins());
$dependenciesok = $coredependency && $otherpluginsdependencies;
$statuscode = $plugin->get_status();
$row->attributes['class'] .= ' status-' . $statuscode;
$status = get_string('status_' . $statuscode, 'core_plugin');
$statusclass = 'statustext label ';
switch ($statuscode) {
case core_plugin_manager::PLUGIN_STATUS_NEW:
$statusclass .= $dependenciesok ? 'label-success' : 'label-warning';
break;
case core_plugin_manager::PLUGIN_STATUS_UPGRADE:
$statusclass .= $dependenciesok ? 'label-info' : 'label-warning';
break;
case core_plugin_manager::PLUGIN_STATUS_MISSING:
case core_plugin_manager::PLUGIN_STATUS_DOWNGRADE:
case core_plugin_manager::PLUGIN_STATUS_DELETE:
$statusclass .= 'label-important';
break;
case core_plugin_manager::PLUGIN_STATUS_NODB:
case core_plugin_manager::PLUGIN_STATUS_UPTODATE:
$statusclass .= $dependenciesok ? '' : 'label-warning';
break;
}
$status = html_writer::span(get_string('status_' . $statuscode, 'core_plugin'), $statusclass);
$availableupdates = $plugin->available_updates();
if (!empty($availableupdates) and empty($CFG->disableupdatenotifications)) {
@@ -943,17 +965,13 @@ class core_admin_renderer extends plugin_renderer_base {
}
}
$status = new html_table_cell($status);
$status = new html_table_cell($sourcelabel.' '.$status);
$requires = new html_table_cell($this->required_column($plugin, $pluginman, $version));
$statusisboring = in_array($statuscode, array(
core_plugin_manager::PLUGIN_STATUS_NODB, core_plugin_manager::PLUGIN_STATUS_UPTODATE));
$coredependency = $plugin->is_core_dependency_satisfied($version);
$otherpluginsdependencies = $pluginman->are_dependencies_satisfied($plugin->get_other_required_plugins());
$dependenciesok = $coredependency && $otherpluginsdependencies;
if ($options['xdep']) {
// we want to see only plugins with failed dependencies
if ($dependenciesok) {
@@ -971,8 +989,7 @@ class core_admin_renderer extends plugin_renderer_base {
// ok, the plugin should be displayed
$numofhighlighted[$type]++;
$row->cells = array($displayname, $rootdir, $source,
$versiondb, $versiondisk, $requires, $status);
$row->cells = array($displayname, $versiondb, $versiondisk, $requires, $status);
$plugintyperows[] = $row;
}
@@ -1036,11 +1053,13 @@ class core_admin_renderer extends plugin_renderer_base {
if (!empty($plugin->versionrequires)) {
if ($plugin->versionrequires <= $version) {
$class = 'requires-ok';
$label = '';
} else {
$class = 'requires-failed';
$label = html_writer::span(get_string('dependencyfails', 'core_plugin'), 'label label-important');
}
$requires[] = html_writer::tag('li',
get_string('moodleversion', 'core_plugin', $plugin->versionrequires),
html_writer::span(get_string('moodleversion', 'core_plugin', $plugin->versionrequires), 'dep dep-core').' '.$label,
array('class' => $class));
}
@@ -1050,6 +1069,7 @@ class core_admin_renderer extends plugin_renderer_base {
if (is_null($otherplugin)) {
// The required plugin is not installed.
$label = html_writer::span(get_string('dependencyfails', 'core_plugin'), 'label label-important');
$class = 'requires-failed requires-missing';
$installurl = new moodle_url('https://moodle.org/plugins/view.php', array('plugin' => $component));
$uploadurl = new moodle_url('/admin/tool/installaddon/');
@@ -1058,6 +1078,7 @@ class core_admin_renderer extends plugin_renderer_base {
} else if ($requiredversion != ANY_VERSION and $otherplugin->versiondisk < $requiredversion) {
// The required plugin is installed but needs to be updated.
$label = html_writer::span(get_string('dependencyfails', 'core_plugin'), 'label label-important');
$class = 'requires-failed requires-outdated';
if (!$otherplugin->is_standard()) {
$updateurl = new moodle_url($this->page->url, array('sesskey' => sesskey(), 'fetchupdates' => 1));
@@ -1066,6 +1087,7 @@ class core_admin_renderer extends plugin_renderer_base {
} else {
// Already installed plugin with sufficient version.
$label = '';
$class = 'requires-ok';
}
@@ -1076,9 +1098,9 @@ class core_admin_renderer extends plugin_renderer_base {
}
$requires[] = html_writer::tag('li',
html_writer::div(get_string($str, 'core_plugin',
array('component' => $component, 'version' => $requiredversion)), 'component').
html_writer::div(implode(' | ', $actions), 'actions'),
html_writer::span(get_string($str, 'core_plugin',
array('component' => $component, 'version' => $requiredversion)), 'dep dep-plugin').' '.$label.
' '.html_writer::span(implode(' | ', $actions), 'actions'),
array('class' => $class));
}
+1
View File
@@ -30,6 +30,7 @@ $string['availability'] = 'Availability';
$string['checkforupdates'] = 'Check for available updates';
$string['checkforupdateslast'] = 'Last check done on {$a}';
$string['detectedmisplacedplugin'] = 'Plugin "{$a->component}" is installed in incorrect location "{$a->current}", expected location is "{$a->expected}"';
$string['dependencyfails'] = 'Fails';
$string['dependencyinstall'] = 'Install';
$string['dependencyupload'] = 'Upload';
$string['displayname'] = 'Plugin name';
+9 -11
View File
@@ -270,29 +270,29 @@
#page-admin-index #plugins-check-info {text-align:center;margin:1em;}
#page-admin-index #plugins-check td {vertical-align: top;}
#page-admin-index #plugins-check {margin-left:auto; margin-right:auto;}
#page-admin-index #plugins-check .displayname .pluginicon {width:16px;}
#page-admin-index #plugins-check .displayname .pluginicon {width:16px;margin-right:5px}
#page-admin-index #plugins-check .displayname .plugindir {font-size:0.7em;color:#999;}
#page-admin-index #plugins-check .missingfromdisk .displayname {background-color:#ffd3d9;}
#page-admin-index #plugins-check .standard .source {color:#999;}
#page-admin-index #plugins-check .extension .source {background-color:#f3f2aa;}
#page-admin-index #plugins-check .msg td {text-align:center;}
#page-admin-index #plugins-check .status-downgrade .status {background-color:#ffd3d9;}
#page-admin-index #plugins-check .status-missing .status {background-color:#ffd3d9;}
#page-admin-index #plugins-check .status-new .status {background-color:#e7f1c3;}
#page-admin-index #plugins-check .status-nodb .status {color:#999;}
#page-admin-index #plugins-check .status-nodb .status .statustext {color:#999;}
#page-admin-index #plugins-check .status-delete .status {background-color:#d2ebff;}
#page-admin-index #plugins-check .status-upgrade .status {background-color:#d2ebff;}
#page-admin-index #plugins-check .status-uptodate .status {color:#999;}
#page-admin-index #plugins-check .status-uptodate .status .statustext {color:#999;}
#page-admin-index #plugins-check .status .sourcetext:after {content:" / ";}
#page-admin-index #plugins-check .standard .status .sourcetext {color:#999;}
#page-admin-index #plugins-check .requires ul {font-size:0.7em;margin:0;}
#page-admin-index #plugins-check .requires li {display:block;}
#page-admin-index #plugins-check .requires-ok {color:#999;}
#page-admin-index #plugins-check .requires-failed {background-color:#ffd3d9;}
#page-admin-index #plugins-check .status .pluginupdateinfo {padding:5px 10px;margin:10px;background-color:#d2ebff;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
#page-admin-index #plugins-check .requires-failed .label-important {color:red;}
#page-admin-index #plugins-check .status .pluginupdateinfo {padding:5px 10px;margin:10px 0px;background-color:#d2ebff;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
#page-admin-index #plugins-check .status .pluginupdateinfo.maturity50 {background-color:#ffd3d9;}
#page-admin-index #plugins-check .status .pluginupdateinfo.maturity100,
#page-admin-index #plugins-check .status .pluginupdateinfo.maturity150 {background-color:#f3f2aa;}
#page-admin-index #plugins-check .status .pluginupdateinfo span,
#page-admin-index #plugins-check .status .pluginupdateinfo a {padding-right:1em;}
#page-admin-index #plugins-check .status .pluginupdateinfo .separator {border-left:1px dotted #333;}
#page-admin-index #plugins-check .status .pluginupdateinfo .separator:after {content:" | ";}
#page-admin-index .upgradepluginsinfo {text-align:center;}
/** Plugins management */
@@ -306,7 +306,6 @@
#page-admin-plugins #plugins-control-panel .status-new .pluginname {background-color:#e7f1c3;}
#page-admin-plugins #plugins-control-panel .status-new .statusmsg {color:#060;}
#page-admin-plugins #plugins-control-panel .disabled .availability {background-color:#eee;}
#page-admin-plugins #plugins-control-panel .extension .source {background-color:#f3f2aa;}
#page-admin-plugins #plugins-control-panel .msg td {text-align:center;}
#page-admin-plugins #plugins-control-panel .requiredby {font-size:0.8em;color:#999;}
#page-admin-plugins #plugins-overview-panel {margin:1em auto;text-align:center;}
@@ -327,7 +326,6 @@
#page-admin-plugins #plugins-control-panel .notes .pluginupdateinfo a {padding-right:1em;}
#page-admin-plugins #plugins-control-panel .notes .pluginupdateinfo .separator {border-left:1px dotted #333;}
.dir-rtl #plugins-check .pluginupdateinfo {text-align: center;direction: ltr;}
.dir-rtl #plugins-check .rootdir,
.dir-rtl #plugins-check .requires-ok {text-align: left;direction: ltr;}
/** MNet networking */
+21 -30
View File
@@ -542,32 +542,20 @@ img.iconsmall {
margin: 1em;
}
#plugins-check .displayname .pluginicon {
width: 16px;
}
#plugins-check .status-new .status {
background-color: @successBackground;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity200 .info.release,
#plugins-check .status-upgrade .status,
#plugins-check .status-delete .status {
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity200 .info.release {
background-color: @infoBackground;
}
#plugins-control-panel .extension .source,
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity100 .info.release,
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity150 .info.release,
.pluginupdateinfo.maturity100,
.pluginupdateinfo.maturity150,
#plugins-check .extension .source {
#plugins-check .status .pluginupdateinfo.maturity100,
#plugins-check .status .pluginupdateinfo.maturity150 {
background-color: @warningBackground;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity50 .info.release,
.pluginupdateinfo.maturity50,
#plugins-check .requires-failed,
#plugins-check .status .pluginupdateinfo.maturity50,
#plugins-check .missingfromdisk .displayname,
#plugins-check .status-missing .status,
#plugins-check .status-downgrade .status {
@@ -600,31 +588,32 @@ img.iconsmall {
background-color: @inputDisabledBackground;
}
#plugins-check .standard .source,
#plugins-check .status-nodb .status,
#plugins-check .status-uptodate .status,
#plugins-check .requires-ok {
.muted
}
#plugins-check .displayname {
.pluginicon {
margin-right: 5px;
width: 16px;
}
.plugindir {
.muted;
font-size: @fontSizeSmall;
}
}
#plugins-check .requires ul {
font-size: @fontSizeMini;
margin: 0;
margin-left: 13px; // To undo the default 25px, does not look that great inside a table cell;
}
#plugins-check .status .pluginupdateinfo {
padding: 5px 10px;
margin: 10px;
margin: 10px 0px;
background-color: @infoBackground;
.border-radius(10px);
}
#plugins-check .status .pluginupdateinfo span,
#plugins-check .status .pluginupdateinfo a {
padding-right: 1em;
}
#page-admin-index .upgradepluginsinfo {
text-align: center;
}
@@ -650,11 +639,14 @@ img.iconsmall {
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo .separator,
#plugins-check .status .pluginupdateinfo .separator,
#page-admin-plugins .separator {
border-left: 1px dotted @grayLight;
}
#plugins-check .status .pluginupdateinfo .separator:after {
content: " | ";
}
#plugins-control-panel .msg td {
text-align: center;
}
@@ -704,7 +696,6 @@ img.iconsmall {
direction: ltr;
}
#plugins-check .rootdir,
#plugins-check .requires-ok {
text-align: left;
direction: ltr;
File diff suppressed because one or more lines are too long