Move sharing to popup

src/components/list/list-settings-dropdown.vue

@@ -17,6 +17,11 @@
 						class="dropdown-item">
 						Set list background
 					</router-link>
+					<router-link
+						:to="{ name: 'list.list.settings.share', params: { id: currentList.id } }"
+						class="dropdown-item">
+						Share this list
+					</router-link>
 					<router-link
 						:to="{ name: 'list.list.settings.duplicate', params: { id: currentList.id } }"
 						class="dropdown-item">

src/components/misc/nothing.vue

@@ -0,0 +1,11 @@
+<template>
+	<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
+		<slot></slot>
+	</p>
+</template>
+
+<script>
+export default {
+	name: 'nothing'
+}
+</script>

src/components/sharing/linkSharing.vue

@@ -1,5 +1,6 @@
 <template>
-	<card title="Share links" class="is-fullwidth" :padding="false">
+	<div>
+		<p class="has-text-weight-bold">Share Links</p>
 		<div class="sharables-list">
 			<div class="p-4">
 				<p>Share with a link:</p>
@@ -112,7 +113,7 @@
 				</p>
 			</modal>
 		</transition>
-	</card>
+	</div>
 </template>
 
 <script>

src/components/sharing/userTeam.vue

@@ -1,10 +1,11 @@
 <template>
-	<card class="is-fullwidth has-overflow" :title="`Shared with these ${shareType}s`" :padding="false">
-		<div class="p-4" v-if="userIsAdmin">
+	<div>
+		<p class="has-text-weight-bold">Shared with these {{ shareType }}s</p>
+		<div v-if="userIsAdmin">
 			<div class="field has-addons">
 				<p
 					class="control is-expanded"
-					v-bind:class="{ 'is-loading': searchService.loading }"
+					:class="{ 'is-loading': searchService.loading }"
 				>
 					<multiselect
 						:loading="searchService.loading"
@@ -20,7 +21,8 @@
 				</p>
 			</div>
 		</div>
-		<table class="table is-striped is-hoverable is-fullwidth">
+
+		<table class="table is-striped is-hoverable is-fullwidth" v-if="sharables.length > 0">
 			<tbody>
 			<tr :key="s.id" v-for="s in sharables">
 				<template v-if="shareType === 'user'">
@@ -105,6 +107,10 @@
 			</tbody>
 		</table>
 
+		<nothing v-else>
+			Not shared with any {{ shareType }} yet.
+		</nothing>
+
 		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
@@ -121,7 +127,7 @@
 				</p>
 			</modal>
 		</transition>
-	</card>
+	</div>
 </template>
 
 <script>
@@ -143,6 +149,7 @@ import TeamModel from '../../models/team'
 
 import rights from '../../models/rights'
 import Multiselect from '@/components/input/multiselect'
