Assignee user icons look off in the list view compared to the task detail view #2042

New Issue

konrad · 2023-04-05T11:16:27Z

konrad commented

2023-04-05 11:16:27 +00:00

One more thing (not sure if that should go into a separate issue), I juts noticed that the assigned user icons are spaced quite far from each other in the list view:

But in the details of that task they are semi-stacked:

The stacked version is in my opinion what should be used in the list view as well. Maybe thats a bug!?

Originally posted by @Bouni in /vikunja/frontend/issues/3352#issuecomment-48412

One more thing (not sure if that should go into a separate issue), I juts noticed that the assigned user icons are spaced quite far from each other in the list view: ![grafik](/attachments/4fcebeae-cf6b-47ef-a745-71c509b5111f) But in the details of that task they are semi-stacked: ![grafik](/attachments/4608f33c-5619-487b-958c-77037f01eec1) The stacked version is in my opinion what should be used in the list view as well. Maybe thats a bug!? _Originally posted by @Bouni in /vikunja/frontend/issues/3352#issuecomment-48412_

konrad added the

kind/bug

label 2023-04-05 11:16:35 +00:00

konrad referenced this issue from vikunja/frontend

2023-04-05 11:17:38 +00:00

Allow tasks list to use full width #2041

dpschen commented

2023-04-05 11:36:11 +00:00

Maybe there should be a wrapper component that can handles this kind of stuff.

👍 1

konrad commented

2023-04-05 11:56:54 +00:00

I like that idea but we'll probably need to adjust how the multiselect works, which might get a bit complicated.

dpschen commented

2023-04-05 13:03:43 +00:00

I like that idea but we'll probably need to adjust how the multiselect works, which might get a bit complicated.

Doesn't look too complex: wrap these lines with a new slot exposing the array but keep the inner fallback, similar to:

<slot
	v-if="Array.isArray(internalValue) && internalValue.length"
	name="items"
	:items="internalValue"
	:getLabel="getLabel"
	:remove="remove"
>
	<template v-for="(item, key) in internalValue">
		<slot
			name="item"
			:item="item"
			:label="label"
			:remove="remove"
		>
			<span :key="`item${key}`" class="tag ml-2 mt-2">
				{{ getLabel(key) }}
				<BaseButton @click="remove(item)" class="delete is-small" />
			</span>
		</slot>
	</template>
</slot>

watchEffect(() => {
	if (slots.items && slots.item) {
		throw new Error("You can't use the slots `items` and `item` at the same time.")
	}
})

function getLabel(item) {
	return label !== '' ? item[label] : item 
}

> I like that idea but we'll probably need to adjust how the multiselect works, which might get a bit complicated. Doesn't look too complex: wrap [these lines](https://kolaente.dev/vikunja/frontend/src/commit/750f0ddeab9a2b0bc64dc0527785b6e27524910b/src/components/input/multiselect.vue#L14-L23) with a new slot exposing the array but keep the inner fallback, similar to: ```html <slot v-if="Array.isArray(internalValue) && internalValue.length" name="items" :items="internalValue" :getLabel="getLabel" :remove="remove" > <template v-for="(item, key) in internalValue"> <slot name="item" :item="item" :label="label" :remove="remove" > <span :key="`item${key}`" class="tag ml-2 mt-2"> {{ getLabel(key) }} <BaseButton @click="remove(item)" class="delete is-small" /> </span> </slot> </template> </slot> ``` ```ts watchEffect(() => { if (slots.items && slots.item) { throw new Error("You can't use the slots `items` and `item` at the same time.") } }) function getLabel(item) { return label !== '' ? item[label] : item } ```

👍 1

dpschen commented

2023-04-06 12:23:27 +00:00

One additional input:

The stacked users are very crowded and could profit from more spacing in order to click on them individually.

We could

initially hide close ❌ icons
Show the icons and increase the distance from each user component dynamically so that they become better clickable.
mobile: Add a touch listener to the user wrapper component.
It should have capturing=true, so that it prevents further actions and you don't click on inner items. When focus leaves—user clicks outside—we reverse to initial state.
desktop: on mouseenter / mouseleave

One additional input: ![image](/attachments/508b8c57-96e0-4e98-ad09-eaf70544e98b) The stacked users are very crowded and could profit from more spacing in order to click on them individually. We could - initially hide close ❌ icons - Show the icons and increase the distance from each user component dynamically so that they become better clickable. - mobile: Add a touch listener to the user wrapper component. It should have `capturing=true`, so that it prevents further actions and you don't click on inner items. When focus leaves—user clicks outside—we reverse to initial state. - desktop: on `mouseenter` / `mouseleave`

image.png

10 KiB

konrad commented

2023-04-06 12:26:32 +00:00

What should happen when clicking on an avatar? Right now it does nothing.