Added: bury more option

This commit is contained in:
Luc Mcgrady 2025-11-11 10:52:54 +00:00
parent f5c4b02609
commit 5d6581ac1d
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C

View file

@ -24,6 +24,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{ colour: tr.actionsFlagPurple(), shortcut: "Ctrl+7" }, { colour: tr.actionsFlagPurple(), shortcut: "Ctrl+7" },
]; ];
const shortcuts = [
{ onClick: state.buryCurrentCard.bind(state), name: "bury", shortcut: "~" },
];
function changeFlag(index: number) { function changeFlag(index: number) {
setFlag({ cardIds: [state.currentCard!.card!.id], flag: index }); setFlag({ cardIds: [state.currentCard!.card!.id], flag: index });
state.cardData.update(($cardData) => { state.cardData.update(($cardData) => {
@ -44,33 +48,69 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{tr.studyingMore()}{"▾"} {tr.studyingMore()}{"▾"}
</button> </button>
<div slot="items"> <div slot="items" class="dropdown">
<MoreSubmenu bind:showFloating={showFlags}> <div class="row">
<DropdownItem <MoreSubmenu bind:showFloating={showFlags}>
slot="button" <DropdownItem
on:click={() => { slot="button"
showFlags = !showFlags; on:click={() => {
}} showFlags = !showFlags;
> }}
{tr.studyingFlagCard()} >
</DropdownItem> {tr.studyingFlagCard()}
<div slot="items"> </DropdownItem>
{#each flags as flag, i} <div slot="items" class="dropdown">
<MoreItem {#each flags as flag, i}
shortcut={flag.shortcut} <div class="row">
onClick={() => changeFlag(i + 1)} <MoreItem
> shortcut={flag.shortcut}
{flag.colour} onClick={() => changeFlag(i + 1)}
>
{flag.colour}
</MoreItem>
<span>{flag.shortcut}</span>
</div>
{/each}
</div>
</MoreSubmenu>
</div>
<span></span>
{#each shortcuts as shortcut}
<div class="row">
<div>
<MoreItem shortcut={shortcut.shortcut} onClick={shortcut.onClick}>
{shortcut.name}
</MoreItem> </MoreItem>
{/each} </div>
<span>
{shortcut.shortcut}
</span>
</div> </div>
</MoreSubmenu> {/each}
</div> </div>
</MoreSubmenu> </MoreSubmenu>
<style> <style lang="scss">
div :global(button) { div.dropdown {
width: fit-content; display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
:global(button) {
border-radius: 0;
padding: 0.5em;
margin: 0;
// TODO: Hover effects
&:hover {
background: inherit;
color: inherit;
}
}
}
div.row {
display: contents;
} }
button { button {