Update PHUIObjectItemListView structure for more flexibility

Summary: Converts PHUIObjectItemView to use display: table rows and columns for more flexible layouts. Slightly increases spacing, improves mobile layouts. Fixes T5502

Test Plan: Tested in multiple applications and UIExamples. Ran through mobile, tablet, and desktop break points. Used IE8-IE10, Firefox, Chrome, Safari on both Mac and Windows.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T5502

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'b43bb04d',
+    'core.pkg.css' => '00cd55eb',
     'core.pkg.js' => 'e64447dc',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '8af45893',
@@ -134,7 +134,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '43ed2d93',
     'rsrc/css/phui/phui-object-box.css' => 'e9f7e938',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '1f710f4e',
+    'rsrc/css/phui/phui-object-item-list-view.css' => 'a2e6046f',
     'rsrc/css/phui/phui-pinboard-view.css' => '3dd4a269',
     'rsrc/css/phui/phui-property-list-view.css' => '86f9df88',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -783,7 +783,7 @@ return array(
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '43ed2d93',
     'phui-object-box-css' => 'e9f7e938',
-    'phui-object-item-list-view-css' => '1f710f4e',
+    'phui-object-item-list-view-css' => 'a2e6046f',
     'phui-pinboard-view-css' => '3dd4a269',
     'phui-property-list-view-css' => '86f9df88',
     'phui-remarkup-preview-css' => '19ad512b',

src/view/phui/PHUIObjectItemView.php

@@ -259,10 +259,6 @@ final class PHUIObjectItemView extends AphrontTagView {
       $item_classes[] = 'phui-object-item-with-foot-icons';
     }
 
-    if ($this->bylines) {
-      $item_classes[] = 'phui-object-item-with-bylines';
-    }
-
     if ($this->actions) {
       $n = count($this->actions);
       $item_classes[] = 'phui-object-item-with-actions';
@@ -378,16 +374,13 @@ final class PHUIObjectItemView extends AphrontTagView {
           $icon_href = phutil_tag(
             'a',
             array('href' => $spec['attributes']['href']),
-            array($label, $icon));
+            array($icon, $label));
         } else {
-          $icon_href = array($label, $icon);
+          $icon_href = array($icon, $label);
         }
 
         $classes = array();
         $classes[] = 'phui-object-item-icon';
-        if ($spec['icon'] == 'none') {
-          $classes[] = 'phui-object-item-icon-none';
-        }
         if (isset($spec['attributes']['class'])) {
           $classes[] = $spec['attributes']['class'];
         }
@@ -562,6 +555,36 @@ final class PHUIObjectItemView extends AphrontTagView {
         $this->fontIcon);
     }
 
+    /* Build a fake table */
+    $column1 = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-object-item-col1',
+      ),
+      array(
+        $header,
+        $content,
+      ));
+
+    $column2 = null;
+    if ($icons || $bylines) {
+      $column2 = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-object-item-col2',
+        ),
+        array(
+          $icons,
+          $bylines,));
+    }
+
+    $table = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-object-item-table',
+      ),
+      phutil_tag_div('phui-object-item-table-row', array($column1, $column2)));
+
     $box = phutil_tag(
       'div',
       array(
@@ -569,10 +592,7 @@ final class PHUIObjectItemView extends AphrontTagView {
       ),
       array(
         $grippable,
-        $header,
+        $table,
-        $icons,
-        $bylines,
-        $content,
       ));
 
     $actions = array();

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

@@ -38,7 +38,6 @@
   border-color: {$lightgreyborder};
   margin: 5px 0;
   overflow: hidden;
-  border-radius: 3px;
   border-left-width: 6px;
   background: #fff;
   margin-bottom: 4px;
@@ -53,10 +52,8 @@
   border-color: {$lightgreyborder};
   border-width: 1px 1px 1px 0;
   position: relative;
-  min-height: 29px;
+  min-height: 33px;
   overflow: hidden;
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
 }
 
 .device-desktop .phui-object-item {
@@ -64,14 +61,21 @@
 }
 
 .phui-object-item-name {
-  display: inline-block;
   font-weight: bold;
-  padding: 6px 8px 0;
+  padding: 8px 8px 0;
   white-space: nowrap;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device-phone .phui-object-item-name {
+  overflow: normal;
+  white-space: normal;
 }
 
 .phui-object-item-link {
-  display: inline-block;
+  display: inline;
 }
 
 .phui-object-item-objname {
@@ -80,7 +84,7 @@
 }
 
 .phui-object-item-content {
-  margin-top: 4px;
+  margin: 4px 8px 2px 0;
   overflow: hidden;
 }
 
@@ -88,6 +92,10 @@
   cursor: move;
 }
 
