Bug #88269

[BE][Usability] Enhance highlighting of active menu module item

Added by Ayke Halder 9 months ago. Updated about 1 month ago.

Status:
Closed
Priority:
Should have
Assignee:
Category:
Backend User Interface
Target version:
-
Start date:
2019-05-03
Due date:
% Done:

100%

TYPO3 Version:
9
PHP Version:
Tags:
gremlin,ux
Complexity:
Is Regression:
Yes
Sprint Focus:

Description

In TYPO3 7 the active menu module item was properly highlighted:

TYPO3 7 active menu module item

Since TYPO3 8 the high contrast between the menu module background and the highlighted active item is lost:

TYPO3 8 active menu module item

Was this change done intentionally?

Introduced

with https://forge.typo3.org/issues/52877 / https://review.typo3.org/c/Packages/TYPO3.CMS/+/47637

Old:
https://review.typo3.org/c/Packages/TYPO3.CMS/+/47637/55/Build/Resources/Public/Less/TYPO3/_module_menu.less#b21

@module-menu-link-active-bg: lighten(@module-menu-bg,15%);

https://review.typo3.org/c/Packages/TYPO3.CMS/+/47637/55/Build/Resources/Public/Less/TYPO3/_module_menu.less#b102
    .typo3-module-menu-item.active {
        .typo3-module-menu-item-link {
            color: @module-menu-link-active-color;
            background-color: @module-menu-link-active-bg;
        }
    }

New:
https://review.typo3.org/c/Packages/TYPO3.CMS/+/47637/55/Build/Resources/Public/Less/Scaffold/_modulemenu.less#52

    .modulemenu-item.active {
        .modulemenu-item-link {
            background-color: rgba(0,0,0,0.15);
        }
    }

Proposed change

To reverse it to the old appearance:
https://git.typo3.org/Packages/TYPO3.CMS.git/blob/refs/heads/TYPO3_8-7:/Build/Resources/Public/Sass/scaffold/_modulemenu.scss#l60
https://git.typo3.org/Packages/TYPO3.CMS.git/blob/refs/heads/9.5:/Build/Resources/Public/Sass/scaffold/_modulemenu.scss#l60

Current color code

    .modulemenu-item.active {
        .modulemenu-item-link {
            background-color: rgba(0, 0, 0, 0.15);
        }
    }

Adjusted color code

    .modulemenu-item.active {
        .modulemenu-item-link {
            background-color: rgba(255, 255, 255, 0.15);
        }
    }

typo3_7-be-menu_module.png View - TYPO3 7 active menu module item (7.68 KB) Ayke Halder, 2019-05-03 23:50

typo3_8-be-menu_module.png View - TYPO3 8 active menu module item (8.18 KB) Ayke Halder, 2019-05-03 23:51


Related issues

Duplicated by TYPO3 Core - Bug #86957: '.active'-state background of Backend Modules does not stand out clearly from the background Closed 2018-11-20

Associated revisions

Revision 226ac97e (diff)
Added by Michael Telgkamp 3 months ago

[BUGFIX] Reset highlighting of active menu module item

Change highlighting of :hover, :focus and active states to lighter
background as it was in TYPO3 7.

Resolves: #88269
Releases: master, 9.5, 8.7
Change-Id: I62ffae36990f8b3dbaceec9c6064675b3842a902
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/62116
Tested-by: TYPO3com <>
Tested-by: Daniel Siepmann <>
Tested-by: Kevin Appelt <>
Tested-by: Benjamin Kott <>
Tested-by: Andreas Fernandez <>
Reviewed-by: Kevin Appelt <>
Reviewed-by: Benjamin Kott <>
Reviewed-by: Andreas Fernandez <>

Revision 63b27f51 (diff)
Added by Michael Telgkamp 3 months ago

[BUGFIX] Reset highlighting of active menu module item

Change highlighting of :hover, :focus and active states to lighter
background as it was in TYPO3 7.

Resolves: #88269
Releases: master, 9.5, 8.7
Change-Id: I62ffae36990f8b3dbaceec9c6064675b3842a902
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/62118
Tested-by: TYPO3com <>
Tested-by: Andreas Fernandez <>
Reviewed-by: Andreas Fernandez <>

Revision 19d93e08 (diff)
Added by Michael Telgkamp 3 months ago

[BUGFIX] Reset highlighting of active menu module item

Change highlighting of :hover, :focus and active states to lighter
background as it was in TYPO3 7.

Resolves: #88269
Releases: master, 9.5, 8.7
Change-Id: I62ffae36990f8b3dbaceec9c6064675b3842a902
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/62119
Tested-by: TYPO3com <>
Tested-by: Andreas Fernandez <>
Reviewed-by: Andreas Fernandez <>

History

#1 Updated by Ayke Halder 9 months ago

  • Assignee set to Benjamin Kott

#2 Updated by Oliver Hader 3 months ago

  • Duplicated by Bug #86957: '.active'-state background of Backend Modules does not stand out clearly from the background added

#3 Updated by Oliver Hader 3 months ago

  • Tags set to gremlin,ux

#4 Updated by Gerrit Code Review 3 months ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/62116

#5 Updated by Gerrit Code Review 3 months ago

Patch set 1 for branch 9.5 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/62118

#6 Updated by Gerrit Code Review 3 months ago

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/62119

#7 Updated by Michael Telgkamp 3 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#8 Updated by Benni Mack about 1 month ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF