1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-15 03:12:41 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-object-item-list-view.css

745 lines
14 KiB
CSS
Raw Normal View History

/**
* @provides phui-object-item-list-view-css
*/
ul.phui-object-item-list-view {
padding: 8px;
list-style: none;
}
.device-desktop .phui-object-item-list-view {
padding: 16px;
}
.phui-object-item-list-view + .phui-object-item-list-view {
Use ApplicationSearch in Differential 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
2013-07-03 15:11:07 +02:00
padding-top: 0;
}
.phui-object-item-list-view.phui-object-list-flush {
padding: 0;
}
.device-phone .phui-object-box
.phui-object-item-list-view.phui-object-list-flush {
padding: 4px;
}
.homepage-panel .phui-object-list-flush .phui-object-item {
margin: 0;
}
.phui-object-box .phui-object-item-list-view .phui-error-view {
margin: 4px 0;
color: {$greytext};
border: none;
[Rough Sketch] Differential ObjectItemView Smexyness Summary: Tried out `PhabricatorObjectItemView` for Differential. It looks smexy and smooth. Refs T2014 - Title and Date as Maniphest - Author in the handle icon - Bar color reflects revision status (Needs Review, Accepted, Abandoned etc.) @chad looking for non-blue is faster than keeping watch for everything that's not "Closed" in old table form - Some status information are in footer icons; currently only stale/old status display as well as saved drafts, maybe more in future; these come into my mind: - No reviewer warning - Push Blocking Priority (T2730) - Trivial, fast review guaranteed - Sketch / Just looking for advice/help - Arcanist Project (T2614) - Denote "Public Send-in" (T1476) {F37662} {F37663} {F37664} {F37665} Some flaws: - Date and reviewers on every entry the same? - No respect for Differential fields (for some reason, every entry appeared the same, so broke it to parts) - Plenty of (potential) increase in height - advise reducing paging length from 100 to 50 - or just ignore me Suggestions for the future: - Expand the meta information regarding revisions; e.g. the various status displays above - Uh... T2543, T1279, T793, T731 and what else I want for Differential, because they are awesome! - T793 should be in particular easy appearance-wise, just copy-paste from Maniphest Test Plan: By looking at it, of course. Verified there are no errors or crashed Reviewers: epriestley, chad, btrahan, liguobig Reviewed By: chad CC: aran, Korvin, edward, nh Maniphest Tasks: T2014 Differential Revision: https://secure.phabricator.com/D5451 Conflicts: src/__celerity_resource_map__.php
2013-07-02 21:14:33 +02:00
}
.phui-object-item {
border-style: solid;
border-color: {$lightgreyborder};
margin: 5px 0;
overflow: hidden;
border-left-width: 4px;
background: #fff;
margin-bottom: 4px;
}
.phui-object-item .phui-icon-view {
display: inline-block;
}
.phui-object-item-frame {
border-style: solid;
border-color: {$lightgreyborder};
border-width: 1px 1px 1px 0;
position: relative;
min-height: 33px;
overflow: hidden;
}
.device-desktop .phui-object-item {
margin: 0 0 4px 0;
}
.phui-object-item-name {
font-weight: bold;
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;
}
.phui-object-item-objname {
color: {$darkgreytext};
cursor: text;
}
.phui-object-item-content {
margin: 4px 8px 2px 0;
overflow: hidden;
}
.phui-object-item-grippable {
cursor: move;
}
.device .phui-object-item-grippable {
cursor: normal;
}
.phui-object-item-grip {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 17px;
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 {
Use ApplicationSearch in Differential 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
2013-07-03 15:11:07 +02:00
padding: 0 0 8px 0;
color: {$darkgreytext};
Use ApplicationSearch in Differential 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
2013-07-03 15:11:07 +02:00
}
.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".
*/
.phui-object-item-actions {
position: absolute;
right: 0;
top: 0;
bottom: 0;
vertical-align: middle;
text-align: right;
border-left: 1px solid {$lightgreyborder};
}
.phui-object-item-actions .phui-list-item-view {
float: right;
height: 100%;
width: 24px;
display: inline-block;
position: relative;
}
.phui-object-item-actions .phui-list-item-view +
.phui-list-item-view {
border-right: 1px solid #d6d6e9;
}
.phui-object-item-actions .phui-list-item-href {
display: inline-block;
position: relative;
width: 24px;
height: 100%;
}
.device-desktop .phui-object-item-actions .phui-list-item-href:hover {
background: {$hoverblue};
}
.phui-object-item-actions .phui-list-item-icon {
width: 14px;
height: 14px;
position: absolute;
display: block;
top: 50%;
margin-top: -7px;
left: 3px;
}
.phui-object-item-actions .phui-list-item-name {
display: none;
}
.phui-object-item-with-1-actions .phui-object-item-content-box {
margin-right: 24px;
overflow: hidden;
}
.phui-object-item-with-2-actions .phui-object-item-content-box {
margin-right: 48px;
overflow: hidden;
}
.phui-object-item-with-3-actions .phui-object-item-content-box {
margin-right: 72px;
overflow: hidden;
}
/* - Stackable List ------------------------------------------------------------
Tighter, stacking list.
*/
.phui-object-item-list-view.phui-object-list-stackable
.phui-object-item {
margin: -1px 0 0 0;
border-left-width: 1px;
background: #fff;
}
.phui-object-box .phui-object-list-stackable {
padding: 0;
}
.phui-object-box .phui-object-list-stackable .phui-object-item {
border: none;
}
.phui-object-box .phui-object-list-stackable .phui-object-item-frame {
border-right: none;
}
.phui-object-box .phui-object-list-stackable:last-child
.phui-object-item-frame {
border-bottom: none;
}
/* - Subhead -------------------------------------------------------------------
Descriptive Text or Links under the main header, before attributes.
*/
.phui-object-item-subhead {
color: {$greytext};
padding: 0 8px 6px;
}
/* - Attribute List ------------------------------------------------------------
Object attributes, commonly used to render created date, etc.
*/
.phui-object-item-attributes {
padding: 0 8px 6px;
line-height: 18px;
}
.phui-object-item-attribute {
display: inline;
color: {$greytext};
}
.phui-object-item-attribute-spacer {
padding: 0 4px;
}
/* - Icons ---------------------------------------------------------------------
Icons, which show object state. On mobile, they are rendered without labels
to save space.
*/
.phui-object-icon-pane {
margin: 8px 0 4px;
}
.device-phone .phui-object-icon-pane {
margin: 0 0 4px;
}
.phui-object-item-with-handle-icons .phui-object-item-icons {
padding-bottom: 30px;
}
.phui-object-item-icons {
padding: 0 10px 0 0;
}
.device-phone .phui-object-item-icons {
padding: 0 0 0 8px;
}
ul.phui-object-item-icons {
margin: 0;
}
.phui-object-item-icon {
vertical-align: middle;
font-size: 12px;
color: {$lightgreytext};
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;
}
[Rough Sketch] Differential ObjectItemView Smexyness Summary: Tried out `PhabricatorObjectItemView` for Differential. It looks smexy and smooth. Refs T2014 - Title and Date as Maniphest - Author in the handle icon - Bar color reflects revision status (Needs Review, Accepted, Abandoned etc.) @chad looking for non-blue is faster than keeping watch for everything that's not "Closed" in old table form - Some status information are in footer icons; currently only stale/old status display as well as saved drafts, maybe more in future; these come into my mind: - No reviewer warning - Push Blocking Priority (T2730) - Trivial, fast review guaranteed - Sketch / Just looking for advice/help - Arcanist Project (T2614) - Denote "Public Send-in" (T1476) {F37662} {F37663} {F37664} {F37665} Some flaws: - Date and reviewers on every entry the same? - No respect for Differential fields (for some reason, every entry appeared the same, so broke it to parts) - Plenty of (potential) increase in height - advise reducing paging length from 100 to 50 - or just ignore me Suggestions for the future: - Expand the meta information regarding revisions; e.g. the various status displays above - Uh... T2543, T1279, T793, T731 and what else I want for Differential, because they are awesome! - T793 should be in particular easy appearance-wise, just copy-paste from Maniphest Test Plan: By looking at it, of course. Verified there are no errors or crashed Reviewers: epriestley, chad, btrahan, liguobig Reviewed By: chad CC: aran, Korvin, edward, nh Maniphest Tasks: T2014 Differential Revision: https://secure.phabricator.com/D5451 Conflicts: src/__celerity_resource_map__.php
2013-07-02 21:14:33 +02:00
/*
* 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 {
[Rough Sketch] Differential ObjectItemView Smexyness Summary: Tried out `PhabricatorObjectItemView` for Differential. It looks smexy and smooth. Refs T2014 - Title and Date as Maniphest - Author in the handle icon - Bar color reflects revision status (Needs Review, Accepted, Abandoned etc.) @chad looking for non-blue is faster than keeping watch for everything that's not "Closed" in old table form - Some status information are in footer icons; currently only stale/old status display as well as saved drafts, maybe more in future; these come into my mind: - No reviewer warning - Push Blocking Priority (T2730) - Trivial, fast review guaranteed - Sketch / Just looking for advice/help - Arcanist Project (T2614) - Denote "Public Send-in" (T1476) {F37662} {F37663} {F37664} {F37665} Some flaws: - Date and reviewers on every entry the same? - No respect for Differential fields (for some reason, every entry appeared the same, so broke it to parts) - Plenty of (potential) increase in height - advise reducing paging length from 100 to 50 - or just ignore me Suggestions for the future: - Expand the meta information regarding revisions; e.g. the various status displays above - Uh... T2543, T1279, T793, T731 and what else I want for Differential, because they are awesome! - T793 should be in particular easy appearance-wise, just copy-paste from Maniphest Test Plan: By looking at it, of course. Verified there are no errors or crashed Reviewers: epriestley, chad, btrahan, liguobig Reviewed By: chad CC: aran, Korvin, edward, nh Maniphest Tasks: T2014 Differential Revision: https://secure.phabricator.com/D5451 Conflicts: src/__celerity_resource_map__.php
2013-07-02 21:14:33 +02:00
display: none;
}
.phui-object-item-icon-image {
width: 14px;
height: 14px;
font-size: 13px;
margin-right: 4px;
}
/* - Bar Colors ----------------------------------------------------------------
Colors for the left-hand border bars, used to indicate object status or other
attributes.
*/
.phui-object-item-bar-color-red {
border-left-color: {$red};
}
.phui-object-item-bar-color-orange {
border-left-color: {$orange};
}
.phui-object-item-bar-color-yellow {
border-left-color: {$yellow};
}
.phui-object-item-bar-color-green {
border-left-color: {$green};
}
.phui-object-item-bar-color-sky {
border-left-color: {$sky};
}
.phui-object-item-bar-color-blue {
border-left-color: {$blue};
}
.phui-object-item-bar-color-indigo {
border-left-color: {$indigo};
}
.phui-object-item-bar-color-violet {
border-left-color: {$violet};
}
.phui-object-item-bar-color-grey {
border-left-color: #bdc3c7;
}
.phui-object-item-bar-color-black {
border-left-color: #333333;
}
/* - Disabled ------------------------------------------------------------------
Disabled/inactive objects.
*/
.phui-object-item-disabled {
border-left-color: #d7d7d7;
}
.phui-object-item-disabled .phui-object-item-link,
.phui-object-item-disabled .phui-object-item-link a {
color: {$lightgreytext};
}
.phui-object-item-disabled .phui-object-item-frame {
border-color: #d7d7d7;
}
.phui-object-item-disabled .phui-object-item-objname {
color: {$greytext};
text-decoration: line-through;
}
/* - Effects -------------------------------------------------------------------
Effects like highlighted items.
*/
.phui-object-item.phui-object-item-highlighted {
background: {$lightyellow};
border-left-color: {$yellow};
}
.phui-object-item-highlighted .phui-object-item-frame {
border-color: {$yellow};
}
.phui-object-item-selected {
background: {$lightblue};
border-left-color: {$blue};
}
.phui-object-item-selected .phui-object-item-frame {
border-color: {$blue};
}
/* - Foot Icons ----------------------------------------------------------------
Object counts shown in the footer.
*/
.phui-object-item-foot-icons {
margin-left: 10px;
bottom: 0;
position: absolute;
}
.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: {$lightgreyborder};
color: #ffffff;
font-weight: bold;
margin-right: 3px;
padding: 3px 6px 0;
height: 17px;
vertical-align: middle;
position: relative;
font-size: 12px;
-webkit-font-smoothing: antialiased;
}
.phui-object-item-foot-icon .phui-icon-view {
margin-right: 4px;
}
/* - Handle Icons --------------------------------------------------------------
Shows owners, reviewers, etc., using profile picture icons.
*/
.phui-object-item-handle-icons {
height: 28px;
margin-right: 10px;
bottom: 0;
right: 0;
text-align: right;
position: absolute;
}
.phui-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.
*/
.phui-object-item-bylines {
padding: 0 10px;
margin: 4px 0 8px;
font-size: 12px;
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;
padding: 0 8px;
font-size: 13px;
}
/* - Draggable List ------------------------------------------------------------
These classes are applied by and/or provided for use with JX.DraggableList.
*/
.drag-ghost {
position: relative;
border: 1px dashed #fff;
background: rgba(255,255,255,.5);
margin-bottom: 4px;
}
.phui-object-list-stackable .drag-ghost {
background: {$hoverblue};
margin: 0;
border: none;
border-top: 1px solid {$lightgreyborder}
}
.drag-dragging {
position: relative;
opacity: 0.85;
}
.phui-object-box .phui-object-list-stackable .drag-dragging
.phui-object-item-frame {
border-bottom: 1px solid {$lightgreyborder};
}
.drag-sending {
opacity: 0.5;
}
/* - Plain ---------------------------------------------------------------------
Remove all border styles, just a list of objects
*/
.phui-object-list-plain .phui-object-item {
background: transparent;
}
.phui-object-list-plain .phui-object-item,
.phui-object-list-plain .phui-object-item-frame {
border: none;
}
2013-09-10 00:13:39 +02:00
.phui-object-list-plain .phui-object-item-attributes,
.phui-object-list-plain .phui-object-item-name {
padding-left: 0;
padding-top: 0;
}
.phui-object-item-image {
width: 40px;
height: 40px;
background-size: 40px;
margin: 6px;
position: absolute;
background-color: {$lightbluebackground};
}
.phui-object-item-with-image .phui-object-item-frame {
min-height: 52px;
}
.phui-object-item-with-image .phui-object-item-content-box {
margin-left: 46px;
}
/* - State ---------------------------------------------------------------------
Provides a list of object status or states, success or fail, etc
*/
.phui-object-item-ficon {
width: 48px;
height: 26px;
margin-top: 12px;
position: absolute;
text-align: center;
font-size: 24px;
}
.phui-object-item-with-ficon .phui-object-item-content-box {
margin-left: 38px;
}
.phui-object-box .phui-object-list-states {
padding: 0;
}
.phui-object-list-states .phui-error-view {
margin: 0;
border: none;
}
/* - Dashboards ------------------------------------------------------------ */
.dashboard-panel .phui-object-item-list-view {
padding: 0;
border-left: 1px solid {$lightblueborder};
border-right: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
margin-bottom: -1px;
}
.dashboard-panel .phui-object-item-list-view .phui-object-item,
.phui-object-box .phui-object-item-list-view.phui-object-list-flush {
margin: 0;
background-image: none;
background-color: #fff;
border-left-width: 4px;
}
.dashboard-panel .phui-object-item-frame,
.phui-object-box .phui-object-list-flush .phui-object-item-frame {
border: none;
border-bottom: 1px solid {$thinblueborder};
}
.dashboard-panel .phui-object-item-list-header,
.dashboard-panel .maniphest-task-group-header {
font-size: 13px;
color: {$bluetext};
background: {$lightgreybackground};
border-bottom: 1px solid {$thinblueborder};
padding: 8px 12px;
-webkit-font-smoothing: antialiased;
}
.dashboard-panel .phui-object-item-empty .phui-error-view {
border: none;
border-bottom: 1px solid {$thinblueborder};
}
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.third .phui-object-item-col2 {
display: none;
}
/* - Launcher List ---------------------------------------------------------- */
.launcher-header {
margin: 8px 16px -4px;
clear: both;
color: {$darkbluetext};
}
.launcher-header:nth-of-type(1) {
margin-top: 24px;
}
.phui-object-item-launcher-list {
overflow: hidden;
}
.device-desktop .phui-object-item-launcher-list .phui-object-item {
width: 49%;
float: left;
margin-right: 1%;
box-sizing: border-box;
}
.phui-object-item-image-icon {
background: none;
}
.phui-object-item-image-icon {
width: 30px;
height: 30px;
margin: 4px;
position: absolute;
}
.phui-object-item-image-icon .phui-icon-view {
position: absolute;
width: 24px;
height: 24px;
left: 6px;
top: 10px;
font-size: 24px;
text-align: center;
vertical-align: bottom;
}
.phui-object-item-with-image-icon .phui-object-item-frame {
min-height: 48px;
}
.phui-object-item-with-image-icon .phui-object-item-content-box {
margin-left: 36px;
}
.device-desktop .phui-object-item-launcher-list .phui-object-item-content {
margin-right: 0;
}
.device-desktop .phui-object-item-launcher-list .phui-object-icon-pane {
width: auto;
}