IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved modal

Browse Source
This commit is contained in:
Grzegorz Leoniec 2019-01-14 17:54:26 +01:00
parent bfd0feae49
commit a20430f3e9
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
2 changed files with 75 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
styleguide/src/system/components/layout/Modal/Modal.vue
View File

@ -12,57 +12,41 @@
</div>
</transition>
<transition name="ds-transition-modal-appear" appear>
<div
<ds-card
v-if="isOpen"
class="ds-modal"
:class="[extended && 'ds-modal-extended']"
:header="title"
tableindex="-1"
role="dialog"
ref="modal"
style="display: block"
>
<div class="ds-modal-dialog">
<div class="ds-modal-content">
<div class="ds-modal-header">
<ds-heading
tag="h3"
class="ds-modal-title"
>
{{ title }}
</ds-heading>
<ds-button
v-if="!force"
class="ds-modal-close"
ghost
size="small"
icon="close"
aria-hidden="true"
@click="cancel('close')"
/>
</div>
<div
class="ds-modal-body"
ref="modalBody"
>
<!-- @slot Modal content -->
<slot/>
</div>
<div class="ds-modal-footer">
<!-- @slot Modal footer with action buttons -->
<slot
name="footer"
:confirm="confirm"
:cancel="cancel"
:cancelLabel="cancelLabel"
:confirmLabel="confirmLabel"
>
<ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
<ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
</slot>
</div>
</div>
</div>
</div>
<ds-button
v-if="!force"
class="ds-modal-close"
ghost
size="small"
icon="close"
aria-hidden="true"
@click="cancel('close')"
/>
<!-- @slot Modal content -->
<slot ref="modalBody"/>
<template slot="footer">
<!-- @slot Modal footer with action buttons -->
<slot
name="footer"
:confirm="confirm"
:cancel="cancel"
:cancelLabel="cancelLabel"
:confirmLabel="confirmLabel"
>
<ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
<ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
</slot>
</template>
</ds-card>
</transition>
</div>
</portal>

70
styleguide/src/system/components/layout/Modal/style.scss
View File

@ -14,32 +14,68 @@
flex-direction: column;
max-width: 400px;
width: calc(90vw - 40px);
height: auto;
max-height: 90vh;
background: white;
border-radius: $border-radius-large;
padding: 0 $space-base;
box-shadow: $box-shadow-x-large;
&.ds-modal-extended {
max-width: 600px;
}
}
.ds-modal-extended {
max-width: 600px;
.ds-modal .ds-card-header {
position: relative;
&::after {
content: "";
height: 30px;
background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
position: absolute;
width: calc(100% - 10px);
bottom: -30px;
left: 0;
pointer-events: none;
z-index: 1;
}
}
.ds-modal-close {
position: absolute;
top: $space-small;
right: $space-small;
}
.ds-modal-body {
.ds-modal .ds-card-content {
flex: 1;
overflow-y: auto;
height: auto;
min-height: 70px;
max-height: 60vh;
min-height: 50px;
max-height: 50vh;
padding-bottom: $space-large !important;
}
.ds-modal-header {
padding-top: $space-base;
.ds-modal footer {
position: relative;
display: flex;
overflow: visible;
flex-shrink: 0;
justify-content: flex-end;
background-color: $background-color-softer;
padding: $space-small;
.ds-modal-title {
margin-bottom: 0;
& > button {
margin-left: $space-x-small;
}
&::before {
content: "";
height: 45px;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.9));
position: absolute;
width: calc(100% - 10px);
z-index: 1;
left: 0;
top: -45px;
pointer-events: none;
}
}
.ds-modal-backdrop {
@ -51,16 +87,6 @@
z-index: $z-index-modal - 1;
background: rgba(0, 0, 0, 0.7);
}
.ds-modal-footer {
display: flex;
padding: $space-base 0;
flex-shrink: 0;
justify-content: flex-end;
& > button {
margin-left: $space-x-small;
}
}
$easeOut: cubic-bezier(0.19, 1, 0.22, 1);