update screenshots

 - adding some hover and focus for the QuickAccess.vue
 - fixing 'f' shortcut by opening the menu

Author: chippison

plugins/AIAgents/tests/UI/expected-ui-screenshots/AIAgents_menu.png

@@ -1,3 +1,4 @@
+@_layout-pageWrap-margin: 18px;
 
 .card-content > .row:last-child {
   margin-bottom: 0;
@@ -125,7 +126,7 @@ nav {
 
 #root {
   .pageWrap {
-    width: calc(~'100% - 18px');  // 100% - pageWrap margin
+    width: calc(~'100% - @{_layout-pageWrap-margin}');
     height: fit-content;
     padding-left: 9px;
     padding-right: 9px;
@@ -183,14 +184,6 @@ nav {
       }
     }
 
-    .quickAccessPlaceholder {
-      width: 0;
-      visibility: hidden;
-      display: inline-block;
-      position: relative;
-      margin-right: -1px;
-    }
-
     .piwikTopControl {
       display: inline-block;
       float: none;
@@ -267,7 +260,7 @@ nav {
     }
 
     .pageWrap {
-      width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
+      width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
     }
   }
 
@@ -599,7 +592,7 @@ nav {
 
   #root{
     .layoutWithSidebar--hasSidebar .page > .pageWrap {
-      width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
+      width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
     }
   }
   #content.home,

plugins/CoreHome/stylesheets/layout.less

@@ -1,7 +1,7 @@
 {% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser, renderQuickAccess) %}
     <div id="secondNavBar" class="{{ cssClass }} z-depth-1">
         {% if renderQuickAccess|default(false) %}
-            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
+            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl"></div>
         {% endif %}
         <ul class="navbar {% if collapsible %}collapsible collapsible-accordion{% endif %} hide-on-med-and-down" aria-label="{{ 'CoreHome_MainNavigation'|translate|e('html_attr') }}" role="menu">
             {% for level1,level2 in menu %}

plugins/CoreHome/templates/_menu.twig

@@ -1,15 +1,19 @@
 .quick-access {
   position: relative;
-  box-shadow: none !important;
-  border: 1px solid @theme-color-background-lowContrast !important;
-  border-radius: 8px !important;
+  box-shadow: none;
+  border: 1px solid @theme-color-background-lowContrast;
+  border-radius: 8px;
   width: 200px;
 
   &:hover,
   &.expanded,
   &.active {
-    input {
-      background-color: @theme-color-background-contrast !important;
+    border-color: transparent;
+    .quickAccessInside .quickAccessInput {
+      background-color: @theme-color-background-contrast;
+      border: 1px solid @theme-color-focus-ring;
+      outline: 0;
+      box-shadow: none;
     }
   }
   li {
@@ -37,14 +41,11 @@
     font-size: 14px;
     padding: 10px 12px 10px 38px;
     border: 0;
-    margin: 0;
-    box-sizing: border-box;
-    box-shadow: none!important;
     border-radius: 8px;
-    background-color: @theme-color-background-contrast !important;
-    &:focus {
-      outline: none;
-      border-bottom: none !important;
+    width: 100%;
+    &:focus-visible {
+      border: 1px solid @theme-color-focus-ring;
+      outline: 1px solid @theme-color-focus-ring;
     }
   }
   .quickAccessInside .quickAccessDropdown.dropdown {
@@ -54,8 +55,11 @@
     width: 200px;
     max-height: 75vh;
     overflow: auto;
-    box-shadow: 0 10px 40px 0 rgba(165, 177, 202, 0.30), 0 0 3px 0 rgba(165, 177, 202, 0.30);;
-  }
+    box-shadow: 0 10px 40px 0 rgba(165, 177, 202, 0.30), 0 0 3px 0 rgba(165, 177, 202, 0.30);
+    @media all and (max-width: 992px) {
+      width: 100%;
+    }
+   }
 
   .quickAccessInput::placeholder {
     color: @theme-color-background-lowContrast;
@@ -88,4 +92,4 @@
   li.quick-access-help a {
     word-break: break-word;
   }
-}
+}

plugins/CoreHome/tests/UI/expected-screenshots/VersionInfoHeaderMessage_update_available.png

@@ -16,12 +16,12 @@
       @mouseenter="searchActive = true"
     />
     <input
-      class="quickAccessInput"
+      class="quickAccessInput browser-default"
       @keydown="onKeypress($event)"
       @focus="searchActive = true"
       v-model="searchTerm"
       type="text"
-      tabindex="2"
+      tabindex="5"
       v-focus-if="{ focused: searchActive }"
       v-tooltips
       :title="quickAccessTitle"
@@ -107,6 +107,7 @@ import Site from '../SiteSelector/Site';
 import Matomo from '../Matomo/Matomo';
 import debounce from '../debounce';
 import Tooltips from '../Tooltips/Tooltips';
+import { closeMobileLeftMenu, openMobileLeftMenu } from '../SideNav/SideNav';
 
 const { ListingFormatter } = window;
 
@@ -157,6 +158,7 @@ function scrollFirstElementIntoView(element: HTMLElement) {
 }
 
 export default defineComponent({
+  name: 'QuickAccess',
   directives: {
     FocusAnywhereButHere,
     FocusIf,
@@ -191,6 +193,11 @@ export default defineComponent({
       }
 
       event.preventDefault();
+      const mobileMenuTrigger = document.querySelector('nav .activateLeftMenu');
+
+      if (mobileMenuTrigger && window.$(mobileMenuTrigger).is(':visible')) {
+        openMobileLeftMenu();
+      }
 
       scrollFirstElementIntoView(this.$refs.root as HTMLElement);
 
@@ -257,6 +264,8 @@ export default defineComponent({
         this.deactivateSearch();
       } else if (isEscKey && areSearchResultsDisplayed) {
         this.deactivateSearch();
+      } else if (isTabKey) {
+        this.searchActive = false;
       } else {
         setTimeout(() => {
           this.searchActive = true;
@@ -381,12 +390,15 @@ export default defineComponent({
       this.makeSureSelectedItemIsInViewport();
     },
     selectSite(idSite: string|number) {
+      this.deactivateSearch();
+      closeMobileLeftMenu();
       SitesStore.loadSite(idSite);
     },
     selectMenuItem(index: number) {
       const target: HTMLElement|null = document.querySelector(`[quick_access='${index}']`);
       if (target) {
         this.deactivateSearch();
+        closeMobileLeftMenu();
 
         const href = target.getAttribute('href');
         if (href && href.length > 10 && target && target.click) {

plugins/CoreHome/vue/dist/CoreHome.umd.js

@@ -17,6 +17,37 @@ interface SideNavArgs {
   initialized?: boolean;
 }
 
+export function openMobileLeftMenu(): void {
+  const mobileLeftMenu = document.getElementById('mobile-left-menu');
+  if (!mobileLeftMenu) {
+    return;
+  }
+
+  try {
+    window.$(mobileLeftMenu).sidenav('open');
+  } catch (e) {
+    // Not initialized outside mobile layouts.
+  }
+}
+
+export function closeMobileLeftMenu(): void {
+  const secondNavBar = document.getElementById('secondNavBar');
+  if (!secondNavBar?.classList.contains('mobileLeftMenuOpen')) {
+    return;
+  }
+
+  const mobileLeftMenu = document.getElementById('mobile-left-menu');
+  if (!mobileLeftMenu) {
+    return;
+  }
+
+  try {
+    window.$(mobileLeftMenu).sidenav('close');
+  } catch (e) {
+    // The mobile sidenav is not initialized outside mobile layouts.
+  }
+}
+
 /**
  * Will activate the materialize side nav feature once rendered. We use this directive as
  * it makes sure the actual left menu is rendered at the time we init the side nav.

plugins/CoreHome/vue/dist/CoreHome.umd.min.js

@@ -36,26 +36,30 @@ describe("PluginsAdmin", function () {
 
     await page.waitForNetworkIdle();
     await page.waitForTimeout(200);
+    const text = await page.$eval(
+      '#secondNavBar .navbar .menuTab.active .item.manage-plugins',
+      (el) => el.textContent.trim(),
+    );
 
-    expect(await page.screenshotSelector('#secondNavBar')).to.matchImage('plugins_update_menu');
+    expect(text).to.contain('2')
   });
 
   it('should load the plugins admin page correctly when internet disabled', async function () {
-    testEnvironment.overrideConfig('General', {
+    await testEnvironment.overrideConfig('General', {
       enable_internet_features: 0
     });
-    testEnvironment.save();
+    await testEnvironment.save();
 
     await page.goto("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");
 
     expect(await screenshotPageWrap()).to.matchImage('plugins_no_internet');
   });
 
   it('should load the plugins admin page correctly when admin disabled', async function () {
-    testEnvironment.overrideConfig('General', {
+    await testEnvironment.overrideConfig('General', {
       enable_plugins_admin: 0
     });
-    testEnvironment.save();
+    await testEnvironment.save();
 
     await page.goto("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");