Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(app): improve user menu design #683

Merged
merged 1 commit into from
Jun 14, 2024
Merged

fix(app): improve user menu design #683

merged 1 commit into from
Jun 14, 2024

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Jun 10, 2024

☑️ Resolves

  • Separate Menu to User Menu and Main Menu, making both simpler and smaller
  • Improve the user menu:
    • Display not only displayName but also userid
    • Display also server name, link and icon
      • Especially actual for users with multiple instances
    • Improve the user status menu to make it easier to switch to DnD
  • As a part of the menu rewriting - refactor to SFC Setup

🖼️ Screenshots

🏚️ Before 🏡 After
image image
. image
. image
. image

@ShGKme ShGKme added bug Something isn't working 3. to review design labels Jun 10, 2024
@ShGKme ShGKme self-assigned this Jun 10, 2024
@ShGKme ShGKme mentioned this pull request Jun 10, 2024
Closed
@ShGKme ShGKme force-pushed the fix/separate-menu-and-user-menu branch from 237893f to bbc236e Compare June 10, 2024 16:21
@ShGKme ShGKme mentioned this pull request Jun 10, 2024
Merged
Antreesy
Antreesy reviewed Jun 10, 2024
View reviewed changes
Copy link
Contributor

@Antreesy Antreesy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apart from it, looks and works nice! Will check the SFC migration thoroughly later

src/talk/renderer/components/UserMenu.vue Outdated
target="_blank">
<div class="user-menu__name">
<strong>{{ user['display-name'] }}</strong>
<em>{{ user.id }}</em>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm afraid of possible overflow here (not for our instance, but others that use LDAP or another sources with long ids)
image

Copy link
Contributor Author

@ShGKme ShGKme Jun 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about swap id <-> View profile?

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or remove uid completely...

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe text-overflow: ellipsis; after a certain width ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nextcloud Desktop and Talk mobile client doesn't show email/uid anywhere at all.

But I personally would like to keep it.

@nickvergessen what do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with a place swap only.
Ellipsizing might be tricky given that we don't know possible length of it for different auth methods, and also display name + view profile would differ from person and locale.

With possible multiple accounts feature (within one app) in future, it will be useful anyway

DorraJaouad
DorraJaouad approved these changes Jun 11, 2024
View reviewed changes
Copy link

@DorraJaouad DorraJaouad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SFCs are good 🦅

src/talk/renderer/components/UserMenu.vue Outdated Show resolved Hide resolved
Antreesy
Antreesy approved these changes Jun 12, 2024
View reviewed changes
Copy link
Contributor

@Antreesy Antreesy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, changes look good visually and code-wise 🚀

src/talk/renderer/components/UserMenu.vue Outdated
target="_blank">
<div class="user-menu__name">
<strong>{{ user['display-name'] }}</strong>
<em>{{ user.id }}</em>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with a place swap only.
Ellipsizing might be tricky given that we don't know possible length of it for different auth methods, and also display name + view profile would differ from person and locale.

With possible multiple accounts feature (within one app) in future, it will be useful anyway

@ShGKme ShGKme force-pushed the fix/separate-menu-and-user-menu branch from e15ed90 to 2404ee4 Compare June 14, 2024 10:03
@ShGKme
fix(app): improve user menu design
7bbe55c 
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme force-pushed the fix/separate-menu-and-user-menu branch from 2404ee4 to 7bbe55c Compare June 14, 2024 10:03
@ShGKme
Copy link
Contributor Author

ShGKme commented Jun 14, 2024 •
edited
Loading

  • Rebased onto main
  • Removed email/uid from first menu item having the concerns above, keeping the old design

@ShGKme ShGKme enabled auto-merge June 14, 2024 10:10
@ShGKme ShGKme merged commit 333e7cd into main Jun 14, 2024
6 checks passed
@ShGKme ShGKme deleted the fix/separate-menu-and-user-menu branch June 14, 2024 10:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DorraJaouad DorraJaouad DorraJaouad approved these changes

@Antreesy Antreesy Antreesy approved these changes

@nickvergessen nickvergessen Awaiting requested review from nickvergessen

Assignees

@ShGKme ShGKme

Labels
3. to review bug Something isn't working design
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ShGKme @DorraJaouad @Antreesy