diff options
| -rw-r--r-- | settings/css/settings.scss | 13 | ||||
| -rw-r--r-- | settings/src/components/appList.vue | 25 |
2 files changed, 24 insertions, 14 deletions
diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 0cbef8693d0..1ca14b8f1d3 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -989,10 +989,15 @@ span.version { .section { cursor: pointer; } + .app-list-move { + transition: transform 1s; + } &.installed { - display: table; - width: 100%; - height: auto; + .apps-list-container { + display: table; + width: 100%; + height: auto; + } margin-bottom: 100px; .section { display: table-row; @@ -1583,4 +1588,4 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { user-select: none; } } -} +}
\ No newline at end of file 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" /> |