1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 00:10:57 +01:00

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
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

View file

@ -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',

View file

@ -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));
}

View file

@ -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 {