Project

General

Profile

Actions

Bug #88269

closed

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

Added by Ayke Halder almost 5 years ago. Updated over 4 years ago.

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

100%

Estimated time:
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);
        }
    }


Files

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

Related issues 1 (0 open1 closed)

Has duplicate TYPO3 Core - Bug #86957: '.active'-state background of Backend Modules does not stand out clearly from the backgroundClosed2018-11-20

Actions
Actions #1

Updated by Ayke Halder almost 5 years ago

  • Assignee set to Benjamin Kott
Actions #2

Updated by Oliver Hader over 4 years ago

  • Has duplicate Bug #86957: '.active'-state background of Backend Modules does not stand out clearly from the background added
Actions #3

Updated by Oliver Hader over 4 years ago

  • Tags set to gremlin,ux
Actions #4

Updated by Gerrit Code Review over 4 years 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

Actions #5

Updated by Gerrit Code Review over 4 years 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

Actions #6

Updated by Gerrit Code Review over 4 years 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

Actions #7

Updated by Michael Telgkamp over 4 years ago

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

Updated by Benni Mack over 4 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF