diff options
| author | Julius Härtl <jus@bitgrid.net> | 2018-07-04 13:33:56 +0200 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2018-07-04 15:40:51 +0200 |
| commit | 2f332651d3c431b4a3b24b377dc45dcd54e7efce (patch) | |
| tree | a5ce0aca70ab997ffd6b0f362e27f6c4e1c523db /settings/src | |
| parent | ba13880147a62baa3b1a7337a73355750dcc19bb (diff) | |
| download | nextcloud-server-2f332651d3c431b4a3b24b377dc45dcd54e7efce.tar.gz nextcloud-server-2f332651d3c431b4a3b24b377dc45dcd54e7efce.zip | |
Add transition when enabling/disabling apps
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'settings/src')
| -rw-r--r-- | settings/src/components/appList.vue | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/settings/src/components/appList.vue b/settings/src/components/appList.vue index ddef5aa2165..dd19c44d885 100644 --- a/settings/src/components/appList.vue +++ b/settings/src/components/appList.vue @@ -24,18 +24,23 @@ <div id="app-content-inner"> <div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}"> <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 v-for="bundle in bundles" v-if="useBundleView && bundleApps(bundle.id).length > 0"> - <div class="apps-header" :key="bundle.id"> - <div class="app-image"></div> - <h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" v-on:click="toggleBundle(bundle.id)"></h2> - <div class="app-version"></div> - <div class="app-level"></div> - <div class="app-groups"></div> - <div class="actions"> </div> - </div> - <app-item v-for="app in bundleApps(bundle.id)" :key="bundle.id + app.id" :app="app" :category="category"/> + <transition-group name="app-list" tag="div" class="apps-list-container"> + + <div class="apps-header" :key="bundle.id"> + <div class="app-image"></div> + <h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" v-on:click="toggleBundle(bundle.id)"></h2> + <div class="app-version"></div> + <div class="app-level"></div> + <div class="app-groups"></div> + <div class="actions"> </div> + </div> + <app-item v-for="app in bundleApps(bundle.id)" :key="bundle.id + app.id" :app="app" :category="category"/> + </transition-group> </template> <template v-if="useAppStoreView"> <app-item v-for="app in apps" :key="app.id" :app="app" :category="category" :list-view="false" /> |