+.device .phui-object-item-grippable {
+  cursor: normal;
+}
+
 .phui-object-item-grip {
   position: absolute;
   top: 0;
@@ -97,15 +105,50 @@
   background: url('/rsrc/image/texture/grip.png') center center no-repeat;
 }
 
+.device .phui-object-item-grip {
+  display: none;
+}
+
 .phui-object-item-grippable .phui-object-item-frame {
   padding-left: 11px;
 }
 
+.device .phui-object-item-grippable .phui-object-item-frame {
+  padding-left: 0;
+}
+
 .phui-object-item-list-header {
   padding: 0 0 8px 0;
   color: {$darkgreytext};
 }
 
+.phui-object-item-table {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.phui-object-item-table-row {
+  display: table-row;
+}
+
+.phui-object-item-col1 {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.phui-object-item-col2 {
+  width: 160px;
+  display: table-cell;
+  vertical-align: top;
+}
+
+.device-phone .phui-object-item-col1,
+.device-phone .phui-object-item-col2 {
+  display: block;
+  width: auto;
+}
+
 /* - Item Actions --------------------------------------------------------------
 
   Action buttons, like "Edit" and "Delete".
@@ -142,7 +185,7 @@
   height: 100%;
 }
 
-.phui-object-item-actions .phui-list-item-href:hover {
+.device-desktop .phui-object-item-actions .phui-list-item-href:hover {
   background: {$hoverblue};
 }
 
@@ -185,18 +228,10 @@
 .phui-object-item-list-view.phui-object-list-stackable
   .phui-object-item {
   margin: -1px 0 0 0;
-  border-radius: 0;
   border-left-width: 1px;
   background: #fff;
 }
 
-.phui-object-list-stackable .phui-object-item-frame {
-  border-radius: 0;
-}
-
-.phui-object-list-stackable .phui-object-item {
-}
-
 .phui-object-box .phui-object-list-stackable {
   padding: 0;
 }
@@ -234,6 +269,7 @@
 
 .phui-object-item-attributes {
   padding: 0 8px 6px;
+  line-height: 18px;
 }
 
 .phui-object-item-attribute {
@@ -254,12 +290,11 @@
 */
 
 .phui-object-icon-pane {
-  float: right;
+  margin: 8px 0 4px;
-  margin-top: 6px;
 }
 
-.device .phui-object-item-no-icon-images .phui-object-icon-pane {
+.device-phone .phui-object-icon-pane {
-  display: none;
+  margin: 0 0 4px;
 }
 
 .phui-object-item-with-handle-icons .phui-object-item-icons {
@@ -267,92 +302,46 @@
 }
 
 .phui-object-item-icons {
-  float: right;
+  padding: 0 10px 0 0;
-  padding: 0 10px;
+}
+
+.device-phone .phui-object-item-icons {
+  padding: 0 0 0 8px;
 }
 
 ul.phui-object-item-icons {
   margin: 0;
 }
 
-/* NOTE: The main content is an "overflow: hidden" div which we give a right
-   margin so it doesn't overlap the icons. The margin is slightly larger than
-   the width + padding of the icon div, so the icons have some space even if
-   the content is wider than available space. */
-
-.device-desktop .phui-object-icon-pane {
-  width: 120px;
-}
-
-.device-phone .phui-object-icon-pane {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: #fff;
-}
-
-.device-phone .phui-object-item-with-1-actions .phui-object-icon-pane {
-  right: 25px;
-}
-
-.device-desktop .phui-object-item-with-icons
-  .phui-object-item-content,
-.device-desktop .phui-object-item-with-handle-icons
-  .phui-object-item-content {
-  margin-right: 132px;
-}
-
-.device .phui-object-item-icons {
-  width: 18px;
-}
-
-.device .phui-object-item-with-icons .phui-object-item-content,
-.device .phui-object-item-with-handle-icons
-  .phui-object-item-content {
-  margin-right: 30px;
-}
-
-.device .phui-object-item-icon-label,
-.device .phui-object-item-icon-none {
-  display: none;
-}
-
 .phui-object-item-icon {
   vertical-align: middle;
-  position: relative;
   font-size: 12px;
   color: {$greytext};
   text-align: right;
   white-space: nowrap;
   overflow: hidden;
-
   min-height: 18px;
   line-height: 18px;
 }
 
+.device-phone .phui-object-item-icon {
+  text-align: left;
+  font-size: 13px;
+}
+
 /*
  * Items with icon 'none' still have on mobile, thus creating a weird vertical
  * margin for elements which follow
  */
-.device-phone .phui-object-item-icon-none {
+.device-phone .phui-object-item-icon .none {
   display: none;
 }
 
-.device-desktop .phui-object-item-icon {
-  padding-right: 18px;
-}
-
-.device-desktop .phui-object-item-icon-none {
-  padding-right: 0;
-}
-
 .phui-object-item-icon-image {
-  position: absolute;
-  right: 0;
-  top: 2px;
   width: 14px;
   height: 14px;
   font-size: 13px;
+  margin-right: 4px;
 }
 
 
@@ -465,13 +454,18 @@ ul.phui-object-item-icons {
   position: absolute;
 }
 
-.phui-object-item-with-foot-icons .phui-object-item-content {
+.phui-object-item-with-foot-icons .phui-object-item-content,
-  padding-bottom: 22px;
+.device-phone .phui-object-item-with-foot-icons .phui-object-item-col2  {
+  padding-bottom: 24px;
+}
+
+.device-phone .phui-object-item-with-foot-icons .phui-object-item-content {
+  padding-bottom: 0;
 }
 
 .phui-object-item-foot-icon {
   display: inline-block;
-  background: #909090;
+  background: {$lightgreyborder};
   color: #ffffff;
   font-weight: bold;
   margin-right: 3px;
@@ -520,17 +514,19 @@ ul.phui-object-item-icons {
 */
 
 .phui-object-item-bylines {
-  float: right;
-  clear: right;
   padding: 0 10px;
   margin: 4px 0;
   font-size: 12px;
-  color: {$greytext};
+  color: {$lightgreytext};
-  white-space: nowrap;
-  overflow: hidden;
   text-align: right;
 }
 
+.phui-object-item-byline {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .device-phone .phui-object-item-bylines {
   float: none;
   text-align: left;
@@ -550,13 +546,11 @@ ul.phui-object-item-icons {
   border: 1px dashed #fff;
   background: rgba(255,255,255,.5);
   margin-bottom: 4px;
-  border-radius: 3px;
 }
 
 .phui-object-list-stackable .drag-ghost {
   background: {$hoverblue};
   margin: 0;
-  border-radius: none;
   border: none;
   border-top: 1px solid {$lightgreyborder}
 }
@@ -600,17 +594,17 @@ ul.phui-object-item-icons {
   width: 40px;
   height: 40px;
   background-size: 40px;
-  margin: 4px;
+  margin: 6px;
   position: absolute;
   background-color: {$lightbluebackground};
 }
 
 .phui-object-item-with-image .phui-object-item-frame {
-  min-height: 48px;
+  min-height: 52px;
 }
 
 .phui-object-item-with-image .phui-object-item-content-box {
-  margin-left: 44px;
+  margin-left: 46px;
 }
 
 /* - State ---------------------------------------------------------------------
@@ -672,7 +666,6 @@ ul.phui-object-item-icons {
 }
 
 .dashboard-panel .phui-object-item-list-view .phui-object-item {
-  border-radius: 0;
   margin: 0;
   background-image: none;
   background-color: #fff;
@@ -682,7 +675,6 @@ ul.phui-object-item-icons {
 .dashboard-panel .phui-object-item-frame {
   border: none;
   border-bottom: 1px solid {$thinblueborder};
-  border-radius: 0;
 }
 
 .dashboard-panel .phui-object-item-list-header,
@@ -731,7 +723,7 @@ ul.phui-object-item-icons {
 .phui-object-item-image-icon {
   width: 30px;
   height: 30px;
-  margin: 4px 4px 4px 4px;
+  margin: 4px;
   position: absolute;
 }
 
@@ -739,8 +731,8 @@ ul.phui-object-item-icons {
   position: absolute;
   width: 28px;
   height: 28px;
-  left: 6px;
+  left: 8px;
-  top: 6px;
+  top: 8px;
 }
 
 .phui-object-item-with-image-icon .phui-object-item-frame {