mirror of
https://github.com/ApfelTeeSaft/LiveSplitOne.git
synced 2026-08-27 03:33:40 +00:00
Christopher Serr
9f3ed503ec
The dialogs are now asynchronous as opposed to the browser built-in ones that are synchronous, probably because they are incredibly old. The problem with the new dialogs being asynchronous is that for example the hotkeys, the server protocol and honestly any sort of async download that's still running in the background can all mess with the timer while the dialog is open. This could lead to all sorts of weird issues, like the timer being in a different state than what the dialog expects, the timer being reset twice and creating two dialogs that are open at the same time and possibly even memory corruption in the Rust code. This commit ensures that the timer can not be interacted with while it is "locked for interaction". In fact we already had such a notion where when you navigate to the settings, layout or run editor, the hotkeys would be disabled. Now this is concept is extended so the event sink also can prevent interaction with the timer. Navigating to these menus and opening dialogs will now trigger this locking mechanism. Additionally this improves various async race conditions in the splits editor related to downloading resources from speedrun.com or splits.io. This also touches the CSS of the dialogs again, adding some spacing around the dialog, so it doesn't touch the edges of the window and allowing the buttons to have more dynamic sizing. In particular I've noticed that the text sometimes doesn't fit into the buttons on iOS, so they are now allowed to grow a little to handle that situation. File open dialogs also now know the file extensions of the files we are looking for.
66 lines
1.3 KiB
SCSS
66 lines
1.3 KiB
SCSS
@import 'variables';
|
|
|
|
.is-mobile+dialog>.dialog {
|
|
min-width: auto;
|
|
}
|
|
|
|
dialog {
|
|
background: none;
|
|
border: none;
|
|
outline: 0;
|
|
|
|
&::backdrop {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.dialog {
|
|
color: #eee;
|
|
background: $main-background-color;
|
|
border: 2px solid $border-color;
|
|
border-radius: 10px;
|
|
min-width: 225px;
|
|
|
|
max-width: 400px;
|
|
padding: $ui-large-margin;
|
|
|
|
h1 {
|
|
font-size: 20px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.buttons {
|
|
button {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
min-width: 80px;
|
|
height: auto;
|
|
|
|
&:focus {
|
|
border-color: #888;
|
|
}
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: $ui-margin;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 1px solid hsla(0, 0%, 100%, 0.25);
|
|
background: transparent;
|
|
color: white;
|
|
text-overflow: ellipsis;
|
|
font-family: "fira", sans-serif;
|
|
font-size: 16px;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|