From dc10bb1f4980b0cc646c4d89b8d8db472521505d Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 16 Aug 2017 20:12:19 -0700 Subject: [PATCH] Update Settings to use TwoColumn fixed layout Summary: Simplifies the page, adds base support for PHUITwoColumn fixed from Instances (which I'll delete css there). Test Plan: click on every settings page, UI seems in tact, check mobile, desktop, mobile menus. {F5102572} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18436 --- resources/celerity/map.php | 6 +-- .../PhabricatorSettingsMainController.php | 8 +-- ...torConpherencePreferencesSettingsPanel.php | 2 +- .../editengine/PhabricatorEditEngine.php | 13 +++-- .../rsrc/css/phui/phui-two-column-view.css | 51 +++++++++++++++++++ 5 files changed, 65 insertions(+), 15 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index db0e057ab2..774e6c0778 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => 'e68cf1fa', 'conpherence.pkg.js' => 'b5b51108', - 'core.pkg.css' => 'dd8bcea0', + 'core.pkg.css' => 'cf953851', 'core.pkg.js' => '5d80e0db', 'darkconsole.pkg.js' => '1f9a31bc', 'differential.pkg.css' => '45951e9e', @@ -178,7 +178,7 @@ return array( 'rsrc/css/phui/phui-status.css' => 'd5263e49', 'rsrc/css/phui/phui-tag-view.css' => 'b4719c50', 'rsrc/css/phui/phui-timeline-view.css' => 'f21db7ca', - 'rsrc/css/phui/phui-two-column-view.css' => '81b0f3ce', + 'rsrc/css/phui/phui-two-column-view.css' => '76dcd3d4', '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', @@ -874,7 +874,7 @@ return array( 'phui-tag-view-css' => 'b4719c50', 'phui-theme-css' => '9f261c6b', 'phui-timeline-view-css' => 'f21db7ca', - 'phui-two-column-view-css' => '81b0f3ce', + 'phui-two-column-view-css' => '76dcd3d4', 'phui-workboard-color-css' => '783cdff5', 'phui-workboard-view-css' => '3bc85455', 'phui-workcard-view-css' => 'cca5fa92', diff --git a/src/applications/settings/controller/PhabricatorSettingsMainController.php b/src/applications/settings/controller/PhabricatorSettingsMainController.php index 4c1bfab6f1..1e4d4a0b70 100644 --- a/src/applications/settings/controller/PhabricatorSettingsMainController.php +++ b/src/applications/settings/controller/PhabricatorSettingsMainController.php @@ -121,18 +121,18 @@ final class PhabricatorSettingsMainController } $header = id(new PHUIHeaderView()) - ->setHeader($header_text) - ->setHeaderIcon('fa-pencil'); + ->setHeader($header_text); $title = $panel->getPanelName(); $view = id(new PHUITwoColumnView()) ->setHeader($header) - ->setFooter($response); + ->setFixed(true) + ->setNavigation($nav) + ->setMainColumn($response); return $this->newPage() ->setTitle($title) - ->setNavigation($nav) ->setCrumbs($crumbs) ->appendChild($view); diff --git a/src/applications/settings/panel/PhabricatorConpherencePreferencesSettingsPanel.php b/src/applications/settings/panel/PhabricatorConpherencePreferencesSettingsPanel.php index 87643a08ad..6ed6325d67 100644 --- a/src/applications/settings/panel/PhabricatorConpherencePreferencesSettingsPanel.php +++ b/src/applications/settings/panel/PhabricatorConpherencePreferencesSettingsPanel.php @@ -6,7 +6,7 @@ final class PhabricatorConpherencePreferencesSettingsPanel const PANELKEY = 'conpherence'; public function getPanelName() { - return pht('Conpherence Preferences'); + return pht('Conpherence'); } public function getPanelGroupKey() { diff --git a/src/applications/transactions/editengine/PhabricatorEditEngine.php b/src/applications/transactions/editengine/PhabricatorEditEngine.php index c9d8a6887f..d09e2450a1 100644 --- a/src/applications/transactions/editengine/PhabricatorEditEngine.php +++ b/src/applications/transactions/editengine/PhabricatorEditEngine.php @@ -1141,10 +1141,8 @@ abstract class PhabricatorEditEngine if ($this->getIsCreate()) { $header_text = $this->getFormHeaderText($object); - $header_icon = 'fa-plus-square'; } else { $header_text = $this->getObjectEditTitleText($object); - $header_icon = 'fa-pencil'; } $show_preview = !$request->isAjax(); @@ -1185,8 +1183,7 @@ abstract class PhabricatorEditEngine $crumbs = $this->buildCrumbs($object, $final = true); $header = id(new PHUIHeaderView()) - ->setHeader($header_text) - ->setHeaderIcon($header_icon); + ->setHeader($header_text); $crumbs->setBorder(true); if ($action_button) { @@ -1216,8 +1213,6 @@ abstract class PhabricatorEditEngine $view->setHeader($header); } - $view->setFooter($content); - $page = $controller->newPage() ->setTitle($header_text) ->setCrumbs($crumbs) @@ -1225,7 +1220,11 @@ abstract class PhabricatorEditEngine $navigation = $this->getNavigation(); if ($navigation) { - $page->setNavigation($navigation); + $view->setFixed(true); + $view->setNavigation($navigation); + $view->setMainColumn($content); + } else { + $view->setFooter($content); } return $page; diff --git a/webroot/rsrc/css/phui/phui-two-column-view.css b/webroot/rsrc/css/phui/phui-two-column-view.css index 9aaff1de28..dba1519597 100644 --- a/webroot/rsrc/css/phui/phui-two-column-view.css +++ b/webroot/rsrc/css/phui/phui-two-column-view.css @@ -244,3 +244,54 @@ .phui-document-view { margin: 0 0 20px 0; } + +/*- Fixed Styles with Navigation -------------------------------------------- */ + +.phui-two-column-fixed.phui-two-column-view .phui-two-column-header { + background: transparent; + border: none; + margin-bottom: 0; +} + +.phui-two-column-fixed.phui-two-column-view .phui-side-column + .phui-box-border { + background: transparent; + border: none; + padding: 0; + width: 180px; +} + +.device-desktop + .phui-two-column-fixed.phui-two-column-view.phui-side-column-left + .phui-side-column { + width: 200px; +} + +.device-desktop + .phui-two-column-fixed.phui-two-column-view.phui-side-column-left + .phui-main-column { + width: calc(100% - 200px) +} + +.phui-two-column-fixed.phui-two-column-view .phui-basic-nav + .phabricator-side-menu { + background: transparent; +} + +.phui-two-column-fixed.phui-two-column-view + .phui-basic-nav .phabricator-side-menu .phui-list-item-selected { + border-radius: 3px; + background-color: #f5f9ff; + border: 1px solid {$sky}; + padding-left: 3px; +} + +.phui-two-column-fixed.phui-two-column-view .phui-basic-nav + .phabricator-side-menu .phui-list-item-href { + border-radius: 3px; +} + +.phui-two-column-fixed.phui-two-column-view .phui-header-action-links + .phui-mobile-menu { + display: block; +}