mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add transition when enabling/disabling apps 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-07-04 13:33:56 +02:00
parent ba13880147
commit 2f332651d3
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
settings/css/settings.scss
View File

@ -989,10 +989,15 @@ span.version {
.section { .section {
cursor: pointer; cursor: pointer;
} }
.app-list-move {
transition: transform 1s;
}
&.installed { &.installed {
display: table; .apps-list-container {
width: 100%; display: table;
height: auto; width: 100%;
height: auto;
}
margin-bottom: 100px; margin-bottom: 100px;
.section { .section {
display: table-row; display: table-row;

25
settings/src/components/appList.vue
View File

@ -24,18 +24,23 @@
<div id="app-content-inner"> <div id="app-content-inner">
<div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}"> <div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
<template v-if="useListView"> <template v-if="useListView">
<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" /> <transition-group name="app-list" tag="div" class="apps-list-container">
<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
</transition-group>
</template> </template>
<template v-for="bundle in bundles" v-if="useBundleView && bundleApps(bundle.id).length > 0"> <template v-for="bundle in bundles" v-if="useBundleView && bundleApps(bundle.id).length > 0">
<div class="apps-header" :key="bundle.id"> <transition-group name="app-list" tag="div" class="apps-list-container">
<div class="app-image"></div>
<h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" v-on:click="toggleBundle(bundle.id)"></h2> <div class="apps-header" :key="bundle.id">
<div class="app-version"></div> <div class="app-image"></div>
<div class="app-level"></div> <h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" v-on:click="toggleBundle(bundle.id)"></h2>
<div class="app-groups"></div> <div class="app-version"></div>
<div class="actions">&nbsp;</div> <div class="app-level"></div>
</div> <div class="app-groups"></div>
<app-item v-for="app in bundleApps(bundle.id)" :key="bundle.id + app.id" :app="app" :category="category"/> <div class="actions">&nbsp;</div>
</div>
<app-item v-for="app in bundleApps(bundle.id)" :key="bundle.id + app.id" :app="app" :category="category"/>
</transition-group>
</template> </template>
<template v-if="useAppStoreView"> <template v-if="useAppStoreView">
<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" :list-view="false" /> <app-item v-for="app in apps" :key="app.id" :app="app" :category="category" :list-view="false" />