Mobile Notifications

Summary: Touch up /notifications/ for desktop and mobile

Test Plan: Tested read and unread notifications on mobile and desktop

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

Differential Revision: https://secure.phabricator.com/D7671

src/__celerity_resource_map__.php

@@ -3419,7 +3419,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-notification-menu-css' =>
   array(
-    'uri' => '/res/c6b17cfb/rsrc/css/application/base/notification-menu.css',
+    'uri' => '/res/48b02e64/rsrc/css/application/base/notification-menu.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4343,7 +4343,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '49232ec3' =>
+    'ea1ae5d8' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4392,7 +4392,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/49232ec3/core.pkg.css',
+      'uri' => '/res/pkg/ea1ae5d8/core.pkg.css',
       'type' => 'css',
     ),
     '2c1dba03' =>
@@ -4584,15 +4584,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => '49232ec3',
+    'aphront-dialog-view-css' => 'ea1ae5d8',
-    'aphront-error-view-css' => '49232ec3',
+    'aphront-error-view-css' => 'ea1ae5d8',
-    'aphront-list-filter-view-css' => '49232ec3',
+    'aphront-list-filter-view-css' => 'ea1ae5d8',
-    'aphront-pager-view-css' => '49232ec3',
+    'aphront-pager-view-css' => 'ea1ae5d8',
-    'aphront-panel-view-css' => '49232ec3',
+    'aphront-panel-view-css' => 'ea1ae5d8',
-    'aphront-table-view-css' => '49232ec3',
+    'aphront-table-view-css' => 'ea1ae5d8',
-    'aphront-tokenizer-control-css' => '49232ec3',
+    'aphront-tokenizer-control-css' => 'ea1ae5d8',
-    'aphront-tooltip-css' => '49232ec3',
+    'aphront-tooltip-css' => 'ea1ae5d8',
-    'aphront-typeahead-control-css' => '49232ec3',
+    'aphront-typeahead-control-css' => 'ea1ae5d8',
     'differential-changeset-view-css' => '67248472',
     'differential-core-view-css' => '67248472',
     'differential-inline-comment-editor' => '92f459f0',
@@ -4606,7 +4606,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '67248472',
     'diffusion-commit-view-css' => '7aa115b4',
     'diffusion-icons-css' => '7aa115b4',
-    'global-drag-and-drop-css' => '49232ec3',
+    'global-drag-and-drop-css' => 'ea1ae5d8',
     'inline-comment-summary-css' => '67248472',
     'javelin-aphlict' => '2c1dba03',
     'javelin-behavior' => '3e3be199',
@@ -4681,56 +4681,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '3e3be199',
     'javelin-vector' => '3e3be199',
     'javelin-workflow' => '3e3be199',
-    'lightbox-attachment-css' => '49232ec3',
+    'lightbox-attachment-css' => 'ea1ae5d8',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => '49232ec3',
+    'phabricator-action-list-view-css' => 'ea1ae5d8',
-    'phabricator-application-launch-view-css' => '49232ec3',
+    'phabricator-application-launch-view-css' => 'ea1ae5d8',
     'phabricator-busy' => '2c1dba03',
     'phabricator-content-source-view-css' => '67248472',
-    'phabricator-core-css' => '49232ec3',
+    'phabricator-core-css' => 'ea1ae5d8',
-    'phabricator-crumbs-view-css' => '49232ec3',
+    'phabricator-crumbs-view-css' => 'ea1ae5d8',
     'phabricator-drag-and-drop-file-upload' => '92f459f0',
     'phabricator-dropdown-menu' => '2c1dba03',
     'phabricator-file-upload' => '2c1dba03',
-    'phabricator-filetree-view-css' => '49232ec3',
+    'phabricator-filetree-view-css' => 'ea1ae5d8',
-    'phabricator-flag-css' => '49232ec3',
+    'phabricator-flag-css' => 'ea1ae5d8',
     'phabricator-hovercard' => '2c1dba03',
-    'phabricator-jump-nav' => '49232ec3',
+    'phabricator-jump-nav' => 'ea1ae5d8',
     'phabricator-keyboard-shortcut' => '2c1dba03',
     'phabricator-keyboard-shortcut-manager' => '2c1dba03',
