GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-21 15:32:23 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Adjust position so tags do not even move a single pixel when going into editing

Browse source
This commit is contained in:
Henrik Giesel 2021-07-01 22:58:28 +02:00
parent 6642a11482
commit 9499bc1505
3 changed files with 51 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/editor/Tag.svelte
View file

@ -54,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<svelte:body on:keydown={setDeleteIcon} on:keyup={setDeleteIcon} /> <svelte:body on:keydown={setDeleteIcon} on:keyup={setDeleteIcon} />
<button <button
class={`tag btn d-inline-flex align-items-center text-nowrap rounded ps-2 pe-1 ${className}`} class={`tag btn d-inline-flex align-items-center text-nowrap rounded ps-2 pe-1 m-0 ${className}`}
class:selected class:selected
class:flashing class:flashing
class:select-mode={selectMode} class:select-mode={selectMode}

93
ts/editor/TagEditor.svelte
View file

@ -362,7 +362,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{size} {size}
on:focusout={deselectIfLeave} on:focusout={deselectIfLeave}
> >
<div class="pad" on:mousedown|preventDefault> <div class="gap" on:mousedown|preventDefault>
{#if tags.some((tag) => tag.selected)} {#if tags.some((tag) => tag.selected)}
<SelectedTagBadge <SelectedTagBadge
on:tagcopy={copySelectedTags} on:tagcopy={copySelectedTags}
@ -374,7 +374,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div> </div>
{#each tags as tag, index (tag.id)} {#each tags as tag, index (tag.id)}
<div class="position-relative pad" class:hide-tag={index === active}> <div class="position-relative gap" class:hide-tag={index === active}>
<Tag <Tag
class="me-1" class="me-1"
name={tag.name} name={tag.name}
@ -393,45 +393,47 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/> />
{#if index === active} {#if index === active}
<WithAutocomplete <div class="adjust-position">
class="d-flex flex-column-reverse dropup" <WithAutocomplete
{suggestionsPromise} class="d-flex flex-column-reverse dropup"
on:update={updateSuggestions} {suggestionsPromise}
on:autocomplete={({ detail }) => on:update={updateSuggestions}
onAutocomplete(detail.selected)} on:autocomplete={({ detail }) =>
on:choose={({ detail }) => onChosen(detail.chosen)} onAutocomplete(detail.selected)}
let:createAutocomplete on:choose={({ detail }) => onChosen(detail.chosen)}
> let:createAutocomplete
<TagInput >
id={tag.id} <TagInput
class="position-absolute top-0 start-0" id={tag.id}
bind:name={activeName} class="tag-input position-absolute top-0 start-0 ps-2 py-0"
bind:input={activeInput} bind:name={activeName}
on:focus={() => { bind:input={activeInput}
activeName = tag.name; on:focus={() => {
autocomplete = createAutocomplete(activeInput); activeName = tag.name;
}} autocomplete = createAutocomplete(activeInput);
on:keydown={onKeydown} }}
on:keyup={onKeyup} on:keydown={onKeydown}
on:input={() => updateTagName(tag)} on:keyup={onKeyup}
on:tagsplit={({ detail }) => on:input={() => updateTagName(tag)}
enterBehavior(index, detail.start, detail.end)} on:tagsplit={({ detail }) =>
on:tagadd={() => insertTag(index)} enterBehavior(index, detail.start, detail.end)}
on:tagdelete={() => deleteTagAt(index)} on:tagadd={() => insertTag(index)}
on:tagjoinprevious={() => joinWithPreviousTag(index)} on:tagdelete={() => deleteTagAt(index)}
on:tagjoinnext={() => joinWithNextTag(index)} on:tagjoinprevious={() => joinWithPreviousTag(index)}
on:tagmoveprevious={() => moveToPreviousTag(index)} on:tagjoinnext={() => joinWithNextTag(index)}
on:tagmovenext={() => moveToNextTag(index)} on:tagmoveprevious={() => moveToPreviousTag(index)}
on:tagaccept={() => { on:tagmovenext={() => moveToNextTag(index)}
deleteTagIfNotUnique(tag, index); on:tagaccept={() => {
if (tag) { deleteTagIfNotUnique(tag, index);
updateTagName(tag); if (tag) {
} updateTagName(tag);
saveTags(); }
decideNextActive(); saveTags();
}} decideNextActive();
/> }}
</WithAutocomplete> />
</WithAutocomplete>
</div>
{/if} {/if}
</div> </div>
{/each} {/each}
@ -452,7 +454,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
opacity: 0; opacity: 0;
} }
.pad { .gap {
padding-bottom: 0.15rem; margin-bottom: 0.15rem;
}
.adjust-position :global(.tag-input) {
/* recreates positioning of Tag component */
border-left: 1px solid transparent;
} }
</style> </style>

3
ts/editor/TagInput.svelte
View file

@ -192,9 +192,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
input { input {
padding-left: 9.5px;
padding-bottom: 5.5px;
width: 100%; width: 100%;
height: 100%; height: 100%;