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

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

@ -14,32 +14,68 @@
flex-direction: column; flex-direction: column;
max-width: 400px; max-width: 400px;
width: calc(90vw - 40px); width: calc(90vw - 40px);
height: auto;
max-height: 90vh; max-height: 90vh;
background: white;
border-radius: $border-radius-large;
padding: 0 $space-base;
box-shadow: $box-shadow-x-large; 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 { .ds-modal-close {
position: absolute; position: absolute;
top: $space-small; top: $space-small;
right: $space-small; right: $space-small;
} }
.ds-modal-body { .ds-modal .ds-card-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
height: auto; height: auto;
min-height: 70px; min-height: 50px;
max-height: 60vh; max-height: 50vh;
padding-bottom: $space-large !important;
} }
.ds-modal-header { .ds-modal footer {
padding-top: $space-base; position: relative;
display: flex;
overflow: visible;
flex-shrink: 0;
justify-content: flex-end;
background-color: $background-color-softer;
padding: $space-small;
.ds-modal-title { & > button {
margin-bottom: 0; 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 { .ds-modal-backdrop {
@ -51,16 +87,6 @@
z-index: $z-index-modal - 1; z-index: $z-index-modal - 1;
background: rgba(0, 0, 0, 0.7); 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); $easeOut: cubic-bezier(0.19, 1, 0.22, 1);