ami/tl-vikunja
1
0
Fork 0
Code

fix(filters): layout problems with assignee user avatar

Browse Source
This commit is contained in:
kolaente 2024-03-09 18:50:58 +01:00
parent f3e2b1b89b
commit 084a62e835
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 1 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/project/partials/FilterInput.vue
View File

@ -96,32 +96,7 @@ const highlightedFilterQuery = computed(() => {
value = '' value = ''
} }
const id = createRandomID(32) return `${f} ${token} <span class="filter-query__assignee_value">${value}<span>`
userService.getAll({}, {s: value}).then(users => {
if (users.length > 0) {
const displayName = getDisplayName(users[0])
const nameTag = document.createElement('span')
nameTag.innerText = displayName
const avatar = document.createElement('img')
avatar.src = getAvatarUrl(users[0], 20)
avatar.height = 20
avatar.width = 20
avatar.alt = displayName
// TODO: caching
nextTick(() => {
const assigneeValue = document.getElementById(id)
assigneeValue.innerText = ''
assigneeValue?.appendChild(avatar)
assigneeValue?.appendChild(nameTag)
})
}
})
return `${f} ${token} <span class="filter-query__assignee_value" id="${id}">${value}<span>`
}) })
}) })
FILTER_OPERATORS FILTER_OPERATORS
@ -312,16 +287,9 @@ function autocompleteSelect(value) {
} }
&.filter-query__assignee_value { &.filter-query__assignee_value {
padding: .125rem .25rem;
border-radius: $radius; border-radius: $radius;
background-color: var(--grey-200); background-color: var(--grey-200);
color: var(--grey-700); color: var(--grey-700);
display: inline-flex;
align-items: center;
> img {
margin-right: .25rem;
}
} }
} }