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
