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
2013-12-03 11:58:10 -08:00 · 2013-12-03 11:58:10 -08:00 · b2debb14c7
parent addd0bbf3b
commit b2debb14c7
7 changed files with 89 additions and 74 deletions
--- a/src/__celerity_resource_map__.php
+++ b/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-error-view-css' => '49232ec3',
-    'aphront-list-filter-view-css' => '49232ec3',
-    'aphront-pager-view-css' => '49232ec3',
-    'aphront-panel-view-css' => '49232ec3',
-    'aphront-table-view-css' => '49232ec3',
-    'aphront-tokenizer-control-css' => '49232ec3',
-    'aphront-tooltip-css' => '49232ec3',
-    'aphront-typeahead-control-css' => '49232ec3',
+    'aphront-dialog-view-css' => 'ea1ae5d8',
+    'aphront-error-view-css' => 'ea1ae5d8',
+    'aphront-list-filter-view-css' => 'ea1ae5d8',
+    'aphront-pager-view-css' => 'ea1ae5d8',
+    'aphront-panel-view-css' => 'ea1ae5d8',
+    'aphront-table-view-css' => 'ea1ae5d8',
+    'aphront-tokenizer-control-css' => 'ea1ae5d8',
+    'aphront-tooltip-css' => 'ea1ae5d8',
+    '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-application-launch-view-css' => '49232ec3',
+    'phabricator-action-list-view-css' => 'ea1ae5d8',
+    'phabricator-application-launch-view-css' => 'ea1ae5d8',
    'phabricator-busy' => '2c1dba03',
    'phabricator-content-source-view-css' => '67248472',
-    'phabricator-core-css' => '49232ec3',
-    'phabricator-crumbs-view-css' => '49232ec3',
+    'phabricator-core-css' => 'ea1ae5d8',
+    '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-flag-css' => '49232ec3',
+    'phabricator-filetree-view-css' => 'ea1ae5d8',
+    '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-menu-css' => '49232ec3',
+    'phabricator-notification-css' => 'ea1ae5d8',
+    '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-standard-page-view' => '49232ec3',
-    'phabricator-tag-view-css' => '49232ec3',
+    'phabricator-side-menu-view-css' => 'ea1ae5d8',
+    'phabricator-standard-page-view' => 'ea1ae5d8',
+    'phabricator-tag-view-css' => 'ea1ae5d8',
    'phabricator-textareautils' => '2c1dba03',
    'phabricator-tooltip' => '2c1dba03',
-    'phabricator-transaction-view-css' => '49232ec3',
-    'phabricator-zindex-css' => '49232ec3',
-    'phui-button-css' => '49232ec3',
-    'phui-form-css' => '49232ec3',
-    'phui-form-view-css' => '49232ec3',
-    'phui-header-view-css' => '49232ec3',
-    'phui-icon-view-css' => '49232ec3',
-    'phui-list-view-css' => '49232ec3',
-    'phui-object-item-list-view-css' => '49232ec3',
-    'phui-property-list-view-css' => '49232ec3',
-    'phui-spacing-css' => '49232ec3',
-    'sprite-apps-large-css' => '49232ec3',
-    'sprite-gradient-css' => '49232ec3',
-    'sprite-icons-css' => '49232ec3',
-    'sprite-menu-css' => '49232ec3',
-    'sprite-status-css' => '49232ec3',
-    'syntax-highlighting-css' => '49232ec3',
+    'phabricator-transaction-view-css' => 'ea1ae5d8',
+    'phabricator-zindex-css' => 'ea1ae5d8',
+    'phui-button-css' => 'ea1ae5d8',
+    'phui-form-css' => 'ea1ae5d8',
+    'phui-form-view-css' => 'ea1ae5d8',
+    'phui-header-view-css' => 'ea1ae5d8',
+    'phui-icon-view-css' => 'ea1ae5d8',
+    'phui-list-view-css' => 'ea1ae5d8',
+    'phui-object-item-list-view-css' => 'ea1ae5d8',
+    'phui-property-list-view-css' => 'ea1ae5d8',
+    'phui-spacing-css' => 'ea1ae5d8',
+    'sprite-apps-large-css' => 'ea1ae5d8',
+    'sprite-gradient-css' => 'ea1ae5d8',
+    'sprite-icons-css' => 'ea1ae5d8',
+    'sprite-menu-css' => 'ea1ae5d8',
+    'sprite-status-css' => 'ea1ae5d8',
+    'syntax-highlighting-css' => 'ea1ae5d8',
  ),
 ));
--- a/src/applications/notification/controller/PhabricatorNotificationClearController.php
+++ b/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);
  }
--- a/src/applications/notification/controller/PhabricatorNotificationController.php
+++ b/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('!');
--- a/src/applications/notification/controller/PhabricatorNotificationListController.php
+++ b/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('unread', 'Unread Notifications');
+    $nav->addFilter('all', pht('All 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();
-    $panel->setHeader($header);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
-    $panel->addButton(
-      javelin_tag(
-        'a',
-        array(
-          'href'  => '/notification/clear/',
-          'class' => 'button',
-          'sigil' => 'workflow',
-        ),
-        'Mark All Read'));
-    $panel->appendChild($view);
-    $panel->appendChild($pager);
+    $image = id(new PHUIIconView())
+        ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+        ->setSpriteIcon('preview');
+    $button = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setHref('/notification/clear/')
+        ->addSigil('workflow')
+        ->setIcon($image)
+        ->setText(pht('Mark All Read'));

-    $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,
      ));
  }

--- a/src/applications/notification/controller/PhabricatorNotificationPanelController.php
+++ b/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);
--- a/src/view/phui/PHUIButtonView.php
+++ b/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() {
--- a/webroot/rsrc/css/application/base/notification-menu.css
+++ b/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;