diff options
| author | Julius Härtl <jus@bitgrid.net> | 2020-08-05 12:39:33 +0200 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2020-08-05 17:03:39 +0200 |
| commit | dbbc675a96a31e24a7fab7025bdaa3508cce1854 (patch) | |
| tree | ac1de6d626a4f23970337db2016d7ce05400ac62 /apps | |
| parent | 61cc356e0bed58d0f1f0a451f63725847f6357ac (diff) | |
| download | nextcloud-server-dbbc675a96a31e24a7fab7025bdaa3508cce1854.tar.gz nextcloud-server-dbbc675a96a31e24a7fab7025bdaa3508cce1854.zip | |
Fix drag behavior in modal
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/dashboard/src/App.vue | 28 |
1 files changed, 11 insertions, 17 deletions
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue index 7dcaff47825..d73f895fc91 100644 --- a/apps/dashboard/src/App.vue +++ b/apps/dashboard/src/App.vue @@ -8,7 +8,10 @@ :ref="'status-' + status" /> </div> - <Draggable v-model="layout" class="panels" @end="saveLayout" handle=".panel--header"> + <Draggable v-model="layout" + class="panels" + handle=".panel--header" + @end="saveLayout"> <div v-for="panelId in layout" :key="panels[panelId].id" class="panel"> <div class="panel--header"> <h3 :class="panels[panelId].iconClass"> @@ -21,7 +24,10 @@ </div> </Draggable> - <a class="edit-panels icon-add" :class="{ firstrun: firstRun }" @click="showModal" v-tooltip="tooltip">{{ t('dashboard', 'Edit widgets') }}</a> + <a v-tooltip="tooltip" + class="edit-panels icon-add" + :class="{ firstrun: firstRun }" + @click="showModal">{{ t('dashboard', 'Edit widgets') }}</a> <Modal v-if="modal" @close="closeModal"> <div class="modal__content"> @@ -29,6 +35,7 @@ <Draggable v-model="layout" class="panels" tag="ol" + handle=".draggable" @end="saveLayout"> <li v-for="panel in sortedPanels" :key="panel.id"> <input :id="'panel-checkbox-' + panel.id" @@ -36,23 +43,11 @@ class="checkbox" :checked="isActive(panel)" @input="updateCheckbox(panel, $event.target.checked)"> - <label :for="'panel-checkbox-' + panel.id" :class="panel.iconClass"> + <label :for="'panel-checkbox-' + panel.id" :class="isActive(panel) ? 'draggable ' + panel.iconClass : panel.iconClass"> {{ panel.title }} </label> </li> </Draggable> - <transition-group name="flip-list" tag="ol"> - <li v-for="panel in sortedPanels" :key="panel.id"> - <input :id="'panel-checkbox-' + panel.id" - type="checkbox" - class="checkbox" - :checked="isActive(panel)" - @input="updateCheckbox(panel, $event.target.checked)"> - <label :for="'panel-checkbox-' + panel.id" :class="panel.iconClass"> - {{ panel.title }} - </label> - </li> - </transition-group> <a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a> </div> @@ -270,7 +265,6 @@ export default { } & > .panel--header { - position: sticky; display: flex; z-index: 1; top: 50px; @@ -365,7 +359,7 @@ export default { } .flip-list-move { - transition: transform 1s; + transition: transform var(--animation-slow); } .statuses { |