diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'eacc9293', + 'core.pkg.css' => '9d3a79f4', 'core.pkg.js' => '573e6664', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '2de124c9', @@ -134,7 +134,7 @@ 'rsrc/css/phui/phui-form.css' => '0b98e572', 'rsrc/css/phui/phui-header-view.css' => '55bb32dd', 'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad', - 'rsrc/css/phui/phui-icon.css' => 'b0a6b1b6', + 'rsrc/css/phui/phui-icon.css' => '3f33ab57', 'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8', 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 'rsrc/css/phui/phui-info-view.css' => '6d7c3509', @@ -812,7 +812,7 @@ 'phui-form-view-css' => '4a1a0f5e', 'phui-header-view-css' => '55bb32dd', 'phui-icon-set-selector-css' => '1ab67aad', - 'phui-icon-view-css' => 'b0a6b1b6', + 'phui-icon-view-css' => '3f33ab57', 'phui-image-mask-css' => '5a8b09c8', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => '6d7c3509', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1491,6 +1491,7 @@ 'PHUIHandleTagListView' => 'applications/phid/view/PHUIHandleTagListView.php', 'PHUIHandleView' => 'applications/phid/view/PHUIHandleView.php', 'PHUIHeaderView' => 'view/phui/PHUIHeaderView.php', + 'PHUIIconCircleView' => 'view/phui/PHUIIconCircleView.php', 'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php', 'PHUIIconView' => 'view/phui/PHUIIconView.php', 'PHUIImageMaskExample' => 'applications/uiexample/examples/PHUIImageMaskExample.php', @@ -5640,6 +5641,7 @@ 'PHUIHandleTagListView' => 'AphrontTagView', 'PHUIHandleView' => 'AphrontView', 'PHUIHeaderView' => 'AphrontTagView', + 'PHUIIconCircleView' => 'AphrontTagView', 'PHUIIconExample' => 'PhabricatorUIExample', 'PHUIIconView' => 'AphrontTagView', 'PHUIImageMaskExample' => 'PhabricatorUIExample', diff --git a/src/applications/uiexample/examples/PHUIIconExample.php b/src/applications/uiexample/examples/PHUIIconExample.php --- a/src/applications/uiexample/examples/PHUIIconExample.php +++ b/src/applications/uiexample/examples/PHUIIconExample.php @@ -110,6 +110,26 @@ ->addClass(PHUI::MARGIN_SMALL_RIGHT); } + $circles = array('fa-pencil', 'fa-chevron-left', 'fa-chevron-right'); + $circleview = array(); + foreach ($circles as $circle) { + $circleview[] = + id(new PHUIIconCircleView()) + ->setIcon($circle) + ->setHref('#') + ->addClass('mmr'); + } + + $circles = array('fa-plus', 'fa-bars', 'fa-paw'); + foreach ($circles as $circle) { + $circleview[] = + id(new PHUIIconCircleView()) + ->setIcon($circle) + ->setSize(PHUIIconCircleView::MEDIUM) + ->setHref('#') + ->addClass('mmr'); + } + $layout_cicons = id(new PHUIBoxView()) ->appendChild($cicons) ->addMargin(PHUI::MARGIN_LARGE); @@ -130,6 +150,10 @@ ->appendChild($tokenview) ->addMargin(PHUI::MARGIN_MEDIUM); + $layout4 = id(new PHUIBoxView()) + ->appendChild($circleview) + ->addMargin(PHUI::MARGIN_MEDIUM); + $layout5 = id(new PHUIBoxView()) ->appendChild($loginview) ->addMargin(PHUI::MARGIN_MEDIUM); @@ -158,6 +182,10 @@ ->setHeaderText(pht('Tokens')) ->appendChild($layout3); + $wrap4 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('Circles')) + ->appendChild($layout4); + $wrap5 = id(new PHUIObjectBoxView()) ->setHeaderText(pht('Authentication')) ->appendChild($layout5); @@ -172,6 +200,7 @@ $transforms, $wrap2, $wrap3, + $wrap4, $wrap5, )); } diff --git a/src/view/phui/PHUIIconCircleView.php b/src/view/phui/PHUIIconCircleView.php new file mode 100644 --- /dev/null +++ b/src/view/phui/PHUIIconCircleView.php @@ -0,0 +1,67 @@ +href = $href; + return $this; + } + + public function setIcon($icon) { + $this->icon = $icon; + return $this; + } + + public function setColor($color) { + $this->color = $color; + return $this; + } + + public function setSize($size) { + $this->size = $size; + return $this; + } + + protected function getTagName() { + $tag = 'span'; + if ($this->href) { + $tag = 'a'; + } + return $tag; + } + + protected function getTagAttributes() { + require_celerity_resource('phui-icon-view-css'); + + $classes = array(); + $classes[] = 'phui-icon-circle'; + + if ($this->color) { + $classes[] = 'phui-icon-circle-'.$this->color; + } + + if ($this->size) { + $classes[] = $this->size; + } + + return array( + 'href' => $this->href, + 'class' => $classes, + ); + } + + protected function getTagContent() { + return id(new PHUIIconView()) + ->setIconFont($this->icon) + ->addClass($this->color); + } + +} diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -38,3 +38,45 @@ text-decoration: none; color: {$sky}; } + +/* - Icon in a Circle ------------------------------------------------------- */ + +.phui-icon-circle { + border: 1px solid {$lightblueborder}; + border-radius: 24px; + height: 24px; + width: 24px; + text-align: center; + display: inline-block; + cursor: pointer; +} + +.phui-icon-circle.circle-medium { + height: 36px; + width: 36px; + border-radius: 36px; +} + +.phui-icon-circle .phui-icon-view { + height: 24px; + width: 24px; + font-size: 11px; + line-height: 24px; + color: {$lightblueborder}; + cursor: pointer; +} + +.phui-icon-circle.circle-medium .phui-icon-view { + font-size: 18px; + line-height: 36px; +} + +a.phui-icon-circle:hover { + text-decoration: none; + border-color: {$sky}; + cursor: pointer; +} + +a.phui-icon-circle:hover .phui-icon-view { + color: {$sky}; +}