Build PhabricatorTagView

Summary:
Builds out most of the non-hover-stuff from `overview-hovercards.png`. Things I didn't build:

  - Tokens (I like them a lot but don't want to scope creep)
  - Functions (backend mess / future work)
  - Icons for tags.
  - Tags with pointy ends and holes in them (an earlier mock had this I think but they're gone on final)
  - The cyaney color for "Sporadic" since I just noticed it while typing this up.

Test Plan: Looked at UIExample page.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2089

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

src/__celerity_resource_map__.php

@@ -2810,6 +2810,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/base/standard-page-view.css',
   ),
+  'phabricator-tag-view-css' =>
+  array(
+    'uri' => '/res/e10bf844/rsrc/css/layout/phabricator-tag-view.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/layout/phabricator-tag-view.css',
+  ),
   'phabricator-textareautils' =>
   array(
     'uri' => '/res/703614ea/rsrc/js/application/core/TextAreaUtils.js',

src/__phutil_library_map__.php

@@ -1107,6 +1107,8 @@ phutil_register_library_map(array(
     'PhabricatorSubscriptionsUIEventListener' => 'applications/subscriptions/events/PhabricatorSubscriptionsUIEventListener.php',
     'PhabricatorSymbolNameLinter' => 'infrastructure/lint/hook/PhabricatorSymbolNameLinter.php',
     'PhabricatorSyntaxHighlighter' => 'infrastructure/markup/PhabricatorSyntaxHighlighter.php',
+    'PhabricatorTagExample' => 'applications/uiexample/examples/PhabricatorTagExample.php',
+    'PhabricatorTagView' => 'view/layout/PhabricatorTagView.php',
     'PhabricatorTaskmasterDaemon' => 'infrastructure/daemon/workers/PhabricatorTaskmasterDaemon.php',
     'PhabricatorTestCase' => 'infrastructure/testing/PhabricatorTestCase.php',
     'PhabricatorTestWorker' => 'infrastructure/daemon/workers/__tests__/PhabricatorTestWorker.php',
@@ -2297,6 +2299,8 @@ phutil_register_library_map(array(
     'PhabricatorSubscriptionsEditor' => 'PhabricatorEditor',
     'PhabricatorSubscriptionsUIEventListener' => 'PhutilEventListener',
     'PhabricatorSymbolNameLinter' => 'ArcanistXHPASTLintNamingHook',
+    'PhabricatorTagExample' => 'PhabricatorUIExample',
+    'PhabricatorTagView' => 'AphrontView',
     'PhabricatorTaskmasterDaemon' => 'PhabricatorDaemon',
     'PhabricatorTestCase' => 'ArcanistPhutilTestCase',
     'PhabricatorTestWorker' => 'PhabricatorWorker',

src/applications/uiexample/examples/PhabricatorTagExample.php

@@ -0,0 +1,125 @@
+<?php
+
+final class PhabricatorTagExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Tags';
+  }
+
+  public function getDescription() {
+    return 'Use <tt>PhabricatorTagView</tt> to render various tags.';
+  }
+
+  public function renderExample() {
+    $tags = array();
+
+    $tags[] = 'Hey, ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_PERSON)
+      ->setName('@alincoln')
+      ->setHref('#');
+    $tags[] = ' how is stuff?';
+    $tags[] = '<br /><br />';
+
+
+    $tags[] = 'Did you hear that ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_PERSON)
+      ->setName('@gwashington')
+      ->setDotColor(PhabricatorTagView::COLOR_RED)
+      ->setHref('#');
+    $tags[] = ' is away, ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_PERSON)
+      ->setName('@tjefferson')
+      ->setDotColor(PhabricatorTagView::COLOR_ORANGE)
+      ->setHref('#');
+    $tags[] = ' has some errands, and ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_PERSON)
+      ->setName('@rreagan')
+      ->setDotColor(PhabricatorTagView::COLOR_GREY)
+      ->setHref('#');
+    $tags[] = ' is gone?';
+    $tags[] = '<br /><br />';
+
+    $tags[] = 'Take a look at ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_OBJECT)
+      ->setName('D123')
+      ->setHref('#');
+    $tags[] = ' when you get a chance.';
+    $tags[] = '<br /><br />';
+
+    $tags[] = 'Hmm? ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_OBJECT)
+      ->setName('D123')
+      ->setClosed(true)
+      ->setHref('#');
+    $tags[] = ' is ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK)
+      ->setName('Abandoned');
+    $tags[] = '.';
+    $tags[] = '<br /><br />';
+
+    $tags[] = 'I hope someone is going to ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_OBJECT)
+      ->setName('T123: Water The Dog')
+      ->setBarColor(PhabricatorTagView::COLOR_REDORANGE)
+      ->setHref('#');
+    $tags[] = ' -- that task is ';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_REDORANGE)
+      ->setName('High Priority');
+    $tags[] = '!';
+    $tags[] = '<br /><br />';
+
+
+    $tags[] = id(new PhabricatorHeaderView())
+      ->setHeader('Colors');
+
+    $colors = PhabricatorTagView::getColors();
+    foreach ($colors as $color) {
+      $tags[] = id(new PhabricatorTagView())
+        ->setType(PhabricatorTagView::TYPE_STATE)
+        ->setBackgroundColor($color)
+        ->setName(ucwords($color));
+      $tags[] = '<br /><br />';
+    }
+
+    $tags[] = id(new PhabricatorHeaderView())
+      ->setHeader('Holidays?');
+
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_GREEN)
+      ->setDotColor(PhabricatorTagView::COLOR_RED)
+      ->setBarColor(PhabricatorTagView::COLOR_RED)
+      ->setName('Christmas');
+    $tags[] = '<br /><br />';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_OBJECT)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_ORANGE)
+      ->setDotColor(PhabricatorTagView::COLOR_BLACK)
+      ->setBarColor(PhabricatorTagView::COLOR_BLACK)
+      ->setName('Halloween');
+    $tags[] = '<br /><br />';
+    $tags[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_MAGENTA)
+      ->setDotColor(PhabricatorTagView::COLOR_YELLOW)
+      ->setBarColor(PhabricatorTagView::COLOR_BLUE)
+      ->setName('Easter');
+
+    return array(
+      '<div style="padding: 1em 2em;">',
+      $tags,
+      '</div>',
+    );
+  }
+}

