From 188e8d7395316ff3c3a160ef936e133e46541f84 Mon Sep 17 00:00:00 2001 From: Matthew Flaschen Date: Fri, 27 May 2016 17:02:55 -0700 Subject: [PATCH] No-JS special page: One-click mark as read Bug: T136361 Change-Id: I7896dbdf25d2c1624f97777f4c8d0af41b195ef0 Depends-On: Ic31f857c749d62a32cafae68dc3f1cbd86e1e382 --- Resources.php | 3 +- autoload.php | 11 ++-- .../SpecialNotificationsFormatter.php | 23 +++++-- includes/ooui/LabelIconWidget.php | 44 +++++++++++++ includes/special/SpecialNotifications.php | 33 +++++++--- .../special/SpecialNotificationsMarkRead.php | 65 ++++++++++++++++++- modules/nojs/mw.echo.special.less | 20 +++++- modules/styles/LabelIconWidget.less | 13 ++++ 8 files changed, 190 insertions(+), 22 deletions(-) create mode 100644 includes/ooui/LabelIconWidget.php create mode 100644 modules/styles/LabelIconWidget.less diff --git a/Resources.php b/Resources.php index a9194a8e0..84ee41e7f 100644 --- a/Resources.php +++ b/Resources.php @@ -253,7 +253,8 @@ $wgResourceModules += array( 'ext.echo.styles.notifications' => $echoResourceTemplate + array( 'position' => 'top', 'styles' => array( - 'nojs/mw.echo.notifications.less' + 'nojs/mw.echo.notifications.less', + 'styles/LabelIconWidget.less', ), 'targets' => array( 'desktop', 'mobile' ), ), diff --git a/autoload.php b/autoload.php index 870495241..104684ce2 100644 --- a/autoload.php +++ b/autoload.php @@ -41,8 +41,8 @@ $wgAutoloadClasses += [ 'EchoEmailFormat' => __DIR__ . '/includes/EmailFormat.php', 'EchoEmailFormatter' => __DIR__ . '/includes/EmailFormatter.php', 'EchoEmailFormatterTest' => __DIR__ . '/tests/phpunit/EmailFormatterTest.php', - 'EchoEmailMode' => __DIR__ . '/includes/EmailFormatter.php', 'EchoEmailFrequency' => __DIR__ . '/includes/EmailFrequency.php', + 'EchoEmailMode' => __DIR__ . '/includes/EmailFormatter.php', 'EchoEmailSingle' => __DIR__ . '/includes/EmailFormatter.php', 'EchoEmailUserPresentationModel' => __DIR__ . '/includes/formatters/EmailUserPresentationModel.php', 'EchoEvent' => __DIR__ . '/includes/model/Event.php', @@ -57,8 +57,9 @@ $wgAutoloadClasses += [ 'EchoForeignNotifications' => __DIR__ . '/includes/ForeignNotifications.php', 'EchoForeignPresentationModel' => __DIR__ . '/includes/formatters/EchoForeignPresentationModel.php', 'EchoHTMLEmailDecorator' => __DIR__ . '/includes/EmailFormatter.php', - 'LegacyEchoHTMLEmailFormatter' => __DIR__ . '/includes/EmailFormatter.php', 'EchoHooks' => __DIR__ . '/Hooks.php', + 'EchoHtmlDigestEmailFormatter' => __DIR__ . '/includes/formatters/EchoHtmlDigestEmailFormatter.php', + 'EchoHtmlEmailFormatter' => __DIR__ . '/includes/formatters/EchoHtmlEmailFormatter.php', 'EchoIteratorDecorator' => __DIR__ . '/includes/iterator/IteratorDecorator.php', 'EchoLocalCache' => __DIR__ . '/includes/cache/LocalCache.php', 'EchoMentionFormatter' => __DIR__ . '/includes/formatters/MentionFormatter.php', @@ -76,14 +77,13 @@ $wgAutoloadClasses += [ 'EchoNotificationMapperTest' => __DIR__ . '/tests/phpunit/mapper/NotificationMapperTest.php', 'EchoNotificationTest' => __DIR__ . '/tests/phpunit/model/NotificationTest.php', 'EchoNotifier' => __DIR__ . '/includes/Notifier.php', + 'EchoOOUI\\LabelIconWidget' => __DIR__ . '/includes/ooui/LabelIconWidget.php', 'EchoOnWikiList' => __DIR__ . '/includes/ContainmentSet.php', 'EchoPageLinkFormatter' => __DIR__ . '/includes/formatters/PageLinkFormatter.php', 'EchoPageLinkedPresentationModel' => __DIR__ . '/includes/formatters/PageLinkedPresentationModel.php', - 'EchoPresentationModelSectionTrait' => __DIR__ . '/includes/formatters/PresentationModelSectionTrait.php', 'EchoPlainTextDigestEmailFormatter' => __DIR__ . '/includes/formatters/EchoPlainTextDigestEmailFormatter.php', 'EchoPlainTextEmailFormatter' => __DIR__ . '/includes/formatters/EchoPlainTextEmailFormatter.php', - 'EchoHtmlEmailFormatter' => __DIR__ . '/includes/formatters/EchoHtmlEmailFormatter.php', - 'EchoHtmlDigestEmailFormatter' => __DIR__ . '/includes/formatters/EchoHtmlDigestEmailFormatter.php', + 'EchoPresentationModelSectionTrait' => __DIR__ . '/includes/formatters/PresentationModelSectionTrait.php', 'EchoRevertedPresentationModel' => __DIR__ . '/includes/formatters/RevertedPresentationModel.php', 'EchoRevisionLocalCache' => __DIR__ . '/includes/cache/RevisionLocalCache.php', 'EchoSeenTime' => __DIR__ . '/includes/SeenTime.php', @@ -106,6 +106,7 @@ $wgAutoloadClasses += [ 'EchoUserRightsPresentationModel' => __DIR__ . '/includes/formatters/UserRightsPresentationModel.php', 'EchoWelcomePresentationModel' => __DIR__ . '/includes/formatters/WelcomePresentationModel.php', 'FilteredSequentialIteratorTest' => __DIR__ . '/tests/phpunit/iterator/FilteredSequentialIteratorTest.php', + 'LegacyEchoHTMLEmailFormatter' => __DIR__ . '/includes/EmailFormatter.php', 'MWEchoDbFactory' => __DIR__ . '/includes/EchoDbFactory.php', 'MWEchoDbFactoryTest' => __DIR__ . '/tests/phpunit/EchoDbFactoryTest.php', 'MWEchoEmailBatch' => __DIR__ . '/includes/EmailBatch.php', diff --git a/includes/formatters/SpecialNotificationsFormatter.php b/includes/formatters/SpecialNotificationsFormatter.php index 967339ee5..7d4fe2c8d 100644 --- a/includes/formatters/SpecialNotificationsFormatter.php +++ b/includes/formatters/SpecialNotificationsFormatter.php @@ -8,7 +8,7 @@ */ class SpecialNotificationsFormatter extends EchoEventFormatter { protected function formatModel( EchoEventPresentationModel $model ) { - $markReadSpecialPage = SpecialPage::getTitleFor( 'NotificationsMarkRead' ); + $markReadSpecialPage = new SpecialNotificationsMarkRead(); $id = $model->getEventId(); $icon = Html::element( @@ -20,14 +20,25 @@ class SpecialNotificationsFormatter extends EchoEventFormatter { ); OutputPage::setupOOUI(); - $markAsReadButton = new OOUI\ButtonWidget( array( + + $markAsReadIcon = new OOUI\IconWidget( array( 'icon' => 'close', - 'framed' => false, - 'href' => $markReadSpecialPage->getLocalUrl() . '/' . $id, - 'classes' => array( 'mw-echo-markAsReadButton' ), - 'title' => wfMessage( 'echo-notification-markasread' ) + 'title' => wfMessage( 'echo-notification-markasread' ), ) ); + $markAsReadForm = $markReadSpecialPage->getMinimalForm( + $id, + $this->msg( 'echo-notification-markasread' )->text(), + false, + $markAsReadIcon->toString() + ); + + $markAsReadButton = Html::rawElement( + 'div', + array( 'class' => 'mw-echo-markAsReadButton' ), + $markAsReadForm->prepareForm()->getHTML( /* First submission attempt */ false ) + ); + $html = Xml::tags( 'div', array( 'class' => 'mw-echo-title' ), diff --git a/includes/ooui/LabelIconWidget.php b/includes/ooui/LabelIconWidget.php new file mode 100644 index 000000000..0e4ef0ed9 --- /dev/null +++ b/includes/ooui/LabelIconWidget.php @@ -0,0 +1,44 @@ +tableRow = new Tag( 'div' ); + $this->tableRow->setAttributes( array( + 'class' => 'oo-ui-labelIconWidget-row', + ) ); + + $this->icon = new Tag( 'div' ); + $this->label = new Tag( 'div' ); + + $this->initializeIconElement( array_merge( $config, [ 'iconElement' => $this->icon ] ) ); + $this->initializeLabelElement( array_merge( $config, [ 'labelElement' => $this->label ] ) ); + $this->initializeTitledElement( $config ); + + $this->addClasses( [ 'oo-ui-labelIconWidget' ] ); + $this->tableRow->appendContent( $this->icon, $this->label ); + $this->appendContent( $this->tableRow ); + } +} diff --git a/includes/special/SpecialNotifications.php b/includes/special/SpecialNotifications.php index 9dce7f935..432306aa7 100644 --- a/includes/special/SpecialNotifications.php +++ b/includes/special/SpecialNotifications.php @@ -102,18 +102,35 @@ class SpecialNotifications extends SpecialPage { // Build the HTML $notices = ''; - $markReadSpecialPage = SpecialPage::getTitleFor( 'NotificationsMarkRead' ); + $markReadSpecialPage = new SpecialNotificationsMarkRead(); foreach ( $notifArray as $section => $data ) { - $sectionTitle = Html::element( 'span', array( 'class' => 'mw-echo-date-section-text' ), $section ); + $dateSectionText = Html::element( 'span', array( 'class' => 'mw-echo-date-section-text' ), $section ); + $sectionTitle = $dateSectionText; if ( count( $data[ 'unread' ] ) > 0 ) { - // There are unread notices. Add the 'mark section as read' button - $markSectionAsReadButton = new OOUI\ButtonWidget( array( - 'label' => $this->msg( 'echo-specialpage-section-markread' )->text(), - 'href' => $markReadSpecialPage->getLocalURL() . '/' . join( ',', $data[ 'unread' ] ), - 'classes' => array( 'mw-echo-markAsReadSectionButton' ), + $markReadSectionText = $this->msg( 'echo-specialpage-section-markread' )->text(); + + $markAsReadLabelIcon = new EchoOOUI\LabelIconWidget( array( + 'label' => $markReadSectionText, 'icon' => 'doubleCheck', ) ); - $sectionTitle .= $markSectionAsReadButton; + + // There are unread notices. Add the 'mark section as read' button + $markSectionAsReadForm = $markReadSpecialPage->getMinimalForm( + $data[ 'unread' ], + $markReadSectionText, + true, + $markAsReadLabelIcon->toString() + ); + + $formHtml = $markSectionAsReadForm->prepareForm()->getHTML( /* First submission attempt */ false ); + $formWrapper = Html::rawElement( + 'div', + array( + 'class' => 'mw-echo-markAsReadSectionButton', + ), + $formHtml + ); + $sectionTitle .= $formWrapper; } // Heading diff --git a/includes/special/SpecialNotificationsMarkRead.php b/includes/special/SpecialNotificationsMarkRead.php index de64e3a74..f493b82e2 100644 --- a/includes/special/SpecialNotificationsMarkRead.php +++ b/includes/special/SpecialNotificationsMarkRead.php @@ -1,5 +1,13 @@ setParameter( $idString ); + + $form = HTMLForm::factory( + $this->getDisplayFormat(), + $this->getFormFields(), + $this->getContext(), + $this->getMessagePrefix() + ); + + // HTMLForm assumes that the main submit button is always 'primary', + // which means it is colored. Since this form is being embedded multiple + // places on the page, it has to be neutral, so we make the button + // manually. + $form->suppressDefaultSubmit(); + + $form->setAction( $this->getPageTitle()->getLocalURL() ); + + $form->addButton( array( + 'name' => 'submit', + 'value' => $submitButtonValue, + 'label-raw' => $submitLabelHtml, + 'framed' => $framed, + ) ); + + return $form; + } + + /** + * Sets a custom label + * + * This is only called when the form is actually visited directly, which is not the + * main intended use. + */ protected function alterForm( HTMLForm $form ) { - $form->setSubmitText( $this->msg( 'echo-notification-markasread' ) ); + $form->setSubmitText( $this->msg( 'echo-notification-markasread' )->text() ); } /** diff --git a/modules/nojs/mw.echo.special.less b/modules/nojs/mw.echo.special.less index f954acbba..e5e8f51c8 100644 --- a/modules/nojs/mw.echo.special.less +++ b/modules/nojs/mw.echo.special.less @@ -59,10 +59,15 @@ text-transform: uppercase; font-size: 1.1em; font-weight: 800; + display: inline-block; } ul.mw-echo-special-notifications { max-width: 600px; + + div.mw-htmlform-submit-buttons { + margin: 0; + } list-style: none none; padding: 0; margin: 0; @@ -84,11 +89,20 @@ ul.mw-echo-special-notifications { .mw-echo-markAsReadButton { display: none; + + button { + padding: 0; + } } } .mw-echo-markAsReadSectionButton { float: right; + display: inline-block; + + button.oo-ui-buttonElement-button { + padding: 2px 12px 2px 12px; + } // HACK: temporary workaround for T136024 line-height: normal; @@ -124,7 +138,7 @@ ul.mw-echo-special-notifications { .mw-echo-markAsReadButton { float: right; display: inline-block; - margin-left: 1em; + margin: 0; opacity: 0.5; &:hover { @@ -134,3 +148,7 @@ ul.mw-echo-special-notifications { } } } + +div.mw-htmlform-ooui-wrapper { + margin: 0; +} diff --git a/modules/styles/LabelIconWidget.less b/modules/styles/LabelIconWidget.less new file mode 100644 index 000000000..9aec81f57 --- /dev/null +++ b/modules/styles/LabelIconWidget.less @@ -0,0 +1,13 @@ +.oo-ui-labelIconWidget { + display: table; +} + +.oo-ui-labelIconWidget-row { + display: table-row; + + .oo-ui-iconElement-icon, + .oo-ui-labelElement-label { + display: table-cell; + vertical-align: middle; + } +}