Major timeline redesign

Summary: OMG We Have TOKENS

Test Plan: TOKENS, also UIExamples

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin, chad

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

resources/celerity/map.php

@@ -148,7 +148,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '2f562399',
     'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
-    'rsrc/css/phui/phui-timeline-view.css' => 'cd93f227',
+    'rsrc/css/phui/phui-timeline-view.css' => '23d72d35',
     'rsrc/css/phui/phui-workboard-view.css' => 'bf70dd2e',
     'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
     'rsrc/css/sprite-actions.css' => '969ad0e5',
@@ -764,7 +764,7 @@ return array(
     'phui-status-list-view-css' => '2f562399',
     'phui-tag-view-css' => '295d81c4',
     'phui-text-css' => '23e9b4b7',
-    'phui-timeline-view-css' => 'cd93f227',
+    'phui-timeline-view-css' => '23d72d35',
     'phui-workboard-view-css' => 'bf70dd2e',
     'phui-workpanel-view-css' => '97b69459',
     'policy-css' => '957ea14c',

src/applications/uiexample/examples/PHUITimelineExample.php

@@ -29,17 +29,27 @@ final class PHUITimelineExample extends PhabricatorUIExample {
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
+      ->setIcon('love')
       ->setTitle('A minor event.');
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
+      ->setIcon('comment')
       ->appendChild('A major event with no title.');
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
+      ->setIcon('dislike')
       ->setTitle('Another minor event.');
 
     $events[] = id(new PHUITimelineEventView())
+      ->setIcon('like')
+      ->setToken('medal-1')
+      ->setUserHandle($handle);
+
+    $events[] = id(new PHUITimelineEventView())
+      ->setIcon('dislike')
+      ->setToken('medal-1', true)
       ->setUserHandle($handle);
 
     $events[] = id(new PHUITimelineEventView())
@@ -51,30 +61,39 @@ final class PHUITimelineExample extends PhabricatorUIExample {
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
+      ->setIcon('love')
+      ->setTitle('Minor Red Event')
+      ->setColor(PhabricatorTransactions::COLOR_RED);
+
+    $events[] = id(new PHUITimelineEventView())
+      ->setIcon('like')
+      ->setUserHandle($handle)
+      ->setTitle('Minor Not-Red Event')
+      ->setColor(PhabricatorTransactions::COLOR_GREEN);
+
+    $events[] = id(new PHUITimelineEventView())
+      ->setUserHandle($handle)
+      ->setIcon('love')
       ->setTitle('Minor Red Event')
       ->setColor(PhabricatorTransactions::COLOR_RED);
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
-      ->setTitle('Minor Not-Red Event');
-
-    $events[] = id(new PHUITimelineEventView())
-      ->setUserHandle($handle)
-      ->setTitle('Minor Red Event')
-      ->setColor(PhabricatorTransactions::COLOR_RED);
-
-    $events[] = id(new PHUITimelineEventView())
-      ->setUserHandle($handle)
-      ->setTitle('Minor Not-Red Event');
+      ->setIcon('dislike')
+      ->setTitle('Minor Not-Red Event')
+      ->setColor(PhabricatorTransactions::COLOR_BLACK);
+
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
+      ->setIcon('tag')
       ->setTitle('Major Green Event')
       ->appendChild('This event is green!')
       ->setColor(PhabricatorTransactions::COLOR_GREEN);
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
+      ->setIcon('tag')
       ->setTitle(str_repeat('Long Text Title ', 64))
       ->appendChild(str_repeat('Long Text Body ', 64))
       ->setColor(PhabricatorTransactions::COLOR_ORANGE);

src/view/phui/PHUITimelineEventView.php

@@ -16,6 +16,8 @@ final class PHUITimelineEventView extends AphrontView {
   private $isPreview;
   private $eventGroup = array();
   private $hideByDefault;
+  private $token;
+  private $tokenRemoved;
 
   public function setHideByDefault($hide_by_default) {
     $this->hideByDefault = $hide_by_default;
@@ -114,6 +116,12 @@ final class PHUITimelineEventView extends AphrontView {
     return $this;
   }
 
+  public function setToken($token, $removed=false) {
+    $this->token = $token;
+    $this->tokenRemoved = $removed;
+    return $this;
+  }
+
   public function getEventGroup() {
     return array_merge(array($this), $this->eventGroup);
   }
@@ -178,12 +186,23 @@ final class PHUITimelineEventView extends AphrontView {
             ''));
       }
 
+      $token = null;
+      if ($this->token) {
+        $token = id(new PHUIIconView())
+          ->addClass('phui-timeline-token')
+          ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
+          ->setSpriteIcon($this->token);
+        if ($this->tokenRemoved) {
+          $token->addClass('strikethrough');
+        }
+      }
+
       $title = phutil_tag(
         'div',
         array(
           'class' => implode(' ', $title_classes),
         ),
-        array($icon, $title, $extra));
+        array($icon, $token, $title, $extra));
     }
 
     return $title;

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -61,7 +61,7 @@
 }
 
 .phui-timeline-title {
-  line-height: 18px;
+  line-height: 17px;
   min-height: 18px;
   position: relative;
   color: {$bluetext};
@@ -125,6 +125,30 @@
   padding-left: 38px;
 }
 
+.phui-timeline-token {
+  display: inline-block;
+}
+
+.phui-timeline-token.strikethrough {
+  position: relative;
+}
+
+.phui-timeline-token.strikethrough:before {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: 50%;
+  right: 0;
+  border-top: 3px solid;
+  border-color: {$darkbluetext};
+
+  -webkit-transform:rotate(-40deg);
+  -moz-transform:rotate(-40deg);
+  -ms-transform:rotate(-40deg);
+  -o-transform:rotate(-40deg);
+  transform:rotate(-40deg);
+}
+
 .phui-timeline-major-event .phui-timeline-content
   .phui-timeline-core-content {
   padding: 16px 12px;