settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

refactor: split ModalDialog into ModalDialog and DialogBox

Browse Source
This commit is contained in:
Settel 2022-09-17 12:50:47 +02:00
parent f52c0b707c
commit 5009b070e7
7 changed files with 113 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/assets/css/colors.scss
View File

@ -108,11 +108,13 @@ $admin-tile-bottom-icon-hover-background-color: #485058;
$admin-tile-bottom-icon-hover-border: $admin-tile-bottom-icon-border;
// Modal Dialog
$modal-dialog-background-color: #384048;
$modal-dialog-border: none;
$modal-dialog-text-color: #ffffff;
$modal-dialog-backdrop-background-color: rgba(0, 0, 0, 75%);
// Dialog
$dialog-box-background-color: #384048;
$dialog-box-border: none;
$dialog-box-text-color: #ffffff;
// Engine Debug
$debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none;

11
client/src/components/CollectQuotes.vue
View File

@ -1,9 +1,14 @@
<template>
<div class="collect-quotes__container">
<div class="collect-quotes__explaination-box">
<QuoteExplainationBox />
</div>
<div class="collect-quotes__quotes">
<QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
<QuoteCardNew v-if="showNewQuoteCard" @click="createNewQuote" />
<QuoteCard v-if="!showNewQuoteCard" :quote="newQuote" :editable="true" :instant-edit="true" @edit-end="editEnd" />
</div>
</div>
</template>
<script setup lang="ts">
@ -32,7 +37,11 @@ const editEnd = () => {
<style lang="scss">
.collect-quotes {
&__container {
&__explaination-box {
margin: 32px;
}
&__quotes {
display: flex;
flex-wrap: wrap;
}

4
client/src/components/CreateTeamDialog.vue
View File

@ -107,8 +107,8 @@ onMounted(() => {
&__input {
border: 1px solid white;
background-color: $modal-dialog-background-color;
color: $modal-dialog-text-color;
background-color: $dialog-box-background-color;
color: $dialog-box-text-color;
border-radius: 4px;
}

65
client/src/components/DialogBox.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="dialog-box__container">
<div class="dialog-box__header">
<div class="dialog-box__title">{{ title }}</div>
<Button v-if="!noCloseButton" :border="false" @click="emit('close')">x</Button>
</div>
<div class="dialog-box__body">
<slot />
</div>
<div class="dialog-box__footer">
<slot name="footer" />
</div>
</div>
</template>
<script setup lang="ts">
defineProps<{
title?: string
noCloseButton?: boolean
}>()
const emit = defineEmits(['close'])
</script>
<style lang="scss">
@import '~/assets/css/components';
.dialog-box {
&__container {
display: flex;
flex-direction: column;
min-width: 400px;
min-height: 280px;
margin: auto;
background-color: $dialog-box-background-color;
border: $dialog-box-border;
border-radius: 8px;
color: $dialog-box-text-color;
z-index: 12;
}
&__header {
display: flex;
}
&__title {
flex-grow: 1;
margin: 36px 36px 8px 36px;
font-family: $font-primary;
font-size: 24px;
}
&__body {
flex-grow: 1;
margin: 36px;
font-family: $font-secondary;
}
&__footer {
display: flex;
// justify-content: end;
margin: 24px 36px;
}
}
</style>

51
client/src/components/ModalDialog.vue
View File

@ -1,17 +1,11 @@
<template>
<div class="modal-dialog__container">
<div class="modal-dialog__box">
<div class="modal-dialog__header">
<div class="modal-dialog__title">{{ title }}</div>
<Button v-if="!noCloseButton" :border="false" @click="emit('close')">x</Button>
</div>
<div class="modal-dialog__body">
<DialogBox :title="title" :no-close-button="noCloseButton" @close="emit('close')">
<slot />
</div>
<div class="modal-dialog__footer">
<template v-slot:footer>
<slot name="footer" />
</div>
</div>
</template>
</DialogBox>
<div class="modal-dialog__backdrop" />
</div>
</template>
@ -21,6 +15,7 @@ defineProps<{
title?: string
noCloseButton?: boolean
}>()
const emit = defineEmits(['close'])
</script>
@ -37,42 +32,6 @@ const emit = defineEmits(['close'])
height: 100%;
}
&__box {
display: flex;
flex-direction: column;
min-width: 400px;
min-height: 280px;
margin: auto;
background-color: $modal-dialog-background-color;
border: $modal-dialog-border;
border-radius: 8px;
color: $modal-dialog-text-color;
z-index: 12;
}
&__header {
display: flex;
}
&__title {
flex-grow: 1;
margin: 36px 36px 8px 36px;
font-family: $font-primary;
font-size: 24px;
}
&__body {
flex-grow: 1;
margin: 36px;
font-family: $font-secondary;
}
&__footer {
display: flex;
// justify-content: end;
margin: 24px 36px;
}
&__backdrop {
position: absolute;
width: 100%;

19
client/src/components/QuoteExplainationBox.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="quote-explaination-box__container">
Explain
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss">
@import '~/assets/css/components';
.quote-explaination-box {
&__container {
padding: 16px;
}
}
</style>

4
client/src/components/admin/PlayerDialog.vue
View File

@ -59,8 +59,8 @@ const generate = () => {
&__input {
border: 1px solid white;
background-color: $modal-dialog-background-color;
color: $modal-dialog-text-color;
background-color: $dialog-box-background-color;
color: $dialog-box-text-color;
border-radius: 4px;
}