revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-27 01:02:42 +01:00
Code Issues Releases Wiki Activity

Usability updates to ActionPanel

Browse source 
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
This commit is contained in:
Chad Little 2015-09-17 08:22:23 -07:00
parent 23b2653f52
commit 2e0cbaa366
3 changed files with 22 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/celerity/map.php
View file

@ -121,7 +121,7 @@ return array(
'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0', 'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893', 'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
'rsrc/css/phui/phui-action-list.css' => 'c5eba19d', '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-badge.css' => 'f25c3476',
'rsrc/css/phui/phui-box.css' => 'a5bb366d', 'rsrc/css/phui/phui-box.css' => 'a5bb366d',
'rsrc/css/phui/phui-button.css' => '16020a60', 'rsrc/css/phui/phui-button.css' => '16020a60',
@ -764,7 +764,7 @@ return array(
'phortune-css' => '9149f103', 'phortune-css' => '9149f103',
'phrequent-css' => 'ffc185ad', 'phrequent-css' => 'ffc185ad',
'phriction-document-css' => 'd1861e06', 'phriction-document-css' => 'd1861e06',
'phui-action-panel-css' => 'bac94b03', 'phui-action-panel-css' => '91c7b835',
'phui-badge-view-css' => 'f25c3476', 'phui-badge-view-css' => 'f25c3476',
'phui-box-css' => 'a5bb366d', 'phui-box-css' => 'a5bb366d',
'phui-button-css' => '16020a60', 'phui-button-css' => '16020a60',

19
src/view/phui/PHUIActionPanelView.php
View file

@ -91,21 +91,12 @@ final class PHUIActionPanelView extends AphrontTagView {
$header = null; $header = null;
if ($this->header) { if ($this->header) {
$header = $this->header;
if ($this->href) {
$header = phutil_tag( $header = phutil_tag(
'a', 'span',
array(
'href' => $this->href,
),
$this->header);
}
$header = phutil_tag(
'div',
array( array(
'class' => 'phui-action-panel-header', 'class' => 'phui-action-panel-header',
), ),
$header); $this->header);
} }
$subheader = null; $subheader = null;
@ -135,15 +126,13 @@ final class PHUIActionPanelView extends AphrontTagView {
), ),
$row); $row);
$content = phutil_tag( return phutil_tag(
'a', 'a',
array( array(
'href' => $this->href, 'href' => $this->href,
'class' => 'phui-action-panel-hitarea', 'class' => 'phui-action-panel-hitarea',
), ),
$table); array($header, $table));
return array($header, $content);
} }

24
webroot/rsrc/css/phui/phui-action-panel.css
View file

@ -20,6 +20,16 @@
display: block; 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 { .phui-action-panel-table {
display: table; display: table;
height: 80px; height: 80px;
@ -37,13 +47,6 @@
display: table-cell; 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 { .phui-action-panel-icon a {
display: block; display: block;
} }
@ -68,10 +71,15 @@
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: {$darkbluetext};
display: block;
} }
.phui-action-panel-header a { .phui-action-panel-bigtext .phui-action-panel-subheader {
font-size: 28px;
color: {$darkbluetext}; color: {$darkbluetext};
text-align: center;
padding: 0 8px;
} }
.phui-action-panel-subheader { .phui-action-panel-subheader {