-    'phabricator-main-menu-view' => '49232ec3',
+    'phabricator-main-menu-view' => 'ea1ae5d8',
     'phabricator-menu-item' => '2c1dba03',
-    'phabricator-nav-view-css' => '49232ec3',
+    'phabricator-nav-view-css' => 'ea1ae5d8',
     'phabricator-notification' => '2c1dba03',
-    'phabricator-notification-css' => '49232ec3',
+    'phabricator-notification-css' => 'ea1ae5d8',
-    'phabricator-notification-menu-css' => '49232ec3',
+    'phabricator-notification-menu-css' => 'ea1ae5d8',
     'phabricator-object-selector-css' => '67248472',
     'phabricator-phtize' => '2c1dba03',
     'phabricator-prefab' => '2c1dba03',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-remarkup-css' => '49232ec3',
+    'phabricator-remarkup-css' => 'ea1ae5d8',
     'phabricator-shaped-request' => '92f459f0',
-    'phabricator-side-menu-view-css' => '49232ec3',
+    'phabricator-side-menu-view-css' => 'ea1ae5d8',
-    'phabricator-standard-page-view' => '49232ec3',
+    'phabricator-standard-page-view' => 'ea1ae5d8',
-    'phabricator-tag-view-css' => '49232ec3',
+    'phabricator-tag-view-css' => 'ea1ae5d8',
     'phabricator-textareautils' => '2c1dba03',
     'phabricator-tooltip' => '2c1dba03',
-    'phabricator-transaction-view-css' => '49232ec3',
+    'phabricator-transaction-view-css' => 'ea1ae5d8',
-    'phabricator-zindex-css' => '49232ec3',
+    'phabricator-zindex-css' => 'ea1ae5d8',
-    'phui-button-css' => '49232ec3',
+    'phui-button-css' => 'ea1ae5d8',
-    'phui-form-css' => '49232ec3',
+    'phui-form-css' => 'ea1ae5d8',
-    'phui-form-view-css' => '49232ec3',
+    'phui-form-view-css' => 'ea1ae5d8',
-    'phui-header-view-css' => '49232ec3',
+    'phui-header-view-css' => 'ea1ae5d8',
-    'phui-icon-view-css' => '49232ec3',
+    'phui-icon-view-css' => 'ea1ae5d8',
-    'phui-list-view-css' => '49232ec3',
+    'phui-list-view-css' => 'ea1ae5d8',
-    'phui-object-item-list-view-css' => '49232ec3',
+    'phui-object-item-list-view-css' => 'ea1ae5d8',
-    'phui-property-list-view-css' => '49232ec3',
+    'phui-property-list-view-css' => 'ea1ae5d8',
-    'phui-spacing-css' => '49232ec3',
+    'phui-spacing-css' => 'ea1ae5d8',
-    'sprite-apps-large-css' => '49232ec3',
+    'sprite-apps-large-css' => 'ea1ae5d8',
-    'sprite-gradient-css' => '49232ec3',
+    'sprite-gradient-css' => 'ea1ae5d8',
-    'sprite-icons-css' => '49232ec3',
+    'sprite-icons-css' => 'ea1ae5d8',
-    'sprite-menu-css' => '49232ec3',
+    'sprite-menu-css' => 'ea1ae5d8',
-    'sprite-status-css' => '49232ec3',
+    'sprite-status-css' => 'ea1ae5d8',
-    'syntax-highlighting-css' => '49232ec3',
+    'syntax-highlighting-css' => 'ea1ae5d8',
   ),
 ));

src/applications/notification/controller/PhabricatorNotificationClearController.php

@@ -38,7 +38,7 @@ final class PhabricatorNotificationClearController
     }
 
     $dialog->addCancelButton('/notification/');
-    $dialog->addSubmitButton('Mark All Read');
+    $dialog->addSubmitButton(pht('Mark All Read'));
 
     return id(new AphrontDialogResponse())->setDialog($dialog);
   }

src/applications/notification/controller/PhabricatorNotificationController.php

@@ -7,7 +7,7 @@ abstract class PhabricatorNotificationController
 
     $page = $this->buildStandardPageView();
 
