allow closing dialog by clicking on backdrop

AuthorKonata <konata@posteo.jp>
Date
Commitcd16ebea636a01dc840ccd60b74b9c7e6afbcb0b
Parent943b729
4 files changed, 5 insertions(+), 8 deletions(-)
▾Mwebclient/src/components/FileBrowser.tsx
@@ -185,7 +185,7 @@ export default function FileBrowser(props: FileBrowserProps) {
return (
<>
<dialog class="duplicate-warning-dialog" ref={dialogElement}>
<dialog class="duplicate-warning-dialog" ref={dialogElement} onclick={(e) => e.target.nodeName === "DIALOG" && dialogElement.close()}>
<div>
Some of the items you're trying to add already exists in your current playlist
<div class="buttons">
▾Mwebclient/src/components/OptionsModal.tsx
@@ -51,7 +51,7 @@ export default function OptionsModal(props: OptionsModalProps) {
}
return (
<dialog ref={dialogElement} onClose={handleClose}>
<dialog ref={dialogElement} onClose={handleClose} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
<form class="option-content" ref={formElement}>
<div class="title">Player Options</div>
<hr />
▾Mwebclient/src/components/Playlist.tsx
@@ -135,7 +135,7 @@ export default function Playlist(props: PlaylistProps) {
return (
<div class="playlist-container">
<dialog class="save-dialog" ref={dialogElement}>
<dialog class="save-dialog" ref={dialogElement} onclick={(e) => e.target.nodeName === "DIALOG" && closeDialog()}>
<div>
<input ref={playlistNameInput} required type="text" placeholder="Playlist name" />
<div class="save-buttons">
@@ -152,10 +152,7 @@ export default function Playlist(props: PlaylistProps) {
<span>
Playlist ({props.playlist().length} tracks, {syncedCount()} synced)
</span>
<button
title="Toggle playlist actions"
onclick={() => setShowActionButtons(!showActionButtons())}
>
<button title="Toggle playlist actions" onclick={() => setShowActionButtons(!showActionButtons())}>
{showActionButtons() ? <UpSVG /> : <DownSVG />}
</button>
</div>
▾Mwebclient/src/components/PlaylistManager.tsx
@@ -90,7 +90,7 @@ export default function PlaylistManager(props: PlaylistManagerProps) {
}
return (
<dialog ref={dialogElement} onClose={handleClose}>
<dialog ref={dialogElement} onClose={handleClose} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
<div>
<div class="playlistmanager-header title">
Playlists