Skip to content

Commit 90027c0

Browse files
chippisonchippison
committed
update screenshots
 - 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
1 parent 46950b8 commit 90027c0

52 files changed

Lines changed: 290 additions & 151 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎core/Plugin/ThemeStyles.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ class ThemeStyles
6060
'colorWidgetBackground' => 'theme-color-widget-background',
6161
'colorWidgetBorder' => 'theme-color-widget-border',
6262
'filterOnIllustration' => 'theme-filter-on-illustration',
63+
'colorMenuContrastBackgroundHover' => 'theme-color-menu-contrast-backgroundHover',
6364
];
6465

6566
/**
@@ -175,13 +176,18 @@ class ThemeStyles
175176
/**
176177
* @var string|array<string>
177178
*/
178-
public $colorMenuContrastTextSelected;
179+
public $colorMenuContrastTextSelected = ['#1976D2', '#ccc'];
179180

180181
/**
181182
* @var string|array<string>
182183
*/
183184
public $colorMenuContrastTextActive = ['#3450A3', '#fff'];
184185

186+
/**
187+
* @var string|array<string>
188+
*/
189+
public $colorMenuContrastBackgroundHover = ['#eff0f1', '#151819'];
190+
185191
/**
186192
* @var string|array<string>
187193
*/
@@ -277,7 +283,6 @@ public function __construct(string $themeMode)
277283
$this->themeMode = $themeMode;
278284
$this->colorFocusRingAlternative = $this->colorBrand;
279285
$this->colorMenuContrastText = $this->colorText;
280-
$this->colorMenuContrastTextSelected = $this->colorMenuContrastText;
281286
$this->colorMenuContrastBackground = $this->colorBackgroundContrast;
282287
$this->colorWidgetExportedBackgroundBase = $this->colorBackgroundContrast;
283288
$this->colorWidgetTitleText = $this->colorText;

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

887 Bytes
Loading

‎plugins/CoreHome/stylesheets/layout.less‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@_layout-pageWrap-margin: 18px;
12

