PHUI Text View

Summary: Adds basic colors and text styles for shorthand use.

Test Plan: UIExamples

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -3616,6 +3616,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-icon.css',
   ),
+  'phui-text-css' =>
+  array(
+    'uri' => '/res/ca884ca6/rsrc/css/phui/phui-text.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-text.css',
+  ),
   'ponder-comment-table-css' =>
   array(
     'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css',

src/__phutil_library_map__.php

@@ -669,6 +669,8 @@ phutil_register_library_map(array(
     'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
     'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
     'PHUIIconView' => 'view/phui/PHUIIconView.php',
+    'PHUITextExample' => 'applications/uiexample/examples/PHUITextExample.php',
+    'PHUITextView' => 'view/phui/PHUITextView.php',
     'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
     'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php',
     'PackageMail' => 'applications/owners/mail/PackageMail.php',
@@ -2375,6 +2377,8 @@ phutil_register_library_map(array(
     'PHUIFeedStoryView' => 'AphrontView',
     'PHUIIconExample' => 'PhabricatorUIExample',
     'PHUIIconView' => 'AphrontTagView',
+    'PHUITextExample' => 'PhabricatorUIExample',
+    'PHUITextView' => 'AphrontTagView',
     'PackageCreateMail' => 'PackageMail',
     'PackageDeleteMail' => 'PackageMail',
     'PackageMail' => 'PhabricatorMail',

src/applications/uiexample/examples/PHUITextExample.php

@@ -0,0 +1,105 @@
+<?php
+
+final class PHUITextExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Text';
+  }
+
+  public function getDescription() {
+    return 'Simple styles for displaying text.';
+  }
+
+  public function renderExample() {
+
+    $color1 = 'This is RED. ';
+    $color2 = 'This is ORANGE. ';
+    $color3 = 'This is YELLOW. ';
+    $color4 = 'This is GREEN. ';
+    $color5 = 'This is BLUE. ';
+    $color6 = 'This is INDIGO. ';
+    $color7 = 'This is VIOLET. ';
+    $color8 = 'This is WHITE. ';
+    $color9 = 'This is BLACK. ';
+
+    $text1 = 'This is BOLD. ';
+    $text2 = 'This is Uppercase. ';
+    $text3 = 'This is Stricken.';
+
+    $content =
+      array(
+        id(new PHUITextView())
+          ->setText($color1)
+          ->addClass(PHUI::TEXT_RED),
+        id(new PHUITextView())
+          ->setText($color2)
+          ->addClass(PHUI::TEXT_ORANGE),
+        id(new PHUITextView())
+          ->setText($color3)
+          ->addClass(PHUI::TEXT_YELLOW),
+        id(new PHUITextView())
+          ->setText($color4)
+          ->addClass(PHUI::TEXT_GREEN),
+        id(new PHUITextView())
+          ->setText($color5)
+          ->addClass(PHUI::TEXT_BLUE),
+        id(new PHUITextView())
+          ->setText($color6)
+          ->addClass(PHUI::TEXT_INDIGO),
+        id(new PHUITextView())
+          ->setText($color7)
+          ->addClass(PHUI::TEXT_VIOLET),
+        id(new PHUITextView())
+          ->setText($color8)
+          ->addClass(PHUI::TEXT_WHITE),
+        id(new PHUITextView())
+          ->setText($color9)
+          ->addClass(PHUI::TEXT_BLACK));
+
+    $content2 =
+      array(
+        id(new PHUITextView())
+          ->setText($text1)
+          ->addClass(PHUI::TEXT_BOLD),
+        id(new PHUITextView())
+          ->setText($text2)
+          ->addClass(PHUI::TEXT_UPPERCASE),
+        id(new PHUITextView())
+          ->setText($text3)
+          ->addClass(PHUI::TEXT_STRIKE));
+
+    $layout1 = id(new PHUIBoxView())
+      ->appendChild($content)
+            ->setShadow(true)
+      ->addPadding(PHUI::PADDING_MEDIUM);
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Basic Colors'));
+
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $layout2 = id(new PHUIBoxView())
+      ->appendChild($content2)
+      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_MEDIUM);
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Basic Transforms'));
+
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($layout2)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2
+        ));
+        }
+}

src/view/phui/PHUI.php

@@ -42,4 +42,18 @@ final class PHUI {
   const PADDING_MEDIUM_TOP = 'pmt';
   const PADDING_LARGE_TOP = 'plt';
 
+  const TEXT_BOLD = 'phui-text-bold';
+  const TEXT_UPPERCASE = 'phui-text-uppercase';
+  const TEXT_STRIKE = 'phui-text-strike';
+
+  const TEXT_RED = 'phui-text-red';
+  const TEXT_ORANGE = 'phui-text-orange';
+  const TEXT_YELLOW = 'phui-text-yellow';
+  const TEXT_GREEN = 'phui-text-green';
+  const TEXT_BLUE = 'phui-text-blue';
+  const TEXT_INDIGO = 'phui-text-indigo';
+  const TEXT_VIOLET = 'phui-text-violet';
+  const TEXT_WHITE = 'phui-text-white';
+  const TEXT_BLACK = 'phui-text-black';
+
 }

src/view/phui/PHUITextView.php

@@ -0,0 +1,20 @@
+<?php
+
+final class PHUITextView extends AphrontTagView {
+
+  private $text;
+
+  public function setText($text) {
+    $this->appendChild($text);
+    return $this;
+  }
+
+  public function getTagName() {
+    return 'span';
+  }
+
+  public function getTagAttributes() {
+    require_celerity_resource('phui-text-css');
+    return array();
+  }
+}

webroot/rsrc/css/phui/phui-text.css

@@ -0,0 +1,55 @@
+/**
+ * @provides phui-text-css
+ */
+
+
+/* Styles */
+.phui-text-bold {
+  font-weight: bold;
+}
+
+.phui-text-uppercase {
+  text-transform: uppercase;
+}
+
+.phui-text-strike {
+  text-decoration: line-through;
+}
+
+
+/* Colors */
+.phui-text-red {
+  color: #E41C2B;
+}
+
+.phui-text-orange {
+  color: #EA921D;
+}
+
+.phui-text-yellow {
+  color: #EABB1D;
+}
+
+.phui-text-green {
+  color: #2FC118
+}
+
+.phui-text-blue {
+  color: #1D5998;
+}
+
+.phui-text-indigo {
+  color: #BD1772;
+}
+
+.phui-text-violet {
+  color: #701A9C;
+}
+
+.phui-text-white {
+  color: #fff;
+}
+
+.phui-text-black {
+  color: #333;
+}