[dashboard] avatar menu #3491
[dashboard] avatar menu #3491
Conversation
svenefftinge
force-pushed
the
se/dashboard-avatar-menu
branch
3 times, most recently
from
b7be278 to
897b5b1
Compare
svenefftinge
force-pushed
the
se/dashboard-avatar-menu
branch
2 times, most recently
from
6fb62a7 to
3f6a5dd
Compare
|
/werft run 👍 started the job as gitpod-build-se-dashboard-avatar-menu.7 |
| @@ -50,12 +51,16 @@ function ContextMenu(props: ContextMenuProps) { | |||
| {props.children} | |||
| </div> | |||
| {expanded? | |||
| <div className={`z-50 ${props.width || 'w-40'} bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}> | |||
| <div className={`mt-2 z-50 ${props.width || 'w-40'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg`}> | |||
There was a problem hiding this comment.
suggestion: Let's change the dropdown width to w-48 as with the more actions button (see #3496 (review)).
| <div className={`mt-2 z-50 ${props.width || 'w-40'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg`}> | |
| <div className={`mt-2 z-50 ${props.width || 'w-48'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg`}> |
| <img className="rounded-full w-6 h-6" | ||
| src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} /> | ||
| </Link> | ||
| <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5"> |
There was a problem hiding this comment.
question: Could we make the border gray-500 when the profile menu is active (dropdown is visible)?
There was a problem hiding this comment.
Seems rather involving to do tbh
There was a problem hiding this comment.
True, let's drop this idea for now.
| @@ -50,12 +51,16 @@ function ContextMenu(props: ContextMenuProps) { | |||
| {props.children} | |||
| </div> | |||
| {expanded? | |||
| <div className={`z-50 ${props.width || 'w-40'} bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}> | |||
There was a problem hiding this comment.
thought: In the end, this dropdown should use the same spacing as the workspace more actions dropdown as described in #3496 (review).
Let's change the width of the dropdown of the more actions to
w-48. This will also use the same width as the side menu. Also, let's change the dropdown spacing fromspace-y-2tospace-y-1andpy-2topy-1.
There was a problem hiding this comment.
I went away from the inbetween spacing, because separators would be hard to align in the middle. They are no based on borders.
| <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5"> | ||
| <ContextMenu menuEntries={[ | ||
| { | ||
| title: (user && User.getPrimaryEmail(user)) || '', |
There was a problem hiding this comment.
issue: This should be truncated, right?
svenefftinge
force-pushed
the
se/dashboard-avatar-menu
branch
from
3f6a5dd to
b5dea05
Compare
fixes #3488