From 2f332651d3c431b4a3b24b377dc45dcd54e7efce Mon Sep 17 00:00:00 2001
From: Julius Härtl <jus@bitgrid.net>
Date: Wed, 4 Jul 2018 13:33:56 +0200
Subject: Add transition when enabling/disabling apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 settings/src/components/appList.vue | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

(limited to 'settings/src')

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">&nbsp;</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">&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 v-if="useAppStoreView">
 				<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" :list-view="false" />
-- 
cgit v1.2.3