nextcloud-libraries/nextcloud-vue

Status icon has visible border instead of depending on background

Opened this issue · 3 comments

The status icon border/background currently is always set to color-main-background. This means that in light theme, it is always white. On other backgrounds like in the header or in various states like hovered/focused/active/selected it looks off.
Just like with other icons such as the favorite overlay in the files list, it is intended to create a slight gap between the icon and the element it overlays – not to be a visible border.

This occurs in various places, here are some examples:

Top right account menu

The status of the top right avatar. Granted this depends on the theming background, but we can at least solve it for the default installation, and possibly even for the shipped themes.
image

File sharing sidebar

The selected suggestion has a grey background, but is not the same for the status border. Additionally, the status icon seems to be cut off a bit, leading to the crescent shape being barely recognizable?
image

Talk navigation

In the default state it is a bit difficult to set a border which fits the background since we have the glass look and the variable background. But in hover/focus and active state we know what the background is.
image
image
image

Talk @-mention suggestions

The status icon of the active/selected person should be adjusted to get a border that matches the background of the selected entry.
image

Deck assignments

Similar as in other examples, the status for the selected entry would look nicer with the color adjusted. Additionally, in the input field the same issue as in Files happens where the status icon is somehow cut off:
image
image

(The concept of the issue is basically the same as for the favorite overlay icon: #4872 )

This would be a nice papercut for us to fix in the components? @szaimen are you interested in looking into this?

This would be a nice papercut for us to fix in the components? @szaimen are you interested in looking into this?

I can look into it next week earliest (i am on vacation tomorrow for one day)