Move list background settings to standalone component

src/components/misc/card.vue

@@ -10,7 +10,7 @@
 				</span>
 			</a>
 		</header>
-		<div class="card-content" :class="{'p-0': !padding}">
+		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
 			<div :class="{'content': hasContent}">
 				<slot></slot>
 			</div>
@@ -46,6 +46,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 }
 </script>

src/components/misc/create-edit.vue

@@ -1,5 +1,5 @@
 <template>
-	<modal @close="$router.back()" :overflow="true">
+	<modal @close="$router.back()" :overflow="true" :wide="wide">
 		<card
 			:title="title"
 			:shadow="false"
@@ -8,6 +8,7 @@
 			:has-close="true"
 			close-icon="times"
 			@close="$router.back()"
+			:loading="loading"
 		>
 			<div class="p-4">
 				<slot></slot>
@@ -34,6 +35,7 @@
 					@click.prevent.stop="primary"
 					:icon="primaryIcon"
 					:disabled="primaryDisabled"
+					v-if="primaryLabel !== ''"
 				>
 					{{ primaryLabel }}
 				</x-button>
@@ -66,6 +68,14 @@ export default {
 			type: String,
 			default: '',
 		},
+		wide: {
+			type: Boolean,
+			default: false,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	methods: {
 		primary() {

src/components/modal/modal.vue

@@ -2,7 +2,7 @@
 	<transition name="modal">
 		<div class="modal-mask">
 			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
-				<div class="modal-content" :class="{'has-overflow': overflow}">
+				<div class="modal-content" :class="{'has-overflow': overflow, 'is-wide': wide}">
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -49,6 +49,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		wide: {
+			type: Boolean,
+			default: false,
+		},
 	},
 }
 </script>

src/router/index.js

@@ -31,6 +31,9 @@ import Gantt from '../views/list/views/Gantt'
 import Table from '../views/list/views/Table'
 // List Edit
 import ListSettingEdit from '@/views/list/settings/edit'
+import ListSettingBackground from '@/views/list/settings/background'
+import ListSettingDuplicate from '@/views/list/settings/duplicate'
+import ListSettingShare from '@/views/list/settings/share'
 // Saved Filters
 import CreateSavedFilter from '@/views/filters/CreateSavedFilter'
 
@@ -215,17 +218,17 @@ export default new Router({
 						{
 							path: '/lists/:listId/settings/background',
 							name: 'list.list.settings.background',
-							component: ListSettingEdit,
+							component: ListSettingBackground,
 						},
 						{
 							path: '/lists/:listId/settings/duplicate',
 							name: 'list.list.settings.duplicate',
-							component: ListSettingEdit,
+							component: ListSettingDuplicate,
 						},
 						{
 							path: '/lists/:listId/settings/share',
 							name: 'list.list.settings.edit',
-							component: ListSettingEdit,
+							component: ListSettingShare,
 						},
 					],
 				},

src/styles/components/list-backgrounds.scss

@@ -77,7 +77,7 @@
   }
 
   .is-load-more-button {
-    margin: 0 auto;
+    margin: 1rem auto 0 !important;
     display: block;
     width: 200px;
   }

src/styles/components/modal.scss

@@ -56,6 +56,11 @@
       color: $white;
       font-size: 2rem;
     }
+
+    .is-wide {
+      max-width: $desktop;
+      width: calc(100% - 2rem);
+    }
   }
 }
 

src/views/list/EditList.vue

@@ -5,7 +5,6 @@
 			It is not possible to create new or edit tasks or it.
 		</div>
 
-		<background :list-id="$route.params.id"/>
 
 		<component
 			:id="list.id"
@@ -29,7 +28,6 @@ import manageSharing from '../../components/sharing/userTeam'
 import LinkSharing from '../../components/sharing/linkSharing'
 
 import Fancycheckbox from '../../components/input/fancycheckbox'
-import Background from '../../components/list/partials/background-settings'
 import ColorPicker from '../../components/input/colorPicker'
 import NamespaceSearch from '../../components/namespace/namespace-search'
 import LoadingComponent from '../../components/misc/loading'
@@ -46,7 +44,6 @@ export default {
 	components: {
 		NamespaceSearch,
 		ColorPicker,
-		Background,
 		Fancycheckbox,
 		LinkSharing,
 		manageSharing,

src/views/list/settings/background.vue

@@ -1,9 +1,11 @@
 <template>
-	<card
-		:class="{ 'is-loading': backgroundService.loading}"
-		class="list-background-setting loader-container"
-		v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
+	<create-edit
 		title="Set list background"
+		primary-label=""
+		:loading="backgroundService.loading"
+		class="list-background-setting"
+		:wide="true"
+		v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
 	>
 		<div class="mb-4" v-if="uploadBackgroundEnabled">
 			<input
@@ -51,24 +53,21 @@
 				type="secondary"
 				v-if="backgroundSearchResult.length > 0"
 			>
-				<template v-if="backgroundService.loading">
-					Loading...
-				</template>
-				<template v-else>
-					Load more photos
-				</template>
+				{{ backgroundService.loading ? 'Loading...' : 'Load more photos'}}
 			</x-button>
 		</template>
-	</card>
+	</create-edit>
 </template>
 
 <script>
 import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
 import BackgroundUploadService from '../../../services/backgroundUpload'
 import {CURRENT_LIST} from '@/store/mutation-types'
+import CreateEdit from '@/components/misc/create-edit'
 
 export default {
-	name: 'background-settings',
+	name: 'background',
+	components: {CreateEdit},
 	data() {
 		return {
 			backgroundSearchTerm: '',
@@ -81,12 +80,6 @@ export default {
 			backgroundUploadService: null,
 		}
 	},
-	props: {
-		listId: {
-			default: 0,
-			required: true,
-		},
-	},
 	computed: {
 		unsplashBackgroundEnabled() {
 			return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
@@ -142,7 +135,7 @@ export default {
 				return
 			}
 
-			this.backgroundService.update({id: backgroundId, listId: this.listId})
+			this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
 				.then(l => {
 					this.$store.commit(CURRENT_LIST, l)
 					this.$store.commit('namespaces/setListInNamespaceById', l)
@@ -157,7 +150,7 @@ export default {
 				return
 			}
 
-			this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
+			this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
 				.then(l => {
 					this.$store.commit(CURRENT_LIST, l)
 					this.$store.commit('namespaces/setListInNamespaceById', l)

src/views/list/settings/share.vue

@@ -1,9 +1,16 @@
 <template>
+	<create-edit>
 
+	</create-edit>
 </template>
 
 <script>
+import CreateEdit from '@/components/misc/create-edit'
+
 export default {
-name: 'list-setting-share'
+	name: 'list-setting-share',
+	components: {
+		CreateEdit,
+	},
 }
 </script>