Mooeypoo has uploaded a new change for review. https://gerrit.wikimedia.org/r/276684
Change subject: [WIP] OOUI'fy the Special Page notification items ...................................................................... [WIP] OOUI'fy the Special Page notification items Change-Id: I967d0d8d96dbe8c8bff2e32f3dec05a527c5e406 --- M autoload.php A includes/ooui/NotificationItemWidget.php M includes/special/SpecialNotifications.php M modules/nojs/mw.echo.special.less 4 files changed, 160 insertions(+), 23 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo refs/changes/84/276684/1 diff --git a/autoload.php b/autoload.php index 6d636c6..883b553 100644 --- a/autoload.php +++ b/autoload.php @@ -3,7 +3,7 @@ // @codingStandardsIgnoreFile global $wgAutoloadClasses; -$wgAutoloadClasses += array( +$wgAutoloadClasses += [ 'ApiEchoMarkRead' => __DIR__ . '/includes/api/ApiEchoMarkRead.php', 'ApiEchoMarkReadTest' => __DIR__ . '/tests/phpunit/api/ApiEchoMarkReadTest.php', 'ApiEchoMarkSeen' => __DIR__ . '/includes/api/ApiEchoMarkSeen.php', @@ -67,6 +67,7 @@ 'EchoNotificationDeleteJob' => __DIR__ . '/includes/jobs/NotificationDeleteJob.php', 'EchoNotificationFormatter' => __DIR__ . '/includes/formatters/NotificationFormatter.php', 'EchoNotificationFormatterTest' => __DIR__ . '/tests/phpunit/formatters/NotificationFormatterTest.php', + 'EchoNotificationItemWidget' => __DIR__ . '/includes/ooui/NotificationItemWidget.php', 'EchoNotificationJob' => __DIR__ . '/includes/jobs/NotificationJob.php', 'EchoNotificationMapper' => __DIR__ . '/includes/mapper/NotificationMapper.php', 'EchoNotificationMapperTest' => __DIR__ . '/tests/phpunit/mapper/NotificationMapperTest.php', @@ -110,4 +111,5 @@ 'SpecialNotifications' => __DIR__ . '/includes/special/SpecialNotifications.php', 'SpecialNotificationsFormatter' => __DIR__ . '/includes/formatters/SpecialNotificationsFormatter.php', 'SuppressionMaintenanceTest' => __DIR__ . '/tests/phpunit/maintenance/SupressionMaintenanceTest.php', -); + '__construct' => __DIR__ . '/includes/ooui/NotificationItemWidget.php', +]; diff --git a/includes/ooui/NotificationItemWidget.php b/includes/ooui/NotificationItemWidget.php new file mode 100644 index 0000000..1aecb68 --- /dev/null +++ b/includes/ooui/NotificationItemWidget.php @@ -0,0 +1,121 @@ +<?php + +class EchoNotificationItemWidget extends OOUI\Widget { + protected $id; + + /** + * Configuration options include: + * + * - icon + * - header (html from the API) + * - body (html from the API) + * - primaryUrl (array with 'url', and 'label') + * - secondaryUrls (array with 'url', 'label', and 'icon') + * @var array + */ + public function __construct( $id, $config = array() ) { + // $markReadSpecialPage = SpecialPage::getTitleFor( 'NotificationsMarkRead' ); + + // Parent class + parent::__construct( $config ); + + $this->id = $id; + $this->read = isset( $config['read'] ) && $config['read']; + + // Mark as read + $markAsReadButton = new OOUI\ButtonWidget( array( + 'icon' => 'close', + 'framed' => false, + // 'href' => $markReadSpecialPage->getLocalUrl( '', false, PROTO_CANONICAL ) . '/' . $this->id, + 'classes' => array( 'mw-echo-ui-notificationItemWidget-markAsReadButton' ), + ) ); + + // Icon + $icon = ''; + if ( isset( $config[ 'iconUrl' ] ) ) { + $icon = new OOUI\Tag( 'img' ); + $icon->addClasses( array( 'mw-echo-ui-notificationItemWidget-icon' ) ); + $icon->setAttributes( array( 'src' => $config['iconUrl'] ) ); + // or use EchoNotificationFormatter::getIconUrl( $config[ 'icon' ], $this->getDir() ); + } + + // Header + $header = ''; + if ( isset( $config['header'] ) ) { + $header = new OOUI\Tag( 'div' ); + $header->addClasses( array( 'mw-echo-ui-notificationItemWidget-content-message-header' ) ); + $header->appendContent( new OOUI\HtmlSnippet( $config[ 'header' ] ) ); + } + // Body + $body = ''; + if ( isset( $config['body'] ) ) { + $body = new OOUI\Tag( 'div' ); + $body->addClasses( array( 'mw-echo-ui-notificationItemWidget-content-message-body' ) ); + $body->appendContent( new OOUI\HtmlSnippet( $config[ 'body' ] ) ); + $body->setAttributes( array( 'dir', 'auto' ) ); + } + // Combine content + $messageWrapper = new OOUI\Tag( 'div' ); + $messageWrapper->addClasses( array( 'mw-echo-ui-notificationItemWidget-content-message' ) ); + $messageWrapper->appendContent( $header, $body ); + + // Actions menu + $actions = new OOUI\ButtonGroupWidget( array( + 'classes' => array( 'mw-echo-ui-notificationItemWidget-content-actions-buttons' ), + ) ); + $buttons = array(); + + // Add primary link + if ( isset( $config[ 'primaryUrl' ] ) ) { + $primary = array_merge( array( 'label' => '', 'url' => '' ), $config[ 'primaryUrl' ] ); + $button[] = new OOUI\ButtonWidget( array( + 'framed' => false, + 'label' => $primary[ 'label' ], + 'href' => $primary[ 'url' ], + ) ); + } + + // Add secondary links + $actionsWrapper = ''; + // Define a base config + $buttonConfig = array( + 'framed' => false, + 'label' => '', + 'icon' => '', + 'tooltip' => '', + 'href' => '', + ); + if ( isset( $config['secondaryUrls'] ) ) { + $urls = $config['secondaryUrls']; + foreach ( $urls as $data ) { + $buttons[] = new OOUI\ButtonWidget( array_merge( $buttonConfig, $data, array( + 'href' => $data[ 'url' ], + ) ) ); + } + } + + // Add the buttons + $actions->addItems( $buttons ); + + // Wrap the actions + $actionsWrapper = new OOUI\Tag( 'div' ); + $actionsWrapper->addClasses( array( 'mw-echo-ui-notificationItemWidget-content-table' ) ); + $actionsWrapper->appendContent( $actions ); + + // Combine all elements + $contentWrapper = new OOUI\Tag( 'div' ); + $contentWrapper->addClasses( array( 'mw-echo-ui-notificationItemWidget-content' ) ); + $contentWrapper->appendContent( + $markAsReadButton, + $messageWrapper, + $actionsWrapper + ); + + $this->appendContent( $icon ); + $this->appendContent( $contentWrapper ); + $this->addClasses( array( 'mw-echo-ui-notificationItemWidget' ) ); + if ( !$this->read ) { + $this->addClasses( array( 'mw-echo-ui-notificationItemWidget-unread' ) ); + } + } +} diff --git a/includes/special/SpecialNotifications.php b/includes/special/SpecialNotifications.php index 3d642b0..d44a0ad 100644 --- a/includes/special/SpecialNotifications.php +++ b/includes/special/SpecialNotifications.php @@ -27,6 +27,7 @@ $out->addSubtitle( $this->buildSubtitle() ); + $out->enableOOUI(); // The continue parameter to pull current set of data from, this // would be used for browsers with javascript disabled $continue = $this->getRequest()->getVal( 'continue', null ); @@ -51,7 +52,7 @@ } foreach ( $notifications as $notification ) { - $output = EchoDataOutputFormatter::formatOutput( $notification, 'special', $user, $this->getLanguage() ); + $output = EchoDataOutputFormatter::formatOutput( $notification, 'model', $user, $this->getLanguage() ); if ( $output ) { $notif[] = $output; } @@ -72,6 +73,18 @@ $echoSeenTime = EchoSeenTime::newFromUser( $user ); $seenTime = $echoSeenTime->getTime(); foreach ( $notif as $row ) { + $data = $row[ '*' ]; + $links = $data['links']; + $notifWidget = new EchoNotificationItemWidget( $row['id'], array( + 'read' => !isset( $row['read'] ), + 'icon' => $data[ 'icon' ], + 'iconUrl' => $data[ 'iconUrl' ], + 'header' => $data[ 'header' ], + 'body' => $data[ 'body' ], + 'primaryUrl' => $links[ 'primary' ], + 'secondaryUrls' => $links[ 'secondary' ] + ) ); + $class = 'mw-echo-notification'; if ( !isset( $row['read'] ) ) { @@ -102,7 +115,8 @@ 'data-notification-event' => $row['id'], 'data-notification-type' => $row['type'] ), - $row['*'] + // $row['*'] + $notifWidget ); } $html = Html::rawElement( 'ul', array( 'id' => 'mw-echo-special-container' ), $notices ); @@ -132,7 +146,7 @@ ) ); // For no-js support - $out->addModuleStyles( array( 'ext.echo.styles.notifications', 'ext.echo.styles.special' ) ); + $out->addModuleStyles( array( /*'ext.echo.styles.notifications',*/ 'ext.echo.styles.special' ) ); DeferredUpdates::addCallableUpdate( function () use ( $user, $echoSeenTime, $unread ) { // Mark items as read diff --git a/modules/nojs/mw.echo.special.less b/modules/nojs/mw.echo.special.less index a0a0360..9c191f4 100644 --- a/modules/nojs/mw.echo.special.less +++ b/modules/nojs/mw.echo.special.less @@ -71,24 +71,24 @@ max-width: 600px; } -.mw-echo-notification { - padding: 15px 35px 10px 0; -} +// .mw-echo-notification { +// padding: 15px 35px 10px 0; +// } -#mw-echo-special-container { - .mw-echo-notification { - background-color: transparent; +// #mw-echo-special-container { +// .mw-echo-notification { +// background-color: transparent; - &:hover { - /* Fallback for IE<=8 */ - background-color: #F6F6F6; - background-color: rgba(0, 0, 0, 0.035); - } +// &:hover { +// // Fallback for IE<=8 +// background-color: #F6F6F6; +// background-color: rgba(0, 0, 0, 0.035); +// } - &.mw-echo-unread { - .mw-echo-title { - font-weight: bold; - } - } - } -} +// &.mw-echo-unread { +// .mw-echo-title { +// font-weight: bold; +// } +// } +// } +// } -- To view, visit https://gerrit.wikimedia.org/r/276684 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I967d0d8d96dbe8c8bff2e32f3dec05a527c5e406 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Echo Gerrit-Branch: master Gerrit-Owner: Mooeypoo <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits