mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +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:
parent
23b2653f52
commit
2e0cbaa366
3 changed files with 22 additions and 25 deletions
|
@ -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',
|
||||
|
|
|
@ -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));
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue