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
2024-11-18 12:52:42 +01:00 · 2016-01-25 13:27:28 -08:00 · 2016-01-25 13:27:28 -08:00 · 6349741760
commit 6349741760
parent 1e69f06d74
6 changed files with 104 additions and 107 deletions
--- 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',
--- 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(
--- 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;
  }
--- 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;
-}
--- 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;
 }
--- 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};
+}