Skip to content

Change app menu focused items behavior that neighbor elements (text and border) have no overlapping#35501

Merged
szaimen merged 1 commit intomasterfrom
enh/enh-33741-Focused_item_overlaps_neighbor_elements_with_text_and_border
Nov 30, 2022
Merged

Change app menu focused items behavior that neighbor elements (text and border) have no overlapping#35501
szaimen merged 1 commit intomasterfrom
enh/enh-33741-Focused_item_overlaps_neighbor_elements_with_text_and_border

Conversation

@JuliaKirschenheuter
Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter commented Nov 29, 2022 •
edited
Loading

Add native tooltips to items.

Implementation / new UX was discussed with @jancborchardt:

  1. Increase the width of the elements a little bit.
  2. Simply do not expand the text anymore and just use title. Use ellipsed name of the app.
  3. Use the ::after style instead of the border around it. Should be same as for active app but thin.
  4. Use letter-spacing: -0.5px for names.
  5. Take "zooming" effect on focus away.

❗Accessibility improvement

Fixes #35201

Before:

Screenshot from 2022-11-15 11-27-55

Screenshot from 2022-11-29 18-01-43

After:

menu2

menu

@JuliaKirschenheuter JuliaKirschenheuter self-assigned this Nov 29, 2022
@JuliaKirschenheuter JuliaKirschenheuter added the 3. to review Waiting for reviews label Nov 29, 2022
@ChristophWurst ChristophWurst changed the title Change focused items behavior that neighbor elements (text and border) have no overlapping. Change app menu focused items behavior that neighbor elements (text and border) have no overlapping Nov 29, 2022
ChristophWurst
ChristophWurst approved these changes Nov 29, 2022
View reviewed changes
Copy link
Member

@ChristophWurst ChristophWurst left a comment

Choose a reason for hiding this comment

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

Looks good

Pytal
Pytal approved these changes Nov 29, 2022
View reviewed changes
@JuliaKirschenheuter
Copy link
Contributor Author

JuliaKirschenheuter commented Nov 30, 2022

/backport to stable25

@JuliaKirschenheuter JuliaKirschenheuter force-pushed the enh/enh-33741-Focused_item_overlaps_neighbor_elements_with_text_and_border branch from a224c88 to 01a5761 Compare November 30, 2022 08:11
@JuliaKirschenheuter
Copy link
Contributor Author

JuliaKirschenheuter commented Nov 30, 2022

/compile amend /

@JuliaKirschenheuter @nextcloud-command
Change focused items behavior that neighbor elements (text and border…
db67670 
…) have no overlapping.

Add native tooltips to items.

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@nextcloud-command nextcloud-command force-pushed the enh/enh-33741-Focused_item_overlaps_neighbor_elements_with_text_and_border branch from 01a5761 to db67670 Compare November 30, 2022 08:22
@szaimen szaimen merged commit d8d15c3 into master Nov 30, 2022
@szaimen szaimen deleted the enh/enh-33741-Focused_item_overlaps_neighbor_elements_with_text_and_border branch November 30, 2022 09:32
@JuliaKirschenheuter
Copy link
Contributor Author

JuliaKirschenheuter commented Dec 1, 2022

After some rebasing-job and after this PR has been merged i've seen that some changes from server.css weren't merged. Because of this i'm opening a second PR which will fix this styles.

@JuliaKirschenheuter JuliaKirschenheuter mentioned this pull request Dec 1, 2022
Merged
4 tasks
@JuliaKirschenheuter
Copy link
Contributor Author

JuliaKirschenheuter commented Dec 14, 2022

/backport to stable25

@backportbot-nextcloud backportbot-nextcloud bot mentioned this pull request Dec 14, 2022
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ChristophWurst ChristophWurst ChristophWurst approved these changes

@skjnldsv skjnldsv skjnldsv approved these changes

@Pytal Pytal Pytal approved these changes

@PVince81 PVince81 Awaiting requested review from PVince81

@jancborchardt jancborchardt Awaiting requested review from jancborchardt

@CarlSchwan CarlSchwan Awaiting requested review from CarlSchwan

@szaimen szaimen Awaiting requested review from szaimen

Assignees

@JuliaKirschenheuter JuliaKirschenheuter

Labels

3. to review Waiting for reviews accessibility feature: accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BITV] Focused item overlaps neighbor elements with text and border

5 participants

@JuliaKirschenheuter @ChristophWurst @skjnldsv @Pytal @szaimen