langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1196 from hgiesel/csscleanup

Browse Source 
Use TextInputModal directly
This commit is contained in:
Damien Elmes 2021-05-26 08:48:16 +10:00 committed by GitHub
commit bd307ff890
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 104 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ts/components/contextKeys.ts
View File

@ -6,3 +6,4 @@ export const disabledKey = Symbol("disabled");
export const buttonToolbarKey = Symbol("buttonToolbar");
export const buttonGroupKey = Symbol("buttonGroup");
export const dropdownKey = Symbol("dropdown");
export const modalsKey = Symbol("modals");

7
ts/deckoptions/BUILD.bazel
View File

@ -61,15 +61,14 @@ ts_library(
"lib.ts",
"steps.ts",
"strings.ts",
"textInputModal.ts",
],
module_name = "deckoptions",
deps = [
"TextInputModal",
"//ts:image_module_support",
"//ts/lib",
"//ts/lib:backend_proto",
"//ts/sveltelib",
"//ts/components",
"@npm//lodash-es",
"@npm//svelte",
],
@ -133,10 +132,12 @@ svelte_check(
"*.ts",
"*.svelte",
]) + [
"//ts/sass:button_mixins_lib",
"//ts/sass/bootstrap",
"@npm//@types/bootstrap",
"@npm//@types/lodash-es",
"@npm//@types/marked",
"//ts/components:svelte_components",
"//ts/components",
],
)

46
ts/deckoptions/ConfigSelector.svelte
View File

@ -4,10 +4,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "lib/i18n";
import { getContext } from "svelte";
import { modalsKey } from "components/contextKeys";
import type { DeckOptionsState, ConfigListEntry } from "./lib";
import type Modal from "bootstrap/js/dist/modal";
import WithTheming from "components/WithTheming.svelte";
import TextInputModal from "./TextInputModal.svelte";
import StickyBar from "components/StickyBar.svelte";
import WithTheming from "components/WithTheming.svelte";
import ButtonToolbar from "components/ButtonToolbar.svelte";
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
import ButtonGroup from "components/ButtonGroup.svelte";
@ -28,8 +32,46 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function blur(event: Event): void {
state.setCurrentIndex(parseInt((event.target! as HTMLSelectElement).value));
}
function onAddConfig(text: string): void {
const trimmed = text.trim();
if (trimmed.length) {
state.addConfig(trimmed);
}
}
function onRenameConfig(text: string): void {
state.setCurrentName(text);
}
const modals = getContext<Map<string, Modal>>(modalsKey);
let addModalKey: string;
let renameModalKey: string;
let oldName = "";
function onAdd() {
modals.get(addModalKey)!.show();
}
function onRename() {
oldName = state.getCurrentName();
modals.get(renameModalKey)!.show();
}
</script>
<TextInputModal
title="Add Config"
prompt="Name"
onOk={onAddConfig}
bind:modalKey={addModalKey} />
<TextInputModal
title="Rename Config"
prompt="Name"
onOk={onRenameConfig}
value={oldName}
bind:modalKey={renameModalKey} />
<StickyBar>
<WithTheming style="--toolbar-size: 2.3rem; --toolbar-wrap: nowrap">
<ButtonToolbar class="justify-content-between">
@ -50,7 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonToolbarItem>
<ButtonToolbarItem>
<SaveButton {state} />
<SaveButton {state} on:add={onAdd} on:rename={onRename} />
</ButtonToolbarItem>
</ButtonToolbar>
</WithTheming>

18
ts/deckoptions/DeckOptionsPage.svelte
View File

@ -41,21 +41,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onDestroy(() => registerCleanup?.());
</script>
<style lang="scss">
.editor {
// without this, the initial viewport can be wrong
overflow-x: hidden;
}
</style>
<ConfigSelector {state} />
<div>
<div id="modal">
<!-- filled in later-->
</div>
<div class="editor">
<ConfigEditor {state} />
</div>
</div>
<ConfigEditor {state} />

34
ts/deckoptions/SaveButton.svelte
View File

