From 4f2378ff023b08213adfd16a08608dd962600c51 Mon Sep 17 00:00:00 2001
From: dpschen <dpschen@noreply.kolaente.de>
Date: Fri, 24 Sep 2021 18:08:48 +0000
Subject: [PATCH] feat: add variant hint-modal to modal component (#764)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/764
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
---
 src/components/misc/keyboard-shortcuts.vue    |  10 +-
 src/components/misc/shortcut.vue              |  23 ++-
 src/components/modal/modal.vue                | 171 +++++++++++++++++-
 .../quick-actions/quick-actions.vue           |  17 ++
 .../tasks/partials/quick-add-magic.vue        |  16 +-
 src/styles/components/_all.scss               |   2 -
 src/styles/components/hint-modal.scss         |  43 -----
 src/styles/components/kanban.scss             |   2 -
 src/styles/components/modal.scss              |  83 ---------
 src/styles/components/quick-actions.scss      |   6 -
 src/styles/theme/navigation.scss              |   2 -
 src/styles/theme/variables-derived.scss       |   2 -
 src/styles/variables/_index.scss              |   6 +
 src/views/About.vue                           |  22 +--
 src/views/filters/CreateSavedFilter.vue       |  16 +-
 src/views/tasks/TaskDetailViewModal.vue       |  30 +--
 vite.config.js                                |   8 +-
 17 files changed, 258 insertions(+), 201 deletions(-)
 delete mode 100644 src/styles/components/hint-modal.scss
 delete mode 100644 src/styles/components/modal.scss
 create mode 100644 src/styles/variables/_index.scss

diff --git a/src/components/misc/keyboard-shortcuts.vue b/src/components/misc/keyboard-shortcuts.vue
index f0c9a5dfa..10ac3c0cd 100644
--- a/src/components/misc/keyboard-shortcuts.vue
+++ b/src/components/misc/keyboard-shortcuts.vue
@@ -1,7 +1,5 @@
 <template>
-	<div class="modal-mask hint-modal">
-		<div @click.self="close()" class="modal-container">
-			<div class="modal-content">
+	<modal @close="close()">
 				<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
 					<div class="message is-primary">
 						<div class="message-body">
@@ -55,9 +53,7 @@
 						<shortcut :keys="['r']"/>
 					</p>
 				</card>
-			</div>
-		</div>
-	</div>
+	</modal>
 </template>
 
 <script>
@@ -73,4 +69,4 @@ export default {
 		},
 	},
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/misc/shortcut.vue b/src/components/misc/shortcut.vue
index 8ec894f27..47b617fbf 100644
--- a/src/components/misc/shortcut.vue
+++ b/src/components/misc/shortcut.vue
@@ -1,8 +1,8 @@
 <template>
 	<span class="shortcuts">
 		<template v-for="(k, i) in keys">
-			<span :key="i">{{ k }}</span>
-			<i v-if="i < keys.length - 1" :key="`plus${i}`">+</i>
+			<kbd :key="i">{{ k }}</kbd>
+			<span v-if="i < keys.length - 1" :key="`plus${i}`">+</span>
 		</template>
 	</span>
 </template>
@@ -18,3 +18,22 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.shortcuts {
+	display: flex;
+	align-items: center;
+}
+
+kbd {
+	padding: .1rem .35rem;
+	border: 1px solid $grey-300;
+	background: $grey-100;
+	border-radius: 3px;
+	font-size: .75rem;
+}
+
+span {
+	padding: 0 .25rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index d544183de..020e33b2b 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,13 +1,27 @@
 <template>
 	<transition name="modal">
-		<div class="modal-mask has-overflow" :class="{'has-overflow': overflow}">
-			<div class="modal-container"
-				@mousedown.self.prevent.stop="$emit('close')"
+		<section
+			v-if="enabled"
+			class="modal-mask"
+			:class="[
+				{ 'has-overflow': overflow },
+				variant,
+			]"
+		>
+			<div
+				class="modal-container"
 				:class="{'has-overflow': overflow}"
