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

[Redesign] PHUIHeaderView goes to table layout

Browse source 
Summary: Ref T8099. This changes makes flexible layouts easier, and aligns icons, buttons better vertically.

Test Plan: Test various header locations, Phriction, Conpherence, Dashboards, Workboards etc.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D12961
This commit is contained in:
Chad Little 2015-05-22 08:22:25 -07:00
parent 34ea95d9e2
commit 3cd27a0881
12 changed files with 123 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
resources/celerity/map.php
View file

@ -7,12 +7,12 @@
*/
return array(
'names' => array(
'core.pkg.css' => 'ce2c805f',
'core.pkg.css' => '6bad4591',
'core.pkg.js' => 'f3e08b38',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => 'bb338e4b',
'differential.pkg.js' => '895b8d62',
'diffusion.pkg.css' => '591664fa',
'diffusion.pkg.css' => '385e85b3',
'diffusion.pkg.js' => '0115b37c',
'maniphest.pkg.css' => 'ddf93c68',
'maniphest.pkg.js' => 'df4aa49f',
@ -51,7 +51,7 @@ return array(
'rsrc/css/application/conpherence/notification.css' => '919974b6',
'rsrc/css/application/conpherence/transaction.css' => '42a457f6',
'rsrc/css/application/conpherence/update.css' => '1099a660',
'rsrc/css/application/conpherence/widget-pane.css' => '93938744',
'rsrc/css/application/conpherence/widget-pane.css' => '77096740',
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
@ -65,7 +65,7 @@ return array(
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
'rsrc/css/application/diffusion/diffusion-icons.css' => '4ba18923',
'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
'rsrc/css/application/feed/feed.css' => 'b490a135',
@ -116,7 +116,7 @@ return array(
'rsrc/css/font/font-source-sans-pro.css' => '8906c07b',
'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
'rsrc/css/layout/phabricator-hovercard-view.css' => 'b7a82459',
'rsrc/css/layout/phabricator-hovercard-view.css' => 'd2a28ca5',
'rsrc/css/layout/phabricator-side-menu-view.css' => 'a440478a',
'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
'rsrc/css/phui/calendar/phui-calendar-day.css' => '38891735',
@ -128,18 +128,18 @@ return array(
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
'rsrc/css/phui/phui-button.css' => 'b995182d',
'rsrc/css/phui/phui-crumbs-view.css' => 'aeff7a21',
'rsrc/css/phui/phui-document.css' => '27a9bb7e',
'rsrc/css/phui/phui-document.css' => '8be7a5e3',
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
'rsrc/css/phui/phui-fontkit.css' => 'b664ac96',
'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
'rsrc/css/phui/phui-form.css' => 'f535f938',
'rsrc/css/phui/phui-header-view.css' => '3c91963d',
'rsrc/css/phui/phui-header-view.css' => '99066800',
'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' => '33595731',
'rsrc/css/phui/phui-list.css' => 'e448b6ba',
'rsrc/css/phui/phui-object-box.css' => 'c8d82bfe',
'rsrc/css/phui/phui-object-box.css' => '70285ee9',
'rsrc/css/phui/phui-object-item-list-view.css' => '4be0645f',
'rsrc/css/phui/phui-pinboard-view.css' => '22891c15',
'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
@ -149,8 +149,8 @@ return array(
'rsrc/css/phui/phui-tag-view.css' => '402691cc',
'rsrc/css/phui/phui-text.css' => 'cf019f54',
'rsrc/css/phui/phui-timeline-view.css' => 'a85542c8',
'rsrc/css/phui/phui-workboard-view.css' => '38446bc3',
'rsrc/css/phui/phui-workpanel-view.css' => 'e6435408',
'rsrc/css/phui/phui-workboard-view.css' => 'bc3e2e76',
'rsrc/css/phui/phui-workpanel-view.css' => '015a0cab',
'rsrc/css/sprite-login.css' => 'a3526809',
'rsrc/css/sprite-main-header.css' => '28d01b0b',
'rsrc/css/sprite-menu.css' => '02aa815a',
@ -499,7 +499,7 @@ return array(
'conpherence-thread-manager' => 'b7342ddb',
'conpherence-transaction-css' => '42a457f6',
'conpherence-update-css' => '1099a660',
'conpherence-widget-pane-css' => '93938744',
'conpherence-widget-pane-css' => '77096740',
'differential-changeset-view-css' => 'e19cfd6e',
'differential-core-view-css' => '7ac3cabc',
'differential-inline-comment-editor' => 'd4c87bf4',
@ -509,7 +509,7 @@ return array(
'differential-revision-history-css' => '0e8eb855',
'differential-revision-list-css' => 'f3c47d33',
'differential-table-of-contents-css' => '63f3ef4a',
'diffusion-icons-css' => '9c5828da',
'diffusion-icons-css' => '4ba18923',
'diffusion-readme-css' => '2106ea08',
'diffusion-source-css' => '66fdf661',
'diviner-shared-css' => '38813222',
@ -708,7 +708,7 @@ return array(
'phabricator-filetree-view-css' => 'fccf9f82',
'phabricator-flag-css' => '5337623f',
'phabricator-hovercard' => '14ac66f5',
'phabricator-hovercard-view-css' => 'b7a82459',
'phabricator-hovercard-view-css' => 'd2a28ca5',
'phabricator-keyboard-shortcut' => '1ae869f2',
'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
'phabricator-main-menu-view' => '680360ea',
@ -759,20 +759,20 @@ return array(
'phui-calendar-list-css' => 'c1d0ca59',
'phui-calendar-month-css' => '75e6a2ee',
'phui-crumbs-view-css' => 'aeff7a21',
'phui-document-view-css' => '27a9bb7e',
'phui-document-view-css' => '8be7a5e3',
'phui-feed-story-css' => 'c9f3a0b5',
'phui-font-icon-base-css' => '3dad2ae3',
'phui-fontkit-css' => 'b664ac96',
'phui-form-css' => 'f535f938',
'phui-form-view-css' => 'e1abbe8e',
'phui-header-view-css' => '3c91963d',
'phui-header-view-css' => '99066800',
'phui-icon-view-css' => '88ba9081',
'phui-image-mask-css' => '5a8b09c8',
'phui-info-panel-css' => '27ea50a1',
'phui-info-view-css' => '33595731',
'phui-inline-comment-view-css' => '2174771a',
'phui-list-view-css' => 'e448b6ba',
'phui-object-box-css' => 'c8d82bfe',
'phui-object-box-css' => '70285ee9',
'phui-object-item-list-view-css' => '4be0645f',
'phui-pinboard-view-css' => '22891c15',
'phui-property-list-view-css' => 'd2d143ea',
@ -782,8 +782,8 @@ return array(
'phui-tag-view-css' => '402691cc',
'phui-text-css' => 'cf019f54',
'phui-timeline-view-css' => 'a85542c8',
'phui-workboard-view-css' => '38446bc3',
'phui-workpanel-view-css' => 'e6435408',
'phui-workboard-view-css' => 'bc3e2e76',
'phui-workpanel-view-css' => '015a0cab',
'phuix-action-list-view' => 'b5c256b8',
'phuix-action-view' => '8cf6d262',
'phuix-dropdown-menu' => 'bd4c8dca',

4
src/applications/diffusion/controller/DiffusionBrowseController.php
View file

@ -48,6 +48,10 @@ abstract class DiffusionBrowseController extends DiffusionController {
'#');
}
$filter = id(new PHUIBoxView())
->addClass('mlt mlb')
->appendChild($filter);
return $filter;
}

9
src/applications/diffusion/controller/DiffusionRepositoryController.php
View file

@ -470,7 +470,7 @@ final class DiffusionRepositoryController extends DiffusionController {
$header->addActionLink($button);
$panel->setHeader($header);
$panel->appendChild($view);
$panel->setTable($view);
return $panel;
}
@ -653,14 +653,15 @@ final class DiffusionRepositoryController extends DiffusionController {
->setID('locate-input')
->setLabel(pht('Locate File')));
$form_box = id(new PHUIBoxView())
->addClass('diffusion-locate-file-view')
->appendChild($form->buildLayoutView());
$browse_panel->appendChild($form_box);
$locate_panel = id(new PHUIObjectBoxView())
->setHeaderText('Locate File')
->appendChild($form_box);
}
$browse_panel->setTable($browse_table);
return $browse_panel;
return array($locate_panel, $browse_panel);
}
private function renderCloneCommand(

70
src/view/phui/PHUIHeaderView.php
View file

@ -151,10 +151,6 @@ final class PHUIHeaderView extends AphrontTagView {
$classes[] = 'phui-header-tall';
}
if ($this->image) {
$classes[] = 'phui-header-has-image';
}
return array(
'class' => $classes,
);
@ -173,7 +169,8 @@ final class PHUIHeaderView extends AphrontTagView {
' ');
}
$header = array();
$left = array();
$right = array();
if ($this->actionLinks) {
$actions = array();
@ -183,7 +180,7 @@ final class PHUIHeaderView extends AphrontTagView {
$button->addClass('phui-header-action-link');
$actions[] = $button;
}
$header[] = phutil_tag(
$right[] = phutil_tag(
'div',
array(
'class' => 'phui-header-action-links',
@ -192,7 +189,7 @@ final class PHUIHeaderView extends AphrontTagView {
}
if ($this->buttonBar) {
$header[] = phutil_tag(
$right[] = phutil_tag(
'div',
array(
'class' => 'phui-header-action-links',
@ -220,7 +217,7 @@ final class PHUIHeaderView extends AphrontTagView {
),
array_interleave(' ', $this->tags));
}
$header[] = phutil_tag(
$right[] = phutil_tag(
'ul',
array(
'class' => 'phui-header-icon-list',
@ -231,13 +228,13 @@ final class PHUIHeaderView extends AphrontTagView {
if ($this->headerIcon) {
$icon = id(new PHUIIconView())
->setIconFont($this->headerIcon);
$header[] = $icon;
$left[] = $icon;
}
$header[] = $this->header;
$left[] = $this->header;
if ($this->objectName) {
array_unshift(
$header,
$left,
phutil_tag(
'a',
array(
@ -248,7 +245,7 @@ final class PHUIHeaderView extends AphrontTagView {
}
if ($this->subheader) {
$header[] = phutil_tag(
$left[] = phutil_tag(
'div',
array(
'class' => 'phui-header-subheader',
@ -273,7 +270,7 @@ final class PHUIHeaderView extends AphrontTagView {
$property_list[] = $this->renderPolicyProperty($this->policyObject);
}
$header[] = phutil_tag(
$left[] = phutil_tag(
'div',
array(
'class' => 'phui-header-subheader',
@ -281,15 +278,50 @@ final class PHUIHeaderView extends AphrontTagView {
$property_list);
}
return array(
$image,
phutil_tag(
// We here at @phabricator
$header_image = null;
if ($image) {
$header_image = phutil_tag(
'div',
array(
'class' => 'phui-header-col1',
),
$image);
}
// All really love
$header_left = phutil_tag(
'div',
array(
'class' => 'phui-header-col2',
),
$left);
// Tables and Pokemon.
$header_right = phutil_tag(
'div',
array(
'class' => 'phui-header-col3',
),
$right);
$header_row = phutil_tag(
'div',
array(
'class' => 'phui-header-row',
),
array(
$header_image,
$header_left,
$header_right,
));
return phutil_tag(
'h1',
array(
'class' => 'phui-header-view grouped',
'class' => 'phui-header-view',
),
$header),
);
$header_row);
}
private function renderPolicyProperty(PhabricatorPolicyInterface $object) {

4
webroot/rsrc/css/application/conpherence/widget-pane.css
View file

@ -46,7 +46,7 @@
border: 0;
}
.conpherence-widget-pane .widgets-header .phui-header-view {
.conpherence-widget-pane .widgets-header .phui-header-shell {
padding: 8px;
font-size: 14px;
}
@ -84,7 +84,7 @@
}
.device-desktop .conpherence-widget-pane .widgets-body {
top: 108px;
top: 111px;
width: 240px;
}

7
webroot/rsrc/css/application/diffusion/diffusion-icons.css
View file

@ -30,9 +30,6 @@
input.diffusion-clone-uri {
display: block;
width: 100%;
border: 1px solid #efefef;
box-shadow: none;
height: 24px;
}
.diffusion-clone-extras {
@ -40,7 +37,3 @@ input.diffusion-clone-uri {
text-align: right;
color: {$lightgreytext};
}
.diffusion-locate-file-view {
border-bottom: 1px solid {$thinblueborder};
}

10
webroot/rsrc/css/layout/phabricator-hovercard-view.css
View file

@ -20,17 +20,13 @@
float: left;
width: 100%;
box-shadow: {$dropshadow};
border: 1px solid {$blueborder};
border: 1px solid {$lightblueborder};
border-radius: 3px;
background-color: #fff;
}
.phabricator-hovercard-head {
border-bottom: 1px solid {$thinblueborder};
}
.phabricator-hovercard-head .phui-header-view {
padding: 8px;
.phabricator-hovercard-head .phui-header-shell {
padding: 8px 8px 8px 12px;
}
.phabricator-hovercard-head .phui-tag-type-state {

2
webroot/rsrc/css/phui/phui-document.css
View file

@ -9,7 +9,7 @@
}
.phui-document-view .phui-header-shell {
padding: 0 12px;
padding: 16px;
}
.phui-document-content {

43
webroot/rsrc/css/phui/phui-header-view.css
View file

@ -5,6 +5,32 @@
.phui-header-shell {
border-bottom: 1px solid {$thinblueborder};
overflow: hidden;
padding: 0 4px 12px;
}
.phui-header-view {
display: table;
width: 100%
}
.phui-header-row {
display: table-row;
}
.phui-header-col1 {
display: table-cell;
vertical-align: middle;
width: 62px;
}
.phui-header-col2 {
display: table-cell;
vertical-align: middle;
}
.phui-header-col3 {
display: table-cell;
vertical-align: middle;
}
body .phui-header-shell.phui-header-no-backgound {
@ -34,9 +60,8 @@ body .phui-header-shell.phui-bleed-header
}
.phui-header-view {
padding: 12px 4px 16px;
font-size: 15px;
color: {$darkbluetext};
color: #000;
font-weight: 500;
position: relative;
}
@ -47,8 +72,8 @@ body .phui-header-shell.phui-bleed-header
font-weight: 500;
}
.phui-header-view > a {
color: {$darkbluetext};
.phui-header-view .phui-header-col2 > a {
color: #000;
}
.phui-header-view .phui-header-action-links {
@ -56,8 +81,7 @@ body .phui-header-shell.phui-bleed-header
}
.phui-object-box .phui-header-view .phui-header-action-links {
margin-right: 12px;
margin-top: 4px;
margin-right: 4px;
}
.device-phone .phui-object-box .phui-header-view .phui-header-action-links {
@ -94,18 +118,15 @@ body.device-phone .phui-header-view {
display: inline-block;
background-repeat: no-repeat;
background-size: 100%;
border: 2px solid white;
border: 1px solid {$lightblueborder};
width: 50px;
height: 50px;
margin: 12px;
float: left;
border-radius: 2px;
}
.phui-header-subheader {
font-weight: normal;
font-size: 14px;
margin-top: 6px;
margin-top: 8px;
}
.phui-header-subheader .phui-icon-view {

16
webroot/rsrc/css/phui/phui-object-box.css
View file

@ -12,27 +12,13 @@
}
.phui-object-box.phui-object-box-collapsed .phui-header-shell {
padding: 0 4px 4px 16px;
padding: 0 8px 12px 16px;
}
div.phui-object-box.phui-object-box-flush {
margin-top: 0;
}
.phui-object-box .phui-header-shell {
padding: 0 5px 4px 4px;
border-bottom: 1px solid {$thinblueborder};
border-top: none;
}
.phui-object-box .phui-header-image {
margin: 1px 8px -7px -7px;
}
.phui-object-box .phui-header-shell h1 {
padding: 0 0 8px 0;
}
.phui-object-box .phui-header-shell + .phui-info-view {
margin: 12px 0 0 0;
}

4
webroot/rsrc/css/phui/phui-workboard-view.css
View file

@ -91,8 +91,8 @@
margin-right: 8px;
}
.project-board-header {
margin: 8px 12px;
.project-board-header .phui-header-shell {
padding: 20px 16px 20px 20px;
}
.project-board-header .phui-header-view {

2
webroot/rsrc/css/phui/phui-workpanel-view.css
View file

@ -9,7 +9,7 @@
background-color: #fff;
}
.phui-workpanel-view .phui-header-shell .phui-header-view {
.phui-workpanel-view .phui-header-shell {
padding: 8px;
font-size: 14px;
}