6aee862bbe
Summary:
Ref T603. Ref T2625. Fixes T3241. Depends on D5451. Depends on D6346.
@wez, this changes the Differential revision list UI substantially and may generate a lot of bikeshedding / who-moved-my-cheese churn. See T3417 for context, for example. The motivations for this change are:
- The list now works on devices, like phones and tablets. This is a requirement to make the rest of Differential work on devices.
- Although ApplicationSearch intentionally presents a simpler interface initially and some options which were one click away before aren't now, it is much more powerful than the search it replaces and allows users to build, save, share, fork, edit, and customize a much wider range of queries. Users who used the old filters frequently can use Advanced Search -> Save Custom Query to create new versions of them, and of any other query. "Edit Queries.." allows users to remove and reorder queries, including builtin queries. Basically, there are like three things which have gone from "1-click" to "a few clicks", and ten trillion things which have gone from "hard/impossible" to "relatively easy".
The local screenshots look a bit iffy, but I think a lot of this is the fakenesss of my test data. If they still feel iffy in production we can tweak them until they feel good, like we did for Maniphest.
Test Plan:
{F48477}
{F48478}
Reviewers: btrahan, chad, wez
Reviewed By: btrahan
CC: aran, s
Maniphest Tasks: T603, T2625, T3241
Differential Revision: https://secure.phabricator.com/D6347
552 lines
11 KiB
CSS
552 lines
11 KiB
CSS
/**
|
|
* @provides phabricator-object-item-list-view-css
|
|
*/
|
|
|
|
.phabricator-object-item-list-view {
|
|
padding: 8px 6px;
|
|
}
|
|
|
|
.device-desktop .phabricator-object-item-list-view {
|
|
padding: 20px;
|
|
}
|
|
|
|
.phabricator-object-item-list-view + .phabricator-object-item-list-view {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.phabricator-object-item-list-view.phabricator-object-list-flush {
|
|
padding: 0;
|
|
}
|
|
|
|
.phabricator-object-list-flush .aphront-error-view {
|
|
margin: 0;
|
|
}
|
|
|
|
.phabricator-object-item {
|
|
background: #ffffff;
|
|
border-style: solid;
|
|
border-color: #c0c5d1;
|
|
border-width: 0 0 0 4px;
|
|
margin: 5px 0;
|
|
|
|
overflow: hidden;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
|
|
}
|
|
|
|
.phabricator-object-item-frame {
|
|
border-style: solid;
|
|
border-color: #c0c5d1;
|
|
border-width: 1px 1px 1px 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
min-height: 29px;
|
|
}
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-frame {
|
|
border-bottom-right-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
.device-desktop .phabricator-object-item {
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
.phabricator-object-item-name {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
padding: 6px 8px 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.phabricator-object-item-link {
|
|
display: inline-block;
|
|
}
|
|
|
|
.phabricator-object-item-objname {
|
|
color: #222222;
|
|
cursor: text;
|
|
}
|
|
|
|
.phabricator-object-item-content {
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phabricator-object-item-grippable {
|
|
cursor: move;
|
|
}
|
|
|
|
.phabricator-object-item-grip {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 17px;
|
|
background: url(/rsrc/image/texture/grip.png) center center no-repeat;
|
|
}
|
|
|
|
.phabricator-object-item-state-icons {
|
|
top: 0;
|
|
left: 4px;
|
|
width: 20px;
|
|
position: absolute;
|
|
padding: 6px 4px;
|
|
}
|
|
|
|
.phabricator-object-item-state-icons span.phui-icon-view {
|
|
display: inline-block;
|
|
margin: 1px 2px 2px;
|
|
}
|
|
|
|
.phabricator-object-item-grippable .phabricator-object-item-state-icons {
|
|
left: 15px;
|
|
}
|
|
|
|
.state-icon-2-cols {
|
|
width: 40px;
|
|
}
|
|
|
|
.phabricator-object-item-grippable .phabricator-object-item-frame {
|
|
padding-left: 11px;
|
|
}
|
|
|
|
.phabricator-object-item-state-1-cols .phabricator-object-item-frame {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.phabricator-object-item-state-2-cols .phabricator-object-item-frame {
|
|
padding-left: 44px;
|
|
}
|
|
|
|
.phabricator-object-item-grippable.phabricator-object-item-state-1-cols
|
|
.phabricator-object-item-frame {
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.phabricator-object-item-grippable.phabricator-object-item-state-2-cols
|
|
.phabricator-object-item-frame {
|
|
padding-left: 55px;
|
|
}
|
|
|
|
.phabricator-object-item-list-header {
|
|
padding: 0 0 8px 0;
|
|
color: #555555;
|
|
}
|
|
|
|
/* - Item Actions --------------------------------------------------------------
|
|
|
|
Action buttons, like "Edit" and "Delete".
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-actions {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
border-left: 1px solid #c0c5d1;
|
|
box-shadow: inset 1px 0 1px 0px rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
.phabricator-object-item-actions .phui-list-item-view {
|
|
float: right;
|
|
height: 100%;
|
|
width: 24px;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.phabricator-object-item-actions .phui-list-item-view +
|
|
.phui-list-item-view {
|
|
border-right: 1px solid #d6d6e9;
|
|
}
|
|
|
|
.phabricator-object-item-actions .phui-list-item-href {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 24px;
|
|
height: 100%;
|
|
}
|
|
|
|
.phabricator-object-item-actions .phui-list-item-href:hover {
|
|
background: #e9e9f9;
|
|
}
|
|
|
|
.phabricator-object-item-actions .phui-list-item-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: absolute;
|
|
display: block;
|
|
top: 50%;
|
|
margin-top: -7px;
|
|
left: 5px;
|
|
}
|
|
|
|
.phabricator-object-item-actions .phui-list-item-name {
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-object-item-with-1-actions .phabricator-object-item-content-box {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.phabricator-object-item-with-2-actions .phabricator-object-item-content-box {
|
|
margin-right: 48px;
|
|
}
|
|
|
|
.phabricator-object-item-with-3-actions .phabricator-object-item-content-box {
|
|
margin-right: 72px;
|
|
}
|
|
|
|
|
|
/* - Stackable List ------------------------------------------------------------
|
|
|
|
Tighter, stacking list.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-list-view.phabricator-object-list-stackable
|
|
.phabricator-object-item {
|
|
margin: -1px 0 0 0;
|
|
}
|
|
|
|
.phabricator-object-list-stackable .phabricator-object-item {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.device-desktop .phabricator-object-list-stackable
|
|
.phabricator-object-item:hover {
|
|
background: #e9ecf5;
|
|
}
|
|
|
|
/* - Subhead -------------------------------------------------------------------
|
|
|
|
Descriptive Text or Links under the main header, before attributes.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-subhead {
|
|
color: #777;
|
|
padding: 0 8px 6px;
|
|
}
|
|
|
|
|
|
/* - Attribute List ------------------------------------------------------------
|
|
|
|
Object attributes, commonly used to render created date, etc.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-attributes {
|
|
padding: 0 8px 6px;
|
|
}
|
|
|
|
.phabricator-object-item-attribute {
|
|
display: inline;
|
|
color: #777;
|
|
}
|
|
|
|
.phabricator-object-item-attribute-spacer {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
|
|
/* - Icons ---------------------------------------------------------------------
|
|
|
|
Icons, which show object state. On mobile, they are rendered without labels
|
|
to save space.
|
|
|
|
*/
|
|
|
|
.phabricator-object-icon-pane {
|
|
float: right;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.device .phabricator-object-item-no-icon-images .phabricator-object-icon-pane {
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-object-item-with-handle-icons .phabricator-object-item-icons {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.phabricator-object-item-icons {
|
|
float: right;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* 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 .phabricator-object-icon-pane {
|
|
width: 120px;
|
|
}
|
|
|
|
.device-desktop .phabricator-object-item-with-icons
|
|
.phabricator-object-item-content,
|
|
.device-desktop .phabricator-object-item-with-handle-icons
|
|
.phabricator-object-item-content {
|
|
margin-right: 132px;
|
|
}
|
|
|
|
.device .phabricator-object-item-icons {
|
|
width: 18px;
|
|
}
|
|
|
|
.device .phabricator-object-item-with-icons .phabricator-object-item-content,
|
|
.device .phabricator-object-item-with-handle-icons
|
|
.phabricator-object-item-content {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.device .phabricator-object-item-icon-label {
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-object-item-icon {
|
|
vertical-align: middle;
|
|
position: relative;
|
|
font-size: 11px;
|
|
color: #666666;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
min-height: 18px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
/*
|
|
* Items with icon 'none' still have on mobile, thus creating a weird vertical
|
|
* margin for elements which follow
|
|
*/
|
|
.device-phone .phabricator-object-item-icon-none {
|
|
display: none;
|
|
}
|
|
|
|
.device-desktop .phabricator-object-item-icon {
|
|
padding-right: 22px;
|
|
}
|
|
|
|
.device-desktop .phabricator-object-item-icon-none {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.phabricator-object-item-icon-image {
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 2px;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
|
|
/* - Bar Colors ----------------------------------------------------------------
|
|
|
|
Colors for the left-hand border bars, used to indicate object status or other
|
|
attributes.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-bar-color-red {
|
|
border-left-color: {$red};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-orange {
|
|
border-left-color: {$orange};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-yellow {
|
|
border-left-color: {$yellow};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-green {
|
|
border-left-color: {$green};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-sky {
|
|
border-left-color: {$sky};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-blue {
|
|
border-left-color: {$blue};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-indigo {
|
|
border-left-color: {$indigo};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-violet {
|
|
border-left-color: {$violet};
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-grey {
|
|
border-left-color: #bdc3c7;
|
|
}
|
|
|
|
.phabricator-object-item-bar-color-black {
|
|
border-left-color: #333333;
|
|
}
|
|
|
|
|
|
/* - Effects -------------------------------------------------------------------
|
|
|
|
Effects like highlighted items.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-highlighted {
|
|
background: {$lightyellow};
|
|
}
|
|
|
|
.phabricator-object-list-cards
|
|
.phabricator-object-item.phabricator-object-item-highlighted {
|
|
background-image: linear-gradient(to bottom, rgb(253, 255, 221), rgb(243, 245, 206));
|
|
background-image: -webkit-linear-gradient(top, rgb(253, 255, 221), rgb(243, 245, 206));
|
|
}
|
|
|
|
.phabricator-object-item-selected {
|
|
background: {$lightblue};
|
|
}
|
|
|
|
.phabricator-object-list-flush .aphront-error-view {
|
|
margin: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
|
|
/* - Foot Icons ----------------------------------------------------------------
|
|
|
|
Object counts shown in the footer.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-foot-icons {
|
|
margin-left: 10px;
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.phabricator-object-item-with-foot-icons .phabricator-object-item-content {
|
|
padding-bottom: 22px;
|
|
}
|
|
|
|
.phabricator-object-item-foot-icon {
|
|
display: inline-block;
|
|
background: #909090;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
margin-right: 3px;
|
|
padding: 1px 4px 0 22px;
|
|
height: 19px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
}
|
|
|
|
.phabricator-object-item-foot-icon .sprite-icons {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 3px;
|
|
}
|
|
|
|
|
|
/* - Handle Icons --------------------------------------------------------------
|
|
|
|
Shows owners, reviewers, etc., using profile picture icons.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-handle-icons {
|
|
height: 28px;
|
|
margin-right: 10px;
|
|
bottom: 0;
|
|
right: 0;
|
|
text-align: right;
|
|
position: absolute;
|
|
}
|
|
|
|
.phabricator-object-item-handle-icon {
|
|
margin: 1px;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-block;
|
|
background-size: 28px 28px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
/* - Bylines -------------------------------------------------------------------
|
|
|
|
Shows owners, authors, reviewers, etc., in text.
|
|
|
|
*/
|
|
|
|
.phabricator-object-item-bylines {
|
|
float: right;
|
|
clear: right;
|
|
padding: 0 10px;
|
|
margin: 5px 0;
|
|
font-size: 11px;
|
|
color: #666;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
}
|
|
|
|
/* - Card List -----------------------------------------------------------------
|
|
|
|
Rounded card list.
|
|
|
|
*/
|
|
|
|
/* Hard to sprite since we can't have other sprites appearing in tall cells */
|
|
.phabricator-object-list-cards .phabricator-object-item {
|
|
border-radius: 3px;
|
|
border-left-width: 6px;
|
|
background: #f0f0f0 url('/rsrc/image/texture/card-gradient.png') repeat-x;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-frame {
|
|
min-height: 50px;
|
|
}
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-selected {
|
|
background: #bfdcff;
|
|
}
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-selected
|
|
.phabricator-object-item-frame {
|
|
border-color: #99ccff;
|
|
}
|
|
|
|
|
|
/* - Draggable List ------------------------------------------------------------
|
|
|
|
These classes are applied by and/or provided for use with JX.DraggableList.
|
|
|
|
*/
|
|
|
|
.drag-ghost {
|
|
position: relative;
|
|
border: 1px dashed #aaaaaa;
|
|
background: #f9f9f9;
|
|
margin: 4px;
|
|
}
|
|
|
|
.drag-dragging {
|
|
position: relative;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.drag-sending {
|
|
opacity: 0.75;
|
|
}
|