+import Nothing from '@/components/misc/nothing'
 
 export default {
 	name: 'userTeamShare',
@@ -182,6 +189,7 @@ export default {
 		}
 	},
 	components: {
+		Nothing,
 		Multiselect,
 	},
 	computed: mapState({

src/router/index.js

@@ -228,7 +228,7 @@ export default new Router({
 						},
 						{
 							path: '/lists/:listId/settings/share',
-							name: 'list.list.settings.edit',
+							name: 'list.list.settings.share',
 							component: ListSettingShare,
 						},
 						{

src/styles/theme/form.scss

@@ -36,6 +36,7 @@
 
 .field.has-addons .button {
   height: 2.5rem;
+  margin-left: 0 !important;
 }
 
 .input,

src/views/list/EditList.vue

@@ -5,54 +5,16 @@
 			It is not possible to create new or edit tasks or it.
 		</div>
 
-
-		<component
-			:id="list.id"
-			:is="manageUsersComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="user"
-			type="list"/>
-		<component
-			:id="list.id"
-			:is="manageTeamsComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="team"
-			type="list"/>
-
-		<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
 	</div>
 </template>
 
 <script>
-import manageSharing from '../../components/sharing/userTeam'
-import LinkSharing from '../../components/sharing/linkSharing'
-
-import Fancycheckbox from '../../components/input/fancycheckbox'
-import ColorPicker from '../../components/input/colorPicker'
-import NamespaceSearch from '../../components/namespace/namespace-search'
-import LoadingComponent from '../../components/misc/loading'
-import ErrorComponent from '../../components/misc/error'
 
 export default {
 	name: 'EditList',
 	data() {
 		return {
-			manageUsersComponent: '',
-			manageTeamsComponent: '',
 		}
 	},
-	components: {
-		NamespaceSearch,
-		ColorPicker,
-		Fancycheckbox,
-		LinkSharing,
-		manageSharing,
-		editor: () => ({
-			component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
-	},
 }
 </script>

src/views/list/settings/edit.vue

@@ -110,14 +110,6 @@ export default {
 		this.listDuplicateService = new ListDuplicateService()
 		this.loadList()
 	},
-	computed: {
-		linkSharingEnabled() {
-			return this.$store.state.config.linkSharingEnabled
-		},
-		userIsAdmin() {
-			return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
-		},
-	},
 	methods: {
 		loadList() {
 			const list = new ListModel({id: this.$route.params.listId})
@@ -126,9 +118,6 @@ export default {
 				.then(r => {
 					this.$set(this, 'list', r)
 					this.$store.commit(CURRENT_LIST, r)
-					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-					this.manageTeamsComponent = 'manageSharing'
-					this.manageUsersComponent = 'manageSharing'
 					this.setTitle(`Edit ${this.list.title}`)
 				})
 				.catch(e => {

src/views/list/settings/share.vue

@@ -1,16 +1,75 @@
 <template>
-	<create-edit>
+	<create-edit title="Share this list">
+		<component
+			:id="list.id"
+			:is="manageUsersComponent"
+			:userIsAdmin="userIsAdmin"
+			shareType="user"
+			type="list"/>
+		<component
+			:id="list.id"
+			:is="manageTeamsComponent"
+			:userIsAdmin="userIsAdmin"
+			shareType="team"
+			type="list"/>
 
+		<link-sharing :list-id="$route.params.listId" v-if="linkSharingEnabled" class="mt-4"/>
 	</create-edit>
 </template>
 
 <script>
+import ListService from '@/services/list'
+import ListModel from '@/models/list'
+import {CURRENT_LIST} from '@/store/mutation-types'
+
 import CreateEdit from '@/components/misc/create-edit'
+import LinkSharing from '@/components/sharing/linkSharing'
+import userTeam from '@/components/sharing/userTeam'
 
 export default {
 	name: 'list-setting-share',
+	data() {
+		return {
+			list: ListModel,
+			listService: ListService,
+			manageUsersComponent: '',
+			manageTeamsComponent: '',
+		}
+	},
 	components: {
 		CreateEdit,
+		LinkSharing,
+		userTeam,
+	},
+	computed: {
+		linkSharingEnabled() {
+			return this.$store.state.config.linkSharingEnabled
+		},
+		userIsAdmin() {
+			return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
+		},
+	},
+	created() {
+		this.listService = new ListService()
+		this.loadList()
+	},
+	methods: {
+		loadList() {
+			const list = new ListModel({id: this.$route.params.listId})
+
+			this.listService.get(list)
+				.then(r => {
+					this.$set(this, 'list', r)
+					this.$store.commit(CURRENT_LIST, r)
+					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+					this.manageTeamsComponent = 'userTeam'
+					this.manageUsersComponent = 'userTeam'
+					this.setTitle(`Edit ${this.list.title}`)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
 	},
 }
 </script>

src/views/list/views/List.vue

@@ -84,12 +84,10 @@
 				</p>
 			</div>
 
-			<p
-				class="has-text-centered has-text-grey is-italic p-4 mb-4"
-				v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
+			<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
 				This list is currently empty.
 				<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
-			</p>
+			</nothing>
 
 			<div class="tasks-container">
 				<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
@@ -174,6 +172,7 @@ import Rights from '../../../models/rights.json'
 import {mapState} from 'vuex'
 import FilterPopup from '@/components/list/partials/filter-popup'
 import {HAS_TASKS} from '@/store/mutation-types'
+import Nothing from '@/components/misc/nothing'
 
 export default {
 	name: 'List',
@@ -195,6 +194,7 @@ export default {
 		taskList,
 	],
 	components: {
+		Nothing,
 		FilterPopup,
 		SingleTaskInList,
 		EditTask,