Skip to content

Left menu tweak#24249

Closed
chippison wants to merge 5 commits into5.x-devfrom
left-menu-tweak
Closed

Left menu tweak#24249
chippison wants to merge 5 commits into5.x-devfrom
left-menu-tweak

Conversation

@chippison
Copy link
Copy Markdown
Contributor

@chippison chippison commented Mar 19, 2026 •
edited
Loading

Description

DEV-19960

We want to tweak our left menu so that it looks better.
We also wanted to move the search bar (QuickAccess) into the left menu instead of it inside our top_controls.

For this, we also changed the structure so that our left menu, is outside of the page element and into its own so that we can make this move to the top, just under the main header (logo).

Checklist

  • [✔] I have understood, reviewed, and tested all AI outputs before use
  • [✔] All AI instructions respect security, IP, and privacy rules

Review

@chippison chippison added this to the 5.9.0 milestone Mar 19, 2026
@chippison chippison force-pushed the left-menu-tweak branch 17 times, most recently from 5ba02ae to f7ee52c Compare March 25, 2026 00:48
@chippison chippison marked this pull request as ready for review March 25, 2026 01:06
@chippison chippison force-pushed the left-menu-tweak branch 4 times, most recently from 9774455 to 31ad0f3 Compare March 26, 2026 00:14
chippison
chippison commented Mar 26, 2026
View reviewed changes
Comment thread plugins/CorePluginsAdmin/tests/UI/expected-screenshots/PluginsAdmin_plugins_update_menu.png
Copy link
Copy Markdown
Contributor Author

@chippison chippison Mar 26, 2026

Choose a reason for hiding this comment

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

We have made the left menu span the whole height of the page this is why the new menu is really long on this page (Manage Plugins)

Copy link
Copy Markdown
Member

@sgiehl sgiehl Mar 27, 2026

Choose a reason for hiding this comment

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

Might still be an option to improve the UI test. I guess the main reason for this specific UI test might be to prove that the plugin update count is visible. That could also be simply checked with a text compare. I guess the menu itself should have it's own tests

chippison
chippison commented Mar 26, 2026
View reviewed changes
Comment thread plugins/ExamplePlugin/tests/UI/expected-screenshots/SimpleUITest_simplePage.png
Copy link
Copy Markdown
Contributor Author

@chippison chippison Mar 26, 2026

Choose a reason for hiding this comment

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

Search menu is no longer here since we transferred it on the left side menu

@chippison chippison force-pushed the left-menu-tweak branch 2 times, most recently from ca7e75a to f28f840 Compare March 26, 2026 00:45
chippison
chippison commented Mar 26, 2026
View reviewed changes
Comment thread tests/UI/expected-screenshots/QuickAccess_search_1.png
Copy link
Copy Markdown
Contributor Author

@chippison chippison Mar 26, 2026

Choose a reason for hiding this comment

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

We also made the search results dropdown scrollable so that we do not get a very long search result dropdown

chippison
chippison commented Mar 26, 2026
View reviewed changes
Comment thread plugins/Morpheus/templates/dashboard.twig Outdated
@chippison chippison requested a review from a team March 26, 2026 03:11
@chippison chippison force-pushed the left-menu-tweak branch 3 times, most recently from ec2e406 to 9cbdf21 Compare April 1, 2026 19:16
@chippison chippison requested a review from tzi April 1, 2026 19:16
@chippison chippison force-pushed the left-menu-tweak branch 2 times, most recently from c2268e1 to 7cf820f Compare April 1, 2026 21:19
tzi
tzi reviewed Apr 1, 2026
View reviewed changes
Comment thread plugins/CoreHome/stylesheets/layout.less

.pageWrap {
width: 100%;
width: calc(~'100% - @{_layout-pageWrap-margin}');
Copy link
Copy Markdown
Contributor

@tzi tzi Apr 1, 2026

Choose a reason for hiding this comment

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

Nice, I didn't know how to write a less variable inside a string 👍

tzi
tzi reviewed Apr 1, 2026
View reviewed changes
Comment thread plugins/CoreHome/vue/src/QuickAccess/QuickAccess.less
&.expanded,
&.active {
input {
background-color: @theme-color-background-contrast !important;
Copy link
Copy Markdown
Contributor

@tzi tzi Apr 1, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Even less !important than before 🎉

@chippison chippison requested a review from sgiehl April 1, 2026 22:17
@chippison chippison force-pushed the left-menu-tweak branch 4 times, most recently from 5fa093a to 7244f31 Compare April 6, 2026 22:49
@chippison
Copy link
Copy Markdown
Contributor Author

chippison commented Apr 8, 2026

Converting this to draft for now since we will have to wait for Dark Mode to get into 5.x-dev first.
Will also need to create a branch so that we can merge the other UI tweaks and just have 1 branch to merge to 5.xdev

@chippison chippison marked this pull request as draft April 8, 2026 20:10
@sgiehl sgiehl modified the milestones: 5.9.0, 5.10.0 Apr 13, 2026
@chippison chippison force-pushed the left-menu-tweak branch 2 times, most recently from 3982d76 to 47d3d55 Compare April 20, 2026 03:46
@chippison
moving left menu out of the 'page' div class and into its own and mad…
66cfcf0 
…e 'top_controls' and 'page' stack on top of each other beside left-menu
@chippison
moving QuickAccess into the left side menu instead of top_controls
1fad19a 
 - changing UI of search bar based on spec
 - transferring the css that controls 'looks' into QuickAccess.vue
@chippison
updating CSS so the left menu follows the new spec
46950b8 
 - update less files based on feedback
 - adding mobile css for our menu
 - fix screenshot issue
 - updating used variable colours to use theme colours
 - updating TagManager
@chippison chippison force-pushed the left-menu-tweak branch 2 times, most recently from 2322d39 to 90027c0 Compare April 21, 2026 04:54
@chippison
update screenshots
e8ee4de 
 - adding some hover and focus for the QuickAccess.vue
 - fixing 'f' shortcut by opening the menu
 - adding new theme variable for menu hovered so that we can still retain its #eff0f1 hover colour
@tzi tzi closed this Apr 27, 2026
@tzi
Copy link
Copy Markdown
Contributor

tzi commented Apr 27, 2026

Merged in #24399

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tzi tzi tzi left review comments

@sgiehl sgiehl Awaiting requested review from sgiehl

Assignees

No one assigned

Labels

None yet

Milestone

5.10.0

Development

Successfully merging this pull request may close these issues.

4 participants

@chippison @tzi @sgiehl @innocraft-automation
⚡