From 8cb125ce1d390531f4e8740a5be6fd2339cf41cf Mon Sep 17 00:00:00 2001 From: chippison Date: Wed, 25 Mar 2026 10:40:15 +1300 Subject: [PATCH 1/7] widgets, cards and background tweaks --- .../ActionsDataTable_segmented_visitor_log.png | 4 ++-- .../UI/expected-screenshots/DashboardManager_small_screen.png | 4 ++-- .../UI/expected-screenshots/Dashboard_dashboard1_mobile.png | 4 ++-- plugins/Widgetize/stylesheets/widgetize.less | 4 ++++ .../expected-screenshots/Comparison_segmented_visitorlog.png | 4 ++-- tests/UI/expected-screenshots/JSTracker_visitor_log.png | 4 ++-- .../UI/expected-screenshots/UIIntegrationTest_api_listing.png | 4 ++-- .../UIIntegrationTest_widgetize_ecommercelog.png | 4 ++-- .../UIIntegrationTest_widgetize_visitor_log.png | 4 ++-- 9 files changed, 20 insertions(+), 16 deletions(-) diff --git a/plugins/Actions/tests/UI/expected-screenshots/ActionsDataTable_segmented_visitor_log.png b/plugins/Actions/tests/UI/expected-screenshots/ActionsDataTable_segmented_visitor_log.png index cc79c5d0156..1f8e29fb0f8 100644 --- a/plugins/Actions/tests/UI/expected-screenshots/ActionsDataTable_segmented_visitor_log.png +++ b/plugins/Actions/tests/UI/expected-screenshots/ActionsDataTable_segmented_visitor_log.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e6934382dbf172a475287cf3861a6e2f5cef2563b307b0f3561f80dd87979217 -size 488705 +oid sha256:caf277fe317047a895810b7c511caa8b9b402379011450cbbe0bf52879f66905 +size 490983 diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_small_screen.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_small_screen.png index ef65f765041..7412bba33a2 100644 --- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_small_screen.png +++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_small_screen.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4873eb073f815ec6c1ea8967770a6928a18745feccd0512b83112fd040bf70c7 -size 236923 +oid sha256:9f024779867f48889689439d133478cd12c7396ca7d9b28cabe2c2d1cf4f038d +size 245474 diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_dashboard1_mobile.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_dashboard1_mobile.png index 8117749cb06..20689a58df1 100644 --- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_dashboard1_mobile.png +++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_dashboard1_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0e4dbc7cc5907cef66f099395357ae31322abd67f0c1353b31f6de81c7d44933 -size 24719 +oid sha256:8ec17d4a1cf9bce8c4f88a1882f5039463c03afed34803455eb3281c4bf2959d +size 31258 diff --git a/plugins/Widgetize/stylesheets/widgetize.less b/plugins/Widgetize/stylesheets/widgetize.less index 7b4149c7b01..23665bea253 100644 --- a/plugins/Widgetize/stylesheets/widgetize.less +++ b/plugins/Widgetize/stylesheets/widgetize.less @@ -67,4 +67,8 @@ body.widgetized { margin-bottom: 8px; } } + + .dataTableHeaderControls:not(#Piwik_Popover .dataTableHeaderControls) { + margin-top: 0; + } } diff --git a/tests/UI/expected-screenshots/Comparison_segmented_visitorlog.png b/tests/UI/expected-screenshots/Comparison_segmented_visitorlog.png index 9aabae40e1c..87907cf3ecf 100644 --- a/tests/UI/expected-screenshots/Comparison_segmented_visitorlog.png +++ b/tests/UI/expected-screenshots/Comparison_segmented_visitorlog.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5e6d23af31d26d584f1ba45dca9b5bf637bf71e518e925ace2bbfebfe40a9d26 -size 600601 +oid sha256:e75f7554835a44c835f519855ea3e94942e53bf4400643e0717eada594d616e4 +size 604120 diff --git a/tests/UI/expected-screenshots/JSTracker_visitor_log.png b/tests/UI/expected-screenshots/JSTracker_visitor_log.png index 529feade210..eb26cbbdccf 100644 --- a/tests/UI/expected-screenshots/JSTracker_visitor_log.png +++ b/tests/UI/expected-screenshots/JSTracker_visitor_log.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c4aa8389d6ca0a40dcefe5a96f7e2c9a86171495d5d4f3285ce17f4bbbe35049 -size 33944 +oid sha256:3962620fa69e1029a454041fbf76e2da05ade8553317d938734f549db46729e7 +size 33995 diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_api_listing.png b/tests/UI/expected-screenshots/UIIntegrationTest_api_listing.png index 798ed680648..fb5caf85ae5 100644 --- a/tests/UI/expected-screenshots/UIIntegrationTest_api_listing.png +++ b/tests/UI/expected-screenshots/UIIntegrationTest_api_listing.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f72677ed149e4f00ad15b4952cbbcc07665a496858631f1669dde9274f8d886e -size 5344014 +oid sha256:7e966d07290df688f8ba50c31a38bc270f9eb8aa000768d22da36db5f86fa85e +size 5347513 diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_ecommercelog.png b/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_ecommercelog.png index 6faae0f7cff..e09d570743e 100644 --- a/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_ecommercelog.png +++ b/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_ecommercelog.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:27c4328ddcbebbee1726feee6daa2ebfde634b3a270b785131a2af198197d03f -size 600974 +oid sha256:0cdd672bcdf9e1c39ee957c78c0e0baea52018417cbc840bf468060016e81d5b +size 592000 diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_visitor_log.png b/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_visitor_log.png index 907ce699226..b63857a24f9 100644 --- a/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_visitor_log.png +++ b/tests/UI/expected-screenshots/UIIntegrationTest_widgetize_visitor_log.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ade0a665399e9054bc2b8b5a352d030a77c474037b7c35add68eddc67aaebf53 -size 362168 +oid sha256:a853c6c5598d634195a178323c1b1920ff5027d8e33128f22371a1215a22a3ca +size 355415 From fa7c4fcc4472ae7074b41f50956c85f2abdd9b72 Mon Sep 17 00:00:00 2001 From: chippison Date: Thu, 23 Apr 2026 14:20:15 +1200 Subject: [PATCH 2/7] updating from dev-19958 --- plugins/Widgetize/stylesheets/widgetize.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/plugins/Widgetize/stylesheets/widgetize.less b/plugins/Widgetize/stylesheets/widgetize.less index 23665bea253..7b4149c7b01 100644 --- a/plugins/Widgetize/stylesheets/widgetize.less +++ b/plugins/Widgetize/stylesheets/widgetize.less @@ -67,8 +67,4 @@ body.widgetized { margin-bottom: 8px; } } - - .dataTableHeaderControls:not(#Piwik_Popover .dataTableHeaderControls) { - margin-top: 0; - } } From 58cdc849157e04c77110211302759b38b2706d73 Mon Sep 17 00:00:00 2001 From: chippison Date: Wed, 18 Mar 2026 12:22:10 +1300 Subject: [PATCH 3/7] left-menu-tweaks --- core/Plugin/ThemeStyles.php | 9 +- .../expected-ui-screenshots/AIAgents_menu.png | Bin 6214 -> 7167 bytes plugins/CoreHome/stylesheets/layout.less | 297 ++++++++++-------- plugins/CoreHome/templates/_menu.twig | 5 +- ...sionInfoHeaderMessage_update_available.png | 4 +- plugins/CoreHome/vue/dist/CoreHome.umd.js | 108 +++++-- .../vue/src/QuickAccess/QuickAccess.less | 65 ++-- .../vue/src/QuickAccess/QuickAccess.vue | 22 +- plugins/CoreHome/vue/src/SideNav/SideNav.ts | 45 ++- .../tests/UI/PluginsAdmin_spec.js | 14 +- ...stomDimensions_report_actions_mainmenu.png | 4 +- ...CustomDimensions_report_visit_mainmenu.png | 4 +- .../DashboardManager_create_new.png | 4 +- .../DashboardManager_loaded.png | 4 +- .../DashboardManager_removed.png | 4 +- .../SimpleUITest_simplePage.png | 4 +- .../SimpleUITest_simplePagePartial.png | 4 +- .../FeedbackForm_show.png | 4 +- .../GoalsPages_manage.png | 4 +- ...s_action_goals_visualization_page_urls.png | 4 +- ...goals_visualization_page_urls_subtable.png | 4 +- ...hemes_with_valid_license_disabled_user.png | 4 +- ...etplace_themes_with_valid_license_user.png | 4 +- plugins/Morpheus/stylesheets/base/colors.less | 1 - plugins/Morpheus/templates/admin.twig | 61 ++-- plugins/Morpheus/templates/dashboard.twig | 57 ++-- .../templates/allWebsitesDashboard.twig | 1 - .../SegmentSelectorEditorTest_0_initial.png | 4 +- ...ctorEditorTest_7_segment_editor_closed.png | 4 +- ...mentSelectorEditorTest_complex_segment.png | 4 +- .../Menus_mainmenu_loaded.png | 4 +- .../Menus_mainmenu_loaded_withpromos.png | 4 +- .../Menus_mainmenu_lower_clicked.png | 4 +- .../Menus_mainmenu_upper_clicked.png | 4 +- ...eriodSelector_disabled_previous_period.png | 4 +- ...PeriodSelector_hide_prevnext_for_range.png | 4 +- .../PeriodSelector_invalid.png | 4 +- .../PeriodSelector_loaded.png | 4 +- .../QuickAccess_initially.png | 4 +- .../QuickAccess_search_2.png | 4 +- .../QuickAccess_search_category.png | 4 +- .../QuickAccess_search_no_result.png | 4 +- .../QuickAccess_search_sites.png | 4 +- .../QuickAccess_shortcut.png | 4 +- .../SearchFilterPersistenceTest_load_ok.png | 4 +- ...ilterPersistenceTest_persisted_segment.png | 4 +- ...chFilterPersistenceTest_search_results.png | 4 +- .../UIIntegrationTest_exampleui_tagClouds.png | 4 +- ...tegrationTest_visitors_realtime_visits.png | 4 +- tests/UI/specs/QuickAccess_spec.js | 47 +++ 50 files changed, 542 insertions(+), 334 deletions(-) diff --git a/core/Plugin/ThemeStyles.php b/core/Plugin/ThemeStyles.php index e7166cb4583..b42775bdbbb 100644 --- a/core/Plugin/ThemeStyles.php +++ b/core/Plugin/ThemeStyles.php @@ -60,6 +60,7 @@ class ThemeStyles 'colorWidgetBackground' => 'theme-color-widget-background', 'colorWidgetBorder' => 'theme-color-widget-border', 'filterOnIllustration' => 'theme-filter-on-illustration', + 'colorMenuContrastBackgroundHover' => 'theme-color-menu-contrast-backgroundHover', ]; /** @@ -175,13 +176,18 @@ class ThemeStyles /** * @var string|array */ - public $colorMenuContrastTextSelected; + public $colorMenuContrastTextSelected = ['#1976D2', '#ccc']; /** * @var string|array */ public $colorMenuContrastTextActive = ['#3450A3', '#fff']; + /** + * @var string|array + */ + public $colorMenuContrastBackgroundHover = ['#eff0f1', '#151819']; + /** * @var string|array */ @@ -277,7 +283,6 @@ public function __construct(string $themeMode) $this->themeMode = $themeMode; $this->colorFocusRingAlternative = $this->colorBrand; $this->colorMenuContrastText = $this->colorText; - $this->colorMenuContrastTextSelected = $this->colorMenuContrastText; $this->colorMenuContrastBackground = $this->colorBackgroundContrast; $this->colorWidgetExportedBackgroundBase = $this->colorBackgroundContrast; $this->colorWidgetTitleText = $this->colorText; diff --git a/plugins/AIAgents/tests/UI/expected-ui-screenshots/AIAgents_menu.png b/plugins/AIAgents/tests/UI/expected-ui-screenshots/AIAgents_menu.png index 05b7c422803df64e2b5c14f23ef8fb69094ab0dd..5e84f93d3009b61f68cbfe98cca59ffc93106883 100644 GIT binary patch literal 7167 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

VA-5r7icXtR7Ea(71f)iYaAxQAS1|1k! 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 .row:last-child { margin-bottom: 0; @@ -124,12 +125,8 @@ nav { // end #secondNavBar fadeInLeft animation #root { - .page { - display: flex; - } - .pageWrap { - width: 100%; + width: calc(~'100% - @{_layout-pageWrap-margin}'); height: fit-content; padding-left: 9px; padding-right: 9px; @@ -137,11 +134,26 @@ nav { margin-right: 9px; } - #secondNavBar + .pageWrap { - width: calc(~'100% - 224px - 18px'); // 100% - menu width - pageWrap margin + .layoutWithSidebar { + display: flex; + flex-direction: column; } - &>.top_controls { + .layoutWithSidebarContent { + min-width: 0; + } + + .top_controls { + min-height: 51px; + position: relative; + background-color: @theme-color-background-base; + height: auto; + margin-bottom: 8px; + margin-top: 8px; + visibility: hidden; + opacity: 0; + padding-left: 18px; + .icon-arrowup:before, .icon-arrowdown:before { padding: 17px 0 0 0; display: inline-block; @@ -151,27 +163,10 @@ nav { display: none; } } - } - @media only screen and (min-width: 993px) { - ~ .drag-target { - display: none !important; - } - } - - @media all and (max-width: 992px) { - #secondNavBar { - width: 0 !important; - } - - .pageWrap { - width: calc(~'100% - 18px') !important; // 100% - pageWrap margin - } - } - - @media all and (max-width: 600px) { - .top_controls { + @media all and (max-width: 600px) { height: auto; + padding-left: 0; .piwikTopControl { position: static !important; @@ -187,21 +182,86 @@ nav { display: block; } + } + + .piwikTopControl { + display: inline-block; + float: none; + position: relative; + margin-right: 14px; + margin-top: 10px; + margin-bottom: 10px; + vertical-align: top; + font-size: 11px; + } + + @media print { + .quick-access { + display: none !important; + } + } + } + + @media only screen and (min-width: 993px) { + .layoutWithSidebar--hasSidebar { + display: flex; + flex-direction: row; + align-items: stretch; + + #secondNavBar { + flex: 0 0 224px; + background-color: @theme-color-menu-contrast-background; + box-shadow: none !important; + padding: 16px 12px; + } + + .layoutWithSidebarContent { + flex: 1 1 auto; + min-width: 0; + } + } + + ~ .drag-target { + display: none !important; + } + } + @media all and (max-width: 992px) { + #secondNavBar { + width: 0 !important; .quick-access { + margin-left: 16px; + z-index: 1000; + position: fixed; + top: 15px; + width: 268px; + + opacity: 0; + visibility: hidden; + pointer-events: none; + transform: translateX(-24px); + transition: opacity 50ms ease-out; + } + + &.mobileLeftMenuOpen { width: auto !important; - input { - padding-left: 15px !important; + .quick-access { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateX(0); + transition: opacity 380ms ease, transform 380ms ease; } - - .icon-search { - position: absolute; - left: unset; - right: 36px; + .sidenav > .no-padding:first-child { + padding-top: 65px !important; } } } + + .pageWrap { + width: calc(~'100% - @{_layout-pageWrap-margin}') !important; + } } #ajaxLoadingDiv { @@ -221,8 +281,10 @@ nav { box-shadow: none; .menu-icon { - padding-right: 13px; + padding-right: 8px; display: inline; + font-size: 16px; + color: @theme-color-text-contrast; } .reporting-menu-sub-icon { @@ -239,37 +301,56 @@ nav { .item { width: 100%; - padding: 12px 21px 12px 19px; + min-height: 42px; + padding: 8px 12px; word-wrap: break-word; word-break: break-word; - } - - .item,.item-help-icon { - display: inline-block; - .font-default(13px, 21px); - color: @theme-color-menu-contrast-text; + display: flex; + align-items: center; + .font-default(14px, 20px); + color: @theme-color-text-lighter; + border-radius: 8px; + cursor: pointer; + text-decoration: none; + &:hover, &:focus { + outline: 0; + } + &:focus-visible { + color: @theme-color-text-lighter; + background-color: @theme-color-menu-contrast-backgroundHover; + outline: 1px solid @theme-color-link; + } + &:hover { + background-color: @theme-color-menu-contrast-backgroundHover; + } + .menu-icon { + align-self: flex-start; + flex: 0 0 auto; + margin-top: 5px; + } } .item-help-icon { display:none; opacity: 0.2; position: absolute; - right: 21px; + right: 0; top: 0; + padding: 10px; line-height: 13px; - padding-left: 16px; - padding-right: 16px; height: calc(100%); + align-items: center; + justify-content: center; > span { position: relative; - top: 12px; + top: auto; } } &.menuTab li:hover { .item-help-icon:not(.active) { - display:inline-block; + display:inline-flex; color: @color-black-matomo; &:hover { @@ -280,33 +361,36 @@ nav { } .item-help-icon.active { - display: inline-block; + display: inline-flex; color: @theme-color-help-background-color; opacity: 0.75; } > .item { - cursor: default; - font-weight: bold; - &:hover, &:focus { - text-decoration: none; - } + font-weight: 600; } + //Selects the submenu of the menu item > ul { position: relative; - + // Submenu element li { position: relative; + width: 100%; + margin-left: auto; + margin-right: auto; + .item { .font-default(13px, 16px); - padding: 11px 22px 11px 45px; + padding: 10px 22px 10px 36px; + min-height: 36px; + border-radius: 8px; text-decoration: none; transition: background-color 200ms linear; - &:hover, &:focus { + &:hover, &.active { text-decoration: none; color: @theme-color-menu-contrast-textActive; - background-color: @theme-color-background-base; + background-color: @theme-color-menu-contrast-backgroundHover; } } @@ -314,13 +398,22 @@ nav { > .menuDropdown, > .item { color: @theme-color-menu-contrast-textSelected; - background-color: @theme-color-background-base; + background-color: @theme-color-menu-contrast-backgroundHover; text-decoration: none; + border-radius: 8px; } } } } } + li.active, li:hover { + >.item { + color: @theme-color-menu-contrast-textSelected; + .menu-icon { + color: @theme-color-menu-contrast-textSelected; + } + } + } .menuTab > .item-help-icon { top: 14px; @@ -330,11 +423,13 @@ nav { width: 100%; .items { - width: 224px; - box-shadow: 0 1px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); + border-radius: 8px; .search { margin: 15px 16px 10px 17px; + input { + font-size: 14px; + } } .item { @@ -346,12 +441,14 @@ nav { .title { color: @theme-color-menu-contrast-text; - display: block; - padding: 15px 22px 11px 45px; + padding: 10px 10px 10px 36px; font-size: 13px; font-weight: normal; word-wrap: break-word; word-break: break-all; + display: flex; + align-items: center; + justify-content: space-between; &:hover, &:focus { color: @theme-color-menu-contrast-textActive; @@ -375,14 +472,6 @@ nav { display: block; } } - - > .item { - cursor: pointer; - &:hover, &:focus { - color: @theme-color-menu-contrast-textActive; - } - } - &.active { ul { display: block; @@ -395,21 +484,15 @@ nav { } &.Menu--admin .navbar > li { - > .item { - padding: 14px 21px 6px 19px; - } .item .icon-arrow-right:before { content: "\e63b"; } - .menu-icon { - padding-right: 13px; - display: inline; - } } .collapsible { margin: 0; border: 0; + box-shadow: none; } .collapsible-header { @@ -433,56 +516,6 @@ nav { padding: 0; } } - - .top_controls { - visibility: hidden; - opacity: 0; - padding-left: 16px; - - @media screen and (max-width: 600px){ - visibility: hidden; - opacity: 0; - padding-left: 0; - } - - .quick-access { - position: absolute; - width: 208px; - margin-left: 0; - - @media screen and (max-width: 600px){ - z-index: 1000; - position: absolute; - width: 208px; - margin-left: 16px; - } - - .dropdown { - width: 209px; - padding: 0; - } - - input { - height: 33px; - font-size: 11px; - padding: 10px 12px 10px 30px; - border: 0; - margin: 0; - box-sizing: border-box; - border-radius: 2px !important; - box-shadow: none!important; - } - - input::placeholder { - color: #a9a9a9; - } - } - - .piwikTopControl { - margin-top: 10px; - margin-bottom: 10px; - } - } } .badge-menu-item-container { @@ -562,14 +595,8 @@ nav { } #root{ - #secondNavBar + .pageWrap { - width: calc(~'100% - 18px') !important; // 100% - pageWrap margin - } - - .top_controls{ - .quick-access { - display: none !important; - } + .layoutWithSidebar--hasSidebar .page > .pageWrap { + width: calc(~'100% - @{_layout-pageWrap-margin}') !important; } } #content.home, diff --git a/plugins/CoreHome/templates/_menu.twig b/plugins/CoreHome/templates/_menu.twig index ccdd2fb4bdd..20258af0123 100644 --- a/plugins/CoreHome/templates/_menu.twig +++ b/plugins/CoreHome/templates/_menu.twig @@ -1,5 +1,8 @@ -{% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser) %} +{% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser, renderQuickAccess) %}

+ {% if renderQuickAccess|default(false) %} +
+ {% endif %}