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

@@ -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',

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(

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;
   }

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;
-}

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;
 }

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};
+}