23e6b2123e
* Create _input-mixins.scss * Use button-mixins on more elements * Replace <select> tag with custom Select component * Fix RevertButton causing cursor: pointer when hidden * Increase SaveButton chevron width * Hide floating component box-shadow when inactive * Rework SpinBox and move it into components * Run eslint and prettier * Remove leftover options prop * Pass disabled array to EnumSelector again * Update MapperRow.svelte * Darken QHeaderView border color Slipping this in without an extra PR. * Adjust disabled color, border and cursor * Remove redundant icon definition from stylesheets * Fix deck options initial config * Fix z-index issues in change notetype screen It might be best to handle z-index locally in each user component instead of hard-coded component values. * Give web SpinBox a horizontal design * Give QRadioButton the same treatment as QCheckBox in #2079 * Fix unused CSS selector warning with base button-mixin * Remove redundant import * Fix deck options save button * Delete input-mixins and remove unused down-arrow * Run eslint on change-notetype * Run eslint on components
115 lines
3.5 KiB
Svelte
115 lines
3.5 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import { createEventDispatcher, tick } from "svelte";
|
|
|
|
import DropdownDivider from "../components/DropdownDivider.svelte";
|
|
import DropdownItem from "../components/DropdownItem.svelte";
|
|
import LabelButton from "../components/IconButton.svelte";
|
|
import IconButton from "../components/IconButton.svelte";
|
|
import Popover from "../components/Popover.svelte";
|
|
import Shortcut from "../components/Shortcut.svelte";
|
|
import WithFloating from "../components/WithFloating.svelte";
|
|
import * as tr from "../lib/ftl";
|
|
import { withCollapsedWhitespace } from "../lib/i18n";
|
|
import { getPlatformString } from "../lib/shortcuts";
|
|
import { chevronDown } from "./icons";
|
|
import type { DeckOptionsState } from "./lib";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let state: DeckOptionsState;
|
|
|
|
function commitEditing(): void {
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
}
|
|
|
|
async function removeConfig(): Promise<void> {
|
|
// show pop-up after dropdown has gone away
|
|
await tick();
|
|
|
|
if (state.defaultConfigSelected()) {
|
|
alert(tr.schedulingTheDefaultConfigurationCantBeRemoved());
|
|
return;
|
|
}
|
|
|
|
const msg =
|
|
(state.removalWilLForceFullSync()
|
|
? tr.deckConfigWillRequireFullSync() + " "
|
|
: "") +
|
|
tr.deckConfigConfirmRemoveName({ name: state.getCurrentName() });
|
|
|
|
if (confirm(withCollapsedWhitespace(msg))) {
|
|
try {
|
|
state.removeCurrentConfig();
|
|
dispatch("remove");
|
|
} catch (err) {
|
|
alert(err);
|
|
}
|
|
}
|
|
}
|
|
|
|
function save(applyToChildDecks: boolean): void {
|
|
commitEditing();
|
|
state.save(applyToChildDecks);
|
|
}
|
|
|
|
const saveKeyCombination = "Control+Enter";
|
|
|
|
let showFloating = false;
|
|
</script>
|
|
|
|
<LabelButton
|
|
primary
|
|
on:click={() => save(false)}
|
|
tooltip={getPlatformString(saveKeyCombination)}
|
|
--border-left-radius="var(--border-radius)"
|
|
>
|
|
<div class="save">{tr.deckConfigSaveButton()}</div>
|
|
</LabelButton>
|
|
<Shortcut keyCombination={saveKeyCombination} on:action={() => save(false)} />
|
|
|
|
<WithFloating
|
|
show={showFloating}
|
|
closeOnInsideClick
|
|
inline
|
|
on:close={() => (showFloating = false)}
|
|
>
|
|
<IconButton
|
|
class="chevron"
|
|
slot="reference"
|
|
on:click={() => (showFloating = !showFloating)}
|
|
--border-right-radius="var(--border-radius)"
|
|
iconSize={80}
|
|
>
|
|
{@html chevronDown}
|
|
</IconButton>
|
|
<Popover slot="floating">
|
|
<DropdownItem on:click={() => dispatch("add")}
|
|
>{tr.deckConfigAddGroup()}</DropdownItem
|
|
>
|
|
<DropdownItem on:click={() => dispatch("clone")}
|
|
>{tr.deckConfigCloneGroup()}</DropdownItem
|
|
>
|
|
<DropdownItem on:click={() => dispatch("rename")}>
|
|
{tr.deckConfigRenameGroup()}
|
|
</DropdownItem>
|
|
<DropdownItem on:click={removeConfig}>{tr.deckConfigRemoveGroup()}</DropdownItem
|
|
>
|
|
<DropdownDivider />
|
|
<DropdownItem on:click={() => save(true)}>
|
|
{tr.deckConfigSaveToAllSubdecks()}
|
|
</DropdownItem>
|
|
</Popover>
|
|
</WithFloating>
|
|
|
|
<style lang="scss">
|
|
.save {
|
|
margin: 0.2rem 0.75rem;
|
|
}
|
|
</style>
|