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>
This commit is contained in:
dpschen
konrad
parent
97416ab2d5
commit
4f2378ff02
17 changed files with 258 additions and 201 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
.quick-actions {
|
||||
|
||||
.modal-content {
|
||||
top: 6rem !important;
|
||||
transform: translate(-50%, -3rem) !important;
|
||||
}
|
||||
|
||||
.action-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@use "sass:math";
|
||||
|
||||
.navbar {
|
||||
z-index: 4 !important;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
6
src/styles/variables/_index.scss
Normal file
6
src/styles/variables/_index.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import "colors";
|
||||
@import "shadows";
|
||||
@import "variables";
|
||||
|
||||
// the default values get overwritten by the definitions above
|
||||
@import "bulma/sass/utilities/_all";
|
||||
|
|
@ -1,13 +1,9 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div class="modal-mask hint-modal">
|
||||
<div
|
||||
class="modal-container"
|
||||
@click.self="$router.back()"
|
||||
@shortkey="$router.back()"
|
||||
v-shortkey="['esc']"
|
||||
<modal
|
||||
@close="$router.back()"
|
||||
transition-name="fade"
|
||||
variant="hint-modal"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<card
|
||||
class="has-background-white has-no-shadow"
|
||||
:title="$t('about.title')"
|
||||
|
|
@ -33,10 +29,8 @@
|
|||
</x-button>
|
||||
</footer>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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']"
|
||||
<modal
|
||||
@close="$router.back()"
|
||||
variant="hint-modal"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,13 @@
|
|||
<template>
|
||||
<div class="modal-mask">
|
||||
<div
|
||||
class="modal-container"
|
||||
@mousedown.self="close()"
|
||||
v-shortkey="['esc']"
|
||||
@shortkey="close()"
|
||||
<modal
|
||||
@close="close()"
|
||||
variant="scrolling"
|
||||
>
|
||||
<div class="scrolling-content">
|
||||
<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>
|
||||
|
|
@ -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: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue