mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-22 23:02:42 +01:00
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
This commit is contained in:
Chad Little
parent
d923f68aad
commit
7aedb3c04e
3 changed files with 125 additions and 113 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
$icons,
|
||||
$bylines,
|
||||
$content,
|
||||
$table,
|
||||
));
|
||||
|
||||
$actions = array();
|
||||
|
|
|
|||
|
|
@ -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-top: 6px;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.device .phui-object-item-no-icon-images .phui-object-icon-pane {
|
||||
display: none;
|
||||
.device-phone .phui-object-icon-pane {
|
||||
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;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-bottom: 22px;
|
||||
.phui-object-item-with-foot-icons .phui-object-item-content,
|
||||
.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};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: {$lightgreytext};
|
||||
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;
|
||||
top: 6px;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.phui-object-item-with-image-icon .phui-object-item-frame {
|
||||
|
|
|
|||
Loading…
Reference in a new issue