@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "lib/i18n";
import { textInputModal } from "./textInputModal";
import { createEventDispatcher } from "svelte";
import type { DeckOptionsState } from "./lib";
import ButtonGroup from "components/ButtonGroup.svelte";
@ -16,32 +16,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import DropdownDivider from "components/DropdownDivider.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
const dispatch = createEventDispatcher();
export let state: DeckOptionsState;
function addConfig(): void {
textInputModal({
title: "Add Config",
prompt: "Name:",
onOk: (text: string) => {
const trimmed = text.trim();
if (trimmed.length) {
state.addConfig(trimmed);
}
},
});
}
function renameConfig(): void {
textInputModal({
title: "Rename Config",
prompt: "Name:",
startingValue: state.getCurrentName(),
onOk: (text: string) => {
state.setCurrentName(text);
},
});
}
function removeConfig(): void {
// show pop-up after dropdown has gone away
setTimeout(() => {
@ -78,8 +56,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
<LabelButton on:mount={createDropdown} on:click={activateDropdown} />
<DropdownMenu id={menuId}>
<DropdownItem on:click={addConfig}>Add Config</DropdownItem>
<DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>
<DropdownItem on:click={() => dispatch('add')}>Add Config</DropdownItem>
<DropdownItem on:click={() => dispatch('rename')}>
Rename Config
</DropdownItem>
<DropdownItem on:click={removeConfig}>Remove Config</DropdownItem>
<DropdownDivider />
<DropdownItem on:click={() => save(true)}>

68
ts/deckoptions/TextInputModal.svelte
View File

@ -6,54 +6,72 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* eslint
@typescript-eslint/no-non-null-assertion: "off",
*/
import { onMount, onDestroy } from "svelte";
import { onMount, onDestroy, getContext } from "svelte";
import { nightModeKey, modalsKey } from "components/contextKeys";
import Modal from "bootstrap/js/dist/modal";
export let title: string;
export let prompt: string;
export let startingValue = "";
export let value = "";
export let onOk: (text: string) => void;
let inputRef: HTMLInputElement;
export const modalKey: string = Math.random().toString(36).substring(2);
const modals = getContext<Map<string, Modal>>(modalsKey);
let modalRef: HTMLDivElement;
let modal: Modal;
let inputRef: HTMLInputElement;
function onOkClicked(): void {
onOk(inputRef.value);
modal.hide();
value = "";
}
function onShown(): void {
inputRef.focus();
}
function onHidden(): void {
const container = document.getElementById("modal")!;
container.removeChild(container.firstElementChild!);
}
function onOkClicked(): void {
onOk(inputRef.value);
modal.hide();
}
onMount(() => {
const container = document.getElementById("modal")!;
container.addEventListener("shown.bs.modal", onShown);
container.addEventListener("hidden.bs.modal", onHidden);
modal = new Modal(container.firstElementChild!, {});
modal.show();
modalRef.addEventListener("shown.bs.modal", onShown);
modal = new Modal(modalRef);
modals.set(modalKey, modal);
});
onDestroy(() => {
const container = document.getElementById("modal")!;
container.removeEventListener("shown.bs.modal", onShown);
container.removeEventListener("hidden.bs.modal", onHidden);
modalRef.removeEventListener("shown.bs.modal", onShown);
});
const nightMode = getContext<boolean>(nightModeKey);
</script>
<div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<style lang="scss">
.default-colors {
background-color: var(--window-bg);
color: var(--text-fg);
}
.invert {
filter: invert(1) grayscale(100%) brightness(200%);
}
</style>
<div
bind:this={modalRef}
class="modal fade"
tabindex="-1"
aria-labelledby="modalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-content" class:default-colors={nightMode}>
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">{title}</h5>
<button
type="button"
class="btn-close"
class:invert={nightMode}
data-bs-dismiss="modal"
aria-label="Close" />
</div>
@ -62,13 +80,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div class="mb-3">
<label
for="prompt-input"
class="col-form-label">{prompt}</label>
class="col-form-label">{prompt}:</label>
<input
id="prompt-input"
bind:this={inputRef}
type="text"
class="form-control"
value={startingValue} />
bind:value />
</div>
</form>
</div>

5
ts/deckoptions/index.ts
View File

@ -14,7 +14,7 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte";
import EnumSelector from "./EnumSelector.svelte";
import CheckBox from "./CheckBox.svelte";
import { nightModeKey } from "components/contextKeys";
import { nightModeKey, modalsKey } from "components/contextKeys";
export async function deckOptions(
target: HTMLDivElement,
@ -35,6 +35,9 @@ export async function deckOptions(
const context = new Map();
context.set(nightModeKey, nightMode);
const modals = new Map();
context.set(modalsKey, modals);
const state = new DeckOptionsState(deckId, info);
return new DeckOptionsPage({
target,

23
ts/deckoptions/textInputModal.ts
View File

@ -1,23 +0,0 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* eslint
@typescript-eslint/no-non-null-assertion: "off",
*/
import TextInputModal from "./TextInputModal.svelte";
export interface TextInputModalProps {
title: string;
prompt: string;
startingValue?: string;
onOk: (string) => void;
}
export function textInputModal(props: TextInputModalProps): TextInputModal {
const target = document.getElementById("modal")!;
return new TextInputModal({
target,
props,
});
}

9
ts/sass/bootstrap-dark.scss vendored
View File

@ -14,13 +14,4 @@
background-color: var(--window-bg);
}
}
.modal-content {
background-color: var(--window-bg);
color: var(--text-fg);
}
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
}