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} {id}
{label} {label}
{title} {title}
shrinkWidthToFit={true}
background="var(--main-bg)" background="var(--main-bg)"
> >
<GenericDialogList selectable={false} {items} on:click="onClick(event)"/> <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>

View file

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

View file

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

View file

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

View file

@ -136,6 +136,14 @@
height: 18px; 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> </style>
<script> <script>
import Shortcut from '../../shortcut/Shortcut.html' import Shortcut from '../../shortcut/Shortcut.html'
@ -181,7 +189,8 @@
fadedIn: false, fadedIn: false,
muted: false, muted: false,
className: void 0, className: void 0,
title: void 0 title: void 0,
shrinkWidthToFit: false
}), }),
computed: { computed: {
backdropClass: ({ fadedIn, shouldAnimate }) => { backdropClass: ({ fadedIn, shouldAnimate }) => {
@ -191,12 +200,13 @@
shouldAnimate && 'should-animate' shouldAnimate && 'should-animate'
) )
}, },
contentsClass: ({ fadedIn, muted, shouldAnimate, className }) => { contentsClass: ({ fadedIn, muted, shouldAnimate, shrinkWidthToFit, className }) => {
return classname( return classname(
'modal-dialog-contents', 'modal-dialog-contents',
!fadedIn && 'hidden', !fadedIn && 'hidden',
muted && 'muted-style', muted && 'muted-style',
shouldAnimate && 'should-animate', shouldAnimate && 'should-animate',
shrinkWidthToFit && 'shrink-width-to-fit',
className className
) )
} }

View file

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

View file

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