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

13
settings/css/settings.scss
View File

@ -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;
}
}
}
}

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

@ -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" />