feat: add variant hint-modal to modal component
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/pr Build is passing
Details
NOTE: the content inside the modals wasn't indented correctly by intend. I wanted to make the diff with the currently many other branches simpler. Formatting by indenting is something that we can easily do later.
This commit is contained in:
parent
f8044a5caa
commit
9a67e8f8b3
GPG Key ID:
B257AC0149F43A77
|
|
@ -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>
|
||||
|
|
@ -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,8 +1,25 @@
|
|||
<template>
|
||||
<transition name="modal">
|
||||
<div class="modal-mask has-overflow" :class="{'has-overflow': overflow}">
|
||||
<div class="modal-container" @mousedown.self.prevent.stop="$emit('close')" :class="{'has-overflow': overflow}">
|
||||
<div class="modal-content" :class="{'has-overflow': overflow, 'is-wide': wide}">
|
||||
<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')"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
:class="{
|
||||
'has-overflow': overflow,
|
||||
'is-wide': wide
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
<div class="header">
|
||||
<slot name="header"></slot>
|
||||
|
|
@ -29,14 +46,28 @@
|
|||
</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',
|
||||
}
|
||||
|
||||
function validValue(values) {
|
||||
return (value) => Object.values(values).includes(value)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'modal',
|
||||
mounted: function () {
|
||||
mounted() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Close the model when escape is pressed
|
||||
if (e.keyCode === 27) {
|
||||
|
|
@ -45,6 +76,10 @@ export default {
|
|||
})
|
||||
},
|
||||
props: {
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
overflow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
|
@ -53,6 +88,116 @@ 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.close {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
right: 26px;
|
||||
color: $white;
|
||||
font-size: 2rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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,84 +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 {
|
||||
-webkit-transform: scale(0.9);
|
||||
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,8 +1,9 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div class="modal-mask hint-modal">
|
||||
<div @click.self="$router.back()" class="modal-container">
|
||||
<div class="modal-content">
|
||||
<modal
|
||||
@close="$router.back()"
|
||||
transition-name="fade"
|
||||
variant="hint-modal"
|
||||
>
|
||||
<card
|
||||
class="has-background-white has-no-shadow"
|
||||
:title="$t('about.title')"
|
||||
|
|
@ -28,10 +29,8 @@
|
|||
</x-button>
|
||||
</footer>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="modal-mask hint-modal">
|
||||
<div @click.self="$router.back()" class="modal-container">
|
||||
<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') }}
|
||||
|
|
@ -55,9 +56,7 @@
|
|||
{{ $t('filters.create.action') }}
|
||||
</x-button>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -48,3 +48,15 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrolling-content {
|
||||
max-width: 1024px;
|
||||
width: 100%;
|
||||
margin: 4rem auto;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue