From 2e0cbaa366ff95c7eb894a20fe14499bbe8791f5 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Thu, 17 Sep 2015 08:22:23 -0700
Subject: [PATCH] Usability updates to ActionPanel

Summary: Wraps entire element in the anchor tag, gives a hover state, makes icons bounce.

Test Plan: Hover and click.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D14124
---
 resources/celerity/map.php                  |  4 ++--
 src/view/phui/PHUIActionPanelView.php       | 19 ++++------------
 webroot/rsrc/css/phui/phui-action-panel.css | 24 ++++++++++++++-------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index a9a4a3950f..ec8b6b86c1 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -121,7 +121,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
     'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
     'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
-    'rsrc/css/phui/phui-action-panel.css' => 'bac94b03',
+    'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => '16020a60',
@@ -764,7 +764,7 @@ return array(
     'phortune-css' => '9149f103',
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => 'd1861e06',
-    'phui-action-panel-css' => 'bac94b03',
+    'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => 'f25c3476',
     'phui-box-css' => 'a5bb366d',
     'phui-button-css' => '16020a60',
diff --git a/src/view/phui/PHUIActionPanelView.php b/src/view/phui/PHUIActionPanelView.php
index 90f4cab40b..bfe44ba13e 100644
--- a/src/view/phui/PHUIActionPanelView.php
+++ b/src/view/phui/PHUIActionPanelView.php
@@ -91,21 +91,12 @@ final class PHUIActionPanelView extends AphrontTagView {
 
     $header = null;
     if ($this->header) {
-      $header = $this->header;
-      if ($this->href) {
-        $header = phutil_tag(
-          'a',
-          array(
-            'href' => $this->href,
-          ),
-          $this->header);
-      }
       $header = phutil_tag(
-        'div',
+        'span',
         array(
           'class' => 'phui-action-panel-header',
         ),
-        $header);
+        $this->header);
     }
 
     $subheader = null;
@@ -135,15 +126,13 @@ final class PHUIActionPanelView extends AphrontTagView {
       ),
       $row);
 
-    $content = phutil_tag(
+    return phutil_tag(
       'a',
       array(
         'href' => $this->href,
         'class' => 'phui-action-panel-hitarea',
       ),
-      $table);
-
-    return array($header, $content);
+      array($header, $table));
 
   }
 
diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css
index 5978c8a2b7..6d7c566de7 100644
--- a/webroot/rsrc/css/phui/phui-action-panel.css
+++ b/webroot/rsrc/css/phui/phui-action-panel.css
@@ -20,6 +20,16 @@
   display: block;
 }
 
+.device-desktop .phui-action-panel-hitarea:hover {
+  text-decoration: none;
+  background-color: rgba(255,255,255,.25);
+}
+
+.device-desktop .phui-action-panel-hitarea:hover .phui-icon-view {
+  margin-top: -4px;
+  transition-duration: .2s;
+}
+
 .phui-action-panel-table {
   display: table;
   height: 80px;
@@ -37,13 +47,6 @@
   display: table-cell;
 }
 
-.phui-action-panel-bigtext .phui-action-panel-subheader {
-  font-size: 28px;
-  color: {$darkbluetext};
-  text-align: center;
-  padding: 0 8px;
-}
-
 .phui-action-panel-icon a {
   display: block;
 }
@@ -68,10 +71,15 @@
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
+  color: {$darkbluetext};
+  display: block;
 }
 
-.phui-action-panel-header a {
+.phui-action-panel-bigtext .phui-action-panel-subheader {
+  font-size: 28px;
   color: {$darkbluetext};
+  text-align: center;
+  padding: 0 8px;
 }
 
 .phui-action-panel-subheader {