1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-18 19:40:55 +01:00

[Redesign] Better Headers, more options

Summary: Ref T8099, Adds ability to set header as "tall" and provide better control over height of actual header text. Also fixed some color issues with multiple object boxes.

Test Plan: Review a commit, review dashboards, review a diff, review home.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D13077
This commit is contained in:
Chad Little 2015-05-31 08:36:44 -07:00
parent cc20a6c4d3
commit 3dcb672076
8 changed files with 45 additions and 62 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => 'b6b5fe6c',
'core.pkg.css' => 'db211713',
'core.pkg.js' => 'fbf1d615',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '7d01bee8',
@ -26,7 +26,7 @@ return array(
'rsrc/css/aphront/pager-view.css' => '2e3539af',
'rsrc/css/aphront/panel-view.css' => '8427b78d',
'rsrc/css/aphront/phabricator-nav-view.css' => '0ecd30a1',
'rsrc/css/aphront/table-view.css' => '15fedf7a',
'rsrc/css/aphront/table-view.css' => '4f2ed0bf',
'rsrc/css/aphront/tokenizer.css' => '04875312',
'rsrc/css/aphront/tooltip.css' => '7672b60f',
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
@ -129,18 +129,18 @@ return array(
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
'rsrc/css/phui/phui-button.css' => 'b995182d',
'rsrc/css/phui/phui-crumbs-view.css' => 'ce840ec2',
'rsrc/css/phui/phui-document.css' => '8be7a5e3',
'rsrc/css/phui/phui-document.css' => '88f0c90b',
'rsrc/css/phui/phui-feed-story.css' => '92f55311',
'rsrc/css/phui/phui-fontkit.css' => 'b664ac96',
'rsrc/css/phui/phui-form-view.css' => 'a0e8f168',
'rsrc/css/phui/phui-form.css' => 'f535f938',
'rsrc/css/phui/phui-header-view.css' => '47b8f221',
'rsrc/css/phui/phui-header-view.css' => '7716c613',
'rsrc/css/phui/phui-icon.css' => '88ba9081',
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
'rsrc/css/phui/phui-info-view.css' => '33e54618',
'rsrc/css/phui/phui-list.css' => 'e448b6ba',
'rsrc/css/phui/phui-object-box.css' => '59db5c05',
'rsrc/css/phui/phui-object-box.css' => '92f2ddcf',
'rsrc/css/phui/phui-object-item-list-view.css' => '29ded459',
'rsrc/css/phui/phui-pinboard-view.css' => '55b27bc3',
'rsrc/css/phui/phui-property-list-view.css' => '1baf23eb',
@ -483,7 +483,7 @@ return array(
'aphront-multi-column-view-css' => 'fd18389d',
'aphront-pager-view-css' => '2e3539af',
'aphront-panel-view-css' => '8427b78d',
'aphront-table-view-css' => '15fedf7a',
'aphront-table-view-css' => '4f2ed0bf',
'aphront-tokenizer-control-css' => '04875312',
'aphront-tooltip-css' => '7672b60f',
'aphront-two-column-view-css' => '16ab3ad2',
@ -763,20 +763,20 @@ return array(
'phui-calendar-list-css' => 'c1c7f338',
'phui-calendar-month-css' => '476be7e0',
'phui-crumbs-view-css' => 'ce840ec2',
'phui-document-view-css' => '8be7a5e3',
'phui-document-view-css' => '88f0c90b',
'phui-feed-story-css' => '92f55311',
'phui-font-icon-base-css' => '3dad2ae3',
'phui-fontkit-css' => 'b664ac96',
'phui-form-css' => 'f535f938',
'phui-form-view-css' => 'a0e8f168',
'phui-header-view-css' => '47b8f221',
'phui-header-view-css' => '7716c613',
'phui-icon-view-css' => '88ba9081',
'phui-image-mask-css' => '5a8b09c8',
'phui-info-panel-css' => '27ea50a1',
'phui-info-view-css' => '33e54618',
'phui-inline-comment-view-css' => 'aa16f165',
'phui-list-view-css' => 'e448b6ba',
'phui-object-box-css' => '59db5c05',
'phui-object-box-css' => '92f2ddcf',
'phui-object-item-list-view-css' => '29ded459',
'phui-pinboard-view-css' => '55b27bc3',
'phui-property-list-view-css' => '1baf23eb',

View file

@ -148,6 +148,7 @@ final class DiffusionCommitController extends DiffusionController {
),
$message));
$headsup_view->setTall(true);
$object_box = id(new PHUIObjectBoxView())
->setHeader($headsup_view)
->addPropertyList($property_list)

View file

@ -24,6 +24,7 @@ final class PHUIDocumentView extends AphrontTagView {
}
public function setHeader(PHUIHeaderView $header) {
$header->setTall(true);
$this->header = $header;
return $this;
}
@ -111,21 +112,7 @@ final class PHUIDocumentView extends AphrontTagView {
$book = null;
if ($this->bookname) {
$book = phutil_tag(
'div',
array(
'class' => 'phui-document-bookname grouped',
),
array(
phutil_tag(
'span',
array('class' => 'bookname'),
$this->bookname),
phutil_tag(
'span',
array('class' => 'bookdescription'),
$this->bookdescription),
));
$book = pht('%s (%s)', $this->bookname, $this->bookdescription);
}
$topnav = null;
@ -159,13 +146,13 @@ final class PHUIDocumentView extends AphrontTagView {
$main_content = $this->renderChildren();
}
$this->header->setSubheader($book);
$content_inner = phutil_tag(
'div',
array(
'class' => 'phui-document-inner',
),
array(
$book,
$this->header,
$topnav,
$main_content,

View file

@ -13,6 +13,7 @@ final class PHUIHeaderView extends AphrontTagView {
private $headerIcon;
private $noBackground;
private $bleedHeader;
private $tall;
private $properties = array();
private $actionLinks = array();
private $buttonBar = null;
@ -35,6 +36,11 @@ final class PHUIHeaderView extends AphrontTagView {
return $this;
}
public function setTall($tall) {
$this->tall = $tall;
return $this;
}
public function addTag(PHUITagView $tag) {
$this->tags[] = $tag;
return $this;
@ -147,7 +153,8 @@ final class PHUIHeaderView extends AphrontTagView {
$classes[] = 'phui-bleed-header';
}
if ($this->properties || $this->policyObject || $this->subheader) {
if ($this->properties || $this->policyObject ||
$this->subheader || $this->tall) {
$classes[] = 'phui-header-tall';
}
@ -230,7 +237,12 @@ final class PHUIHeaderView extends AphrontTagView {
->setIconFont($this->headerIcon);
$left[] = $icon;
}
$left[] = $this->header;
$left[] = phutil_tag(
'span',
array(
'class' => 'phui-header-header',
),
$this->header);
if ($this->objectName) {
array_unshift(

View file

@ -18,8 +18,7 @@
.aphront-table-view td.aphront-table-notice {
padding: 12px 16px;
font-size: 13px;
color: {$blue};
font-weight: bold;
color: {$darkbluetext};
border-bottom: 1px solid {$thinblueborder};
}

View file

@ -10,6 +10,7 @@
.phui-document-view .phui-header-shell {
padding: 16px;
background-color: #F5F7FA;
}
.phui-document-content {
@ -47,8 +48,8 @@
.device-phone .phui-document-sidenav {
position: static;
width: auto;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
border-top: 1px solid {$thinblueborder};
border-bottom: 1px solid {$thinblueborder};
}
.device-phone .phui-sidenav-view .phui-document-inner {
@ -57,29 +58,10 @@
.phui-sidenav-view .phui-document-inner {
margin-right: 200px;
border-right: 1px solid #e7e7e7;
border-right: 1px solid {$thinblueborder};
background: #fff;
}
.phui-document-bookname {
padding: 8px 16px;
color: #9ca5b5;
background-color: #fff;
border-bottom: 1px solid {$lightblueborder};
}
.device-phone .phui-document-bookname {
padding: 8px;
}
.phui-document-bookname .bookname {
float: left;
}
.phui-document-bookname .bookdescription {
float: right;
}
.phui-document-content .phui-header-shell {
border-top: none;
border-bottom: 1px solid {$thinblueborder};

View file

@ -64,23 +64,28 @@ body .phui-header-shell.phui-bleed-header
}
.phui-header-view {
font-size: 16px;
color: #000;
font-weight: 500;
position: relative;
font-size: 13px;
}
.device-phone .phui-header-view {
.phui-header-header {
color: #000;
font-size: 15px;
font-weight: 500;
line-height: 20px;
}
.device-phone .phui-header-header {
font-size: 14px;
}
.phui-object-box .phui-header-tall h1.phui-header-view,
.phui-document-view .phui-header-tall h1.phui-header-view {
.phui-object-box .phui-header-tall .phui-header-header,
.phui-document-view .phui-header-tall .phui-header-header {
font-size: 18px;
font-weight: 500;
}
.phui-header-view .phui-header-col2 > a {
.phui-header-view .phui-header-header a {
color: #000;
}
@ -90,6 +95,7 @@ body .phui-header-shell.phui-bleed-header
.phui-object-box .phui-header-view .phui-header-action-links {
margin-right: 4px;
font-size: 13px;
}
.device-phone .phui-object-box .phui-header-view .phui-header-action-links {

View file

@ -125,7 +125,3 @@ div.phui-object-box.phui-object-box-flush {
margin: 0;
padding: 0;
}
.phui-box-border + .phui-box-border {
border-top: 1px solid {$thinblueborder};
}