src/view/layout/PhabricatorTagView.php

@@ -0,0 +1,183 @@
+<?php
+
+/*
+ * Copyright 2012 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+final class PhabricatorTagView extends AphrontView {
+
+  const TYPE_PERSON         = 'person';
+  const TYPE_OBJECT         = 'object';
+  const TYPE_STATE          = 'state';
+
+  const COLOR_RED           = 'red';
+  const COLOR_REDORANGE     = 'redorange';
+  const COLOR_ORANGE        = 'orange';
+  const COLOR_YELLOW        = 'yellow';
+  const COLOR_BLUE          = 'blue';
+  const COLOR_MAGENTA       = 'magenta';
+  const COLOR_GREEN         = 'green';
+  const COLOR_BLACK         = 'black';
+  const COLOR_GREY          = 'grey';
+  const COLOR_WHITE         = 'white';
+
+  const COLOR_OBJECT        = 'object';
+  const COLOR_PERSON        = 'person';
+
+  private $type;
+  private $href;
+  private $name;
+  private $phid;
+  private $backgroundColor;
+  private $dotColor;
+  private $barColor;
+  private $closed;
+
+  public function setType($type) {
+    $this->type = $type;
+    switch ($type) {
+      case self::TYPE_OBJECT:
+        $this->setBackgroundColor(self::COLOR_OBJECT);
+        break;
+      case self::TYPE_PERSON:
+        $this->setBackgroundColor(self::COLOR_PERSON);
+        break;
+    }
+    return $this;
+  }
+
+  public function setBarColor($bar_color) {
+    $this->barColor = $bar_color;
+    return $this;
+  }
+
+  public function setDotColor($dot_color) {
+    $this->dotColor = $dot_color;
+    return $this;
+  }
+
+  public function setBackgroundColor($background_color) {
+    $this->backgroundColor = $background_color;
+    return $this;
+  }
+
+  public function setPHID($phid) {
+    $this->phid = $phid;
+    return $this;
+  }
+
+  public function setName($name) {
+    $this->name = $name;
+    return $this;
+  }
+
+  public function setHref($href) {
+    $this->href = $href;
+    return $this;
+  }
+
+  public function setClosed($closed) {
+    $this->closed = $closed;
+    return $this;
+  }
+
+  public function render() {
+    if (!$this->type) {
+      throw new Exception("You must call setType() before render()!");
+    }
+
+    require_celerity_resource('phabricator-tag-view-css');
+    $classes = array(
+      'phabricator-tag-view',
+      'phabricator-tag-type-'.$this->type,
+    );
+
+    if ($this->closed) {
+      $classes[] = 'phabricator-tag-state-closed';
+    }
+
+    $color = null;
+    if ($this->backgroundColor) {
+      $color = 'phabricator-tag-color-'.$this->backgroundColor;
+    }
+
+    if ($this->dotColor) {
+      $dotcolor = 'phabricator-tag-color-'.$this->dotColor;
+      $dot = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-tag-dot '.$dotcolor,
+        ),
+        '');
+    } else {
+      $dot = null;
+    }
+
+    $content = phutil_render_tag(
+      'span',
+      array(
+        'class' => 'phabricator-tag-core '.$color,
+      ),
+      $dot.phutil_escape_html($this->name));
+
+    if ($this->barColor) {
+      $barcolor = 'phabricator-tag-color-'.$this->barColor;
+      $bar = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-tag-bar '.$barcolor,
+        ),
+        '');
+      $classes[] = 'phabricator-tag-view-has-bar';
+    } else {
+      $bar = null;
+    }
+
+    return phutil_render_tag(
+      $this->href ? 'a' : 'span',
+      array(
+        'href'  => $this->href,
+        'class' => implode(' ', $classes),
+      ),
+      $bar.$content);
+  }
+
+  public static function getTagTypes() {
+    return array(
+      self::TYPE_PERSON,
+      self::TYPE_OBJECT,
+      self::TYPE_STATE,
+    );
+  }
+
+  public static function getColors() {
+    return array(
+      self::COLOR_RED,
+      self::COLOR_REDORANGE,
+      self::COLOR_ORANGE,
+      self::COLOR_YELLOW,
+      self::COLOR_BLUE,
+      self::COLOR_MAGENTA,
+      self::COLOR_GREEN,
+      self::COLOR_BLACK,
+      self::COLOR_GREY,
+      self::COLOR_WHITE,
+
+      self::COLOR_OBJECT,
+      self::COLOR_PERSON,
+    );
+  }
+
+}

webroot/rsrc/css/layout/phabricator-tag-view.css

@@ -0,0 +1,135 @@
+/**
+ * @provides phabricator-tag-view-css
+ */
+
+.phabricator-tag-view {
+  font-weight: bold;
+  text-decoration: none;
+  display: inline-block;
+}
+
+a.phabricator-tag-view:hover {
+  text-decoration: none;
+}
+
+.phabricator-tag-state-closed .phabricator-tag-core {
+  text-decoration: line-through;
+}
+
+.phabricator-tag-core {
+  color: inherit;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 0 4px;
+}
+
+.phabricator-tag-view-has-bar .phabricator-tag-core {
+  border-radius: 0 3px 3px 0;
+  border-width: 1px 1px 1px 0;
+}
+
+.phabricator-tag-dot {
+  position: relative;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 3px;
+  top: -1px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.phabricator-tag-type-state {
+  color: #ffffff;
+  text-shadow: rgba(0, 0, 0, 0.40) 0px -1px 1px;
+}
+
+.phabricator-tag-type-object,
+a.phabricator-tag-type-object,
+a.phabricator-tag-type-object:link {
+  color: #000000;
+}
+
+.phabricator-tag-type-person {
+  white-space: nowrap;
+  color: #19558d;
+}
+
+.phabricator-tag-color-red {
+  background-color: #e12320;
+  border-color: #e12320;
+}
+
+.phabricator-tag-color-redorange {
+  background-color: #ff6604;
+  border-color: #ff6604;
+}
+
+.phabricator-tag-color-orange {
+  background-color: #fa9400;
+  border-color: #fa9400;
+}
+
+.phabricator-tag-color-yellow {
+  background-color: #f2ed5b;
+  border-color: #f2ed5b;
+}
+
+.phabricator-tag-color-blue {
+  background-color: #0573d2;
+  border-color: #0573d2;
+}
+
+.phabricator-tag-color-magenta {
+  background-color: #ce00ce;
+  border-color: #ce00ce;
+}
+
+.phabricator-tag-color-green {
+  background-color: #438944;
+  border-color: #438944;
+}
+
+.phabricator-tag-color-black {
+  background-color: #333333;
+  border-color: #333333;
+}
+
+.phabricator-tag-color-grey {
+  background-color: #888888;
+  border-color: #888888;
+}
+
+.phabricator-tag-color-white {
+  background-color: #ffffff;
+  border-color: #ffffff;
+}
+
+.phabricator-tag-color-object {
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+
+.phabricator-tag-color-person {
+  background-color: #f1f7ff;
+  border-color: #f1f7ff;
+}
+
+a.phabricator-tag-view:hover
+  .phabricator-tag-core.phabricator-tag-color-person {
+  border-color: #d9ebfd;
+}
+
+a.phabricator-tag-view:hover
+  .phabricator-tag-core.phabricator-tag-color-object {
+  border-color: #d7d7d7;
+}
+
+.phabricator-tag-bar {
+  padding-left: 4px;
+  border-width: 1px;
+  border-style: solid;
+  border-right-color: rgba(0, 0, 0, 0.33);
+  border-radius: 2px 0 0 2px;
+}