gkucmierz/instacode-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ModalWindow component

Browse Source
This commit is contained in:
Grzegorz Kućmierz
2022-11-23 08:31:58 +01:00
parent cd80bf5e70
commit 850b16e113
2 changed files with 102 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/HelpModal.vue
View File

@@ -1,93 +1,57 @@
<script> <script>
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import ModalWindow from './ModalWindow.vue';
export default defineComponent({ export default defineComponent({
name: 'HelpModal', name: 'HelpModal',
props: { props: {
visible: Boolean, visible: Boolean,
}, },
components: {
ModalWindow,
},
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
ul {
$padding: 12px; list-style-type: none;
.help-modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
padding: 0; padding: 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex; li {
justify-content: center; display: flex;
align-items: center; flex: 1 1 0px;
flex-wrap: nowrap;
visibility: hidden; * {
&.visible { width: 50%;
visibility: visible;
}
.window {
padding: $padding $padding * 4;
border-radius: $padding * 2;
// height: calc(100% - 100px);
// width: calc(100% - 100px);
line-height: 1.5;
font-family: monospace;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(32, 32, 32, 0.6);
overflow-y: auto;
ul {
list-style-type: none;
padding: 0;
li {
display: flex;
flex: 1 1 0px;
flex-wrap: nowrap;
* {
width: 50%;
}
b {
padding-right: 4px;
white-space: nowrap;
text-align: right;
}
span {
padding-left: 4px;
white-space: nowrap;
text-align: left;
}
}
} }
b { b {
color: #8f8; padding-right: 4px;
white-space: nowrap;
text-align: right;
}
span {
padding-left: 4px;
white-space: nowrap;
text-align: left;
} }
} }
} }
b {
color: #8f8;
}
</style> </style>
<template> <template>
<div <div class="help-modal">
class="help-modal" <ModalWindow :visible="visible" @close="$emit('close')">
:class="{ visible: this.visible }" <template #header>
@click="$emit('close')"
>
<div class="window" @click.stop>
<div class="header">
<h3>Keyboard Shortcuts</h3> <h3>Keyboard Shortcuts</h3>
</div> </template>
<div class="content"> <template #body>
<!-- ⌘ ⇧ ⌥ ⌃ ⇪ --> <!-- ⌘ ⇧ ⌥ ⌃ ⇪ -->
<ul> <ul>
<li> <li>
@@ -111,7 +75,10 @@ $padding: 12px;
<span>- close window</span> <span>- close window</span>
</li> </li>
</ul> </ul>
</div> </template>
</div> <!-- <template #footer>
<button @click="showModal = false">close</button>
</template> -->
</ModalWindow>
</div> </div>
</template> </template>

68
src/components/ModalWindow.vue Normal file
View File

@@ -0,0 +1,68 @@
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ModalWindow',
props: {
visible: Boolean,
},
});
</script>
<style lang="scss" scoped>
$padding: 12px;
.modal-window {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
padding: 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
&.visible {
visibility: visible;
}
.window {
padding: $padding $padding * 4;
border-radius: $padding * 2;
// height: calc(100% - 100px);
// width: calc(100% - 100px);
line-height: 1.5;
font-family: monospace;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(32, 32, 32, 0.6);
overflow-y: auto;
}
}
</style>
<template>
<div
class="modal-window"
:class="{ visible: this.visible }"
@click="$emit('close')"
>
<div class="window" @click.stop>
<div class="header">
<slot name="header" />
</div>
<div class="body">
<slot name="body" />
</div>
<div class="footer">
<slot name="footer" />
</div>
</div>
</div>
</template>