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, GetRetentionWorkloadRequest,
UpdateDeckConfigsMode, UpdateDeckConfigsMode,
} from "@generated/anki/deck_config_pb"; } from "@generated/anki/deck_config_pb";
import type Modal from "bootstrap/js/dist/modal";
export let state: DeckOptionsState; export let state: DeckOptionsState;
export let openHelpModal: (String) => void; 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); state.save(UpdateDeckConfigsMode.COMPUTE_ALL_PARAMS);
} }
let showSimulator = false; let simulatorModal: Modal;
</script> </script>
<SpinBoxFloatRow <SpinBoxFloatRow
@ -406,13 +407,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<hr /> <hr />
<div class="m-1"> <div class="m-1">
<button class="btn btn-primary" on:click={() => (showSimulator = true)}> <button class="btn btn-primary" on:click={() => simulatorModal?.show()}>
{tr.deckConfigFsrsSimulatorExperimental()} {tr.deckConfigFsrsSimulatorExperimental()}
</button> </button>
</div> </div>
<SimulatorModal <SimulatorModal
bind:shown={showSimulator} bind:modal={simulatorModal}
{state} {state}
{simulateFsrsRequest} {simulateFsrsRequest}
{computing} {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 Warning from "./Warning.svelte";
import type { ComputeRetentionProgress } from "@generated/anki/collection_pb"; import type { ComputeRetentionProgress } from "@generated/anki/collection_pb";
import Item from "$lib/components/Item.svelte"; import Item from "$lib/components/Item.svelte";
import Modal from "bootstrap/js/dist/modal";
export let shown = false;
export let state: DeckOptionsState; export let state: DeckOptionsState;
export let simulateFsrsRequest: SimulateFsrsReviewRequest; export let simulateFsrsRequest: SimulateFsrsReviewRequest;
export let computing: boolean; 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]; $: easyDayPercentages = [...$config.easyDaysPercentages];
export let modal: Modal | null = null;
function setupModal(node: Element) {
modal = new Modal(node);
return {
destroy() {
modal?.dispose();
modal = null;
},
};
}
</script> </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-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -293,7 +305,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
type="button" type="button"
class="btn-close" class="btn-close"
aria-label="Close" aria-label="Close"
on:click={() => (shown = false)} on:click={() => modal?.hide()}
></button> ></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">