Make all CSS rules for draggable cards/items independent of container classes

Summary:
Ref T5240. With the new approach, the draggable clones lose their containers, so they don't get affected by rules like `.container .item`.

Put classes on the cards/items and use `.board-item.item` and `.standard-item.item` to apply rules instead.

This didn't turn out //too// gross, and seems relatively OK / not obviously broken.

Test Plan:
  - Dragged cards on a workboard.
  - Dragged items in normal lists (tasks, pinned apps).

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T5240

Differential Revision: https://secure.phabricator.com/D15161

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'cd66e467',
+    'core.pkg.css' => 'a01828d4',
     'core.pkg.js' => 'c5178ede',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -142,7 +142,7 @@ return array(
     'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '407eaf5a',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '699de05e',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '56aab18d',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-profile-menu.css' => 'ab4fcf5f',
@@ -154,7 +154,7 @@ return array(
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'b07a5524',
-    'rsrc/css/phui/workboards/phui-workcard.css' => 'ddb93318',
+    'rsrc/css/phui/workboards/phui-workcard.css' => '92178913',
     'rsrc/css/phui/workboards/phui-workpanel.css' => 'b90970eb',
     'rsrc/css/sprite-login.css' => '60e8560e',
     'rsrc/css/sprite-menu.css' => '9dd65b92',
@@ -818,7 +818,7 @@ return array(
     'phui-inline-comment-view-css' => '0fdb3667',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '407eaf5a',
-    'phui-object-item-list-view-css' => '699de05e',
+    'phui-object-item-list-view-css' => '56aab18d',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-profile-menu-css' => 'ab4fcf5f',
@@ -831,7 +831,7 @@ return array(
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
     'phui-workboard-view-css' => 'b07a5524',
-    'phui-workcard-view-css' => 'ddb93318',
+    'phui-workcard-view-css' => '92178913',
     'phui-workpanel-view-css' => 'b90970eb',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',

src/applications/project/controller/PhabricatorProjectBoardViewController.php

@@ -288,6 +288,7 @@ final class PhabricatorProjectBoardViewController
         ->setFlush(true)
         ->setAllowEmptyList(true)
         ->addSigil('project-column')
+        ->setItemClass('phui-workcard')
         ->setMetadata(
           array(
             'columnPHID' => $column->getPHID(),

src/view/phui/PHUIObjectItemListView.php

@@ -9,6 +9,7 @@ final class PHUIObjectItemListView extends AphrontTagView {
   private $flush;
   private $allowEmptyList;
   private $states;
+  private $itemClass = 'phui-object-item-standard';
 
   public function setAllowEmptyList($allow_empty_list) {
     $this->allowEmptyList = $allow_empty_list;
@@ -49,6 +50,11 @@ final class PHUIObjectItemListView extends AphrontTagView {
     return $this;
   }
 
+  public function setItemClass($item_class) {
+    $this->itemClass = $item_class;
+    return $this;
+  }
+
   protected function getTagName() {
     return 'ul';
   }
@@ -89,6 +95,11 @@ final class PHUIObjectItemListView extends AphrontTagView {
           $item->setUser($viewer);
         }
       }
+
+      foreach ($this->items as $item) {
+        $item->addClass($this->itemClass);
+      }
+
       $items = $this->items;
     } else if ($this->allowEmptyList) {
       $items = null;

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -374,8 +374,9 @@ ul.phui-object-item-icons {
   attributes.
 */
 
-.phui-workboard-view .phui-object-item {
+.phui-workcard.phui-object-item {
   border-left-width: 4px;
+  box-sizing: border-box;
 }
 
 .phui-object-item {
@@ -682,6 +683,12 @@ ul.phui-object-item-list-view .phui-object-item-selected
   border-bottom: 1px solid {$thinblueborder};
 }
 
+.drag-clone.phui-object-item-standard .phui-object-item-frame {
+  border: none;
+  opacity: 0.8;
+  background: {$sh-bluebackground};
+}
+
 .phui-object-box .phui-object-item-list-header {
   font-size: {$normalfontsize};
   color: {$darkbluetext};

webroot/rsrc/css/phui/workboards/phui-workcard.css

@@ -2,28 +2,28 @@
  * @provides phui-workcard-view-css
  */
 
-.phui-workpanel-view .phui-object-item {
+.phui-workcard.phui-object-item {
   background-color: #fff;
   border-radius: 3px;
   margin-bottom: 8px;
 }
 
-.phui-workpanel-view .phui-object-item-name {
+.phui-workcard .phui-object-item-name {
   padding-bottom: 4px;
 }
 
-.phui-workpanel-view .phui-object-item-content {
+.phui-workcard .phui-object-item-content {
   margin-top: 0;
 }
 
-.phui-workpanel-view .phui-object-item-frame {
+.phui-workcard .phui-object-item-frame {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   border-color: {$thinblueborder};
   border-bottom-color: {$lightblueborder};
 }
 
-.phui-workpanel-view .phui-object-item .phui-object-item-objname {
+.phui-workcard.phui-object-item .phui-object-item-objname {
   -webkit-touch-callout: text;
   -webkit-user-select: text;
   -khtml-user-select: text;
@@ -32,57 +32,57 @@
   user-select: text;
 }
 
-.phui-workpanel-view .phui-object-item-link {
+.phui-workcard .phui-object-item-link {
   white-space: normal;
   font-weight: normal;
   color: #000;
   margin-left: 2px;
 }
 
-.device-desktop .phui-workpanel-view .phui-object-item-with-1-actions
+.device-desktop .phui-workcard .phui-object-item-with-1-actions
   .phui-object-item-content-box {
-    margin-right: 0;
-    overflow: hidden;
+  margin-right: 0;
+  overflow: hidden;
 }
 
-.phui-workpanel-view .phui-object-item-objname {
+.phui-workcard .phui-object-item-objname {
   vertical-align: top;
 }
 
-.phui-workpanel-view .phui-object-item-grippable .phui-object-item-frame {
+.phui-workcard.phui-object-item-grippable .phui-object-item-frame {
   padding-left: 0;
 }
 
-.phui-workpanel-view .phui-object-item-grip {
+.phui-workcard .phui-object-item-grip {
   display: none;
 }
 
-.device-desktop .phui-workpanel-view .phui-list-item-icon {
+.device-desktop .phui-workcard .phui-list-item-icon {
   display: none;
 }
 
-.phui-workpanel-view .phui-object-item .phui-list-item-href {
+.phui-workcard.phui-object-item .phui-list-item-href {
   height: 24px;
   width: 24px;
 }
 
-.device-desktop .phui-workpanel-view .phui-object-item:hover
+.device-desktop .phui-workcard.phui-object-item:hover
   .phui-list-item-href {
     background: #fff;
     opacity: .7;
 }
 
-.device-desktop .phui-workpanel-view .phui-object-item
+.device-desktop .phui-workcard.phui-object-item
   .phui-list-item-href:hover {
     background: {$sh-bluebackground};
     opacity: 1;
 }
 
-.phui-workpanel-view .phui-object-item:hover .phui-list-item-icon {
+.phui-workcard.phui-object-item:hover .phui-list-item-icon {
   display: block;
 }
 
-.phui-workpanel-view .phui-object-item-attributes {
+.phui-workcard .phui-object-item-attributes {
   margin-right: 12px;
 }
 
@@ -90,47 +90,47 @@
 
 /* - Draggable Colors --------------------------------------------------------*/
 
-.phui-workpanel-view .phui-object-item.drag-dragging {
+.phui-workcard.phui-object-item.drag-clone {
   box-shadow: {$dropshadow};
   background-color: {$sh-greybackground};
 }
 
-.phui-workpanel-view .phui-object-item.drag-dragging .phui-list-item-href {
+.phui-workcard.phui-object-item.drag-clone .phui-list-item-href {
   display: none;
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-red {
+.phui-workcard.drag-clone.phui-object-item-bar-color-red {
   background-color: {$sh-redbackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-orange {
+.phui-workcard.drag-clone.phui-object-item-bar-color-orange {
   background-color: {$sh-orangebackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-yellow {
+.phui-workcard.drag-clone.phui-object-item-bar-color-yellow {
   background-color: {$sh-yellowbackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-green {
+.phui-workcard.drag-clone.phui-object-item-bar-color-green {
   background-color: {$sh-greenbackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-blue {
+.phui-workcard.drag-clone.phui-object-item-bar-color-blue {
   background-color: {$sh-bluebackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-indigo {
+.phui-workcard.drag-clone.phui-object-item-bar-color-indigo {
   background-color: {$sh-indigobackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-violet {
+.phui-workcard.drag-clone.phui-object-item-bar-color-violet {
   background-color: {$sh-violetbackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-pink {
+.phui-workcard.drag-clone.phui-object-item-bar-color-pink {
   background-color: {$sh-pinkbackground};
 }
 
-.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-sky {
+.phui-workcard.drag-clone.phui-object-item-bar-color-sky {
   background-color: {$sh-bluebackground};
 }