[Summary view] [Print] [Text view]

   1  <?php
   2  
   3  final class PHUIButtonExample extends PhabricatorUIExample {
   4  
   5    public function getName() {
   6      return 'Buttons';
   7    }
   8  
   9    public function getDescription() {
  10      return hsprintf('Use <tt>&lt;button&gt;</tt> to render buttons.');
  11    }
  12  
  13    public function renderExample() {
  14      $request = $this->getRequest();
  15      $user = $request->getUser();
  16  
  17      $colors = array('', 'green', 'grey', 'black', 'disabled');
  18      $sizes = array('', 'small');
  19      $tags = array('a', 'button');
  20  
  21      // phutil_tag
  22  
  23      $column = array();
  24      foreach ($tags as $tag) {
  25        foreach ($colors as $color) {
  26          foreach ($sizes as $key => $size) {
  27            $class = implode(' ', array($color, $size));
  28  
  29            if ($tag == 'a') {
  30              $class .= ' button';
  31            }
  32  
  33            $column[$key][] = phutil_tag(
  34              $tag,
  35              array(
  36                'class' => $class,
  37              ),
  38              phutil_utf8_ucwords($size.' '.$color.' '.$tag));
  39  
  40            $column[$key][] = hsprintf('<br /><br />');
  41          }
  42        }
  43      }
  44  
  45      $column3 = array();
  46      foreach ($colors as $color) {
  47        $caret = phutil_tag('span', array('class' => 'caret'), '');
  48        $column3[] = phutil_tag(
  49            'a',
  50              array(
  51                'class' => $color.' button dropdown',
  52              ),
  53            array(
  54              phutil_utf8_ucwords($color.' Dropdown'),
  55              $caret,
  56            ));
  57          $column3[] = hsprintf('<br /><br />');
  58      }
  59  
  60      $layout1 = id(new AphrontMultiColumnView())
  61        ->addColumn($column[0])
  62        ->addColumn($column[1])
  63        ->addColumn($column3)
  64        ->setFluidLayout(true)
  65        ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
  66  
  67     // PHUIButtonView
  68  
  69     $colors = array(null,
  70       PHUIButtonView::GREEN,
  71       PHUIButtonView::GREY,
  72       PHUIButtonView::BLACK,
  73       PHUIButtonView::DISABLED,
  74      );
  75     $sizes = array(null, PHUIButtonView::SMALL);
  76     $column = array();
  77     foreach ($colors as $color) {
  78       foreach ($sizes as $key => $size) {
  79         $column[$key][] = id(new PHUIButtonView())
  80          ->setColor($color)
  81          ->setSize($size)
  82          ->setTag('a')
  83          ->setText('Clicky');
  84        $column[$key][] = hsprintf('<br /><br />');
  85       }
  86     }
  87     foreach ($colors as $color) {
  88       $column[2][] = id(new PHUIButtonView())
  89          ->setColor($color)
  90          ->setTag('button')
  91          ->setText('Button')
  92          ->setDropdown(true);
  93        $column[2][] = hsprintf('<br /><br />');
  94     }
  95  
  96     $layout2 = id(new AphrontMultiColumnView())
  97        ->addColumn($column[0])
  98        ->addColumn($column[1])
  99        ->addColumn($column[2])
 100        ->setFluidLayout(true)
 101        ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
 102  
 103      // Icon Buttons
 104  
 105      $column = array();
 106      $icons = array(
 107        'Comment' => 'fa-comment',
 108        'Give Token' => 'fa-trophy',
 109        'Reverse Time' => 'fa-clock-o',
 110        'Implode Earth' => 'fa-exclamation-triangle red',
 111      );
 112      foreach ($icons as $text => $icon) {
 113        $image = id(new PHUIIconView())
 114            ->setIconFont($icon);
 115        $column[] = id(new PHUIButtonView())
 116          ->setTag('a')
 117          ->setColor(PHUIButtonView::GREY)
 118          ->setIcon($image)
 119          ->setText($text)
 120          ->addClass(PHUI::MARGIN_SMALL_RIGHT);
 121      }
 122  
 123      $column2 = array();
 124      $icons = array(
 125        'Subscribe' => 'fa-check-circle bluegrey',
 126        'Edit' => 'fa-pencil bluegrey',
 127      );
 128      foreach ($icons as $text => $icon) {
 129        $image = id(new PHUIIconView())
 130            ->setIconFont($icon);
 131        $column2[] = id(new PHUIButtonView())
 132          ->setTag('a')
 133          ->setColor(PHUIButtonView::SIMPLE)
 134          ->setIcon($image)
 135          ->setText($text)
 136          ->addClass(PHUI::MARGIN_SMALL_RIGHT);
 137      }
 138  
 139      $layout3 = id(new AphrontMultiColumnView())
 140        ->addColumn($column)
 141        ->addColumn($column2)
 142        ->setFluidLayout(true)
 143        ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
 144  
 145  
 146      // Baby Got Back Buttons
 147  
 148          $column = array();
 149      $icons = array('Asana', 'Github', 'Facebook', 'Google', 'LDAP');
 150      foreach ($icons as $icon) {
 151        $image = id(new PHUIIconView())
 152            ->setSpriteSheet(PHUIIconView::SPRITE_LOGIN)
 153            ->setSpriteIcon($icon);
 154        $column[] = id(new PHUIButtonView())
 155          ->setTag('a')
 156          ->setSize(PHUIButtonView::BIG)
 157          ->setColor(PHUIButtonView::GREY)
 158          ->setIcon($image)
 159          ->setText('Login or Register')
 160          ->setSubtext($icon)
 161          ->addClass(PHUI::MARGIN_MEDIUM_RIGHT);
 162      }
 163  
 164      $layout4 = id(new AphrontMultiColumnView())
 165        ->addColumn($column)
 166        ->setFluidLayout(true)
 167        ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
 168  
 169  
 170      // Set it and forget it
 171  
 172      $head1 = id(new PHUIHeaderView())
 173        ->setHeader('phutil_tag');
 174  
 175      $head2 = id(new PHUIHeaderView())
 176        ->setHeader('PHUIButtonView');
 177  
 178      $head3 = id(new PHUIHeaderView())
 179        ->setHeader('Icon Buttons');
 180  
 181      $head4 = id(new PHUIHeaderView())
 182        ->setHeader('Big Icon Buttons');
 183  
 184      $wrap1 = id(new PHUIBoxView())
 185        ->appendChild($layout1)
 186        ->addMargin(PHUI::MARGIN_LARGE);
 187  
 188      $wrap2 = id(new PHUIBoxView())
 189        ->appendChild($layout2)
 190        ->addMargin(PHUI::MARGIN_LARGE);
 191  
 192      $wrap3 = id(new PHUIBoxView())
 193        ->appendChild($layout3)
 194        ->addMargin(PHUI::MARGIN_LARGE);
 195  
 196      $wrap4 = id(new PHUIBoxView())
 197        ->appendChild($layout4)
 198        ->addMargin(PHUI::MARGIN_LARGE);
 199  
 200      return array($head1, $wrap1, $head2, $wrap2, $head3, $wrap3,
 201        $head4, $wrap4,
 202      );
 203    }
 204  }