GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-12-10 21:36:55 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make SaveButton functional

Browse source
This commit is contained in:
Henrik Giesel 2021-05-18 18:55:22 +02:00
parent 94cdebe59c
commit 32ca473fd4
6 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ts/components/WithDropdownMenu.svelte
View file

@ -15,6 +15,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}); });
const menuId = Math.random().toString(36).substring(2); const menuId = Math.random().toString(36).substring(2);
let dropdown: Dropdown;
function activateDropdown(_event: MouseEvent): void {
dropdown.toggle();
}
/* Normally dropdown and trigger are associated with a /* Normally dropdown and trigger are associated with a
/* common ancestor with .dropdown class */ /* common ancestor with .dropdown class */
@ -31,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
if (!menu) { if (!menu) {
console.log(`Could not find menu "${menuId}" for dropdown menu.`); console.log(`Could not find menu "${menuId}" for dropdown menu.`);
} else { } else {
const dropdown = new Dropdown(button); dropdown = new Dropdown(button);
/* Set custom menu without using common element with .dropdown */ /* Set custom menu without using common element with .dropdown */
(dropdown as any)._menu = menu; (dropdown as any)._menu = menu;
@ -39,4 +44,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<slot {createDropdown} {menuId} /> <slot {createDropdown} {activateDropdown} {menuId} />

4
ts/deckoptions/ConfigSelector.svelte
View file

@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import SelectButton from "components/SelectButton.svelte"; import SelectButton from "components/SelectButton.svelte";
import SelectOption from "components/SelectOption.svelte"; import SelectOption from "components/SelectOption.svelte";
import OptionsDropdown from "./OptionsDropdown.svelte"; import SaveButton from "./SaveButton.svelte";
export let state: DeckOptionsState; export let state: DeckOptionsState;
let configList = state.configList; let configList = state.configList;
@ -52,7 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonToolbarItem> </ButtonToolbarItem>
<ButtonToolbarItem> <ButtonToolbarItem>
<OptionsDropdown {state} /> <SaveButton {state} />
</ButtonToolbarItem> </ButtonToolbarItem>
</ButtonToolbar> </ButtonToolbar>
</WithTheming> </WithTheming>

4
ts/deckoptions/DeckOptionsPage.svelte
View file

@ -48,13 +48,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</style> </style>
<ConfigSelector {state} />
<div> <div>
<div id="modal"> <div id="modal">
<!-- filled in later--> <!-- filled in later-->
</div> </div>
<ConfigSelector {state} />
<div class="editor"> <div class="editor">
<ConfigEditor {state} /> <ConfigEditor {state} />
</div> </div>

4
ts/deckoptions/OptionsDropdown.svelte → ts/deckoptions/SaveButton.svelte
View file

@ -75,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithDropdownMenu let:createDropdown let:menuId> <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
<LabelButton on:mount={createDropdown} /> <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
<DropdownMenu id={menuId}> <DropdownMenu id={menuId}>
<DropdownItem on:click={addConfig}>Add Config</DropdownItem> <DropdownItem on:click={addConfig}>Add Config</DropdownItem>
<DropdownItem on:click={renameConfig}>Rename Config</DropdownItem> <DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>

1
ts/deckoptions/deckoptions-base.scss
View file

@ -1,3 +1,4 @@
@use "ts/sass/vars";
@use "ts/sass/scrollbar"; @use "ts/sass/scrollbar";
@use "ts/sass/bootstrap-dark"; @use "ts/sass/bootstrap-dark";

15
ts/sass/button_mixins.scss
View file

@ -17,7 +17,12 @@ $btn-base-color-day: white;
border-color: var(--medium-border) !important; border-color: var(--medium-border) !important;
} }
@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) { @mixin btn-day(
$with-hover: true,
$with-active: true,
$with-disabled: true,
$with-margin: true
) {
.btn-day { .btn-day {
@include btn-day-base; @include btn-day-base;
@content ($btn-base-color-day); @content ($btn-base-color-day);
@ -60,8 +65,12 @@ $btn-base-color-night: #666;
border-color: $btn-base-color-night; border-color: $btn-base-color-night;
} }
@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) { @mixin btn-night(
$with-hover: true,
$with-active: true,
$with-disabled: true,
$with-margin: true
) {
.btn-night { .btn-night {
@include btn-night-base; @include btn-night-base;
@content ($btn-base-color-night); @content ($btn-base-color-night);