Move all create views to better looking popups (#383)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/383
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

.drone.yml

@@ -95,6 +95,7 @@ steps:
       CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
       YARN_CACHE_FOLDER: .cache/yarn/
       CYPRESS_CACHE_FOLDER: .cache/cypress/
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 10000
     commands:
       - sed -i 's/localhost/api/g' public/index.html
       - yarn serve & npx wait-on http://localhost:8080

cypress/integration/list/list.spec.js

@@ -25,12 +25,12 @@ describe('Lists', () => {
 			.click()
 		cy.url()
 			.should('contain', '/namespaces/1/list')
-		cy.get('h3')
+		cy.get('.card-header-title')
 			.contains('Create a new list')
 		cy.get('input.input')
 			.type('New List')
 		cy.get('.button')
-			.contains('Add')
+			.contains('Create')
 			.click()
 
 		cy.wait(1000) // Waiting until the request to create the new list is done
@@ -142,9 +142,8 @@ describe('Lists', () => {
 			})
 			cy.visit('/lists/1/table')
 
-			cy.get('.table-view table.table a')
+			cy.get('.table-view table.table')
 				.contains(tasks[0].title)
-				.first()
 				.click()
 
 			cy.url()
@@ -364,7 +363,6 @@ describe('Lists', () => {
 
 			cy.get('.kanban .bucket .tasks .task')
 				.contains(tasks[0].title)
-				.first()
 				.click()
 
 			cy.url()

cypress/integration/list/namespaces.spec.js

@@ -26,12 +26,12 @@ describe('Namepaces', () => {
 			.click()
 		cy.url()
 			.should('contain', '/namespaces/new')
-		cy.get('h3')
+		cy.get('.card-header-title')
 			.should('contain', 'Create a new namespace')
 		cy.get('input.input')
 			.type('New Namespace')
 		cy.get('.button')
-			.contains('Add')
+			.contains('Create')
 			.click()
 		cy.url()
 			.should('contain', '/namespaces')

cypress/integration/sharing/team.spec.js

@@ -15,12 +15,12 @@ describe('Team', () => {
             .click()
 		cy.url()
 			.should('contain', '/teams/new')
-		cy.get('h3')
+		cy.get('.card-header-title')
 			.contains('Create a new team')
 		cy.get('input.input')
 			.type(newTeamName)
 		cy.get('.button')
-			.contains('Add')
+			.contains('Create')
 			.click()
 
         cy.get('.fullpage')

src/components/home/contentAuth.vue

@@ -12,7 +12,6 @@
 			<div
 				:class="[
 					{
-						'fullpage-overlay': fullpage,
 						'is-menu-enabled': menuActive,
 					},
 					$route.name,
@@ -23,6 +22,10 @@
 				
 				<router-view/>
 				
+				<transition name="modal">
+					<router-view name="popup"/>
+				</transition>
+				
 				<a @click="$store.commit('keyboardShortcutsActive', true)" class="keyboard-shortcuts-button">
 					<icon icon="keyboard"/>
 				</a>
@@ -33,7 +36,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+import {CURRENT_LIST, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation'
 
 export default {
@@ -46,7 +49,6 @@ export default {
 		this.renewTokenOnFocus()
 	},
 	computed: mapState({
-		fullpage: IS_FULLPAGE,
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)
 		},
@@ -58,7 +60,6 @@ export default {
 	methods: {
 		doStuffAfterRoute() {
 			// this.setTitle('') // Reset the title if the page component does not set one itself
-			this.$store.commit(IS_FULLPAGE, false)
 			this.hideMenuOnMobile()
 			this.resetCurrentList()
 		},

src/components/home/navigation.vue

@@ -133,12 +133,11 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 export default {
 	name: 'navigation',
 	computed: mapState({
-		fullpage: IS_FULLPAGE,
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)
 		},

src/components/misc/card.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="card">
+	<div class="card" :class="{'has-no-shadow': !shadow}">
 		<header class="card-header" v-if="title !== ''">
 			<p class="card-header-title">
 				{{ title }}
 			</p>
 			<a @click="$emit('close')" class="card-header-icon" v-if="hasClose">
 				<span class="icon">
-					<icon icon="angle-right"/>
+					<icon :icon="closeIcon"/>
 				</span>
 			</a>
 		</header>
@@ -34,6 +34,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		closeIcon: {
+			type: String,
+			default: 'angle-right',
+		},
+		shadow: {
+			type: Boolean,
+			default: true,
+		},
 	},
 }
 </script>

src/components/misc/create.vue

@@ -0,0 +1,55 @@
+<template>
+	<modal @close="$router.back()" :overflow="true">
+		<card
+			:title="title"
+			:shadow="false"
+			:padding="false"
+			class="has-text-left has-overflow"
+			:has-close="true"
+			close-icon="times"
+			@close="$router.back()"
+		>
+			<div class="p-4">
+				<slot></slot>
+			</div>
+			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+				<x-button
+					:shadow="false"
+					type="secondary"
+					@click.prevent.stop="$router.back()"
+				>
+					Cancel
+				</x-button>
+				<x-button
+					:shadow="false"
+					type="primary"
+					@click.prevent.stop="$emit('create')"
+					icon="plus"
+					:disabled="createDisabled"
+				>
+					{{ createLabel }}
+				</x-button>
+			</footer>
+		</card>
+	</modal>
+</template>
+
+<script>
+export default {
+	name: 'create',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		createLabel: {
+			type: String,
+			default: 'Create',
+		},
+		createDisabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
+</script>

src/components/modal/modal.vue

@@ -1,8 +1,8 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask">
-			<div class="modal-container" @click.prevent.stop="$emit('close')">
-				<div class="modal-content">
+			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
+				<div class="modal-content" :class="{'has-overflow': overflow}">
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -44,5 +44,11 @@ export default {
 			}
 		})
 	},
+	props: {
+		overflow: {
+			type: Boolean,
+			default: false,
+		},
+	},
 }
 </script>

src/router/index.js

@@ -159,7 +159,9 @@ export default new Router({
 		{
 			path: '/namespaces/new',
 			name: 'namespace.create',
-			component: NewNamespaceComponent,
+			components: {
+				popup: NewNamespaceComponent,
+			},
 		},
 		{
 			path: '/namespaces/:id/edit',
@@ -169,7 +171,9 @@ export default new Router({
 		{
 			path: '/namespaces/:id/list',
 			name: 'list.create',
-			component: NewListComponent,
+			components: {
+				popup: NewListComponent,
+			}
 		},
 		{
 			path: '/lists/:id/edit',
@@ -242,7 +246,9 @@ export default new Router({
 		{
 			path: '/teams/new',
 			name: 'teams.create',
-			component: NewTeamComponent,
+			components: {
+				popup: NewTeamComponent,
+			},
 		},
 		{
 			path: '/teams/:id/edit',
@@ -257,7 +263,9 @@ export default new Router({
 		{
 			path: '/labels/new',
 			name: 'labels.create',
-			component: NewLabelComponent,
+			components: {
+				popup: NewLabelComponent,
+			},
 		},
 		{
 			path: '/migrate',
@@ -272,7 +280,9 @@ export default new Router({
 		{
 			path: '/filters/new',
 			name: 'filters.create',
-			component: CreateSavedFilter,
+			components: {
+				popup: CreateSavedFilter,
+			},
 		},
 		{
 			path: '/auth/openid/:provider',

src/store/index.js

@@ -4,7 +4,6 @@ import {
 	CURRENT_LIST,
 	ERROR_MESSAGE,
 	HAS_TASKS,
-	IS_FULLPAGE,
 	KEYBOARD_SHORTCUTS_ACTIVE,
 	LOADING,
 	LOADING_MODULE,
@@ -39,7 +38,6 @@ export const store = new Vuex.Store({
 		loadingModule: null,
 		errorMessage: '',
 		online: true,
-		isFullpage: false,
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
 		background: '',
@@ -60,9 +58,6 @@ export const store = new Vuex.Store({
 		[ONLINE](state, online) {
 			state.online = online
 		},
-		[IS_FULLPAGE](state, fullpage) {
-			state.isFullpage = fullpage
-		},
 		[CURRENT_LIST](state, currentList) {
 
 			setTitle(currentList.title)

src/store/mutation-types.js

@@ -2,7 +2,6 @@ export const LOADING = 'loading'
 export const LOADING_MODULE = 'loadingModule'
 export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
-export const IS_FULLPAGE = 'isFullpage'
 export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'

src/views/labels/NewLabel.vue

@@ -1,42 +1,46 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']"/>
-		</a>
-		<h3>Create a new label</h3>
-		<form @keyup.esc="back()" @submit.prevent="newlabel">
-			<div class="field is-grouped">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': labelService.loading }">
-					<input
-						:class="{ 'disabled': labelService.loading }"
-						class="input"
-						placeholder="The label title goes here..." type="text"
-						v-focus
-						v-model="label.title"/>
-				</p>
-				<p class="control">
-					<x-button
-						:shadow="false"
-						icon="plus"
-						@click="newlabel"
+	<create
+		title="Create a new label"
+		@create="newLabel()"
+		:create-disabled="label.title === ''"
 	>
-						Add
-					</x-button>
-				</p>
+		<div class="field">
+			<label class="label" for="labelTitle">Label Title</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': labelService.loading }"
+			>
+				<input
+					:class="{ disabled: labelService.loading }"
+					class="input"
+					placeholder="The label title goes here..."
+					type="text"
+					id="labelTitle"
+					v-focus
+					v-model="label.title"
+					@keyup.enter="newLabel()"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && label.title === ''">
 			Please specify a title.
 		</p>
-		</form>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="label.hexColor" />
 			</div>
+		</div>
+	</create>
 </template>
 
 <script>
 import labelModel from '../../models/label'
 import labelService from '../../services/label'
-import {IS_FULLPAGE} from '@/store/mutation-types'
 import LabelModel from '../../models/label'
 import LabelService from '../../services/label'
+import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewLabel',
@@ -47,35 +51,41 @@ export default {
 			showError: false,
 		}
 	},
+	components: {
+		Create,
+		ColorPicker,
+	},
 	created() {
 		this.labelService = new LabelService()
 		this.label = new LabelModel()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new label')
 	},
 	methods: {
-		newlabel() {
-
+		newLabel() {
 			if (this.label.title === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.labelService.create(this.label)
-				.then(response => {
-					this.$router.push({name: 'labels.index', params: {id: response.id}})
-					this.success({message: 'The label was successfully created.'}, this)
+			this.labelService
+				.create(this.label)
+				.then((response) => {
+					this.$router.push({
+						name: 'labels.index',
+						params: { id: response.id },
 					})
-				.catch(e => {
+					this.success(
+						{ message: 'The label was successfully created.' },
+						this
+					)
+				})
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-		back() {
-			this.$router.go(-1)
-		},
 	},
 }
 </script>

src/views/list/NewList.vue

@@ -1,44 +1,41 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']">
-			</icon>
-		</a>
-		<h3>Create a new list</h3>
-		<div class="field is-grouped">
-			<p :class="{ 'is-loading': listService.loading}" class="control is-expanded">
-				<input
-					:class="{ 'disabled': listService.loading}"
-					@keyup.enter="newList()"
-					@keyup.esc="back()"
-					class="input"
-					placeholder="The list's name goes here..."
-					type="text"
-					v-focus
-					v-model="list.title"/>
-			</p>
-			<p class="control">
-				<x-button
-					:disabled="list.title === ''"
-					@click="newList()"
-					icon="plus"
-					:shadow="false"
+	<create title="Create a new list" @create="newList()" :create-disabled="list.title === ''">
+		<div class="field">
+			<label class="label" for="listTitle">List Title</label>
+			<div
+				:class="{ 'is-loading': listService.loading }"
+				class="control"
 			>
-					Add
-				</x-button>
-			</p>
+				<input
+					:class="{ disabled: listService.loading }"
+					@keyup.enter="newList()"
+					@keyup.esc="$router.back()"
+					class="input"
+					placeholder="The list's title goes here..."
+					type="text"
+					name="listTitle"
+					v-focus
+					v-model="list.title"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && list.title === ''">
 			Please specify a title.
 		</p>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="list.hexColor" />
 			</div>
+		</div>
+	</create>
 </template>
 
 <script>
-import router from '../../router'
 import ListService from '../../services/list'
 import ListModel from '../../models/list'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewList',
@@ -49,10 +46,13 @@ export default {
 			listService: ListService,
 		}
 	},
+	components: {
+		Create,
+		ColorPicker,
+	},
 	created() {
 		this.list = new ListModel()
 		this.listService = new ListService()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new list')
@@ -66,18 +66,22 @@ export default {
 			this.showError = false
 
 			this.list.namespaceId = this.$route.params.id
-			this.$store.dispatch('lists/createList', this.list)
-				.then(r => {
-					this.success({message: 'The list was successfully created.'}, this)
-					router.push({name: 'list.index', params: {listId: r.id}})
+			this.$store
+				.dispatch('lists/createList', this.list)
+				.then((r) => {
+					this.success(
+						{ message: 'The list was successfully created.' },
+						this
+					)
+					this.$router.push({
+						name: 'list.index',
+						params: { listId: r.id },
 					})
-				.catch(e => {
+				})
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-		back() {
-			router.go(-1)
-		},
 	},
 }
 </script>

src/views/namespaces/NewNamespace.vue

@@ -1,48 +1,52 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']">
-			</icon>
-		</a>
-		<h3>Create a new namespace</h3>
-		<div class="field is-grouped">
-			<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
+	<create
+		title="Create a new namespace"
+		@create="newNamespace()"
+		:create-disabled="namespace.title === ''"
+	>
+		<div class="field">
+			<label class="label" for="namespaceTitle">Namespace Title</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': namespaceService.loading }"
+			>
 				<input
 					@keyup.enter="newNamespace()"
 					@keyup.esc="back()"
 					class="input"
 					placeholder="The namespace's name goes here..."
 					type="text"
-					:class="{ 'disabled': namespaceService.loading}"
+					:class="{ disabled: namespaceService.loading }"
 					v-focus
-					v-model="namespace.title"/>
-			</p>
-			<p class="control">
-				<x-button
-					:disabled="namespace.title === ''"
-					@click="newNamespace()"
-					:shadow="false"
-					icon="plus"
-				>
-					Add
-				</x-button>
-			</p>
+					v-model="namespace.title"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
 			Please specify a title.
 		</p>
-		<p
-			class="small"
-			v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
-			What's a namespace?</p>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="namespace.hexColor" />
 			</div>
+		</div>
+		<p
+			class="is-small has-text-centered"
+			v-tooltip.bottom="
+				'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'
+			"
+		>
+			What's a namespace?
+		</p>
+	</create>
 </template>
 
 <script>
-import router from '../../router'
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewNamespace',
@@ -53,10 +57,13 @@ export default {
 			namespaceService: NamespaceService,
 		}
 	},
+	components: {
+		ColorPicker,
+		Create,
+	},
 	created() {
 		this.namespace = new NamespaceModel()
 		this.namespaceService = new NamespaceService()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new namespace')
@@ -69,19 +76,20 @@ export default {
 			}
 			this.showError = false
 
-			this.namespaceService.create(this.namespace)
-				.then(r => {
+			this.namespaceService
+				.create(this.namespace)
+				.then((r) => {
 					this.$store.commit('namespaces/addNamespace', r)
-					this.success({message: 'The namespace was successfully created.'}, this)
-					router.back()
+					this.success(
+						{ message: 'The namespace was successfully created.' },
+						this
+					)
+					this.$router.back()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-		back() {
-			router.go(-1)
-		},
 	},
 }
 </script>

src/views/teams/NewTeam.vue

@@ -1,38 +1,38 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']">
-			</icon>
-		</a>
-		<h3>Create a new team</h3>
-		<form @keyup.esc="back()" @submit.prevent="newTeam">
-			<div class="field is-grouped">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
+	<create
+		title="Create a new team"
+		@create="newTeam()"
+		:create-disabled="team.name === ''"
+	>
+		<div class="field">
+			<label class="label" for="teamName">Team Name</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': teamService.loading }"
+			>
 				<input
 					:class="{ 'disabled': teamService.loading }"
 					class="input"
-						placeholder="The team's name goes here..." type="text"
+					id="teamName"
+					placeholder="The team's name goes here..."
+					type="text"
 					v-focus
-						v-model="team.name"/>
-				</p>
-				<p class="control">
-					<x-button :shadow="false" @click="newTeam" icon="plus">
-						Add
-					</x-button>
-				</p>
+					v-model="team.name"
+					@keyup.enter="newTeam"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && team.name === ''">
 			Please specify a name.
 		</p>
-		</form>
-	</div>
+	</create>
 </template>
 
 <script>
 import router from '../../router'
 import TeamModel from '../../models/team'
 import TeamService from '../../services/team'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewTeam',
@@ -43,29 +43,37 @@ export default {
 			showError: false,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.teamService = new TeamService()
 		this.team = new TeamModel()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new Team')
 	},
 	methods: {
 		newTeam() {
-
 			if (this.team.name === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.teamService.create(this.team)
-				.then(response => {
-					router.push({name: 'teams.edit', params: {id: response.id}})
-					this.success({message: 'The team was successfully created.'}, this)
+			this.teamService
+				.create(this.team)
+				.then((response) => {
+					router.push({
+						name: 'teams.edit',
+						params: { id: response.id },
 					})
-				.catch(e => {
+					this.success(
+						{ message: 'The team was successfully created.' },
+						this
+					)
+				})
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},