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

Add a top level tab navigation option to PHUITwoColumnView

Browse source 
Summary: Builds out a responsive tab bar system for PHUITwoColumnView pages

Test Plan:
Tested at mobile, tablet, and desktop breakpoints

{F5012429}

{F5012430}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D18148
This commit is contained in:
Chad Little 2017-06-22 21:10:48 +02:00
parent 224c4692ee
commit 58df1b7d3b
4 changed files with 106 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/celerity/map.php
View file

@ -9,7 +9,7 @@ return array(
'names' => array(
'conpherence.pkg.css' => 'ff161f2d',
'conpherence.pkg.js' => 'b5b51108',
'core.pkg.css' => '6d40b714',
'core.pkg.css' => '37dd219b',
'core.pkg.js' => '5d80e0db',
'darkconsole.pkg.js' => '1f9a31bc',
'differential.pkg.css' => '4ec4a37a',
@ -166,7 +166,7 @@ return array(
'rsrc/css/phui/phui-info-view.css' => '6e217679',
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
'rsrc/css/phui/phui-lightbox.css' => '0a035e40',
'rsrc/css/phui/phui-list.css' => '12eb8ce6',
'rsrc/css/phui/phui-list.css' => 'dcafb463',
'rsrc/css/phui/phui-object-box.css' => '9cff003c',
'rsrc/css/phui/phui-pager.css' => 'edcbc226',
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
@ -177,7 +177,7 @@ return array(
'rsrc/css/phui/phui-status.css' => 'd5263e49',
'rsrc/css/phui/phui-tag-view.css' => '93b084cf',
'rsrc/css/phui/phui-timeline-view.css' => '313c7f22',
'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7',
'rsrc/css/phui/phui-two-column-view.css' => '5b8cd553',
'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455',
'rsrc/css/phui/workboards/phui-workcard.css' => 'cca5fa92',
@ -854,7 +854,7 @@ return array(
'phui-inline-comment-view-css' => 'ffd1a542',
'phui-invisible-character-view-css' => '6993d9f0',
'phui-lightbox-css' => '0a035e40',
'phui-list-view-css' => '12eb8ce6',
'phui-list-view-css' => 'dcafb463',
'phui-object-box-css' => '9cff003c',
'phui-oi-big-ui-css' => '19f9369b',
'phui-oi-color-css' => 'cd2b9b77',
@ -872,7 +872,7 @@ return array(
'phui-tag-view-css' => '93b084cf',
'phui-theme-css' => '9f261c6b',
'phui-timeline-view-css' => '313c7f22',
'phui-two-column-view-css' => 'ce9fa0b7',
'phui-two-column-view-css' => '5b8cd553',
'phui-workboard-color-css' => '783cdff5',
'phui-workboard-view-css' => '3bc85455',
'phui-workcard-view-css' => 'cca5fa92',

18
src/view/phui/PHUITwoColumnView.php
View file

@ -10,6 +10,7 @@ final class PHUITwoColumnView extends AphrontTagView {
private $header;
private $subheader;
private $footer;
private $tabs;
private $propertySection = array();
private $curtain;
@ -42,6 +43,12 @@ final class PHUITwoColumnView extends AphrontTagView {
return $this;
}
public function setTabs(PHUIListView $tabs) {
$tabs->setType(PHUIListView::TABBAR_LIST);
$this->tabs = $tabs;
return $this;
}
public function setFooter($footer) {
$this->footer = $footer;
return $this;
@ -91,6 +98,10 @@ final class PHUITwoColumnView extends AphrontTagView {
$classes[] = 'phui-two-column-fluid';
}
if ($this->tabs) {
$classes[] = 'with-tabs';
}
if ($this->subheader) {
$classes[] = 'with-subheader';
}
@ -124,6 +135,12 @@ final class PHUITwoColumnView extends AphrontTagView {
'phui-two-column-header', $this->header);
}
$tabs = null;
if ($this->tabs) {
$tabs = phutil_tag_div(
'phui-two-column-tabs', $this->tabs);
}
$subheader = null;
if ($this->subheader) {
$subheader = phutil_tag_div(
@ -137,6 +154,7 @@ final class PHUITwoColumnView extends AphrontTagView {
),
array(
$header,
$tabs,
$subheader,
$table,
$footer,

71
webroot/rsrc/css/phui/phui-list.css
View file

@ -144,6 +144,77 @@
border: none;
}
/* - Two Column View, Responsive Navigations -----------------------------------
Sets a two column page with a responsive, top navbar
*/
.phui-list-view.phui-list-tabbar {
list-style: none;
overflow: hidden;
}
.phui-list-view.phui-list-tabbar > li {
list-style: none;
float: left;
display: block;
}
.phui-list-view.phui-list-tabbar > li > * {
display: block;
}
.phui-list-tabbar .phui-list-item-href {
color: {$bluetext};
padding: 8px 24px;
line-height: 24px;
font-weight: bold;
font-size: {$biggerfontsize};
border-top: 4px solid #fff;
}
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
color: {$sky};
border-bottom: 4px solid {$sky};
}
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href
.phui-icon-view {
color: {$sky};
}
.device-desktop .phui-list-tabbar .phui-list-item-href:hover {
color: {$sky};
border-bottom: 4px solid $fff;
text-decoration: none;
}
.phui-list-tabbar .phui-list-item-icon {
height: 20px;
width: 20px;
display: none;
font-size: 20px;
text-align: center;
}
.device-phone .phui-list-tabbar .phui-list-item-icon {
display: inline-block;
}
.device-phone .phui-list-tabbar .phui-list-item-name {
display: none;
}
.device-phone .phui-list-tabbar .phui-list-item-href {
padding: 8px 16px;
}
.device-phone .phui-list-view.phui-list-navbar > li {
float: none;
border: none;
}
/* - Status Colors -------------------------------------------------------------
Colors for navbars

12
webroot/rsrc/css/phui/phui-two-column-view.css
View file

@ -12,6 +12,7 @@
margin-bottom: 12px;
}
.phui-two-column-view.with-tabs .phui-two-column-header,
.phui-two-column-view.with-subheader .phui-two-column-header {
margin-bottom: 0;
}
@ -168,6 +169,17 @@
margin: 0 8px;
}
.phui-two-column-tabs {
padding: 0 32px;
margin-bottom: 32px;
background: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.device-phone .phui-two-column-tabs {
padding: 0 12px;
}
/* Info View */
.phui-two-column-view .phui-info-view {