PaiGramTeam/luoxu-api-pub
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/luoxu-api-pub.git synced 2024-11-22 07:08:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

better way to hide completion list

Browse Source
This commit is contained in:
lilydjwg 2021-10-12 18:58:42 +08:00
parent dc4bc48302
commit d7cab6461f
1 changed files with 4 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Name.svelte
View File

@ -54,16 +54,6 @@
} }
} }
$: {
if(ul) {
if(names.length === 0 || (!has_focus && !has_mouse)) {
ul.style.display = 'none'
}else{
ul.style.display = 'block'
}
}
}
function select_by_click(e) { function select_by_click(e) {
let el = e.target let el = e.target
if(el.tagName == 'IMG') { if(el.tagName == 'IMG') {
@ -125,7 +115,7 @@
<div on:mouseenter={() => has_mouse=true} on:mouseleave={() => has_mouse=false}> <div on:mouseenter={() => has_mouse=true} on:mouseleave={() => has_mouse=false}>
<input bind:this={input} type="text" on:input={may_complete} on:focus={() => has_focus=true} on:blur={() => {has_focus=false;update_value()}} on:keydown={select_by_key}/> <input bind:this={input} type="text" on:input={may_complete} on:focus={() => has_focus=true} on:blur={() => {has_focus=false;update_value()}} on:keydown={select_by_key}/>
<img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/> <img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/>
<ul bind:this={ul} on:click={select_by_click}> <ul bind:this={ul} on:click={select_by_click} class:hidden={names.length === 0 || (!has_focus && !has_mouse)}>
{#each names as name, i (name)} {#each names as name, i (name)}
<li data-idx={i} class:selected={i===selected_idx} title={name[1]}><img src="{url}/avatar/{name[0]}.jpg" alt="avatar"/>{name[1]}</li> <li data-idx={i} class:selected={i===selected_idx} title={name[1]}><img src="{url}/avatar/{name[0]}.jpg" alt="avatar"/>{name[1]}</li>
{/each} {/each}
@ -142,7 +132,6 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
left: 0; left: 0;
display: none;
background-color: white; background-color: white;
box-shadow: 0 0 4px var(--color-inactive); box-shadow: 0 0 4px var(--color-inactive);
clip-path: polygon(-100% 0, 200% 0, 200% 200%, -100% 200%); clip-path: polygon(-100% 0, 200% 0, 200% 200%, -100% 200%);
@ -185,4 +174,7 @@
height: calc(2.3em - 2px); height: calc(2.3em - 2px);
width: calc(2.3em - 2px); width: calc(2.3em - 2px);
} }
.hidden {
display: none;
}
</style> </style>