From 2e1c7da1bfe5a148a29121af1d67348bfb9a8a94 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 14 Sep 2016 21:05:19 -0700 Subject: [PATCH] Clean up some Conpherence header CSS Summary: Darkens the topic, adds fun colors to action icons. Test Plan: Hover over new action icons. See darker topic text. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16556 --- resources/celerity/map.php | 12 +++++----- .../controller/ConpherenceController.php | 2 ++ src/view/phui/PHUIIconCircleView.php | 7 +++--- .../application/conpherence/header-pane.css | 13 ++++------ webroot/rsrc/css/phui/phui-icon.css | 24 +++++++++++++++++-- 5 files changed, 39 insertions(+), 19 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index a1cf5a114f..cf53af4bf0 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,9 +7,9 @@ */ return array( 'names' => array( - 'conpherence.pkg.css' => '7bddd31a', + 'conpherence.pkg.css' => 'a9b238ee', 'conpherence.pkg.js' => '5fafd1ff', - 'core.pkg.css' => 'dc6d08e3', + 'core.pkg.css' => 'ee276281', 'core.pkg.js' => '1d376fa9', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '3fb7f532', @@ -47,7 +47,7 @@ return array( 'rsrc/css/application/config/setup-issue.css' => 'f794cfc3', 'rsrc/css/application/config/unhandled-exception.css' => '4c96257a', 'rsrc/css/application/conpherence/durable-column.css' => '194ac487', - 'rsrc/css/application/conpherence/header-pane.css' => 'bdba8a5b', + 'rsrc/css/application/conpherence/header-pane.css' => '517de9fe', 'rsrc/css/application/conpherence/menu.css' => '8344d122', 'rsrc/css/application/conpherence/message-pane.css' => 'c075e8fe', 'rsrc/css/application/conpherence/notification.css' => '6cdcc253', @@ -144,7 +144,7 @@ return array( 'rsrc/css/phui/phui-header-view.css' => '06385974', 'rsrc/css/phui/phui-hovercard.css' => 'de1a2119', 'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad', - 'rsrc/css/phui/phui-icon.css' => 'b1dbd620', + 'rsrc/css/phui/phui-icon.css' => '9bab6f02', 'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c', 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 'rsrc/css/phui/phui-info-view.css' => '28efab79', @@ -619,7 +619,7 @@ return array( 'config-options-css' => '0ede4c9b', 'config-page-css' => '8798e14f', 'conpherence-durable-column-view' => '194ac487', - 'conpherence-header-pane-css' => 'bdba8a5b', + 'conpherence-header-pane-css' => '517de9fe', 'conpherence-menu-css' => '8344d122', 'conpherence-message-pane-css' => 'c075e8fe', 'conpherence-notification-css' => '6cdcc253', @@ -921,7 +921,7 @@ return array( 'phui-hovercard' => '1bd28176', 'phui-hovercard-view-css' => 'de1a2119', 'phui-icon-set-selector-css' => '1ab67aad', - 'phui-icon-view-css' => 'b1dbd620', + 'phui-icon-view-css' => '9bab6f02', 'phui-image-mask-css' => 'a8498f9c', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => '28efab79', diff --git a/src/applications/conpherence/controller/ConpherenceController.php b/src/applications/conpherence/controller/ConpherenceController.php index 227b3418fc..c89923ba83 100644 --- a/src/applications/conpherence/controller/ConpherenceController.php +++ b/src/applications/conpherence/controller/ConpherenceController.php @@ -72,6 +72,7 @@ abstract class ConpherenceController extends PhabricatorController { $this->getApplicationURI('update/'.$conpherence->getID()).'/') ->setIcon('fa-pencil') ->addClass('hide-on-device') + ->setColor('violet') ->setWorkflow(true)); $header->addActionItem( @@ -81,6 +82,7 @@ abstract class ConpherenceController extends PhabricatorController { '?action='.ConpherenceUpdateActions::NOTIFICATIONS) ->setIcon('fa-gear') ->addClass('hide-on-device') + ->setColor('pink') ->setWorkflow(true)); $widget_key = PhabricatorConpherenceWidgetVisibleSetting::SETTINGKEY; diff --git a/src/view/phui/PHUIIconCircleView.php b/src/view/phui/PHUIIconCircleView.php index 05612c26f2..083818969f 100644 --- a/src/view/phui/PHUIIconCircleView.php +++ b/src/view/phui/PHUIIconCircleView.php @@ -45,7 +45,9 @@ final class PHUIIconCircleView extends AphrontTagView { $classes[] = 'phui-icon-circle'; if ($this->color) { - $classes[] = 'phui-icon-circle-'.$this->color; + $classes[] = 'hover-'.$this->color; + } else { + $classes[] = 'hover-sky'; } if ($this->size) { @@ -60,8 +62,7 @@ final class PHUIIconCircleView extends AphrontTagView { protected function getTagContent() { return id(new PHUIIconView()) - ->setIcon($this->icon) - ->addClass($this->color); + ->setIcon($this->icon); } } diff --git a/webroot/rsrc/css/application/conpherence/header-pane.css b/webroot/rsrc/css/application/conpherence/header-pane.css index 0fda92fede..9b0c5e98e5 100644 --- a/webroot/rsrc/css/application/conpherence/header-pane.css +++ b/webroot/rsrc/css/application/conpherence/header-pane.css @@ -17,7 +17,7 @@ } .conpherence-header-pane .phui-header-subheader { - color: {$lightgreyborder}; + color: {$lightgreytext}; padding: 0; font-size: 12px; margin: 0; @@ -44,25 +44,22 @@ vertical-align: middle; } -.conpherence-header-pane .conpherence-participant-toggle.phui-icon-circle { +.conpherence-participant-toggle.phui-icon-circle { text-decoration: none; border-color: {$sky}; cursor: pointer; } -.conpherence-header-pane .conpherence-participant-toggle.phui-icon-circle - .phui-icon-view { +.conpherence-participant-toggle.phui-icon-circle .phui-icon-view { color: {$sky}; } -.hide-widgets .conpherence-header-pane - .conpherence-participant-toggle.phui-icon-circle { +.hide-widgets .conpherence-participant-toggle.phui-icon-circle { text-decoration: none; border-color: {$lightblueborder}; cursor: pointer; } -.hide-widgets .conpherence-header-pane - .conpherence-participant-toggle.phui-icon-circle .phui-icon-view { +.hide-widgets .conpherence-participant-toggle.phui-icon-circle .phui-icon-view { color: {$lightblueborder}; } diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css index e2124c28b8..338ff4e4c3 100644 --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -71,16 +71,36 @@ a.phui-icon-view:hover { line-height: 36px; } -a.phui-icon-circle:hover { +a.phui-icon-circle.hover-sky:hover { text-decoration: none; border-color: {$sky}; cursor: pointer; } -a.phui-icon-circle:hover .phui-icon-view { +a.phui-icon-circle.hover-sky:hover .phui-icon-view { color: {$sky}; } +a.phui-icon-circle.hover-violet:hover { + text-decoration: none; + border-color: {$violet}; + cursor: pointer; +} + +a.phui-icon-circle.hover-violet:hover .phui-icon-view { + color: {$violet}; +} + +a.phui-icon-circle.hover-pink:hover { + text-decoration: none; + border-color: {$pink}; + cursor: pointer; +} + +a.phui-icon-circle.hover-pink:hover .phui-icon-view { + color: {$pink}; +} + /* - Icon in a Square ------------------------------------------------------- */ .phui-icon-view.phui-icon-square {