fix deck options page being scrollable while simulator modal is open (#4133)

This commit is contained in:
llama 2025-06-29 15:42:52 +08:00 committed by GitHub
parent 185fdebb63
commit 58dfb9cdd3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 6 deletions

View file

@ -35,6 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
GetRetentionWorkloadRequest,
UpdateDeckConfigsMode,
} from "@generated/anki/deck_config_pb";
import type Modal from "bootstrap/js/dist/modal";
export let state: DeckOptionsState;
export let openHelpModal: (String) => void;
@ -308,7 +309,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
state.save(UpdateDeckConfigsMode.COMPUTE_ALL_PARAMS);
}
let showSimulator = false;
let simulatorModal: Modal;
</script>
<SpinBoxFloatRow
@ -406,13 +407,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<hr />
<div class="m-1">
<button class="btn btn-primary" on:click={() => (showSimulator = true)}>
<button class="btn btn-primary" on:click={() => simulatorModal?.show()}>
{tr.deckConfigFsrsSimulatorExperimental()}
</button>
</div>
<SimulatorModal
bind:shown={showSimulator}
bind:modal={simulatorModal}
{state}
{simulateFsrsRequest}
{computing}

View file

@ -42,8 +42,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import Warning from "./Warning.svelte";
import type { ComputeRetentionProgress } from "@generated/anki/collection_pb";
import Item from "$lib/components/Item.svelte";
import Modal from "bootstrap/js/dist/modal";
export let shown = false;
export let state: DeckOptionsState;
export let simulateFsrsRequest: SimulateFsrsReviewRequest;
export let computing: boolean;
@ -282,9 +282,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
$: easyDayPercentages = [...$config.easyDaysPercentages];
export let modal: Modal | null = null;
function setupModal(node: Element) {
modal = new Modal(node);
return {
destroy() {
modal?.dispose();
modal = null;
},
};
}
</script>
<div class="modal" class:show={shown} class:d-block={shown} tabindex="-1">
<div class="modal" tabindex="-1" use:setupModal>
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
@ -293,7 +305,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
type="button"
class="btn-close"
aria-label="Close"
on:click={() => (shown = false)}
on:click={() => modal?.hide()}
></button>
</div>
<div class="modal-body">