Bug #88269

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

Added by Ayke Halder 6 months ago. Updated about 13 hours ago.

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

0%

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

History

#1 Updated by Ayke Halder 6 months ago

  • Assignee set to Benjamin Kott

#2 Updated by Oliver Hader about 13 hours 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 about 13 hours ago

  • Tags set to gremlin,ux

Also available in: Atom PDF