blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added close button to the modal's header.

Browse source
This commit is contained in:
Fabio Manganiello 2023-05-05 02:48:41 +02:00
parent 8af3ae17b8
commit 59bf1c2aa0
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
platypush/backend/http/webapp/src/components/Modal.vue
View file

@ -2,7 +2,12 @@
<div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}" :style="{'--z-index': zIndex}" @click="close"> <div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}" :style="{'--z-index': zIndex}" @click="close">
<div class="modal" :class="$attrs.class"> <div class="modal" :class="$attrs.class">
<div class="content" :style="{'--width': width, '--height': height}" @click="$event.stopPropagation()"> <div class="content" :style="{'--width': width, '--height': height}" @click="$event.stopPropagation()">
<div class="header" v-text="title" v-if="title"></div> <div class="header" v-if="title">
<div class="title" v-text="title" v-if="title" />
<button title="Close" alt="Close" @click="close">
<i class="fas fa-xmark" />
</button>
</div>
<div class="body"> <div class="body">
<slot @modal-close="close" /> <slot @modal-close="close" />
</div> </div>
@ -145,6 +150,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$icon-size: 1.5em;
$icon-margin: 0.5em;
.modal-container { .modal-container {
position: fixed; position: fixed;
display: flex; display: flex;
@ -171,6 +179,7 @@ export default {
.header { .header {
display: flex; display: flex;
position: relative;
border-bottom: $modal-header-border; border-bottom: $modal-header-border;
border-radius: 0.5em 0.5em 0 0; border-radius: 0.5em 0.5em 0 0;
padding: 0.5em; padding: 0.5em;
@ -179,6 +188,21 @@ export default {
align-items: center; align-items: center;
background: $modal-header-bg; background: $modal-header-bg;
text-transform: uppercase; text-transform: uppercase;
button {
width: $icon-size;
height: $icon-size;
position: absolute;
right: 0;
margin: auto $icon-margin;
padding: 0;
border: 0;
background: transparent;
&:hover {
color: $default-hover-fg;
}
}
} }
.body { .body {