-    $page->setApplicationName('Notification');
+    $page->setApplicationName(pht('Notification'));
     $page->setBaseURI('/notification/');
     $page->setTitle(idx($data, 'title'));
     $page->setGlyph('!');

src/applications/notification/controller/PhabricatorNotificationListController.php

@@ -15,8 +15,8 @@ final class PhabricatorNotificationListController
 
     $nav = new AphrontSideNavFilterView();
     $nav->setBaseURI(new PhutilURI('/notification/'));
-    $nav->addFilter('all', 'All Notifications');
+    $nav->addFilter('all', pht('All Notifications'));
-    $nav->addFilter('unread', 'Unread Notifications');
+    $nav->addFilter('unread', pht('Unread Notifications'));
     $filter = $nav->selectFilter($this->filter, 'all');
 
     $pager = new AphrontPagerView();
@@ -50,29 +50,38 @@ final class PhabricatorNotificationListController
         $no_data);
     }
 
-    $view = phutil_tag_div('phabricator-notification-list', $view);
+    $view = id(new PHUIBoxView())
+      ->addPadding(PHUI::PADDING_MEDIUM)
+      ->addClass('phabricator-notification-list')
+      ->appendChild($view);
 
-    $panel = new AphrontPanelView();
+    $image = id(new PHUIIconView())
-    $panel->setHeader($header);
+        ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
+        ->setSpriteIcon('preview');
-    $panel->addButton(
+    $button = id(new PHUIButtonView())
-      javelin_tag(
+        ->setTag('a')
-        'a',
+        ->setColor(PHUIButtonView::SIMPLE)
-        array(
+        ->setHref('/notification/clear/')
-          'href'  => '/notification/clear/',
+        ->addSigil('workflow')
-          'class' => 'button',
+        ->setIcon($image)
-          'sigil' => 'workflow',
+        ->setText(pht('Mark All Read'));
-        ),
-        'Mark All Read'));
-    $panel->appendChild($view);
-    $panel->appendChild($pager);
 
-    $nav->appendChild($panel);
+    $notif_header = id(new PHUIHeaderView())
+      ->setHeader($header)
+      ->addActionLink($button);
 
-    return $this->buildStandardPageResponse(
+    $box = id(new PHUIObjectBoxView())
+      ->setHeader($notif_header)
+      ->appendChild($view);
+
+    $nav->appendChild($box);
+    $nav->appendChild($pager);
+
+    return $this->buildApplicationPage(
       $nav,
       array(
-        'title' => 'Notifications',
+        'title' => pht('Notifications'),
+        'device' => true,
       ));
   }
 

src/applications/notification/controller/PhabricatorNotificationPanelController.php

@@ -36,7 +36,7 @@ final class PhabricatorNotificationPanelController
         array(
           'href' => '/notification/',
         ),
-        'View All Notifications'));
+        pht('View All Notifications')));
 
     $unread_count = id(new PhabricatorFeedStoryNotification())
       ->countUnread($user);

src/view/phui/PHUIButtonView.php

@@ -18,12 +18,18 @@ final class PHUIButtonView extends AphrontTagView {
   private $tag = 'button';
   private $dropdown;
   private $icon;
+  private $href = null;
 
   public function setText($text) {
     $this->text = $text;
     return $this;
   }
 
+  public function setHref($href) {
+    $this->href = $href;
+    return $this;
+  }
+
   public function setSubtext($subtext) {
     $this->subtext = $subtext;
     return $this;
@@ -81,7 +87,8 @@ final class PHUIButtonView extends AphrontTagView {
       $classes[] = 'has-icon';
     }
 
-    return array('class' => $classes);
+    return array('class' => $classes,
+                  'href' => $this->href);
   }
 
   protected function getTagContent() {

webroot/rsrc/css/application/base/notification-menu.css

@@ -38,6 +38,9 @@
 
 .phabricator-notification {
   padding: 6px;
+}
+
+.phabricator-notification-menu .phabricator-notification {
   cursor: pointer;
 }
 
@@ -53,10 +56,6 @@
   color: {$lightgreytext};
 }
 
-.phabricator-notification-list {
-  font-size: 11px;
-}
-
 .phabricator-notification-list .phabricator-notification-unread,
 .phabricator-notification-menu .phabricator-notification-unread {
   background: #eceff5;