1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 12:52:42 +01:00

Update Settings/Config UI

Summary: Testing out a new 'nav' layout in Settings / Config. Spent a few days here and couldn't find much better overall.

Test Plan: View each page in Settings and in Config. Save some config options. Test mobile, desktop, tablet.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15659
This commit is contained in:
Chad Little 2016-04-08 22:00:38 +00:00 committed by chad
parent 60e91d3934
commit 57e606b395
14 changed files with 122 additions and 49 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '03a2a623',
'core.pkg.css' => '82cefddc',
'core.pkg.js' => 'e5484f37',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '7ba78475',
@ -126,7 +126,7 @@ return array(
'rsrc/css/phui/phui-box.css' => 'd909ea3d',
'rsrc/css/phui/phui-button.css' => 'a64a8de6',
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
'rsrc/css/phui/phui-crumbs-view.css' => '1a1265d4',
'rsrc/css/phui/phui-curtain-view.css' => '7148ae25',
'rsrc/css/phui/phui-document-pro.css' => '73e45fd2',
'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
@ -156,7 +156,7 @@ return array(
'rsrc/css/phui/phui-status.css' => '37309046',
'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
'rsrc/css/phui/phui-timeline-view.css' => '6e342216',
'rsrc/css/phui/phui-two-column-view.css' => '691fec04',
'rsrc/css/phui/phui-two-column-view.css' => 'b9538af1',
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@ -812,7 +812,7 @@ return array(
'phui-calendar-list-css' => 'c1c7f338',
'phui-calendar-month-css' => '476be7e0',
'phui-chart-css' => '6bf6f78e',
'phui-crumbs-view-css' => '79d536e5',
'phui-crumbs-view-css' => '1a1265d4',
'phui-curtain-view-css' => '7148ae25',
'phui-document-summary-view-css' => '9ca48bdf',
'phui-document-view-css' => '9c71d2bf',
@ -846,7 +846,7 @@ return array(
'phui-tag-view-css' => '6bbd83e2',
'phui-theme-css' => '027ba77e',
'phui-timeline-view-css' => '6e342216',
'phui-two-column-view-css' => '691fec04',
'phui-two-column-view-css' => 'b9538af1',
'phui-workboard-color-css' => 'ac6fe6a7',
'phui-workboard-view-css' => 'e6d89647',
'phui-workcard-view-css' => '3646fb96',

View file

@ -58,15 +58,19 @@ final class PhabricatorConfigAllController
$panel->setHeaderText(pht('Current Settings'));
$panel->setTable($table);
$nav = $this->buildSideNavView();
$nav->selectFilter('all/');
$nav->setCrumbs($crumbs);
$nav->appendChild($panel);
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$panel,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}

View file

@ -18,16 +18,17 @@ final class PhabricatorConfigCacheController
$code_box = $this->renderCodeBox();
$data_box = $this->renderDataBox();
$nav->appendChild(
array(
$crumbs,
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$code_box,
$data_box,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
private function renderCodeBox() {

View file

@ -153,15 +153,17 @@ final class PhabricatorConfigDatabaseIssueController
$nav = $this->buildSideNavView();
$nav->selectFilter('dbissue/');
$nav->appendChild(
array(
$crumbs,
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$table_box,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
}

View file

@ -91,12 +91,16 @@ final class PhabricatorConfigDatabaseStatusController
$crumbs->addTextCrumb(pht('Database Status'));
}
$nav->setCrumbs($crumbs);
$nav->appendChild($body);
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$body,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}

View file

@ -31,18 +31,22 @@ final class PhabricatorConfigHistoryController
$title = pht('Settings History');
$crumbs = $this->buildApplicationCrumbs();
$crumbs->setBorder(true);
$crumbs->addTextCrumb('Config', $this->getApplicationURI());
$crumbs->addTextCrumb($title, '/config/history/');
$nav = $this->buildSideNavView();
$nav->selectFilter('history/');
$nav->setCrumbs($crumbs);
$nav->appendChild($timeline);
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$timeline,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
}

View file

@ -56,19 +56,22 @@ final class PhabricatorConfigIssueListController
->setSeverity(PHUIInfoView::SEVERITY_NOTICE);
}
$nav->appendChild($setup_issues);
$title = pht('Setup Issues');
$crumbs = $this
->buildApplicationCrumbs($nav)
->addTextCrumb(pht('Setup'), $this->getApplicationURI('issue/'));
$nav->setCrumbs($crumbs);
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$setup_issues,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
private function buildIssueList(array $issues, $group) {

View file

@ -23,21 +23,21 @@ final class PhabricatorConfigListController
->setHeaderText(pht('Applications Configuration'))
->setObjectList($apps_list);
$nav->appendChild(
array(
$core,
$apps,
));
$crumbs = $this
->buildApplicationCrumbs()
->addTextCrumb(pht('Config'), $this->getApplicationURI());
$nav->setCrumbs($crumbs);
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$core,
$apps,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
private function buildConfigOptionsList(array $groups, $type) {

View file

@ -21,15 +21,17 @@ final class PhabricatorConfigModuleController
$nav = $this->buildSideNavView();
$nav->selectFilter('module/'.$key.'/');
$nav->appendChild(
array(
$crumbs,
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$content,
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
}

View file

@ -15,12 +15,16 @@ final class PhabricatorConfigWelcomeController
->buildApplicationCrumbs()
->addTextCrumb(pht('Welcome'));
$nav->setCrumbs($crumbs);
$nav->appendChild($this->buildWelcomeScreen($request));
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn(array(
$this->buildWelcomeScreen($request),
));
return $this->newPage()
->setTitle($title)
->appendChild($nav);
->setCrumbs($crumbs)
->appendChild($view);
}
public function buildWelcomeScreen(AphrontRequest $request) {

View file

@ -61,14 +61,17 @@ final class PhabricatorSettingsMainController
'/p/'.$this->getUser()->getUsername().'/');
}
$crumbs->addTextCrumb($panel->getPanelName());
$nav->appendChild($response);
$title = $panel->getPanelName();
$view = id(new PHUITwoColumnView())
->setNavigation($nav)
->setMainColumn($response);
return $this->newPage()
->setTitle($title)
->setCrumbs($crumbs)
->setNavigation($nav);
->appendChild($view);
}

View file

@ -4,6 +4,7 @@ final class PHUITwoColumnView extends AphrontTagView {
private $mainColumn;
private $sideColumn = null;
private $navigation;
private $display;
private $fluid;
private $header;
@ -25,6 +26,12 @@ final class PHUITwoColumnView extends AphrontTagView {
return $this;
}
public function setNavigation($nav) {
$this->navigation = $nav;
$this->display = self::DISPLAY_LEFT;
return $this;
}
public function setHeader(PHUIHeaderView $header) {
$this->header = $header;
return $this;
@ -162,14 +169,24 @@ final class PHUITwoColumnView extends AphrontTagView {
private function buildSideColumn() {
$classes = array();
$classes[] = 'phui-side-column';
$navigation = null;
if ($this->navigation) {
$classes[] = 'side-has-nav';
$navigation = id(new PHUIObjectBoxView())
->appendChild($this->navigation);
}
$curtain = $this->getCurtain();
return phutil_tag(
'div',
array(
'class' => 'phui-side-column',
'class' => implode($classes, ' '),
),
array(
$navigation,
$curtain,
$this->sideColumn,
));

View file

@ -5,7 +5,7 @@
.phui-crumbs-view {
overflow: hidden;
vertical-align: top;
padding: 0 8px 0 16px;
padding: 0 20px 0 28px;
/* TODO: Position this over the slider for Differential's file tree view.
Remove this once that gets sorted out. */
position: relative;

View file

@ -70,6 +70,16 @@
width: 300px;
}
.device-desktop .phui-two-column-view.phui-side-column-left .phui-main-column {
float: right;
width: calc(100% - 280px);
}
.device-desktop .phui-two-column-view.phui-side-column-left .phui-side-column {
float: left;
width: 260px;
}
.device .phui-side-column {
margin-bottom: 20px;
}
@ -202,3 +212,22 @@
.phui-header-shell + .phui-info-view {
margin: 16px;
}
/* Navigation */
.phui-two-column-view .side-has-nav .phabricator-nav-local {
width: auto;
position: static;
margin: 0;
}
.device .phui-two-column-view .side-has-nav {
display: none;
}
/* Document View */
.phui-two-column-view .phui-two-column-content .phui-document-fluid
.phui-document-view {
margin: 0 0 20px 0;
}