Fixes orange bar of doom (echo alert)

* Updates CSS selector for the Echo alert
* Prevents conversion of OBOD to a button via a generic
array of "exception" names.

Bug: T350195
Change-Id: Id9b2763fe4d893fa4b4ce1e740dba59e6d887436
This commit is contained in:
Jon Robson 2023-11-13 11:16:23 -08:00
parent 07a26a9448
commit 332678a991
2 changed files with 17 additions and 15 deletions

View file

@ -179,10 +179,14 @@ class VectorComponentUserLinks implements VectorComponent {
*
* @param array $arrayListItems
* @param bool $iconOnlyButton whether label should be visible.
* @param array $exceptions list of names of items that should not be converted.
* @return array
*/
private static function makeLinksButtons( $arrayListItems, $iconOnlyButton = true ) {
return array_map( static function ( $item ) use ( $iconOnlyButton ) {
private static function makeLinksButtons( $arrayListItems, $iconOnlyButton = true, $exceptions = [] ) {
return array_map( static function ( $item ) use ( $iconOnlyButton, $exceptions ) {
if ( in_array( $item[ 'name'], $exceptions ) ) {
return $item;
}
$item['array-links'] = array_map( static function ( $link ) use ( $iconOnlyButton ) {
$link['array-attributes'] = array_map( static function ( $attribute ) use ( $iconOnlyButton ) {
if ( $attribute['key'] === 'class' ) {
@ -247,7 +251,9 @@ class VectorComponentUserLinks implements VectorComponent {
$this->stripIcons( $portletData[ 'data-user-page' ]['array-items'] ?? [] )
);
$notifications = $this->makeLinksButtons(
$portletData[ 'data-notifications' ]['array-items'] ?? []
$portletData[ 'data-notifications' ]['array-items'] ?? [],
true,
[ 'talk-alert' ]
);
$overflow = $this->makeItemsCollapsible(

View file

@ -10,20 +10,16 @@
}
.vector-user-links {
.vector-menu-content-list {
.mw-echo-alert {
padding: 0.2em 0.5em;
white-space: nowrap;
// Prevent alert message from pushing user links off screen
max-width: 270px;
overflow: hidden;
text-overflow: ellipsis;
}
.mw-echo-alert {
padding: 0.2em 0.5em;
white-space: nowrap;
// Prevent alert message from pushing user links off screen
max-width: 270px;
overflow: hidden;
text-overflow: ellipsis;
@media ( max-width: @max-width-breakpoint-desktop ) {
.mw-echo-alert {
.echo-alert-collapse();
}
.echo-alert-collapse();
}
}
}