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

@@ -1,7 +1,5 @@
 <template>
-	<div class="modal-mask hint-modal">
+	<modal @close="close()">
-		<div @click.self="close()" class="modal-container">
-			<div class="modal-content">
 				<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>
+	</modal>
-		</div>
-	</div>
 </template>
 
 <script>

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>
+			<kbd :key="i">{{ k }}</kbd>
-			<i v-if="i < keys.length - 1" :key="`plus${i}`">+</i>
+			<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>

src/components/modal/modal.vue

@@ -1,13 +1,27 @@
 <template>
 	<transition name="modal">
-		<div class="modal-mask has-overflow" :class="{'has-overflow': overflow}">
+		<section
-			<div class="modal-container"
+			v-if="enabled"
-				@mousedown.self.prevent.stop="$emit('close')"
+			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>

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>

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">
+		<modal
-			<div class="modal-mask hint-modal" v-if="visible">
+			@close="() => visible = false"
-				<div @click.self="() => visible = false" class="modal-container">
+			:enabled="visible"
-					<div class="modal-content">
+			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>
+		</modal>
-				</div>
-			</div>
-		</transition>
 	</div>
 </template>
 

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';

src/styles/components/hint-modal.scss

@@ -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);
-}
-

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);

src/styles/components/modal.scss

@@ -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);
-}

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;

src/styles/theme/navigation.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 .navbar {
 	z-index: 4 !important;
 

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);

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";

src/views/About.vue

@@ -1,14 +1,10 @@
 <template>
-	<transition name="fade">
+	<modal
-		<div class="modal-mask hint-modal">
+		@close="$router.back()"
-			<div
+		transition-name="fade"
-				class="modal-container"
+		variant="hint-modal"
-				@click.self="$router.back()"
+	>
-				@shortkey="$router.back()"
+		<card
-				v-shortkey="['esc']"
-			>
-				<div class="modal-content">
-					<card
 						class="has-background-white has-no-shadow"
 						:title="$t('about.title')"
 						:has-close="true"
@@ -33,10 +29,8 @@
 							</x-button>
 						</footer>
 					</card>
-				</div>
+	</modal>
-			</div>
+
-		</div>
-	</transition>
 </template>
 
 <script>

src/views/filters/CreateSavedFilter.vue

@@ -1,12 +1,8 @@
 <template>
-	<div class="modal-mask hint-modal">
+	<modal
-		<div
+		@close="$router.back()"
-			class="modal-container"
+		variant="hint-modal"
-			@click.self="$router.back()"
+	>
-			@shortkey="$router.back()"
-			v-shortkey="['esc']"
-		>
-			<div class="modal-content">
 				<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>
+	</modal>
-		</div>
-	</div>
 </template>
 
 <script>

src/views/tasks/TaskDetailViewModal.vue

@@ -1,19 +1,13 @@
 <template>
-	<div class="modal-mask">
+	<modal
-		<div
+		@close="close()"
-			class="modal-container"
+		variant="scrolling"
-			@mousedown.self="close()"
+	>
-			v-shortkey="['esc']"
-			@shortkey="close()"
-		>
-			<div class="scrolling-content">
 				<a @click="close()" class="close">
 					<icon icon="times"/>
 				</a>
 				<task-detail-view/>
-			</div>
+	</modal>
-		</div>
-	</div>
 </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>

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: {
+			scss: { additionalData: SCSS_IMPORT_PREFIX },
-				additionalData: `@import "${pathSrc}/styles/variables/_all.scss";`,
-			},
 		},
 	},
 	plugins: [