23
.card-content > .row:last-child {
34
margin-bottom: 0;
@@ -125,7 +126,7 @@ nav {
125126

126127
#root {
127128
.pageWrap {
128-
width: calc(~'100% - 18px'); // 100% - pageWrap margin
129+
width: calc(~'100% - @{_layout-pageWrap-margin}');
129130
height: fit-content;
130131
padding-left: 9px;
131132
padding-right: 9px;
@@ -183,14 +184,6 @@ nav {
183184
}
184185
}
185186

186-
.quickAccessPlaceholder {
187-
width: 0;
188-
visibility: hidden;
189-
display: inline-block;
190-
position: relative;
191-
margin-right: -1px;
192-
}
193-
194187
.piwikTopControl {
195188
display: inline-block;
196189
float: none;
@@ -267,7 +260,7 @@ nav {
267260
}
268261

269262
.pageWrap {
270-
width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
263+
width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
271264
}
272265
}
273266

@@ -317,11 +310,11 @@ nav {
317310
}
318311
&:focus-visible {
319312
color: @theme-color-text-lighter;
320-
background-color: @theme-color-background-base;
313+
background-color: @theme-color-menu-contrast-backgroundHover;
321314
outline: 1px solid @theme-color-link;
322315
}
323316
&:hover {
324-
background-color: @theme-color-background-base;
317+
background-color: @theme-color-menu-contrast-backgroundHover;
325318
}
326319
.menu-icon {
327320
align-self: flex-start;
@@ -391,15 +384,15 @@ nav {
391384
&:hover, &.active {
392385
text-decoration: none;
393386
color: @theme-color-menu-contrast-textActive;
394-
background-color: @theme-color-background-base;
387+
background-color: @theme-color-menu-contrast-backgroundHover;
395388
}
396389
}
397390

398391
&.active {
399392
> .menuDropdown,
400393
> .item {
401394
color: @theme-color-menu-contrast-textSelected;
402-
background-color: @theme-color-background-base;
395+
background-color: @theme-color-menu-contrast-backgroundHover;
403396
text-decoration: none;
404397
border-radius: 8px;
405398
}
@@ -597,7 +590,7 @@ nav {
597590

598591
#root{
599592
.layoutWithSidebar--hasSidebar .page > .pageWrap {
600-
width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
593+
width: calc(~'100% - @{_layout-pageWrap-margin}') !important;
601594
}
602595
}
603596
#content.home,

‎plugins/CoreHome/templates/_menu.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser, renderQuickAccess) %}
22
<div id="secondNavBar" class="{{ cssClass }} z-depth-1">
33
{% if renderQuickAccess|default(false) %}
4-
<div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
4+
<div vue-entry="CoreHome.QuickAccess" class="piwikTopControl"></div>
55
{% endif %}
66
<ul class="navbar {% if collapsible %}collapsible collapsible-accordion{% endif %} hide-on-med-and-down" aria-label="{{ 'CoreHome_MainNavigation'|translate|e('html_attr') }}" role="menu">
77
{% for level1,level2 in menu %}

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

Lines changed: 2 additions & 2 deletions
Loading

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

Lines changed: 63 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/CoreHome/vue/src/QuickAccess/QuickAccess.less‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
.quick-access {
22
position: relative;
3-
box-shadow: none !important;
4-
border: 1px solid @theme-color-background-lowContrast !important;
5-
border-radius: 8px !important;
3+
box-shadow: none;
4+
border: 1px solid @theme-color-background-lowContrast;
5+
border-radius: 8px;
66
width: 200px;
77

88
&:hover,
99
&.expanded,
1010
&.active {
11-
input {
12-
background-color: @theme-color-background-contrast !important;
11+
border-color: transparent;
12+
.quickAccessInside .quickAccessInput {
13+
background-color: @theme-color-background-contrast;
14+
border: 1px solid @theme-color-focus-ring;
15+
outline: 0;
16+
box-shadow: none;
1317
}
1418
}
1519
li {
@@ -37,14 +41,11 @@
3741
font-size: 14px;
3842
padding: 10px 12px 10px 38px;
3943
border: 0;
40-
margin: 0;
41-
box-sizing: border-box;
42-
box-shadow: none!important;
4344
border-radius: 8px;
44-
background-color: @theme-color-background-contrast !important;
45-
&:focus {
46-
outline: none;
47-
border-bottom: none !important;
45+
width: 100%;
46+
&:focus-visible {
47+
border: 1px solid @theme-color-focus-ring;
48+
outline: 1px solid @theme-color-focus-ring;
4849
}
4950
}
5051
.quickAccessInside .quickAccessDropdown.dropdown {
@@ -54,8 +55,11 @@
5455
width: 200px;
5556
max-height: 75vh;
5657
overflow: auto;
57-
box-shadow: 0 10px 40px 0 rgba(165, 177, 202, 0.30), 0 0 3px 0 rgba(165, 177, 202, 0.30);;
58-
}
58+
box-shadow: 0 10px 40px 0 rgba(165, 177, 202, 0.30), 0 0 3px 0 rgba(165, 177, 202, 0.30);
59+
@media all and (max-width: 992px) {
60+
width: 100%;
61+
}
62+
}
5963

6064
.quickAccessInput::placeholder {
6165
color: @theme-color-background-lowContrast;
@@ -88,4 +92,4 @@
8892
li.quick-access-help a {
8993
word-break: break-word;
9094
}
91-
}
95+
}

‎plugins/CoreHome/vue/src/QuickAccess/QuickAccess.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
@mouseenter="searchActive = true"
1717
/>
1818
<input
19-
class="quickAccessInput"
19+
class="quickAccessInput browser-default"
2020
@keydown="onKeypress($event)"
2121
@focus="searchActive = true"
2222
v-model="searchTerm"
2323
type="text"
24-
tabindex="2"
24+
tabindex="5"
2525
v-focus-if="{ focused: searchActive }"
2626
v-tooltips
2727
:title="quickAccessTitle"
@@ -107,6 +107,7 @@ import Site from '../SiteSelector/Site';
107107
import Matomo from '../Matomo/Matomo';
108108
import debounce from '../debounce';
109109
import Tooltips from '../Tooltips/Tooltips';
110+
import { closeMobileLeftMenu, openMobileLeftMenu } from '../SideNav/SideNav';
110111
111112
const { ListingFormatter } = window;
112113
@@ -157,6 +158,7 @@ function scrollFirstElementIntoView(element: HTMLElement) {
157158
}
158159
159160
export default defineComponent({
161+
name: 'QuickAccess',
160162
directives: {
161163
FocusAnywhereButHere,
162164
FocusIf,
@@ -191,6 +193,11 @@ export default defineComponent({
191193
}
192194
193195
event.preventDefault();
196+
const mobileMenuTrigger = document.querySelector('nav .activateLeftMenu');
197+
198+
if (mobileMenuTrigger && window.$(mobileMenuTrigger).is(':visible')) {
199+
openMobileLeftMenu();
200+
}
194201
195202
scrollFirstElementIntoView(this.$refs.root as HTMLElement);
196203
@@ -257,6 +264,8 @@ export default defineComponent({
257264
this.deactivateSearch();
258265
} else if (isEscKey && areSearchResultsDisplayed) {
259266
this.deactivateSearch();
267+
} else if (isTabKey) {
268+
this.searchActive = false;
260269
} else {
261270
setTimeout(() => {
262271
this.searchActive = true;
@@ -381,12 +390,15 @@ export default defineComponent({
381390
this.makeSureSelectedItemIsInViewport();
382391
},
383392
selectSite(idSite: string|number) {
393+
this.deactivateSearch();
394+
closeMobileLeftMenu();
384395
SitesStore.loadSite(idSite);
385396
},
386397
selectMenuItem(index: number) {
387398
const target: HTMLElement|null = document.querySelector(`[quick_access='${index}']`);
388399
if (target) {
389400
this.deactivateSearch();
401+
closeMobileLeftMenu();
390402
391403
const href = target.getAttribute('href');
392404
if (href && href.length > 10 && target && target.click) {

‎plugins/CoreHome/vue/src/SideNav/SideNav.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,37 @@ interface SideNavArgs {
1717
initialized?: boolean;
1818
}
1919

20+
export function openMobileLeftMenu(): void {
21+
const mobileLeftMenu = document.getElementById('mobile-left-menu');
22+
if (!mobileLeftMenu) {
23+
return;
24+
}
25+
26+
try {
27+
window.$(mobileLeftMenu).sidenav('open');
28+
} catch (e) {
29+
// Not initialized outside mobile layouts.
30+
}
31+
}
32+
33+
export function closeMobileLeftMenu(): void {
34+
const secondNavBar = document.getElementById('secondNavBar');
35+
if (!secondNavBar?.classList.contains('mobileLeftMenuOpen')) {
36+
return;
37+
}
38+
39+
const mobileLeftMenu = document.getElementById('mobile-left-menu');
40+
if (!mobileLeftMenu) {
41+
return;
42+
}
43+
44+
try {
45+
window.$(mobileLeftMenu).sidenav('close');
46+
} catch (e) {
47+
// The mobile sidenav is not initialized outside mobile layouts.
48+
}
49+
}
50+
2051
/**
2152
* Will activate the materialize side nav feature once rendered. We use this directive as
2253
* it makes sure the actual left menu is rendered at the time we init the side nav.

‎plugins/CorePluginsAdmin/tests/UI/PluginsAdmin_spec.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,26 +36,30 @@ describe("PluginsAdmin", function () {
3636

3737
await page.waitForNetworkIdle();
3838
await page.waitForTimeout(200);
39+
const text = await page.$eval(
40+
'#secondNavBar .navbar .menuTab.active .item.manage-plugins',
41+
(el) => el.textContent.trim(),
42+
);
3943

40-
expect(await page.screenshotSelector('#secondNavBar')).to.matchImage('plugins_update_menu');
44+
expect(text).to.contain('2')
4145
});
4246

4347
it('should load the plugins admin page correctly when internet disabled', async function () {
44-
testEnvironment.overrideConfig('General', {
48+
await testEnvironment.overrideConfig('General', {
4549
enable_internet_features: 0
4650
});
47-
testEnvironment.save();
51+
await testEnvironment.save();
4852

4953
await page.goto("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");
5054

5155
expect(await screenshotPageWrap()).to.matchImage('plugins_no_internet');
5256
});
5357

5458
it('should load the plugins admin page correctly when admin disabled', async function () {
55-
testEnvironment.overrideConfig('General', {
59+
await testEnvironment.overrideConfig('General', {
5660
enable_plugins_admin: 0
5761
});
58-
testEnvironment.save();
62+
await testEnvironment.save();
5963

6064
await page.goto("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");
6165

0 commit comments

Comments
 (0)
⚡