From 6349741760a84de46f6a53d57fadef3b044b15ee Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 25 Jan 2016 13:27:28 -0800 Subject: [PATCH] First pass at new Workboard UI Summary: Cleans up Workboards to match the mocks. No new functionality, just more consistent colors/spacing/common components. Test Plan: Visit a few workboards, drag and drop items. Mobile, Tablet, Desktop {F1070733} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15115 --- resources/celerity/map.php | 12 ++-- .../PhabricatorProjectBoardViewController.php | 50 +++++-------- src/view/phui/PHUIWorkpanelView.php | 21 +++--- .../rsrc/css/application/base/phui-theme.css | 8 --- webroot/rsrc/css/phui/phui-workboard-view.css | 49 ++----------- webroot/rsrc/css/phui/phui-workpanel-view.css | 71 +++++++++++++++++-- 6 files changed, 104 insertions(+), 107 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 0b1e56ecea..eb619a05f4 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -35,7 +35,7 @@ return array( 'rsrc/css/application/base/main-menu-view.css' => 'd00a795a', 'rsrc/css/application/base/notification-menu.css' => 'f31c0bde', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '95351601', - 'rsrc/css/application/base/phui-theme.css' => '981a58f8', + 'rsrc/css/application/base/phui-theme.css' => 'd52033fb', 'rsrc/css/application/base/standard-page-view.css' => '7b0d68d8', 'rsrc/css/application/chatlog/chatlog.css' => 'd295b020', 'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4', @@ -153,8 +153,8 @@ return array( 'rsrc/css/phui/phui-text.css' => 'cf019f54', 'rsrc/css/phui/phui-timeline-view.css' => '2efceff8', 'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b', - 'rsrc/css/phui/phui-workboard-view.css' => 'f488d036', - 'rsrc/css/phui/phui-workpanel-view.css' => 'adec7699', + 'rsrc/css/phui/phui-workboard-view.css' => '04b34072', + 'rsrc/css/phui/phui-workpanel-view.css' => '31a835ba', 'rsrc/css/sprite-login.css' => '60e8560e', 'rsrc/css/sprite-menu.css' => '9dd65b92', 'rsrc/css/sprite-tokens.css' => '4f399012', @@ -827,11 +827,11 @@ return array( 'phui-status-list-view-css' => '888cedb8', 'phui-tag-view-css' => 'e60e227b', 'phui-text-css' => 'cf019f54', - 'phui-theme-css' => '981a58f8', + 'phui-theme-css' => 'd52033fb', 'phui-timeline-view-css' => '2efceff8', 'phui-two-column-view-css' => 'c75bfc5b', - 'phui-workboard-view-css' => 'f488d036', - 'phui-workpanel-view-css' => 'adec7699', + 'phui-workboard-view-css' => '04b34072', + 'phui-workpanel-view-css' => '31a835ba', 'phuix-action-list-view' => 'b5c256b8', 'phuix-action-view' => '8cf6d262', 'phuix-autocomplete' => '9196fb06', diff --git a/src/applications/project/controller/PhabricatorProjectBoardViewController.php b/src/applications/project/controller/PhabricatorProjectBoardViewController.php index 9b7b76e62c..2957ba47ed 100644 --- a/src/applications/project/controller/PhabricatorProjectBoardViewController.php +++ b/src/applications/project/controller/PhabricatorProjectBoardViewController.php @@ -332,37 +332,32 @@ final class PhabricatorProjectBoardViewController ), $project->getName()); - $header = id(new PHUIHeaderView()) - ->setHeader($header_link) - ->setUser($viewer) - ->setNoBackground(true) - ->addActionLink($sort_menu) - ->addActionLink($filter_menu) - ->addActionLink($manage_menu) - ->setPolicyObject($project); - - $header_box = id(new PHUIBoxView()) - ->appendChild($header) - ->addClass('project-board-header'); - $board_box = id(new PHUIBoxView()) ->appendChild($board) ->addClass('project-board-wrapper'); $nav = $this->getProfileMenu(); + $crumbs = $this->buildApplicationCrumbs(); + $crumbs->addTextCrumb(pht('Workboard')); + $crumbs->setBorder(true); + + $crumbs->addAction($sort_menu); + $crumbs->addAction($filter_menu); + $crumbs->addAction($manage_menu); + return $this->newPage() ->setTitle(pht('%s Board', $project->getName())) ->setPageObjectPHIDs(array($project->getPHID())) ->setShowFooter(false) ->setNavigation($nav) + ->setCrumbs($crumbs) ->addQuicksandConfig( array( 'boardConfig' => $behavior_config, )) ->appendChild( array( - $header_box, $board_box, )); } @@ -443,10 +438,9 @@ final class PhabricatorProjectBoardViewController $sort_menu->addAction($item); } - $sort_button = id(new PHUIButtonView()) - ->setText(pht('Sort: %s', $active_order)) - ->setIcon($sort_icon) - ->setTag('a') + $sort_button = id(new PHUIListItemView()) + ->setName(pht('Sort: %s', $active_order)) + ->setIcon('fa-sort-amount-asc') ->setHref('#') ->addSigil('boards-dropdown-menu') ->setMetadata( @@ -462,9 +456,6 @@ final class PhabricatorProjectBoardViewController PhabricatorApplicationSearchEngine $engine, $query_key) { - $filter_icon = id(new PHUIIconView()) - ->setIconFont('fa-search-plus bluegrey'); - $named = array( 'open' => pht('Open Tasks'), 'all' => pht('All Tasks'), @@ -521,10 +512,9 @@ final class PhabricatorProjectBoardViewController $filter_menu->addAction($item); } - $filter_button = id(new PHUIButtonView()) - ->setText(pht('Filter: %s', $active_filter)) - ->setIcon($filter_icon) - ->setTag('a') + $filter_button = id(new PHUIListItemView()) + ->setName(pht('Filter: %s', $active_filter)) + ->setIcon('fa-search') ->setHref('#') ->addSigil('boards-dropdown-menu') ->setMetadata( @@ -547,9 +537,6 @@ final class PhabricatorProjectBoardViewController $project, PhabricatorPolicyCapability::CAN_EDIT); - $manage_icon = id(new PHUIIconView()) - ->setIconFont('fa-cog bluegrey'); - $manage_items = array(); $manage_items[] = id(new PhabricatorActionView()) @@ -602,10 +589,9 @@ final class PhabricatorProjectBoardViewController $manage_menu->addAction($item); } - $manage_button = id(new PHUIButtonView()) - ->setText(pht('Manage Board')) - ->setIcon($manage_icon) - ->setTag('a') + $manage_button = id(new PHUIListItemView()) + ->setName(pht('Manage Board')) + ->setIcon('fa-cog') ->setHref('#') ->addSigil('boards-dropdown-menu') ->setMetadata( diff --git a/src/view/phui/PHUIWorkpanelView.php b/src/view/phui/PHUIWorkpanelView.php index 97221428d4..96978de952 100644 --- a/src/view/phui/PHUIWorkpanelView.php +++ b/src/view/phui/PHUIWorkpanelView.php @@ -58,8 +58,6 @@ final class PHUIWorkpanelView extends AphrontTagView { protected function getTagContent() { require_celerity_resource('phui-workpanel-view-css'); - $classes = array(); - $classes[] = 'phui-workpanel-view-inner'; $footer = ''; if ($this->footerAction) { $footer_tag = $this->footerAction; @@ -94,16 +92,15 @@ final class PHUIWorkpanelView extends AphrontTagView { ), $this->cards); - $view = phutil_tag( - 'div', - array( - 'class' => implode(' ', $classes), - ), - array( - $header, - $body, - $footer, - )); + $view = id(new PHUIBoxView()) + ->setColor(PHUIBoxView::GREY) + ->addClass('phui-workpanel-view-inner') + ->appendChild( + array( + $header, + $body, + $footer, + )); return $view; } diff --git a/webroot/rsrc/css/application/base/phui-theme.css b/webroot/rsrc/css/application/base/phui-theme.css index 03ccb8f38e..ca7f831432 100644 --- a/webroot/rsrc/css/application/base/phui-theme.css +++ b/webroot/rsrc/css/application/base/phui-theme.css @@ -67,10 +67,6 @@ text-shadow: {$whitetextshadow}; } -.phui-theme-light .sprite-main-header { - background-image: none; -} - .device-desktop.phui-theme-light .phabricator-main-menu-brand:hover { background-color: rgba(55,55,55,.08); cursor: hand; @@ -121,7 +117,3 @@ .phui-theme-blindigo { background-color: #F1F1F4; } - -.phui-theme-blindigo .phui-workpanel-view .phui-header-shell { - background-color: #F1F1F4; -} diff --git a/webroot/rsrc/css/phui/phui-workboard-view.css b/webroot/rsrc/css/phui/phui-workboard-view.css index 5d4ed5dd1c..e7aa55426a 100644 --- a/webroot/rsrc/css/phui/phui-workboard-view.css +++ b/webroot/rsrc/css/phui/phui-workboard-view.css @@ -9,10 +9,12 @@ .device-desktop .phui-workboard-view-shadow { overflow-x: auto; position: absolute; - top: 96px; + top: 79px; bottom: 0; left: 0; right: 0; + background: #fff; + padding: 16px; } .device-desktop .page-has-warning .phui-workboard-view-shadow { @@ -38,12 +40,12 @@ } .device-desktop .project-board-wrapper .phui-workboard-view-shadow { - left: 253px; + left: {$menu.profile.width}; } .device-desktop .phui-profile-menu-collapsed .project-board-wrapper .phui-workboard-view-shadow { - left: 101px; + left: {$menu.profile.width.collapsed}; } .device-desktop .phui-workboard-view .aphront-multi-column-fixed @@ -51,43 +53,6 @@ margin-left: 0; } -.device-tablet .project-board-wrapper { - margin-left: 8px; - margin-right: 8px; -} - -.project-board-header { - background-color: #fff; - border-bottom: 1px solid {$lightblueborder}; - padding: 12px; - position: relative; -} - -.device .project-board-header { - padding: 0; -} - -.project-board-header .phui-header-shell { - padding: 0; - border-bottom: 1px solid {$blueborder}; -} - -.device .project-board-header .phui-header-shell { - padding: 8px; -} - -.project-board-header .phui-header-header { - font-size: 18px; -} - -.project-board-header .phui-header-subheader { - display: inline-block; - margin: 0; - padding: 0 8px; -} - -.device-phone .project-board-header .phui-header-subheader { - display: block; - margin: 8px 0 2px 0; - padding: 0; +.device .project-board-wrapper { + margin: 16px; } diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css index 9b8943ceeb..4700b86b55 100644 --- a/webroot/rsrc/css/phui/phui-workpanel-view.css +++ b/webroot/rsrc/css/phui/phui-workpanel-view.css @@ -3,10 +3,8 @@ */ .phui-workpanel-view .phui-header-shell { - padding: 16px 0 8px; - border-color: {$lightgreyborder}; - width: 300px; - background-color: transparent; + padding: 8px; + width: 284px; } .phui-workpanel-view .phui-header-shell .phui-header-header { @@ -24,7 +22,10 @@ .device-phone .phui-workboard-view { width: auto; - margin: 0 8px; +} + +.device .phui-workpanel-view .phui-header-shell { + width: auto; } .phui-workboard-view { @@ -36,6 +37,18 @@ user-select: none; } +.phui-workboard-view .phui-object-item { + background-color: #fff; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + margin-bottom: 6px; +} + +.phui-workboard-view .phui-object-item-frame { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + .phui-workboard-view .phui-object-item .phui-object-item-objname { -webkit-touch-callout: text; -webkit-user-select: text; @@ -62,7 +75,7 @@ } .phui-workpanel-view .phui-workpanel-body { - padding-top: 8px; + padding: 8px 8px 4px 8px; } .phui-workpanel-view .phui-workpanel-footer-action a { @@ -86,7 +99,7 @@ display: inline-block; } -.aphront-multi-column-fixed .phui-workpanel-view { +.device-desktop .aphront-multi-column-fixed .phui-workpanel-view { width: 300px; } @@ -148,3 +161,47 @@ .phui-workpanel-view .phui-object-item-attribute a { color: {$bluetext}; } + + +/* - Draggable Colors --------------------------------------------------------*/ + +.phui-workboard-view .phui-object-item.drag-dragging { + box-shadow: {$dropshadow}; + background-color: {$sh-greybackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-red { + background-color: {$sh-redbackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-orange { + background-color: {$sh-orangebackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-yellow { + background-color: {$sh-yellowbackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-green { + background-color: {$sh-greenbackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-blue { + background-color: {$sh-bluebackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-indigo { + background-color: {$sh-indigobackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-violet { + background-color: {$sh-violetbackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-pink { + background-color: {$sh-pinkbackground}; +} + +.phui-workboard-view .drag-dragging.phui-object-item-bar-color-sky { + background-color: {$sh-bluebackground}; +}