Make enabled and disabled apps a tabular list

Signed-off-by: Felix A. Epp <work@felixepp.de>
This commit is contained in:
Felix A. Epp 2017-01-21 17:06:26 +01:00 committed by Jan-Christoph Borchardt
parent d01832ff64
commit 91a4676fc0
3 changed files with 91 additions and 7 deletions

View File

@ -541,9 +541,7 @@ span.version {
#app-navigation .app-external,
.app-version {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
color: rgba(85,85,85,.5);
}
.app-level {
@ -725,6 +723,40 @@ form.section {
margin-bottom: 1em;
}
#apps-list.installed {
display: table;
width: 100%;
height: auto;
}
#apps-list.installed .section {
display: table-row;
padding: 0;
margin: 0;
}
#apps-list.installed .section > *{
display: table-cell;
width: auto;
height: 3em;
vertical-align: middle;
float: none;
border-bottom: 1px solid #eee;
padding: .5em 1em;
box-sizing: border-box;
}
#apps-list.installed .app-image {
text-align: center;
}
.installed .actions {
text-align: right;
}
#apps-list.installed .groups-enable {
margin-top: 0
}
/* LOG */
#log {

View File

@ -94,7 +94,14 @@ OC.Settings.Apps = OC.Settings.Apps || {
// default values for missing fields
return _.extend({level: 0}, app);
});
var source = $("#app-template").html();
var source
if (categoryId === 'enabled' || categoryId === 'disabled') {
source = $("#app-template-installed").html();
$('#apps-list').addClass('installed');
} else {
source = $("#app-template").html();
$('#apps-list').removeClass('installed');
}
var template = Handlebars.compile(source);
if (appList.length) {
@ -257,12 +264,13 @@ OC.Settings.Apps = OC.Settings.Apps || {
*/
imageUrl : function (url, appfromstore) {
var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
var img;
if (appfromstore) {
img = '<svg width="72" height="72" viewBox="0 0 72 72">';
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '" class="app-icon" /></svg>';
} else {
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
img = '<svg width="32" height="32" viewBox="0 0 32 32">';
img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
}
return img;
},

View File

@ -29,6 +29,50 @@ script(
<?php endif; ?>
</script>
<script id="app-template-installed" type="text/x-handlebars">
<div class="section" id="app-{{id}}">
<div class="app-image app-image-icon hidden"></div>
<h2 class="app-name">
{{#if detailpage}}
<a href="{{detailpage}}" target="_blank" rel="noreferrer">{{name}}</a>
{{else}}
{{name}}
{{/if}}
</h2>
<div class="app-version"> {{version}}</div>
<div class="app-level">
{{{level}}}
</div>
<div>
{{#if active}}
<div class="groups-enable">
<input type="checkbox" class="groups-enable__checkbox checkbox" id="groups_enable-{{id}}"/>
<label for="groups_enable-{{id}}"><?php p($l->t('Limit to groups')); ?></label>
<input type="hidden" id="group_select" title="<?php p($l->t('All')); ?>">
</div>
{{/if}}
</div>
<div class="actions">
<div class="app-dependencies update hidden">
<p><?php p($l->t('This app has an update available.')); ?></p>
</div>
<div class="warning hidden"></div>
{{#if active}}
<input class="enable" type="submit" data-appid="{{id}}" data-active="true" value="<?php p($l->t("Disable"));?>"/>
{{else}}
<input class="enable{{#if needsDownload}} needs-download{{/if}}" type="submit" data-appid="{{id}}" data-active="false" {{#unless canInstall}}disabled="disabled"{{/unless}} value="<?php p($l->t("Enable"));?>"/>
{{/if}}
<input class="update hidden" type="submit" value="<?php p($l->t('Update to %s', array('{{update}}'))); ?>" data-appid="{{id}}" />
{{#if canUnInstall}}
<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall app')); ?>" data-appid="{{id}}" />
{{/if}}
</div>
</div>
</script>
<script id="app-template" type="text/x-handlebars">
<div class="section" id="app-{{id}}">
{{#if preview}}