From 10dd27cac99273022d7acb975899c768155cf297 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 29 Jun 2015 12:31:49 -0700 Subject: [PATCH] [Redesign] Update Workboards Summary: Ref T8099, Cleans up Workboard UI, fixes button icon spacing Test Plan: Review workboards on desktop, mobile Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T8099 Differential Revision: https://secure.phabricator.com/D13473 --- resources/celerity/map.php | 22 +++++++-------- .../PhabricatorProjectBoardController.php | 1 + .../rsrc/css/application/base/phui-theme.css | 4 +++ webroot/rsrc/css/phui/phui-button.css | 4 +-- .../css/phui/phui-object-item-list-view.css | 6 +++-- webroot/rsrc/css/phui/phui-workboard-view.css | 27 ++++++++++++++++--- webroot/rsrc/css/phui/phui-workpanel-view.css | 27 ++++++++----------- 7 files changed, 57 insertions(+), 34 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 805e9ac82a..e0963f2dcf 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '5c21bf06', + 'core.pkg.css' => 'a24d5624', 'core.pkg.js' => 'a590b451', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '1b36e899', @@ -36,7 +36,7 @@ return array( 'rsrc/css/application/base/main-menu-view.css' => '09265034', 'rsrc/css/application/base/notification-menu.css' => 'f31c0bde', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '077e63cb', - 'rsrc/css/application/base/phui-theme.css' => 'f54d2901', + 'rsrc/css/application/base/phui-theme.css' => '6b451f24', 'rsrc/css/application/base/standard-page-view.css' => 'def344d6', 'rsrc/css/application/calendar/calendar-icon.css' => 'c69aa59f', 'rsrc/css/application/chatlog/chatlog.css' => 'd295b020', @@ -127,7 +127,7 @@ return array( 'rsrc/css/phui/phui-action-list.css' => '32c388b3', 'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5', 'rsrc/css/phui/phui-box.css' => 'a5bb366d', - 'rsrc/css/phui/phui-button.css' => '2520531d', + 'rsrc/css/phui/phui-button.css' => 'cf7ca639', 'rsrc/css/phui/phui-crumbs-view.css' => 'ce840ec2', 'rsrc/css/phui/phui-document.css' => '3eb3b3e3', 'rsrc/css/phui/phui-feed-story.css' => 'c70d2dd9', @@ -141,7 +141,7 @@ return array( 'rsrc/css/phui/phui-info-view.css' => '5b16bac6', 'rsrc/css/phui/phui-list.css' => '02ab3534', 'rsrc/css/phui/phui-object-box.css' => '3db9f358', - 'rsrc/css/phui/phui-object-item-list-view.css' => '762ae15a', + 'rsrc/css/phui/phui-object-item-list-view.css' => '2b126bca', 'rsrc/css/phui/phui-pager.css' => 'bea33d23', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', 'rsrc/css/phui/phui-property-list-view.css' => '1baf23eb', @@ -151,8 +151,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' => '47b18876', - 'rsrc/css/phui/phui-workboard-view.css' => '0cac51a4', - 'rsrc/css/phui/phui-workpanel-view.css' => '4bdc2562', + 'rsrc/css/phui/phui-workboard-view.css' => '935b19d6', + 'rsrc/css/phui/phui-workpanel-view.css' => '00558537', 'rsrc/css/sprite-login.css' => 'a3526809', 'rsrc/css/sprite-main-header.css' => '37e05e50', 'rsrc/css/sprite-menu.css' => 'fba663c3', @@ -765,7 +765,7 @@ return array( 'phriction-document-css' => 'd1861e06', 'phui-action-panel-css' => '3ee9afd5', 'phui-box-css' => 'a5bb366d', - 'phui-button-css' => '2520531d', + 'phui-button-css' => 'cf7ca639', 'phui-calendar-css' => 'ccabe893', 'phui-calendar-day-css' => 'd1cf6f93', 'phui-calendar-list-css' => 'c1c7f338', @@ -785,7 +785,7 @@ return array( 'phui-inline-comment-view-css' => 'fa5b8d1f', 'phui-list-view-css' => '02ab3534', 'phui-object-box-css' => '3db9f358', - 'phui-object-item-list-view-css' => '762ae15a', + 'phui-object-item-list-view-css' => '2b126bca', 'phui-pager-css' => 'bea33d23', 'phui-pinboard-view-css' => '2495140e', 'phui-property-list-view-css' => '1baf23eb', @@ -794,10 +794,10 @@ return array( 'phui-status-list-view-css' => '888cedb8', 'phui-tag-view-css' => '402691cc', 'phui-text-css' => 'cf019f54', - 'phui-theme-css' => 'f54d2901', + 'phui-theme-css' => '6b451f24', 'phui-timeline-view-css' => '47b18876', - 'phui-workboard-view-css' => '0cac51a4', - 'phui-workpanel-view-css' => '4bdc2562', + 'phui-workboard-view-css' => '935b19d6', + 'phui-workpanel-view-css' => '00558537', 'phuix-action-list-view' => 'b5c256b8', 'phuix-action-view' => '8cf6d262', 'phuix-dropdown-menu' => 'bd4c8dca', diff --git a/src/applications/project/controller/PhabricatorProjectBoardController.php b/src/applications/project/controller/PhabricatorProjectBoardController.php index 0837f9f5b7..6c7ffe7951 100644 --- a/src/applications/project/controller/PhabricatorProjectBoardController.php +++ b/src/applications/project/controller/PhabricatorProjectBoardController.php @@ -7,6 +7,7 @@ abstract class PhabricatorProjectBoardController $id = $project->getID(); $nav = parent::buildIconNavView($project); $nav->selectFilter("board/{$id}/"); + $nav->addClass('project-board-nav'); return $nav; } } diff --git a/webroot/rsrc/css/application/base/phui-theme.css b/webroot/rsrc/css/application/base/phui-theme.css index 893242d1bb..1d3d9210bd 100644 --- a/webroot/rsrc/css/application/base/phui-theme.css +++ b/webroot/rsrc/css/application/base/phui-theme.css @@ -93,3 +93,7 @@ .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-button.css b/webroot/rsrc/css/phui/phui-button.css index d8cf42187a..740864c847 100644 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -255,12 +255,12 @@ a.policy-control .caret { display: inline-block; position: absolute; top: 6px; - left: 12px; + left: 10px; } .button.icon-last .phui-icon-view { left: auto; - right: 12px; + right: 10px; } .phui-button-bar .button .phui-icon-view { diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css index c1bf5f9649..d3858ef748 100644 --- a/webroot/rsrc/css/phui/phui-object-item-list-view.css +++ b/webroot/rsrc/css/phui/phui-object-item-list-view.css @@ -559,13 +559,15 @@ ul.phui-object-item-list-view .phui-object-item-selected .drag-ghost { position: relative; - background: {$lightgreybackground}; + background: {$sh-indigobackground}; + border-radius: 3px; margin-bottom: 4px; + border: 1px dashed {$sh-indigoborder}; } .drag-dragging { position: relative; - background: {$sh-bluebackground}; + background: {$sh-yellowbackground}; opacity: 0.9; } diff --git a/webroot/rsrc/css/phui/phui-workboard-view.css b/webroot/rsrc/css/phui/phui-workboard-view.css index 21b205fbc6..9b3bec8167 100644 --- a/webroot/rsrc/css/phui/phui-workboard-view.css +++ b/webroot/rsrc/css/phui/phui-workboard-view.css @@ -9,14 +9,14 @@ .device-desktop .phui-workboard-view-shadow { overflow-x: auto; position: absolute; - top: 110px; + top: 96px; bottom: 0; left: 0; right: 0; } .device-desktop .page-has-warning .phui-workboard-view-shadow { - top: 138px; + top: 132px; } .device-desktop.with-durable-column .phui-workboard-view-shadow { @@ -99,8 +99,19 @@ margin-right: 8px; } +.project-board-header { + background-color: #fff; + border-bottom: 1px solid {$lightblueborder}; + padding: 12px; +} + +.device .project-board-header { + padding: 0; +} + .project-board-header .phui-header-shell { - padding: 20px 16px 20px 20px; + padding: 0; + border-bottom: 1px solid {$blueborder}; } .device .project-board-header .phui-header-shell { @@ -116,3 +127,13 @@ margin: 0; padding: 0 8px; } + +.device-desktop .phabricator-icon-nav.project-board-nav + .phabricator-nav-local { + margin-top: 64px; +} + +.device-desktop .phabricator-icon-nav.project-board-nav + .phabricator-nav-content { + margin: 0; +} diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css index dda165da87..89d86e940a 100644 --- a/webroot/rsrc/css/phui/phui-workpanel-view.css +++ b/webroot/rsrc/css/phui/phui-workpanel-view.css @@ -3,11 +3,10 @@ */ .phui-workpanel-view .phui-header-shell { - border: 1px solid {$lightblueborder}; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - background-color: #fff; - padding: 8px; + padding: 16px 0 8px; + border-color: {$lightgreyborder}; + width: 300px; + background-color: {$lightgreybackground}; } .phui-workpanel-view .phui-header-shell .phui-header-header { @@ -63,15 +62,11 @@ } .phui-workpanel-view .phui-workpanel-body { - background: {$backdrop}; - padding: 5px 5px 2px 5px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - box-shadow: inset 0 0px 5px rgba(0,0,0,.2); + padding-top: 8px; } .phui-workpanel-view .phui-workpanel-footer-action a { - color: #333; + color: {$darkbluetext}; font-weight: bold; } @@ -91,7 +86,7 @@ display: inline-block; } -.aphront-multi-column-fixed .phui-workpanel-body { +.aphront-multi-column-fixed .phui-workpanel-view { width: 300px; } @@ -109,10 +104,10 @@ } .project-panel-empty .phui-object-item-list-view { - background: rgba(255,255,255,.4); + background: {$sh-indigobackground}; border-radius: 3px; margin-bottom: 4px; - border: 1px dashed #fff; + border: 1px dashed {$sh-indigoborder}; } .project-panel-empty .phui-object-item-list-view .drag-ghost { @@ -123,12 +118,12 @@ background: rgba(255,255,255,.7); } -.project-panel-over-limit .phui-header-view { +.phui-workpanel-view.project-panel-over-limit .phui-header-header { color: {$red}; } .phui-workpanel-view.project-panel-over-limit .phui-header-shell { - border-color: {$sh-redborder}; + border-color: {$red}; } /* - Workpanel Cards -----------------------------------------------------------