fix: fix modal dialog width (#1152)

fixes #1151
This commit is contained in:
Nolan Lawson 2019-04-14 14:09:10 -07:00 committed by GitHub
parent d7fb6d1baa
commit ddd95aad27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 19 additions and 3 deletions

View File

@ -2,6 +2,7 @@
{id}
{label}
{title}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<GenericDialogList selectable={false} {items} on:click="onClick(event)"/>

View File

@ -2,6 +2,7 @@
{id}
{label}
{title}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<form class="copy-dialog-form">

View File

@ -2,6 +2,7 @@
{id}
{label}
{title}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<div class="emoji-container" {style} ref:container >

View File

@ -3,6 +3,7 @@
{label}
{title}
{className}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<form class="confirmation-dialog-form">

View File

@ -136,6 +136,14 @@
height: 18px;
}
}
@media(min-width: 768px) {
/* On desktop, some dialogs look bad if they expand to fit all the way. So we shrink
them to fit if shrinkWidthToFit is true.*/
.modal-dialog-contents.shrink-width-to-fit {
flex: none;
}
}
</style>
<script>
import Shortcut from '../../shortcut/Shortcut.html'
@ -181,7 +189,8 @@
fadedIn: false,
muted: false,
className: void 0,
title: void 0
title: void 0,
shrinkWidthToFit: false
}),
computed: {
backdropClass: ({ fadedIn, shouldAnimate }) => {
@ -191,12 +200,13 @@
shouldAnimate && 'should-animate'
)
},
contentsClass: ({ fadedIn, muted, shouldAnimate, className }) => {
contentsClass: ({ fadedIn, muted, shouldAnimate, shrinkWidthToFit, className }) => {
return classname(
'modal-dialog-contents',
!fadedIn && 'hidden',
muted && 'muted-style',
shouldAnimate && 'should-animate',
shrinkWidthToFit && 'shrink-width-to-fit',
className
)
}

View File

@ -2,6 +2,7 @@
{id}
{label}
{title}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<GenericDialogList selectable={true} {items} on:click="onClick(event)" />

View File

@ -2,6 +2,7 @@
{id}
{label}
{title}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<GenericDialogList selectable={false} {items} on:click="onClick(event)"/>