Legoktm has uploaded a new change for review.
https://gerrit.wikimedia.org/r/237496
Change subject: Align popup footer buttons to take 50% width each
......................................................................
Align popup footer buttons to take 50% width each
The alignment of the buttons was done haphazadly before, using
padding. This should be done better; we should calculate the buttons
width to be 50% of the width of the popup.
Since the popup accepts a width config, we know what its value is,
and can calculate the proper width. The width was added to the
variables.less file for continued use.
* Added popupWidth config variable to the badge widget
* Added OO.ui.ButtonGroupWidget to place the buttons in for
consistency and styling
* Added calculated width styles to both footer buttons
* Added corrections for MonoBook
Change-Id: Iad2c947da06241e9303cf1f35574177a0f602bbb
(cherry picked from commit a37e764d3d169a583410e027d8a035884338626d)
---
M modules/echo.variables.less
M modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
M modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
M modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
4 files changed, 23 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/96/237496/1
diff --git a/modules/echo.variables.less b/modules/echo.variables.less
index ee21850..1c95c55 100644
--- a/modules/echo.variables.less
+++ b/modules/echo.variables.less
@@ -7,3 +7,5 @@
@notification-background-unseen: #dce8ff;
@notification-background-unread: white;
@notification-background-read: #f1f1f1;
+
+@notification-popup-width: 450px;
diff --git a/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
b/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
index 3eb073f..f14c57c 100644
--- a/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
+++ b/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
@@ -11,6 +11,7 @@
* @cfg {number} [numItems=0] How many items are in the button display
* @cfg {boolean} [hasUnseen=false] Whether there are unseen items
* @cfg {boolean} [markReadWhenSeen=false] Mark all notifications as
read on open
+ * @cfg {number} [popupWidth=450] The width of the popup
* @cfg {string|Object} [badgeIcon] The icons to use for this button.
* If this is a string, it will be used as the icon regardless of the
state.
* If it is an object, it must include
@@ -21,7 +22,7 @@
* } }
*/
mw.echo.ui.NotificationBadgeWidget = function
MwEchoUiNotificationBadgeButtonPopupWidget( config ) {
- var buttonFlags, allNotificationsButton, preferencesButton,
$footer;
+ var buttonFlags, allNotificationsButton, preferencesButton,
footerButtonGroupWidget, $footer;
config = config || {};
config.links = config.links || {};
@@ -76,12 +77,13 @@
classes: [
'mw-echo-ui-notificationBadgeButtonPopupWidget-footer-preferences' ]
} );
+ footerButtonGroupWidget = new OO.ui.ButtonGroupWidget( {
+ items: [ allNotificationsButton, preferencesButton ]
+ } );
+
$footer = $( '<div>' )
.addClass(
'mw-echo-ui-notificationBadgeButtonPopupWidget-footer' )
- .append(
- allNotificationsButton.$element,
- preferencesButton.$element
- );
+ .append( footerButtonGroupWidget.$element );
// Parent constructor
mw.echo.ui.NotificationBadgeWidget.parent.call( this, $.extend(
{
framed: false,
@@ -91,7 +93,7 @@
popup: {
$content: this.notificationsWidget.$element,
$footer: $footer,
- width: 450,
+ width: config.popupWidth || 450,
head: true,
// This covers the messages
'echo-notification-alert-text-only'
// and 'echo-notification-message-text-only'
diff --git a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
index 45c1778..ae628c6 100644
--- a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
+++ b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
@@ -17,11 +17,16 @@
.oo-ui-popupWidget-footer {
border-top: 1px solid #DDDDDD;
+ width: 100%;
+
.oo-ui-buttonElement {
display: table-cell;
white-space: normal;
font-weight: bold;
- padding: 1em 3em 1em 2.5em;
+ padding: 1em;
+ padding-left: 2em;
+ width: calc( @notification-popup-width / 2 );
+ box-sizing: border-box;
&:last-child {
border-left: 1px solid #DDDDDD;
diff --git
a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
index 535e3bf..a305852 100644
--- a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
+++ b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
@@ -7,4 +7,11 @@
color: black !important;
}
}
+
+ // Footer
+ .oo-ui-popupWidget-footer {
+ // Override text-align that monobook uses for #p-personal li
+ text-align: left;
+ }
+
}
--
To view, visit https://gerrit.wikimedia.org/r/237496
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iad2c947da06241e9303cf1f35574177a0f602bbb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: wmf/1.26wmf22
Gerrit-Owner: Legoktm <legoktm.wikipe...@gmail.com>
Gerrit-Reviewer: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
