diff --git a/Hooks.php b/Hooks.php index 6c81cbec3..38aa5a97e 100644 --- a/Hooks.php +++ b/Hooks.php @@ -888,12 +888,9 @@ class EchoHooks { // HACK: inverted icons only work in the "MediaWiki" OOUI theme // Avoid flashes in skins that don't use it (T111821) $sk->getOutput()->setupOOUI( strtolower( $sk->getSkinName() ), $sk->getOutput()->getLanguage()->getDir() ); - $oouiImageClass = get_class( OOUI\Theme::singleton() ) === 'OOUI\\MediaWikiTheme' - ? 'oo-ui-image-invert' - : ''; - $msgLinkClasses = array( "mw-echo-notifications-badge mw-echo-notification-badge-nojs $oouiImageClass oo-ui-iconElement oo-ui-iconElement-icon oo-ui-icon-speechBubbles" ); - $alertLinkClasses = array( "mw-echo-notifications-badge mw-echo-notification-badge-nojs $oouiImageClass oo-ui-iconElement oo-ui-iconElement-icon" ); + $msgLinkClasses = array( "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs" ); + $alertLinkClasses = array( "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs" ); $hasUnseen = false; if ( @@ -903,25 +900,30 @@ class EchoHooks { ) { $msgLinkClasses[] = 'mw-echo-unseen-notifications'; $hasUnseen = true; + } elseif ( $msgCount === 0 ) { + $msgLinkClasses[] = 'mw-echo-notifications-badge-all-read'; } - $alertIcon = "bell"; if ( $alertCount != 0 && // no unread notifications $alertNotificationTimestamp !== false && // should already always be false if count === 0 ( $seenAlertTime === null || $seenAlertTime < $alertNotificationTimestamp->getTimestamp( TS_ISO_8601 ) ) // all notifications have already been seen ) { $alertLinkClasses[] = 'mw-echo-unseen-notifications'; - $alertIcon = "bellOn"; $hasUnseen = true; + } elseif ( $alertCount === 0 ) { + $alertLinkClasses[] = 'mw-echo-notifications-badge-all-read'; } - $alertLinkClasses[] = 'oo-ui-icon-' . $alertIcon; $alertLink = array( 'href' => $url, 'text' => $alertText, 'active' => ( $url == $title->getLocalUrl() ), 'class' => $alertLinkClasses, + 'data' => array( + 'counter-num' => $alertCount, + 'counter-text' => $alertText, + ), ); $insertUrls = array( @@ -933,6 +935,10 @@ class EchoHooks { 'text' => $msgText, 'active' => ( $url == $title->getLocalUrl() ), 'class' => $msgLinkClasses, + 'data' => array( + 'counter-num' => $msgCount, + 'counter-text' => $msgText, + ), ); $insertUrls['notifications-notice'] = $msgLink; diff --git a/Resources.php b/Resources.php index a34d0a41f..88141a5d3 100644 --- a/Resources.php +++ b/Resources.php @@ -45,9 +45,6 @@ $wgResourceModules += array( 'modern' => array( 'styles/mw.echo.ui.NotificationBadgeWidget.modern.less' ), - 'vector' => array( - 'styles/mw.echo.ui.NotificationBadgeWidget.vector.less' - ), ), 'dependencies' => array( 'ext.echo.ui', @@ -262,6 +259,9 @@ $wgResourceModules += array( 'vector' => array( 'nojs/mw.echo.badge.vector.less', ), + 'modern' => array( + 'nojs/mw.echo.badge.modern.less', + ), ), 'targets' => array( 'desktop', 'mobile' ), ), diff --git a/modules/echo.variables.less b/modules/echo.variables.less index 307a69df7..199b11a82 100644 --- a/modules/echo.variables.less +++ b/modules/echo.variables.less @@ -1,11 +1,13 @@ @badge-padding: 0.12em; @badge-icon-size: 1.1em; -@badge-distance-adjustment: -0.4em; +@badge-distance-adjustment: 1em; @notification-background-unseen: #dce8ff; @notification-background-unread: white; @notification-background-read: #f1f1f1; +@badge-counter-background-seen: #71777D; + @notification-text-color: #111; @notification-body-color: #777; diff --git a/modules/echo.variables.monobook.less b/modules/echo.variables.monobook.less index f44556491..2bf9daf67 100644 --- a/modules/echo.variables.monobook.less +++ b/modules/echo.variables.monobook.less @@ -1,4 +1,2 @@ -/* Would use #333 here but opacity is applied to whole badge to lighten the icon */ -@badge-text-color-idle: #000; -@badge-background-unseen-alert: #dea4a2; -@badge-background-unseen-message: #b7cffb; +@badge-counter-background-unseen-alert: #dea4a2; +@badge-counter-background-unseen-message: #b7cffb; diff --git a/modules/echo.variables.vector.less b/modules/echo.variables.vector.less index 2f73f67aa..50764c46f 100644 --- a/modules/echo.variables.vector.less +++ b/modules/echo.variables.vector.less @@ -1,3 +1,2 @@ -@badge-text-color-idle: white; -@badge-background-unseen-alert: #d11813; -@badge-background-unseen-message: #5d95ff; +@badge-counter-background-unseen-alert: #C33; +@badge-counter-background-unseen-message: #36C; diff --git a/modules/ext.echo.init.js b/modules/ext.echo.init.js index 3c9a7ffd1..990cb14ba 100644 --- a/modules/ext.echo.init.js +++ b/modules/ext.echo.init.js @@ -15,8 +15,10 @@ var myWidget, echoApi, $existingAlertLink = $( '#pt-notifications-alert a' ), $existingMessageLink = $( '#pt-notifications-notice a' ), - numAlerts = $existingAlertLink.text(), - numMessages = $existingMessageLink.text(), + numAlerts = $existingAlertLink.attr( 'data-counter-num' ), + numMessages = $existingMessageLink.attr( 'data-counter-num' ), + badgeLabelAlerts = $existingAlertLink.attr( 'data-counter-text' ), + badgeLabelMessages = $existingMessageLink.attr( 'data-counter-text' ), hasUnseenAlerts = $existingAlertLink.hasClass( 'mw-echo-unseen-notifications' ), hasUnseenMessages = $existingMessageLink.hasClass( 'mw-echo-unseen-notifications' ), // Store links @@ -74,9 +76,10 @@ messageModelManager, { $overlay: mw.echo.ui.$overlay, - numItems: numMessages, + numItems: Number( numMessages ), hasUnseen: hasUnseenMessages, - badgeIcon: 'speechBubbles', + badgeIcon: 'tray', + badgeLabel: badgeLabelMessages, links: links, href: $existingMessageLink.attr( 'href' ) } @@ -107,12 +110,10 @@ alertController, alertModelManager, { - numItems: numAlerts, + numItems: Number( numAlerts ), + badgeLabel: badgeLabelAlerts, hasUnseen: hasUnseenAlerts, - badgeIcon: { - seen: 'bell', - unseen: 'bellOn' - }, + badgeIcon: 'bell', links: links, $overlay: mw.echo.ui.$overlay, href: $existingAlertLink.attr( 'href' ) diff --git a/modules/icons/apex/badgeicons.json b/modules/icons/apex/badgeicons.json index 48ffdd1d3..5a101ee86 100644 --- a/modules/icons/apex/badgeicons.json +++ b/modules/icons/apex/badgeicons.json @@ -4,17 +4,8 @@ "bell": { "file": "../bell.svg" }, - "bellOn": { - "file": { - "ltr": "../bellOn-ltr.svg", - "rtl": "../bellOn-rtl.svg" - } - }, - "speechBubbles": { - "file": { - "ltr": "../speechBubbles-ltr.svg", - "rtl": "../speechBubbles-rtl.svg" - } + "tray": { + "file": "../tray.svg" } } } diff --git a/modules/icons/mediawiki/badgeicons.json b/modules/icons/mediawiki/badgeicons.json index 77ab8e722..5a101ee86 100644 --- a/modules/icons/mediawiki/badgeicons.json +++ b/modules/icons/mediawiki/badgeicons.json @@ -1,26 +1,11 @@ { "prefix": "oo-ui-icon", - "variants": { - "invert": { - "color": "#FFFFFF", - "global": true - } - }, "images": { "bell": { "file": "../bell.svg" }, - "bellOn": { - "file": { - "ltr": "../bellOn-ltr.svg", - "rtl": "../bellOn-rtl.svg" - } - }, - "speechBubbles": { - "file": { - "ltr": "../speechBubbles-ltr.svg", - "rtl": "../speechBubbles-rtl.svg" - } + "tray": { + "file": "../tray.svg" } } } diff --git a/modules/icons/tray.svg b/modules/icons/tray.svg new file mode 100644 index 000000000..d7ab69b99 --- /dev/null +++ b/modules/icons/tray.svg @@ -0,0 +1,4 @@ + + + + diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less index d29f55a44..580f93464 100644 --- a/modules/nojs/mw.echo.badge.less +++ b/modules/nojs/mw.echo.badge.less @@ -1,33 +1,17 @@ @import '../echo.variables'; +@import 'mediawiki.mixins'; /* We have to include the #pt-notifications selector due to monobook */ .mw-echo-notifications-badge { #pt-notifications-alert &, #pt-notifications-notice & { - font-weight: bold; + position: relative; + display: block; + width: 30px; + top: -5px; + font-size: 0; cursor: pointer; text-decoration: none; - margin-top: -0.2em; - display: inline-block; - - padding: @badge-padding (@badge-padding + 0.25em) @badge-padding (@badge-padding + 0.25em + 1.1em); - // Override height, width, min-height and min-width from OOUI IconElement - height: 1.05em; - min-height: 1.05em; - width: auto; - min-width: 0; - - body.ltr & { - background-position: @badge-padding 0.1em; - } - body.rtl & { - // CSS sucks, we can't specify background-position-x from the right - // You can in Firefox with background-position-x: right 0.12em; - // but that's not supported in any other browsers - background-position: ~"calc(100% - @{badge-padding}) 0.1em"; - } - background-size: @badge-icon-size; - background-repeat: no-repeat; &:hover, &:active, @@ -39,20 +23,64 @@ &-dimmed { opacity: 0.4; } + + // Background icon + &:before { + position: absolute; + display: inline-block; + cursor: pointer; + opacity: 0.8; + left: 0; + } + + // Counter + &:after { + position: absolute; + display: inline-block; + cursor: pointer; + top: 10px; + left: 40%; + // The original font-size was 12px, we had + // to override it in the parent so the original + // number is hidden, so we rewrite it here. This + // is far from perfect, but it will make sure + // that screen-readers can still see the number that + // is outputted in the original link while letting + // us style the boxed number the way we want to. + // We want 0.8em of the original 12px font size + font-size: 12px * 0.8; + font-weight: bold; + padding: 0 0.3em; + border: 1px solid white; + border-radius: 2px; + background-color: @badge-counter-background-seen; + content: attr(data-counter-text); + color: white; + } + + + .oo-ui-popupWidget { + margin-top: 7px; + } + + &.mw-echo-notifications-badge-all-read { + opacity: 0.625; + &::after { + visibility: hidden; + } + } + } + + #pt-notifications-alert & { + &:before { + /* @embed */ + content: url('../icons/bell.svg'); + } } #pt-notifications-notice & { - margin-left: @badge-distance-adjustment; - - body.ltr & + .oo-ui-popupWidget { - // Only add a left adjustment for LTR pages. - // In LTR, the correction above moves the badge from the left - // which means we have to adjust the positioning of the anchor - // to be in the middle of the badge. - // In RTL, however, the above will be flipped to margin-right - // which doesn't affect the positioning of the anchor and hence - // doesn't require a correction. - left: (1em + @badge-distance-adjustment); + &:before { + /* @embed */ + content: url('../icons/tray.svg'); } } } diff --git a/modules/nojs/mw.echo.badge.modern.less b/modules/nojs/mw.echo.badge.modern.less new file mode 100644 index 000000000..48484017f --- /dev/null +++ b/modules/nojs/mw.echo.badge.modern.less @@ -0,0 +1,8 @@ +.mw-echo-notifications-badge { + #pt-notifications-alert &, + #pt-notifications-notice & { + &:before { + z-index: 0; + } + } +} diff --git a/modules/nojs/mw.echo.badge.monobook.less b/modules/nojs/mw.echo.badge.monobook.less index f1f2a0009..ecf5ae858 100644 --- a/modules/nojs/mw.echo.badge.monobook.less +++ b/modules/nojs/mw.echo.badge.monobook.less @@ -3,28 +3,21 @@ /* We have to include the #pt-notifications selector due to monobook */ .mw-echo-notifications-badge { - #pt-notifications-alert &, - #pt-notifications-notice & { - color: @badge-text-color-idle; - opacity: 0.6; - - &:hover, - &:active, - &:focus { - background-color: transparent; - } - - &-dimmed { - opacity: 0.2; - } - } - + &.oo-ui-flaggedElement-unseen, &.mw-echo-unseen-notifications { - #pt-notifications-alert & { - background-color: @badge-background-unseen-alert; + #pt-notifications-alert &:after { + background-color: @badge-counter-background-unseen-alert; + color: #000; } - #pt-notifications-notice & { - background-color: @badge-background-unseen-message; + + #pt-notifications-notice &:after { + background-color: @badge-counter-background-unseen-message; + color: #000; } } } + +#p-personal #pt-notifications-alert, +#p-personal #pt-notifications-notice { + display: inline-block; +} diff --git a/modules/nojs/mw.echo.badge.vector.less b/modules/nojs/mw.echo.badge.vector.less index 688aa1c21..9355cb78e 100644 --- a/modules/nojs/mw.echo.badge.vector.less +++ b/modules/nojs/mw.echo.badge.vector.less @@ -3,26 +3,14 @@ /* We have to include the #pt-notifications selector due to monobook */ .mw-echo-notifications-badge { - #pt-notifications-alert &, - #pt-notifications-notice & { - border-radius: 0.2em; - background-color: #d2d2d2; - font-size: 1.125em; - color: @badge-text-color-idle; - - &:hover, - &:active, - &:focus { - background-color: #c2c2c2; - } - } - + &.oo-ui-flaggedElement-unseen, &.mw-echo-unseen-notifications { - #pt-notifications-alert & { - background-color: @badge-background-unseen-alert; + #pt-notifications-alert &:after { + background-color: @badge-counter-background-unseen-alert; } - #pt-notifications-notice & { - background-color: @badge-background-unseen-message; + + #pt-notifications-notice &:after { + background-color: @badge-counter-background-unseen-message; } } } diff --git a/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less b/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less index 703991be5..846f40272 100644 --- a/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less +++ b/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less @@ -9,7 +9,6 @@ } // Badge > .oo-ui-buttonElement-button { - padding-right: (@badge-padding + 0.25em); &:hover { .oo-ui-labelElement-label { color: black !important; @@ -24,13 +23,3 @@ } } - -// These rules are outside of the LESS nesting because they don't work inside -// the nested rule. These should be very strong so as to override the base styles -#pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen { - background-color: @badge-background-unseen-alert; -} - -#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen { - background-color: @badge-background-unseen-message; -} diff --git a/modules/styles/mw.echo.ui.NotificationBadgeWidget.vector.less b/modules/styles/mw.echo.ui.NotificationBadgeWidget.vector.less deleted file mode 100644 index bd5ea3311..000000000 --- a/modules/styles/mw.echo.ui.NotificationBadgeWidget.vector.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '../echo.variables'; -@import '../echo.variables.vector'; - -// These rules are outside of the LESS nesting because they don't work inside -// the nested rule. These should be very strong so as to override the base styles -#pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen { - background-color: @badge-background-unseen-alert; -} - -#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen { - background-color: @badge-background-unseen-message; -} diff --git a/modules/ui/mw.echo.ui.BadgeLinkWidget.js b/modules/ui/mw.echo.ui.BadgeLinkWidget.js index 61b7039f7..9eabb67c4 100644 --- a/modules/ui/mw.echo.ui.BadgeLinkWidget.js +++ b/modules/ui/mw.echo.ui.BadgeLinkWidget.js @@ -7,14 +7,6 @@ * * @constructor * @param {Object} [config] Configuration object - * @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 - * the properties 'unseen' and 'seen' with icons attached to both. For example: - * { badgeIcon: { - * unseen: 'bellOn', - * seen: 'bell' - * } } * @cfg {string} [href] URL the badge links to */ mw.echo.ui.BadgeLinkWidget = function MwEchoUiBadgeLinkWidget( config ) { @@ -26,11 +18,13 @@ // Mixin constructors OO.ui.mixin.LabelElement.call( this, $.extend( { $label: this.$element }, config ) ); OO.ui.mixin.ButtonElement.call( this, $.extend( { $button: this.$element }, config ) ); - OO.ui.mixin.IconElement.call( this, $.extend( { $icon: this.$element }, config ) ); OO.ui.mixin.TitledElement.call( this, $.extend( { $titled: this.$element }, config ) ); OO.ui.mixin.FlaggedElement.call( this, $.extend( {}, config, { $flagged: this.$element } ) ); - this.$element.addClass( 'mw-echo-notifications-badge' ); + this.$element + .addClass( 'mw-echo-notifications-badge' ); + + this.setCount( config.numItems, config.label ); if ( config.href !== undefined && OO.ui.isSafeUrl( config.href ) ) { this.$element.attr( 'href', config.href ); @@ -40,10 +34,23 @@ OO.inheritClass( mw.echo.ui.BadgeLinkWidget, OO.ui.Widget ); OO.mixinClass( mw.echo.ui.BadgeLinkWidget, OO.ui.mixin.LabelElement ); OO.mixinClass( mw.echo.ui.BadgeLinkWidget, OO.ui.mixin.ButtonElement ); - OO.mixinClass( mw.echo.ui.BadgeLinkWidget, OO.ui.mixin.IconElement ); OO.mixinClass( mw.echo.ui.BadgeLinkWidget, OO.ui.mixin.TitledElement ); OO.mixinClass( mw.echo.ui.BadgeLinkWidget, OO.ui.mixin.FlaggedElement ); mw.echo.ui.BadgeLinkWidget.static.tagName = 'a'; + /** + * Set the count labels for this button. + * + * @param {number} numItems Number of items + * @param {string} [label] Label of the button. Defaults to the item number. + */ + mw.echo.ui.BadgeLinkWidget.prototype.setCount = function ( numItems, label ) { + label = label || numItems; + + this.$element + .toggleClass( 'mw-echo-notifications-badge-all-read', !numItems ) + .attr( 'data-counter-num', numItems ) + .attr( 'data-counter-text', label ); + }; } )( mediaWiki, jQuery ); diff --git a/modules/ui/mw.echo.ui.NotificationBadgeWidget.js b/modules/ui/mw.echo.ui.NotificationBadgeWidget.js index 1dcaad05b..c00580ac6 100644 --- a/modules/ui/mw.echo.ui.NotificationBadgeWidget.js +++ b/modules/ui/mw.echo.ui.NotificationBadgeWidget.js @@ -12,17 +12,12 @@ * @cfg {string|string[]} [type='message'] The type or array of types of * notifications that are in this model. They can be 'alert', 'message' or * an array of both. Defaults to 'message' - * @cfg {number} [numItems=0] How many items are in the button display + * @cfg {number} [numItems=0] The number of items that are in the button display + * @cfg {string} [badgeLabel=0] The initial label for the badge. This is the + * formatted version of the number of items in the badge. * @cfg {boolean} [hasUnseen=false] Whether there are unseen items * @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 - * the properties 'unseen' and 'seen' with icons attached to both. For example: - * { badgeIcon: { - * unseen: 'bellOn', - * seen: 'bell' - * } } + * @cfg {string} [badgeIcon] Icon to use for the popup header * @cfg {string} [href] URL the badge links to * @cfg {jQuery} [$overlay] A jQuery element functioning as an overlay * for popups. @@ -57,18 +52,18 @@ this.maxNotificationCount = mw.config.get( 'wgEchoMaxNotificationCount' ); this.numItems = config.numItems || 0; - this.badgeIcon = config.badgeIcon || {}; + this.badgeLabel = config.badgeLabel || this.numItems; this.hasRunFirstTime = false; - buttonFlags = [ 'primary' ]; + buttonFlags = []; if ( !!config.hasUnseen ) { buttonFlags.push( 'unseen' ); } this.badgeButton = new mw.echo.ui.BadgeLinkWidget( { - label: this.numItems, + label: this.badgeLabel, + numItems: this.numItems, flags: buttonFlags, - badgeIcon: config.badgeIcon, // The following messages can be used here: // tooltip-pt-notifications-alert // tooltip-pt-notifications-notice @@ -130,6 +125,7 @@ $footer: $footer, width: config.popupWidth || 500, autoClose: true, + containerPadding: 20, // Also ignore clicks from the nested action menu items, that // actually exist in the overlay $autoCloseIgnore: this.$element.add( this.$menuOverlay ), @@ -144,11 +140,10 @@ classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-popup' ] } ); // HACK: Add an icon to the popup head label - this.popupHeadIcon = new OO.ui.IconWidget(); + this.popupHeadIcon = new OO.ui.IconWidget( { icon: config.badgeIcon } ); this.popup.$head.prepend( this.popupHeadIcon.$element ); this.setPendingElement( this.popup.$head ); - this.updateIcon( !!config.hasUnseen ); // Mark all as read button this.markAllReadButton = new OO.ui.ButtonWidget( { @@ -230,20 +225,6 @@ this.popup.toggle(); }; - /** - * Update the badge icon with the read/unread versions if they exist. - * - * @param {boolean} hasUnseen Widget has unseen notifications - */ - mw.echo.ui.NotificationBadgeWidget.prototype.updateIcon = function ( hasUnseen ) { - var icon = typeof this.badgeIcon === 'string' ? - this.badgeIcon : - this.badgeIcon[ hasUnseen ? 'unseen' : 'seen' ]; - - this.badgeButton.setIcon( icon ); - this.popupHeadIcon.setIcon( icon ); - }; - // Client-side version of NotificationController::getCappedNotificationCount. /** * Gets the count to use for display @@ -276,7 +257,6 @@ hasUnseen = hasUnseen === undefined ? this.manager.hasUnseenInSource( 'local' ) : !!hasUnseen; this.badgeButton.setFlags( { unseen: !!hasUnseen } ); - this.updateIcon( !!hasUnseen ); }; /** @@ -289,8 +269,9 @@ cappedUnreadCount = this.getCappedNotificationCount( unreadCount ); cappedUnreadCount = mw.language.convertNumber( cappedUnreadCount ); badgeLabel = mw.message( 'echo-badge-count', cappedUnreadCount ).text(); - this.badgeButton.setLabel( badgeLabel ); + this.badgeButton.setLabel( badgeLabel ); + this.badgeButton.setCount( unreadCount, badgeLabel ); // Update seen state only if the counter is 0 // so we don't run into inconsistencies and have an unseen state // for the badge with 0 unread notifications diff --git a/tests/browser/features/notifications.feature b/tests/browser/features/notifications.feature index 7bafc9d15..33ac80929 100644 --- a/tests/browser/features/notifications.feature +++ b/tests/browser/features/notifications.feature @@ -15,8 +15,8 @@ Feature: Testing notification types Scenario: Someone writes on my talk page Given another user writes on my talk page When I refresh the page - Then the message badge is showing unseen notifications - And the message badge value is "1" - When I click the message badge - And I see the message popup - Then there are "1" unread notifications in the message popup + Then the alert badge is showing unseen notifications + And the alert badge value is "1" + When I click the alert badge + And I see the alert popup + Then there are "1" unread notifications in the alert popup diff --git a/tests/browser/features/step_definition/badge_steps.rb b/tests/browser/features/step_definition/badge_steps.rb index 73bf8c3b4..541b446ac 100644 --- a/tests/browser/features/step_definition/badge_steps.rb +++ b/tests/browser/features/step_definition/badge_steps.rb @@ -2,9 +2,9 @@ # Work in both nojs and js version Given(/^I click the alert badge$/) do - on(ArticlePage).alerts.badge + on(ArticlePage).alerts.badge_element.when_present.click end -Given(/^I click the message badge$/) do - on(ArticlePage).messages.badge +Given(/^I click the notice badge$/) do + on(ArticlePage).notices.badge_element.when_present.click end diff --git a/tests/browser/features/step_definition/notifications_steps.rb b/tests/browser/features/step_definition/notifications_steps.rb index e8d1a6b6f..1afec9f4d 100644 --- a/tests/browser/features/step_definition/notifications_steps.rb +++ b/tests/browser/features/step_definition/notifications_steps.rb @@ -36,10 +36,10 @@ Given(/^the alert badge is showing unseen notifications$/) do end end -Given(/^the message badge is showing unseen notifications$/) do +Given(/^the notice badge is showing unseen notifications$/) do on(ArticlePage) do |page| page.refresh_until do - page.messages.badge_unseen_element.visible? + page.notices.badge_unseen_element.visible? end end end @@ -52,17 +52,24 @@ Given(/^the alert badge value is "(.+)"$/) do |num| end end -Given(/^the message badge value is "(.+)"$/) do |num| +Given(/^the notice badge value is "(.+)"$/) do |num| on(ArticlePage) do |page| page.refresh_until do - page.messages.badge_element.text == num + page.notices.badge_element.text == num end end end -Given(/^there are "(.+)" unread notifications in the message popup$/) do |num| +Given(/^there are "(.+)" unread notifications in the notice popup$/) do |num| on(ArticlePage) do |page| - page.messages.when_loaded - expect(page.messages.num_unread_notifications).to eq(num.to_i) + page.notices.when_loaded + expect(page.notices.num_unread_notifications).to eq(num.to_i) + end +end + +Given(/^there are "(.+)" unread notifications in the alert popup$/) do |num| + on(ArticlePage) do |page| + page.alerts.when_loaded + expect(page.alerts.num_unread_notifications).to eq(num.to_i) end end diff --git a/tests/browser/features/support/components/notifications.rb b/tests/browser/features/support/components/notifications.rb index f62209d2d..f01ba2e2a 100644 --- a/tests/browser/features/support/components/notifications.rb +++ b/tests/browser/features/support/components/notifications.rb @@ -1,12 +1,12 @@ class Notifications include PageObject - link(:badge) + link(:badge, css: '.mw-echo-notifications-badge') link(:badge_unseen, css: '.mw-echo-unseen-notifications') - link(:mark_all_as_read, css: '.mw-echo-ui-notificationsWidget-markAllReadButton > a') + link(:mark_all_as_read, css: '.mw-echo-ui-notificationsListWidget-markAllReadButton > a') div(:popup, css: '.mw-echo-ui-notificationBadgeButtonPopupWidget-popup') span(:title, css: '.oo-ui-popupWidget-head > .oo-ui-labelElement-label') - div(:notifications_container, css: '.mw-echo-ui-notificationsWidget') + div(:notifications_container, css: '.mw-echo-ui-notificationsListWidget') def when_loaded title_element.when_present diff --git a/tests/browser/features/support/pages/article_page.rb b/tests/browser/features/support/pages/article_page.rb index 4126fd741..c58bc35c7 100644 --- a/tests/browser/features/support/pages/article_page.rb +++ b/tests/browser/features/support/pages/article_page.rb @@ -2,5 +2,5 @@ class ArticlePage include PageObject page_section(:alerts, Notifications, css: '#pt-notifications-alert') - page_section(:messages, Notifications, css: '#pt-notifications-message') + page_section(:notices, Notifications, css: '#pt-notifications-notice') end