+				@click.self.prevent.stop="$emit('close')"
 				@shortkey="$emit('close')"
 				v-shortkey="['esc']"
 			>
-				<div class="modal-content" :class="{'has-overflow': overflow, 'is-wide': wide}">
+				<div
+					class="modal-content"
+					:class="{
+						'has-overflow': overflow,
+						'is-wide': wide
+					}"
+				>
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -34,14 +48,41 @@
 					</slot>
 				</div>
 			</div>
-		</div>
+		</section>
 	</transition>
 </template>
 
 <script>
+export const TRANSITION_NAMES = {
+	MODAL: 'modal',
+	FADE: 'fade',
+}
+
+export const VARIANTS = {
+	DEFAULT: 'default',
+	HINT_MODAL: 'hint-modal',
+	SCROLLING: 'scrolling',
+}
+
+function validValue(values) {
+	return (value) => Object.values(values).includes(value)
+}
+
 export default {
 	name: 'modal',
+	mounted() {
+		document.addEventListener('keydown', (e) => {
+			// Close the model when escape is pressed
+			if (e.keyCode === 27) {
+				this.$emit('close')
+			}
+		})
+	},
 	props: {
+		enabled: {
+			type: Boolean,
+			default: true,
+		},
 		overflow: {
 			type: Boolean,
 			default: false,
@@ -50,6 +91,126 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		transitionName: {
+			type: String,
+			default: TRANSITION_NAMES.MODAL,
+			validator: validValue(TRANSITION_NAMES),
+		},
+		variant: {
+			type: String,
+			default: VARIANTS.DEFAULT,
+			validator: validValue(VARIANTS),
+		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.modal-mask {
+	position: fixed;
+	z-index: 4000;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, .8);
+	transition: opacity 150ms ease;
+	color: #fff;
+}
+
+.modal-container {
+	transition: all 150ms ease;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	max-height: 100vh;
+	overflow: auto;
+}
+
+.default .modal-content,
+.hint-modal .modal-content {
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	@media screen and (max-width: $tablet) {
+		margin: 0;
+		top: 25%;
+		transform: translate(-50%, -25%);
+	}
+
+	.header {
+		font-size: 2rem;
+		font-weight: 700;
+	}
+
+	.button {
+		margin: 0 0.5rem;
+	}
+}
+
+// scrolling-content
+// used e.g. for <TaskDetailViewModal>
+.scrolling .modal-content {
+	max-width: 1024px;
+	width: 100%;
+	margin: 4rem auto;
+
+	max-height: none; // reset bulma
+	overflow: visible; // reset bulma
+
+	@media screen and (min-width: $tablet) {
+		max-height: none; // reset bulma
+		margin: 4rem auto; // reset bulma
+		width: 100%;
+	}
+
+	@media screen and (max-width: $desktop) {
+		margin: 0;
+	}
+}
+
+.is-wide {
+	max-width: $desktop;
+	width: calc(100% - 2rem);
+}
+
+.hint-modal {
+	z-index: 4600;
+
+	::v-deep.card-content {
+		text-align: left;
+
+		.info {
+			font-style: italic;
+		}
+
+		p {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+		}
+
+		.message-body {
+			padding: .5rem .75rem;
+		}
+	}
+}
+
+
+
+/* Transitions */
+
+.modal-enter,
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  transform: scale(0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index dbf002a49..5510004b7 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -485,3 +485,20 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.quick-actions {
+	// FIXME: changed position should be an option of the modal
+	::v-deep.modal-content {
+		top: 3rem;
+		transform: translate(-50%, 0);
+	}
+}
+
+// HACK:
+// FIXME:
+.modal-container-smaller ::v-deep.hint-modal .modal-container {
+	height: calc(100vh - 5rem);
+}
+
+</style>
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 402ee169a..e6d6061aa 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -4,10 +4,13 @@
 			{{ $t('task.quickAddMagic.hint') }}.
 			<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
 		</p>
-		<transition name="fade">
-			<div class="modal-mask hint-modal" v-if="visible">
-				<div @click.self="() => visible = false" class="modal-container">
-					<div class="modal-content">
+		<modal
+			@close="() => visible = false"
+			:enabled="visible"
+			transition-name="fade"
+			:overflow="true"
+			variant="hint-modal"
+		>
 						<card class="has-background-white has-no-shadow" :title="$t('task.quickAddMagic.title')">
 							<p>{{ $t('task.quickAddMagic.intro') }}</p>
 
@@ -63,10 +66,7 @@
 							</ul>
 							<p>{{ $t('task.quickAddMagic.dateTime', {time: 'at 17:00', timePM: '5pm'}) }}</p>
 						</card>
-					</div>
-				</div>
-			</div>
-		</transition>
+		</modal>
 	</div>
 </template>
 
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
index 5895a11fe..2b4c19f45 100644
--- a/src/styles/components/_all.scss
+++ b/src/styles/components/_all.scss
@@ -14,7 +14,6 @@
 @import 'comments';
 @import 'table-view';
 @import 'kanban';
-@import 'modal';
 @import 'list-backgrounds';
 @import 'color-picker';
 @import 'namespaces';
@@ -24,4 +23,3 @@
 @import 'datepicker';
 @import 'notifications';
 @import 'quick-actions';
-@import 'hint-modal';
diff --git a/src/styles/components/hint-modal.scss b/src/styles/components/hint-modal.scss
deleted file mode 100644
index e82b32d28..000000000
--- a/src/styles/components/hint-modal.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.hint-modal {
-	z-index: 4600;
-
-	.card-content {
-		text-align: left;
-
-		.info {
-			font-style: italic;
-		}
-
-		p {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.shortcuts {
-				display: flex;
-				align-items: center;
-
-				i {
-					padding: 0 .25rem;
-				}
-
-				span {
-					padding: .1rem .35rem;
-					border: 1px solid $grey-300;
-					background: $grey-100;
-					border-radius: 3px;
-					font-size: .75rem;
-				}
-			}
-		}
-
-		.message-body {
-			padding: .5rem .75rem;
-		}
-	}
-}
-
-.modal-container-smaller .hint-modal .modal-container {
-	height: calc(100vh - 5rem);
-}
-
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 9a702f9be..3b96b6c15 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 $bucket-background: $grey-100;
 $task-background: $white;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
deleted file mode 100644
index 5719f5741..000000000
--- a/src/styles/components/modal.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.modal-mask {
-  position: fixed;
-  z-index: 4000;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, .8);
-  transition: opacity 150ms ease;
-  color: #fff;
-
-  .modal-container {
-    transition: all 150ms ease;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    overflow: auto;
-
-    .scrolling-content {
-      max-width: 1024px;
-      width: 100%;
-      margin: 4rem auto;
-
-      @media screen and (max-width: $desktop) {
-        margin: 0;
-
-        .close {
-          display: none;
-        }
-      }
-    }
-
-    .modal-content {
-      text-align: center;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-
-      @media screen and (max-width: $tablet) {
-        margin: 0;
-        top: 25%;
-        transform: translate(-50%, -25%);
-      }
-
-      .header {
-        font-size: 2rem;
-        font-weight: 700;
-      }
-
-      .button {
-        margin: 0 0.5rem;
-      }
-    }
-
-    .close {
-      position: fixed;
-      top: 5px;
-      right: 26px;
-      color: $white;
-      font-size: 2rem;
-    }
-
-    .is-wide {
-      max-width: $desktop;
-      width: calc(100% - 2rem);
-    }
-  }
-}
-
-/* Transitions */
-
-.modal-enter,
-.modal-leave-active {
-  opacity: 0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  transform: scale(0.9);
-}
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
index 71583e9af..c6e6e603e 100644
--- a/src/styles/components/quick-actions.scss
+++ b/src/styles/components/quick-actions.scss
@@ -1,10 +1,4 @@
 .quick-actions {
-
-	.modal-content {
-		top: 6rem !important;
-		transform: translate(-50%, -3rem) !important;
-	}
-
 	.action-input {
 		display: flex;
 		align-items: center;
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index a06d0a894..1e06b22ab 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
 .navbar {
 	z-index: 4 !important;
 
diff --git a/src/styles/theme/variables-derived.scss b/src/styles/theme/variables-derived.scss
index 4d98e8476..ee5c640f1 100644
--- a/src/styles/theme/variables-derived.scss
+++ b/src/styles/theme/variables-derived.scss
@@ -1,4 +1,2 @@
-@use "sass:math";
-
 // Variables that are derived from bulma variables need to be included after them
 $mobile: math.div($tablet, 2);
diff --git a/src/styles/variables/_index.scss b/src/styles/variables/_index.scss
new file mode 100644
index 000000000..ba1a82473
--- /dev/null
+++ b/src/styles/variables/_index.scss
@@ -0,0 +1,6 @@
+@import "colors";
+@import "shadows";
+@import "variables";
+
+// the default values get overwritten by the definitions above
+@import "bulma/sass/utilities/_all";
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
index 331b9e21e..5ca41da34 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,14 +1,10 @@
 <template>
-	<transition name="fade">
-		<div class="modal-mask hint-modal">
-			<div
-				class="modal-container"
-				@click.self="$router.back()"
-				@shortkey="$router.back()"
-				v-shortkey="['esc']"
-			>
-				<div class="modal-content">
-					<card
+	<modal
+		@close="$router.back()"
+		transition-name="fade"
+		variant="hint-modal"
+	>
+		<card
 						class="has-background-white has-no-shadow"
 						:title="$t('about.title')"
 						:has-close="true"
@@ -33,10 +29,8 @@
 							</x-button>
 						</footer>
 					</card>
-				</div>
-			</div>
-		</div>
-	</transition>
+	</modal>
+
 </template>
 
 <script>
diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue
index ffb9765a1..a9cd21023 100644
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@@ -1,12 +1,8 @@
 <template>
-	<div class="modal-mask hint-modal">
-		<div
-			class="modal-container"
-			@click.self="$router.back()"
-			@shortkey="$router.back()"
-			v-shortkey="['esc']"
-		>
-			<div class="modal-content">
+	<modal
+		@close="$router.back()"
+		variant="hint-modal"
+	>
 				<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
 					<p>
 						{{ $t('filters.create.description') }}
@@ -60,9 +56,7 @@
 						{{ $t('filters.create.action') }}
 					</x-button>
 				</card>
-			</div>
-		</div>
-	</div>
+	</modal>
 </template>
 
 <script>
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index cce4927f1..d79339f94 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -1,19 +1,13 @@
 <template>
-	<div class="modal-mask">
-		<div
-			class="modal-container"
-			@mousedown.self="close()"
-			v-shortkey="['esc']"
-			@shortkey="close()"
-		>
-			<div class="scrolling-content">
+	<modal
+		@close="close()"
+		variant="scrolling"
+	>
 				<a @click="close()" class="close">
 					<icon icon="times"/>
 				</a>
 				<task-detail-view/>
-			</div>
-		</div>
-	</div>
+	</modal>
 </template>
 
 <script>
@@ -53,3 +47,17 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.close {
+	position: fixed;
+	top: 5px;
+	right: 26px;
+	color: $white;
+	font-size: 2rem;
+
+	@media screen and (max-width: $desktop) {
+		display: none;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 459f494dd..5a7f15d00 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,12 +5,14 @@ const {visualizer} = require('rollup-plugin-visualizer')
 
 const pathSrc = path.resolve(__dirname, './src')
 
+// the @use rules have to be the first in the compiled stylesheets
+const SCSS_IMPORT_PREFIX = `@use "sass:math";
+@import "${pathSrc}/styles/variables";`
+
 module.exports = {
 	css: {
 		preprocessorOptions: {
-			scss: {
-				additionalData: `@import "${pathSrc}/styles/variables/_all.scss";`,
-			},
+			scss: { additionalData: SCSS_IMPORT_PREFIX },
 		},
 	},
 	plugins: [