GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2026-01-09 03:53:55 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

More menu style

Browse source
This commit is contained in:
Luc Mcgrady 2025-11-11 11:44:15 +00:00
parent 5d6581ac1d
commit 25ceb0ad4e
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
3 changed files with 43 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ts/routes/reviewer/reviewer-bottom/More.svelte
View file

@ -3,7 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import DropdownItem from "$lib/components/DropdownItem.svelte";
import * as tr from "@generated/ftl"; import * as tr from "@generated/ftl";
import MoreSubmenu from "./MoreSubmenu.svelte"; import MoreSubmenu from "./MoreSubmenu.svelte";
import MoreItem from "./MoreItem.svelte"; import MoreItem from "./MoreItem.svelte";
@ -51,57 +50,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div slot="items" class="dropdown"> <div slot="items" class="dropdown">
<div class="row"> <div class="row">
<MoreSubmenu bind:showFloating={showFlags}> <MoreSubmenu bind:showFloating={showFlags}>
<DropdownItem <MoreItem
slot="button" slot="button"
on:click={() => { on:click={() => {
showFlags = !showFlags; showFlags = !showFlags;
}} }}
> >
{tr.studyingFlagCard()} {tr.studyingFlagCard()}
</DropdownItem> </MoreItem>
<div slot="items" class="dropdown"> <div slot="items" class="dropdown">
{#each flags as flag, i} {#each flags as flag, i}
<div class="row"> <MoreItem
<MoreItem shortcut={flag.shortcut}
shortcut={flag.shortcut} on:click={() => changeFlag(i + 1)}
onClick={() => changeFlag(i + 1)} >
> {flag.colour}
{flag.colour} </MoreItem>
</MoreItem>
<span>{flag.shortcut}</span>
</div>
{/each} {/each}
</div> </div>
</MoreSubmenu> </MoreSubmenu>
</div> </div>
<span></span>
{#each shortcuts as shortcut} {#each shortcuts as shortcut}
<div class="row"> <MoreItem shortcut={shortcut.shortcut} on:click={shortcut.onClick}>
<div> {shortcut.name}
<MoreItem shortcut={shortcut.shortcut} onClick={shortcut.onClick}> </MoreItem>
{shortcut.name}
</MoreItem>
</div>
<span>
{shortcut.shortcut}
</span>
</div>
{/each} {/each}
</div> </div>
</MoreSubmenu> </MoreSubmenu>
<style lang="scss"> <style lang="scss">
div.dropdown { div.dropdown {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
:global(button) { :global(button) {
border-radius: 0; border-radius: 0;
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
// TODO: Hover effects
&:hover { &:hover {
background: inherit; background: inherit;
color: inherit; color: inherit;
@ -109,10 +92,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
div.row {
display: contents;
}
button { button {
line-height: 18px; line-height: 18px;
} }

32
ts/routes/reviewer/reviewer-bottom/MoreItem.svelte
View file

@ -3,12 +3,32 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import DropdownItem from "$lib/components/DropdownItem.svelte";
import Shortcut from "$lib/components/Shortcut.svelte";
export let shortcut: string = ""; export let shortcut: string = "";
export let onClick = () => {};
</script> </script>
<Shortcut keyCombination={shortcut} on:keydown={onClick}></Shortcut> <div class="row" on:click on:keydown role="button" tabindex="0">
<DropdownItem on:click={onClick}><slot /></DropdownItem> <!--<Shortcut keyCombination={shortcut}></Shortcut>-->
<slot />
<span>{shortcut}</span>
</div>
<style lang="scss">
div.row {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0.5em;
cursor: pointer;
line-height: normal;
&:hover {
background: var(--highlight-bg);
color: var(--highlight-fg);
}
span {
min-width: 5em;
text-align: right;
}
}
</style>

6
ts/routes/reviewer/reviewer-bottom/MoreSubmenu.svelte
View file

@ -18,3 +18,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</Popover> </Popover>
</WithFloating> </WithFloating>
</div> </div>
<style>
div :global(.popover) {
padding: 0;
}
</style>