Fix active indicator and add proper separation between screenshot and preview

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-05-29 17:17:00 +02:00
parent 92b31e49a7
commit 1ad8ea75b5
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
4 changed files with 9 additions and 6 deletions

View File

@ -486,7 +486,7 @@ class AppSettingsController extends Controller {
$appStoreData = $manager->getApp($appData['id']); $appStoreData = $manager->getApp($appData['id']);
$appData['appstoreData'] = $appStoreData; $appData['appstoreData'] = $appStoreData;
$appData['license'] = $appStoreData['releases'][0]['licenses']; $appData['license'] = $appStoreData['releases'][0]['licenses'];
$appData['preview'] = isset($appStoreData['screenshots'][0]['url']) ? 'https://usercontent.apps.nextcloud.com/'.base64_encode($appStoreData['screenshots'][0]['url']) : ''; $appData['screenshot'] = isset($appStoreData['screenshots'][0]['url']) ? 'https://usercontent.apps.nextcloud.com/'.base64_encode($appStoreData['screenshots'][0]['url']) : '';
return $appData; return $appData;
}, $apps); }, $apps);

View File

@ -53,7 +53,7 @@
</div> </div>
<div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="!loading && searchApps.length === 0 && apps.length === 0"> <div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="!loading && searchApps.length === 0 && apps.length === 0">
<div id="app-list-empty-icon" class="icon-search"></div> <div id="app-list-empty-icon" class="icon-settings-dark"></div>
<h2>{{ t('settings', 'No apps found for your versoin')}}</h2> <h2>{{ t('settings', 'No apps found for your versoin')}}</h2>
</div> </div>

View File

@ -24,11 +24,14 @@
<div class="section" v-bind:class="{ selected: isSelected }"> <div class="section" v-bind:class="{ selected: isSelected }">
<div class="app-image app-image-icon" v-on:click="showAppDetails"> <div class="app-image app-image-icon" v-on:click="showAppDetails">
<div v-if="!app.preview" class="icon-settings-dark"></div> <div v-if="!app.preview" class="icon-settings-dark"></div>
<img v-if="!app.previewAsIcon && app.preview" :src="app.preview" width="100%" /> <img v-if="!app.previewAsIcon && app.preview && listView" :src="app.preview" width="100%" />
<svg v-if="app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
<svg v-if="listView && app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
<defs><filter :id="filterId"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs> <defs><filter :id="filterId"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" :filter="filterUrl" :xlink:href="app.preview" class="app-icon"></image> <image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" :filter="filterUrl" :xlink:href="app.preview" class="app-icon"></image>
</svg> </svg>
<img v-if="!listView && app.screenshot" :src="app.screenshot" width="100%" />
</div> </div>
<div class="app-name" v-on:click="showAppDetails"> <div class="app-name" v-on:click="showAppDetails">
{{ app.name }} {{ app.name }}

View File

@ -122,7 +122,7 @@ export default {
// Map groups // Map groups
categories = categories.map(category => { categories = categories.map(category => {
let item = {}; let item = {};
item.id = category.ident; item.id = 'app-category-' + category.ident;
item.icon = 'icon-category-' + category.ident; item.icon = 'icon-category-' + category.ident;
item.classes = []; // empty classes, active will be set later item.classes = []; // empty classes, active will be set later
item.router = { // router link to item.router = { // router link to
@ -188,7 +188,7 @@ export default {
categories = defaultCategories.concat(categories); categories = defaultCategories.concat(categories);
// Set current group as active // Set current group as active
let activeGroup = categories.findIndex(group => group.id === this.category); let activeGroup = categories.findIndex(group => group.id === 'app-category-' + this.category);
if (activeGroup >= 0) { if (activeGroup >= 0) {
categories[activeGroup].classes.push('active'); categories[activeGroup].classes.push('active');
} else { } else {