From: Julius Härtl <jus@bitgrid.net>
Date: Mon, 27 Jul 2020 09:17:31 +0000 (+0200)
Subject: WIP: drag and drop in modal
X-Git-Tag: v20.0.0beta1~122^2~16
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c983094625e37c7062845edb929674cd2091b4c3;p=nextcloud-server.git

WIP: drag and drop in modal

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 1dd95431867..6680daea454 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -2,7 +2,7 @@
 	<div id="app-dashboard">
 		<h2>{{ greeting.icon }} {{ greeting.text }}</h2>
 
-		<Draggable class="panels" v-model="layout" @end="saveLayout">
+		<Draggable v-model="layout" class="panels" @end="saveLayout">
 			<div v-for="panelId in layout" :key="panels[panelId].id" class="panel">
 				<div class="panel--header">
 					<h3 :class="panels[panelId].iconClass">
@@ -18,7 +18,10 @@
 		<Modal v-if="modal" @close="closeModal">
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
-				<transition-group name="flip-list" tag="ol">
+				<Draggable v-model="layout"
+					class="panels"
+					tag="ol"
+					@end="saveLayout">
 					<li v-for="panel in sortedPanels" :key="panel.id">
 						<input :id="'panel-checkbox-' + panel.id"
 							type="checkbox"
@@ -29,10 +32,21 @@
 							{{ panel.title }}
 						</label>
 					</li>
-					<li key="appstore">
-						<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
+				</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>
 		</Modal>
 	</div>
@@ -121,6 +135,9 @@ export default {
 		rerenderPanels() {
 			for (const app in this.callbacks) {
 				const element = this.$refs[app]
+				if (this.layout.indexOf(app) === -1) {
+					continue
+				}
 				if (this.panels[app] && this.panels[app].mounted) {
 					continue
 				}
@@ -266,6 +283,8 @@ export default {
 		width: 30vw;
 		margin: 20px;
 		ol {
+			display: flex;
+			flex-direction: column;
 			list-style-type: none;
 		}
 		li label {