First cut of progress bars (PHUISegmentBarView)

Summary:
Ref T10288.

I couldn't figure out how to reasonably get the interior right borders to round like the mock, but I think this is otherwise mostly faithful. Feel free to fix stuff.

Test Plan: {F1100415}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10288

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

resources/celerity/map.php

@@ -149,6 +149,7 @@ return array(
     'rsrc/css/phui/phui-profile-menu.css' => '4a243229',
     'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
+    'rsrc/css/phui/phui-segment-bar-view.css' => '728e4d19',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
@@ -825,6 +826,7 @@ return array(
     'phui-profile-menu-css' => '4a243229',
     'phui-property-list-view-css' => '27b2849e',
     'phui-remarkup-preview-css' => '1a8f2591',
+    'phui-segment-bar-view-css' => '728e4d19',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => '9d5d4400',

src/__phutil_library_map__.php

@@ -1522,6 +1522,8 @@ phutil_register_library_map(array(
     'PHUIPropertyListView' => 'view/phui/PHUIPropertyListView.php',
     'PHUIRemarkupPreviewPanel' => 'view/phui/PHUIRemarkupPreviewPanel.php',
     'PHUIRemarkupView' => 'infrastructure/markup/view/PHUIRemarkupView.php',
+    'PHUISegmentBarSegmentView' => 'view/phui/PHUISegmentBarSegmentView.php',
+    'PHUISegmentBarView' => 'view/phui/PHUISegmentBarView.php',
     'PHUISpacesNamespaceContextView' => 'applications/spaces/view/PHUISpacesNamespaceContextView.php',
     'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php',
     'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php',
@@ -5705,6 +5707,8 @@ phutil_register_library_map(array(
     'PHUIPropertyListView' => 'AphrontView',
     'PHUIRemarkupPreviewPanel' => 'AphrontTagView',
     'PHUIRemarkupView' => 'AphrontView',
+    'PHUISegmentBarSegmentView' => 'AphrontTagView',
+    'PHUISegmentBarView' => 'AphrontTagView',
     'PHUISpacesNamespaceContextView' => 'AphrontView',
     'PHUIStatusItemView' => 'AphrontTagView',
     'PHUIStatusListView' => 'AphrontTagView',

src/applications/uiexample/examples/PhabricatorAphrontBarUIExample.php

@@ -12,10 +12,7 @@ final class PhabricatorAphrontBarUIExample extends PhabricatorUIExample {
 
   public function renderExample() {
     $out = array();
-    $out[] = $this->renderTestThings('AphrontProgressBarView', 13, 10);
-    $out[] = $this->renderTestThings('AphrontGlyphBarView', 13, 10);
-    $out[] = $this->renderWeirdOrderGlyphBars();
-    $out[] = $this->renderAsciiStarBar();
+    $out[] = $this->renderRainbow();
     return $out;
   }
 
@@ -26,48 +23,46 @@ final class PhabricatorAphrontBarUIExample extends PhabricatorUIExample {
       ->appendChild($thing);
   }
 
-  private function renderTestThings($class, $max, $incr) {
+  private function renderRainbow() {
+    $colors = array(
+      'red',
+      'orange',
+      'yellow',
+      'green',
+      'blue',
+      'indigo',
+      'violet',
+    );
+
+    $labels = array(
+      pht('Empty'),
+      pht('Red'),
+      pht('Orange'),
+      pht('Yellow'),
+      pht('Green'),
+      pht('Blue'),
+      pht('Indigo'),
+      pht('Violet'),
+    );
+
     $bars = array();
-    for ($ii = 0; $ii <= $max; $ii++) {
-      $bars[] = newv($class, array())
-        ->setValue($ii * $incr)
-        ->setMax($max * $incr)
-        ->setCaption("{$ii} outta {$max} ain't bad!");
-    }
-    return $this->wrap("Test {$class}", $bars);
-  }
 
-  private function renderWeirdOrderGlyphBars() {
-    $views = array();
-    $indices = array(1, 3, 7, 4, 2, 8, 9, 5, 10, 6);
-    $max = count($indices);
-    foreach ($indices as $index) {
-      $views[] = id(new AphrontGlyphBarView())
-        ->setValue($index)
-        ->setMax($max)
-        ->setNumGlyphs(5)
-        ->setCaption("Lol score is {$index}/{$max}")
-        ->setGlyph(hsprintf('%s', 'LOL!'))
-        ->setBackgroundGlyph(hsprintf('%s', '____'));
-      $views[] = hsprintf('<div style="clear:both;"></div>');
+    for ($jj = -1; $jj < count($colors); $jj++) {
+      $bar = id(new PHUISegmentBarView())
+        ->setLabel($labels[$jj + 1]);
+      for ($ii = 0; $ii <= $jj; $ii++) {
+        $bar->newSegment()
+          ->setWidth(1 / 7)
+          ->setColor($colors[$ii]);
+      }
+      $bars[] = $bar;
     }
 
-    return $this->wrap(
-      pht('Glyph bars in weird order'),
-      $views);
-  }
+    $bars = phutil_implode_html(
+      phutil_tag('br'),
+      $bars);
 
-  private function renderAsciiStarBar() {
-    $bar = id(new AphrontGlyphBarView())
-        ->setValue(50)
-        ->setMax(100)
-        ->setCaption(pht('Glyphs!'))
-        ->setNumGlyphs(10)
-        ->setGlyph(hsprintf('%s', '*'));
-
-    return $this->wrap(
-      pht('ASCII star glyph bar'),
-      $bar);
+    return $this->wrap(pht('Rainbow Bars'), $bars);
   }
 
 }

src/view/phui/PHUISegmentBarSegmentView.php

@@ -0,0 +1,57 @@
+<?php
+
+final class PHUISegmentBarSegmentView extends AphrontTagView {
+
+  private $width;
+  private $color;
+  private $position;
+
+  public function setWidth($width) {
+    $this->width = $width;
+    return $this;
+  }
+
+  public function getWidth() {
+    return $this->width;
+  }
+
+  public function setColor($color) {
+    $this->color = $color;
+    return $this;
+  }
+
+  public function setPosition($position) {
+    $this->position = $position;
+    return $this;
+  }
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  protected function getTagAttributes() {
+    $classes = array(
+      'phui-segment-bar-segment-view',
+    );
+
+    if ($this->color) {
+      $classes[] = $this->color;
+    }
+
+    // Convert width to a percentage, and round it up slightly so that bars
+    // are full if they have, e.g., three segments at 1/3 + 1/3 + 1/3.
+    $width = 100 * $this->width;
+    $width = ceil(100 * $width) / 100;
+    $width = sprintf('%.2f%%', $width);
+
+    $left = 100 * $this->position;
+    $left = floor(100 * $left) / 100;
+    $left = sprintf('%.2f%%', $left);
+
+    return array(
+      'class' => implode(' ', $classes),
+      'style' => "left: {$left}; width: {$width};",
+    );
+  }
+
+}

src/view/phui/PHUISegmentBarView.php

@@ -0,0 +1,65 @@
+<?php
+
+final class PHUISegmentBarView extends AphrontTagView {
+
+  private $label;
+  private $segments = array();
+
+  public function setLabel($label) {
+    $this->label = $label;
+    return $this;
+  }
+
+  public function newSegment() {
+    $segment = new PHUISegmentBarSegmentView();
+    $this->segments[] = $segment;
+    return $segment;
+  }
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  protected function getTagAttributes() {
+    return array(
+      'class' => 'phui-segment-bar-view',
+    );
+  }
+
+  protected function getTagContent() {
+    require_celerity_resource('phui-segment-bar-view-css');
+
+    $label = $this->label;
+    if (strlen($label)) {
+      $label = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-segment-bar-label',
+        ),
+        $label);
+    }
+
+    $segments = $this->segments;
+
+    $position = 0;
+    foreach ($segments as $segment) {
+      $segment->setPosition($position);
+      $position += $segment->getWidth();
+    }
+
+    $segments = array_reverse($segments);
+
+    $segments = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-segment-bar-segments',
+      ),
+      $segments);
+
+    return array(
+      $label,
+      $segments,
+    );
+  }
+
+}

webroot/rsrc/css/phui/phui-segment-bar-view.css

@@ -0,0 +1,71 @@
+/**
+ * @provides phui-segment-bar-view-css
+ */
+
+.phui-segment-bar-label {
+  font-size: {$smallerfontsize};
+  margin-bottom: 4px;
+}
+
+.phui-segment-bar-segments {
+  background: {$lightgreybackground};
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  height: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.phui-segment-bar-segment-view {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-left: -4px;
+  border-right: 5px solid;
+  border-radius: 0 4px 4px 0;
+}
+
+.phui-segment-bar-segment-view.red {
+  background: {$red};
+  border-color: {$red};
+}
+
+.phui-segment-bar-segment-view.orange {
+  background: {$orange};
+  border-color: {$orange};
+}
+
+.phui-segment-bar-segment-view.yellow {
+  background: {$yellow};
+  border-color: {$yellow}
+}
+
+.phui-segment-bar-segment-view.green {
+  background: {$green};
+  border-color: {$green};
+}
+
+.phui-segment-bar-segment-view.blue {
+  background: {$blue};
+  border-color: {$blue};
+}
+
+.phui-segment-bar-segment-view.indigo {
+  background: {$indigo};
+  border-color: {$indigo};
+}
+
+.phui-segment-bar-segment-view.violet {
+  background: {$violet};
+  border-color: {$violet};
+}
+
+.phui-segment-bar-segment-view.pink {
+  background: {$pink};
+  border-color: {$pink};
+}
+
+.phui-segment-bar-segment-view.sky {
+  background: {$sky};
+  border-color: {$sky};
+}