2012-08-15 19:45:06 +02:00
|
|
|
/**
|
2013-09-09 23:14:34 +02:00
|
|
|
* @provides phui-object-item-list-view-css
|
2012-08-15 19:45:06 +02:00
|
|
|
*/
|
|
|
|
|
|
2015-01-14 01:28:55 +01:00
|
|
|
ul.phui-object-item-list-view {
|
2015-01-27 19:24:28 +01:00
|
|
|
padding: 8px;
|
2015-01-14 01:28:55 +01:00
|
|
|
list-style: none;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.device-desktop .phui-object-item-list-view {
|
2014-01-21 23:23:36 +01:00
|
|
|
padding: 16px;
|
2013-01-19 03:08:06 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-list-view.phui-object-list-flush {
|
2013-03-23 22:37:18 +01:00
|
|
|
padding: 0;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
margin: 0;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
.phui-object-box .phui-object-item-list-view .phui-object-item {
|
2015-01-28 00:30:11 +01:00
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-03-01 23:45:56 +01:00
|
|
|
.phui-object-item-list-view .phui-info-view {
|
2015-02-12 13:58:20 +01:00
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-03-01 23:45:56 +01:00
|
|
|
.phui-object-box .phui-object-item-list-view .phui-info-view {
|
2015-02-02 17:43:10 +01:00
|
|
|
margin: 4px 0;
|
2014-06-25 00:10:19 +02:00
|
|
|
color: {$greytext};
|
2015-02-02 17:43:10 +01:00
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item {
|
2012-12-13 19:59:29 +01:00
|
|
|
border-style: solid;
|
2013-09-02 17:10:47 +02:00
|
|
|
border-color: {$lightgreyborder};
|
2013-01-25 06:00:47 +01:00
|
|
|
margin: 5px 0;
|
2014-05-09 02:41:48 +02:00
|
|
|
overflow: hidden;
|
2014-08-08 23:07:50 +02:00
|
|
|
background: #fff;
|
2014-06-07 21:12:11 +02:00
|
|
|
margin-bottom: 4px;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item .phui-icon-view {
|
2013-07-03 17:53:01 +02:00
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-frame {
|
2015-07-01 00:24:07 +02:00
|
|
|
border-color: {$lightblueborder};
|
|
|
|
|
border-width: 1px 1px 1px 0;
|
|
|
|
|
border-style: solid;
|
2013-03-23 22:37:18 +01:00
|
|
|
position: relative;
|
2014-12-02 19:24:59 +01:00
|
|
|
min-height: 33px;
|
2014-05-09 02:41:48 +02:00
|
|
|
overflow: hidden;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
2016-02-06 20:58:26 +01:00
|
|
|
.phui-object-item-cover-image {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-01 00:24:07 +02:00
|
|
|
.phui-object-item-no-bar .phui-object-item-frame {
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.device-desktop .phui-object-item {
|
2014-08-08 23:07:50 +02:00
|
|
|
margin: 0 0 4px 0;
|
2013-01-19 03:08:06 +01:00
|
|
|
}
|
|
|
|
|
|
2015-02-19 17:11:17 +01:00
|
|
|
.phui-object-box .phui-object-list-flush .phui-object-item {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
.phui-object-box .phui-object-item-list-view {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
.phui-object-item-status-icon {
|
|
|
|
|
font-weight: bold;
|
2015-05-23 20:01:29 +02:00
|
|
|
padding: 3px;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-08 04:52:25 +02:00
|
|
|
.phui-object-item-list-view .phui-object-item-col0 .phui-icon-view {
|
|
|
|
|
width: 17px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: -1px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-name {
|
2014-12-02 19:24:59 +01:00
|
|
|
padding: 8px 8px 0;
|
2013-04-06 20:38:43 +02:00
|
|
|
white-space: nowrap;
|
2014-12-02 19:24:59 +01:00
|
|
|
word-wrap: break-word;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
[Redesign] Move basefont to Lato, remove Source Sans Pro
Summary: Working towards a more unified look and feel. This brings in Lato as a complete base font over Helvetica Neue, as well as removing Source Sans Pro from DocumentView and Conpherence. Design-wise Lato provides the nice readability at larger font sizes that Source Sans Pro did, with the ability to scale down to tables and UI widgets with ease. This gives us one font instead of two, and now Object descriptions and Timeline posts all can benefit from a consistent, readable font.
Test Plan:
Test main UI, smaller elements like tables, menus, DocumentViews, Previews, Conpherence.
{F498135}
{F498136}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D13276
2015-06-13 21:32:45 +02:00
|
|
|
font-weight: bold;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
2014-12-02 19:24:59 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .phui-object-item-name {
|
|
|
|
|
overflow: normal;
|
|
|
|
|
white-space: normal;
|
2015-05-19 15:40:08 +02:00
|
|
|
font-weight: bold;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-link {
|
2014-12-02 19:24:59 +01:00
|
|
|
display: inline;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-objname {
|
2015-06-04 05:44:33 +02:00
|
|
|
color: #000;
|
2013-03-23 22:38:01 +01:00
|
|
|
cursor: text;
|
2015-05-19 17:26:22 +02:00
|
|
|
font-weight: bold;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-content {
|
2014-12-02 19:24:59 +01:00
|
|
|
margin: 4px 8px 2px 0;
|
2012-12-17 17:26:44 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-grippable {
|
2013-03-23 22:37:18 +01:00
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.device .phui-object-item-grippable {
|
|
|
|
|
cursor: normal;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-grip {
|
2013-03-23 22:37:18 +01:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2015-06-16 22:09:48 +02:00
|
|
|
width: 20px;
|
2013-09-09 23:14:34 +02:00
|
|
|
background: url('/rsrc/image/texture/grip.png') center center no-repeat;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.device .phui-object-item-grip {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-grippable .phui-object-item-frame {
|
2015-05-23 20:01:29 +02:00
|
|
|
padding-left: 16px;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.device .phui-object-item-grippable .phui-object-item-frame {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.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;
|
2013-09-07 18:13:55 +02:00
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.phui-object-item-table {
|
|
|
|
|
display: table;
|
|
|
|
|
table-layout: fixed;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-table-row {
|
|
|
|
|
display: table-row;
|
|
|
|
|
}
|
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
.phui-object-item-col0 {
|
2015-05-23 20:01:29 +02:00
|
|
|
width: 20px;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
display: table-cell;
|
|
|
|
|
vertical-align: middle;
|
2015-06-16 22:09:48 +02:00
|
|
|
padding-left: 4px;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
}
|
|
|
|
|
|
[Redesign] Mobile/Phone design pass
Summary: Ref T8099, Quick descent pass at making header, object lists, tables, filter view, mobile friendly.
Test Plan:
Test home, differential diff, maniphest task, new task, search, and a few other views.
{F414034}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12984
2015-05-23 02:52:51 +02:00
|
|
|
.device-phone .phui-object-item-col0 {
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
/* - Item Actions --------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Action buttons, like "Edit" and "Delete".
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-actions {
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
position: absolute;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
right: 4px;
|
|
|
|
|
top: 4px;
|
|
|
|
|
bottom: 4px;
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
vertical-align: middle;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-actions .phui-list-item-view {
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 24px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-actions .phui-list-item-href {
|
2013-06-05 17:41:43 +02:00
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.device-desktop .phui-object-item-actions .phui-list-item-href:hover {
|
2014-06-07 20:28:37 +02:00
|
|
|
background: {$hoverblue};
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
border-radius: 3px;
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-actions .phui-list-item-icon {
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin-top: -7px;
|
2014-05-12 19:08:32 +02:00
|
|
|
left: 3px;
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-actions .phui-list-item-name {
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-with-1-actions .phui-object-item-content-box {
|
2015-06-23 13:13:29 +02:00
|
|
|
margin-right: 28px;
|
2013-10-08 23:35:56 +02:00
|
|
|
overflow: hidden;
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-with-2-actions .phui-object-item-content-box {
|
2015-06-23 13:13:29 +02:00
|
|
|
margin-right: 54px;
|
2013-10-08 23:35:56 +02:00
|
|
|
overflow: hidden;
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-with-3-actions .phui-object-item-content-box {
|
2015-06-23 13:13:29 +02:00
|
|
|
margin-right: 76px;
|
2013-10-08 23:35:56 +02:00
|
|
|
overflow: hidden;
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
|
|
2013-03-10 02:55:01 +01:00
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
/* - Object Box List -----------------------------------------------------------
|
2013-03-10 02:55:01 +01:00
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
Tighter, stacking list when inside an Object Box
|
2013-03-10 02:55:01 +01:00
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
.phui-object-box .phui-object-item-list-view {
|
2014-06-07 20:28:37 +02:00
|
|
|
padding: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
.phui-object-box .phui-object-item-frame {
|
2014-06-07 20:28:37 +02:00
|
|
|
border-right: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-05-07 23:11:44 +02:00
|
|
|
.phui-object-box .phui-object-item:last-child
|
2014-12-30 11:48:26 +01:00
|
|
|
.phui-object-item-frame {
|
2014-06-07 20:28:37 +02:00
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-05-06 23:01:57 +02:00
|
|
|
/* - Subhead -------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Descriptive Text or Links under the main header, before attributes.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-subhead {
|
2013-09-02 17:10:47 +02:00
|
|
|
color: {$greytext};
|
2013-05-06 23:01:57 +02:00
|
|
|
padding: 0 8px 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-10 02:55:01 +01:00
|
|
|
|
2012-12-17 17:26:44 +01:00
|
|
|
/* - Attribute List ------------------------------------------------------------
|
2012-12-13 19:59:29 +01:00
|
|
|
|
|
|
|
|
Object attributes, commonly used to render created date, etc.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-attributes {
|
2013-04-03 17:28:22 +02:00
|
|
|
padding: 0 8px 6px;
|
2014-12-02 19:24:59 +01:00
|
|
|
line-height: 18px;
|
2016-02-01 23:39:09 +01:00
|
|
|
min-height: 21px;
|
2012-12-13 19:59:29 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-attribute {
|
2016-02-01 23:39:09 +01:00
|
|
|
display: inline-block;
|
2013-09-02 17:10:47 +02:00
|
|
|
color: {$greytext};
|
2016-02-01 23:39:09 +01:00
|
|
|
vertical-align: middle;
|
2012-12-13 19:59:29 +01:00
|
|
|
}
|
2012-08-15 19:45:06 +02:00
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-attribute-spacer {
|
2012-12-13 19:59:29 +01:00
|
|
|
padding: 0 4px;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2012-12-17 17:26:44 +01:00
|
|
|
/* - Icons ---------------------------------------------------------------------
|
2012-12-13 19:59:29 +01:00
|
|
|
|
2012-12-17 17:26:44 +01:00
|
|
|
Icons, which show object state. On mobile, they are rendered without labels
|
|
|
|
|
to save space.
|
2012-08-15 19:45:06 +02:00
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-icon-pane {
|
2014-12-02 19:24:59 +01:00
|
|
|
margin: 8px 0 4px;
|
2013-04-06 20:38:43 +02:00
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.device-phone .phui-object-icon-pane {
|
|
|
|
|
margin: 0 0 4px;
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-icons {
|
2015-06-23 13:13:29 +02:00
|
|
|
padding: 0 4px 0 0;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.device-phone .phui-object-item-icons {
|
|
|
|
|
padding: 0 0 0 8px;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
ul.phui-object-item-icons {
|
|
|
|
|
margin: 0;
|
2012-12-13 19:59:29 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-icon {
|
2013-03-23 22:37:18 +01:00
|
|
|
vertical-align: middle;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$smallerfontsize};
|
2015-05-19 15:40:08 +02:00
|
|
|
color: {$greytext};
|
2012-08-15 19:45:06 +02:00
|
|
|
text-align: right;
|
2012-12-13 19:59:29 +01:00
|
|
|
white-space: nowrap;
|
2012-08-15 19:45:06 +02:00
|
|
|
overflow: hidden;
|
2012-12-13 19:59:29 +01:00
|
|
|
min-height: 18px;
|
|
|
|
|
line-height: 18px;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.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
|
|
|
|
|
*/
|
2014-12-02 19:24:59 +01:00
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-icon-image {
|
2012-12-13 19:59:29 +01:00
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
2014-05-12 19:08:32 +02:00
|
|
|
font-size: 13px;
|
2014-12-02 19:24:59 +01:00
|
|
|
margin-right: 4px;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
/* - Bar Colors ----------------------------------------------------------------
|
|
|
|
|
Colors for the left-hand border bars, used to indicate object status or other
|
|
|
|
|
attributes.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phui-object-item {
|
|
|
|
|
border-left-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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};
|
|
|
|
|
}
|
|
|
|
|
|
2015-08-31 23:51:51 +02:00
|
|
|
.phui-object-item-bar-color-pink {
|
|
|
|
|
border-left-color: {$pink};
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
}
|
|
|
|
|
|
2015-08-31 23:51:51 +02:00
|
|
|
.phui-object-item-bar-color-fire {
|
|
|
|
|
border-left-color: {$fire};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-bar-color-bluegrey {
|
|
|
|
|
border-left-color: {$bluetext};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-bar-color-lightbluetext {
|
|
|
|
|
border-left-color: {$lightbluetext};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-bar-color-grey,
|
|
|
|
|
.phui-object-item-bar-color-lightgreytext {
|
|
|
|
|
border-left-color: {$lightgreytext};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-bar-color-black,
|
|
|
|
|
.phui-object-item-bar-color-dark {
|
|
|
|
|
border-left-color: {$darkgreytext};
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-07-12 20:31:20 +02:00
|
|
|
/* - Disabled ------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Disabled/inactive objects.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
2013-12-05 05:45:23 +01:00
|
|
|
.phui-object-item-disabled .phui-object-item-link,
|
|
|
|
|
.phui-object-item-disabled .phui-object-item-link a {
|
|
|
|
|
color: {$lightgreytext};
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-disabled .phui-object-item-frame {
|
2013-07-12 20:31:20 +02:00
|
|
|
border-color: #d7d7d7;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-disabled .phui-object-item-objname {
|
2013-09-02 17:10:47 +02:00
|
|
|
color: {$greytext};
|
2013-12-05 05:45:23 +01:00
|
|
|
text-decoration: line-through;
|
2013-07-12 20:31:20 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-17 01:33:02 +01:00
|
|
|
|
|
|
|
|
/* - Effects -------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Effects like highlighted items.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2014-10-22 01:38:18 +02:00
|
|
|
.phui-object-item.phui-object-item-highlighted {
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
background: {$sh-yellowbackground};
|
2013-06-12 05:53:55 +02:00
|
|
|
}
|
|
|
|
|
|
2015-05-19 15:40:08 +02:00
|
|
|
ul.phui-object-item-list-view .phui-object-item-highlighted
|
|
|
|
|
.phui-object-item-frame {
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
border-color: {$sh-yellowborder};
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-selected {
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
background: {$sh-bluebackground};
|
2014-06-07 21:12:11 +02:00
|
|
|
}
|
|
|
|
|
|
2015-05-19 15:40:08 +02:00
|
|
|
ul.phui-object-item-list-view .phui-object-item-selected
|
|
|
|
|
.phui-object-item-frame {
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
border-color: {$sh-blueborder};
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* - Foot Icons ----------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Object counts shown in the footer.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-foot-icons {
|
2013-03-10 02:55:01 +01:00
|
|
|
margin-left: 10px;
|
2013-03-23 22:37:18 +01:00
|
|
|
bottom: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
.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;
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-foot-icon {
|
2013-03-10 02:55:01 +01:00
|
|
|
display: inline-block;
|
2014-12-02 19:24:59 +01:00
|
|
|
background: {$lightgreyborder};
|
2013-03-10 02:55:01 +01:00
|
|
|
color: #ffffff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-right: 3px;
|
2014-05-12 19:08:32 +02:00
|
|
|
padding: 3px 6px 0;
|
|
|
|
|
height: 17px;
|
2013-03-10 02:55:01 +01:00
|
|
|
vertical-align: middle;
|
|
|
|
|
position: relative;
|
2014-05-12 19:08:32 +02:00
|
|
|
font-size: 12px;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
2014-05-12 19:08:32 +02:00
|
|
|
.phui-object-item-foot-icon .phui-icon-view {
|
|
|
|
|
margin-right: 4px;
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* - Handle Icons --------------------------------------------------------------
|
|
|
|
|
|
2013-04-06 20:38:43 +02:00
|
|
|
Shows owners, reviewers, etc., using profile picture icons.
|
2013-03-10 02:55:01 +01:00
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-handle-icons {
|
2013-03-23 22:37:18 +01:00
|
|
|
bottom: 0;
|
2016-02-01 23:39:09 +01:00
|
|
|
right: 4px;
|
2013-03-23 22:37:18 +01:00
|
|
|
position: absolute;
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-handle-icon {
|
2016-02-01 23:39:09 +01:00
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
2013-03-10 02:55:01 +01:00
|
|
|
display: inline-block;
|
2016-02-01 23:39:09 +01:00
|
|
|
background-size: 100%;
|
|
|
|
|
border-radius: 3px;
|
2013-03-10 02:55:01 +01:00
|
|
|
background-repeat: no-repeat;
|
2012-12-17 01:33:02 +01:00
|
|
|
}
|
2013-03-23 22:37:18 +01:00
|
|
|
|
|
|
|
|
|
2013-04-06 20:38:43 +02:00
|
|
|
/* - Bylines -------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Shows owners, authors, reviewers, etc., in text.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
.phui-object-item-bylines {
|
2015-06-23 13:13:29 +02:00
|
|
|
padding: 0 4px 0 8px;
|
2015-01-02 20:39:12 +01:00
|
|
|
margin: 4px 0 8px;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$smallerfontsize};
|
2015-05-19 15:40:08 +02:00
|
|
|
color: {$greytext};
|
2014-12-02 19:24:59 +01:00
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-byline {
|
2013-04-06 20:38:43 +02:00
|
|
|
white-space: nowrap;
|
2014-12-02 19:24:59 +01:00
|
|
|
text-overflow: ellipsis;
|
2013-04-06 20:38:43 +02:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-10 20:23:38 +02:00
|
|
|
.device-phone .phui-object-item-bylines {
|
|
|
|
|
float: none;
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding: 0 8px;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$normalfontsize};
|
2014-04-10 20:23:38 +02:00
|
|
|
}
|
|
|
|
|
|
2013-06-06 01:22:27 +02:00
|
|
|
|
2013-06-06 02:36:33 +02:00
|
|
|
/* - Draggable List ------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
These classes are applied by and/or provided for use with JX.DraggableList.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-06-06 01:22:27 +02:00
|
|
|
.drag-ghost {
|
|
|
|
|
position: relative;
|
2015-06-29 21:31:49 +02:00
|
|
|
background: {$sh-indigobackground};
|
|
|
|
|
border-radius: 3px;
|
2014-01-21 23:26:05 +01:00
|
|
|
margin-bottom: 4px;
|
2015-06-29 21:31:49 +02:00
|
|
|
border: 1px dashed {$sh-indigoborder};
|
2013-06-06 01:22:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-dragging {
|
When dragging nodes, clone them
Summary:
Ref T5240. Currently, when dragging nodes, we leave them where they are in the document and apply "position: relative;" so we can move them around on screen.
- Pros: All the CSS still works.
- Cons: Can't drag them outside the nearest containing element with "overflow: hidden;", many subtle positioning bugs with scrollable containers.
Instead, this diff leaves the thing we're dragging exactly where it is, clones it, and drags the clone instead.
- Pros: You can drag it anywhere. Seems to fix all the scrolling container problems.
- Cons: CSS which depends on a container class no longer works.
The CSS thing is bad, but doesn't seem too unreasonable to fix. Basically, we just need to put some `phui-this-is-a-workboard-card` class on the cards, and use that to style them instead of `phui-workboard-view`, and then do something similar for draggable lists.
Although we no longer need to drag cards to tabs with the current design, I think there's a reasonable chance we'll revisit that later. The current design also calls for scrollable columns, but there would be no way to drag cards outside of their current column with the current approach.
NOTE: This does not attempt to fix the CSS, so dragging is pretty rough, since the "clone" loses a number of container classes and thus a number of rules. I'll clean up the CSS in the next change.
Test Plan:
- Dragged stuff around on task lists, workboards, and sort lists (e.g., pinned applications) in Safari, Firefox and Chrome.
- Scrolled window and containers (workboards) during drag.
- Dragged stuff out of the workboard.
- Dragged stuff offscreen.
- CSS is funky, but I can no longer find any positioning or layout issues in any browser.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T5240
Differential Revision: https://secure.phabricator.com/D15160
2016-02-02 01:28:47 +01:00
|
|
|
opacity: 0.25;
|
2013-06-06 01:22:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-sending {
|
2014-06-07 20:28:37 +02:00
|
|
|
opacity: 0.5;
|
2013-06-06 01:22:27 +02:00
|
|
|
}
|
2013-09-09 23:14:34 +02:00
|
|
|
|
When dragging nodes, clone them
Summary:
Ref T5240. Currently, when dragging nodes, we leave them where they are in the document and apply "position: relative;" so we can move them around on screen.
- Pros: All the CSS still works.
- Cons: Can't drag them outside the nearest containing element with "overflow: hidden;", many subtle positioning bugs with scrollable containers.
Instead, this diff leaves the thing we're dragging exactly where it is, clones it, and drags the clone instead.
- Pros: You can drag it anywhere. Seems to fix all the scrolling container problems.
- Cons: CSS which depends on a container class no longer works.
The CSS thing is bad, but doesn't seem too unreasonable to fix. Basically, we just need to put some `phui-this-is-a-workboard-card` class on the cards, and use that to style them instead of `phui-workboard-view`, and then do something similar for draggable lists.
Although we no longer need to drag cards to tabs with the current design, I think there's a reasonable chance we'll revisit that later. The current design also calls for scrollable columns, but there would be no way to drag cards outside of their current column with the current approach.
NOTE: This does not attempt to fix the CSS, so dragging is pretty rough, since the "clone" loses a number of container classes and thus a number of rules. I'll clean up the CSS in the next change.
Test Plan:
- Dragged stuff around on task lists, workboards, and sort lists (e.g., pinned applications) in Safari, Firefox and Chrome.
- Scrolled window and containers (workboards) during drag.
- Dragged stuff out of the workboard.
- Dragged stuff offscreen.
- CSS is funky, but I can no longer find any positioning or layout issues in any browser.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T5240
Differential Revision: https://secure.phabricator.com/D15160
2016-02-02 01:28:47 +01:00
|
|
|
.drag-clone,
|
|
|
|
|
.drag-frame {
|
|
|
|
|
/* This allows mousewheel events to pass through the clone and frame while
|
|
|
|
|
they are being dragged. Without this, the mousewheel does not work during
|
|
|
|
|
a drag operation. */
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-frame {
|
|
|
|
|
position: fixed;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-clone {
|
|
|
|
|
position: absolute;
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
/* - State ---------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Provides a list of object status or states, success or fail, etc
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phui-object-item-ficon {
|
2015-01-27 21:25:54 +01:00
|
|
|
width: 48px;
|
2014-04-29 19:14:18 +02:00
|
|
|
height: 26px;
|
2015-01-27 21:25:54 +01:00
|
|
|
margin-top: 12px;
|
2014-04-29 19:14:18 +02:00
|
|
|
position: absolute;
|
2015-01-27 21:25:54 +01:00
|
|
|
text-align: center;
|
|
|
|
|
font-size: 24px;
|
2014-05-01 18:35:14 +02:00
|
|
|
}
|
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
.phui-object-item-with-ficon .phui-object-item-content-box {
|
2014-05-01 18:35:14 +02:00
|
|
|
margin-left: 38px;
|
2014-04-29 19:14:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-box .phui-object-list-states {
|
2014-05-01 18:35:14 +02:00
|
|
|
padding: 0;
|
2014-04-29 19:14:18 +02:00
|
|
|
}
|
|
|
|
|
|
2015-03-01 23:45:56 +01:00
|
|
|
.phui-object-list-states .phui-info-view {
|
2014-05-02 23:25:58 +02:00
|
|
|
margin: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-22 22:37:20 +02:00
|
|
|
/* - Badges ---------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.phui-object-item-col0.phui-object-item-badge {
|
|
|
|
|
width: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-col0.phui-object-item-badge .phui-icon-view {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-28 16:47:42 +02:00
|
|
|
/* - Countdowns ------------------------------------------------------------ */
|
|
|
|
|
|
|
|
|
|
.phui-object-item-col0.phui-object-item-countdown {
|
|
|
|
|
width: 52px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-countdown .phui-object-item-countdown-number {
|
|
|
|
|
border-right: 1px solid {$thinblueborder};
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: {$bluetext};
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-22 22:37:20 +02:00
|
|
|
|
2014-05-23 22:44:51 +02:00
|
|
|
/* - Dashboards ------------------------------------------------------------ */
|
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
.phui-object-box .phui-object-item-list-view .phui-object-item-frame {
|
2014-05-24 06:48:15 +02:00
|
|
|
border: none;
|
|
|
|
|
border-bottom: 1px solid {$thinblueborder};
|
2014-05-23 22:44:51 +02:00
|
|
|
}
|
2014-05-29 21:17:54 +02:00
|
|
|
|
2016-02-02 02:47:16 +01:00
|
|
|
.drag-clone.phui-object-item-standard .phui-object-item-frame {
|
|
|
|
|
border: none;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
background: {$sh-bluebackground};
|
|
|
|
|
}
|
|
|
|
|
|
2015-05-28 20:32:51 +02:00
|
|
|
.phui-object-box .phui-object-item-list-header {
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$normalfontsize};
|
2015-05-31 16:56:54 +02:00
|
|
|
color: {$darkbluetext};
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
border-top: 1px solid {$thinblueborder};
|
2014-06-25 00:10:19 +02:00
|
|
|
border-bottom: 1px solid {$thinblueborder};
|
2015-05-31 16:56:54 +02:00
|
|
|
padding: 8px;
|
|
|
|
|
background-color: {$lightgreybackground};
|
2014-06-25 00:10:19 +02:00
|
|
|
}
|
|
|
|
|
|
2015-05-28 20:32:51 +02:00
|
|
|
.phui-object-box .phui-header-shell + .phui-object-item-list-view
|
|
|
|
|
.phui-object-item-list-header,
|
|
|
|
|
.phui-object-box .phui-object-box-hidden-content + .phui-object-item-list-view
|
2015-06-16 15:46:53 +02:00
|
|
|
.phui-object-item-list-header,
|
|
|
|
|
.phui-object-box .phui-object-box-hidden-content +
|
|
|
|
|
.phui-object-item-list-header {
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
border-top: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dashboard-pane .phui-object-item-empty .phui-info-view {
|
2014-06-25 00:10:19 +02:00
|
|
|
border: none;
|
Fix outlier dashboard panel display bugs
Summary: ref T7236, should resolve all, or at least most issues.
Test Plan: Tested Legalpad, Account Activity, Feed, Maniphest, Differential, Projects, Countdown
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7236
Differential Revision: https://secure.phabricator.com/D11738
2015-02-11 16:05:28 +01:00
|
|
|
margin: 0;
|
2014-06-25 00:10:19 +02:00
|
|
|
}
|
|
|
|
|
|
2014-12-10 20:40:56 +01:00
|
|
|
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
|
|
|
|
|
.aphront-multi-column-column-outer.third .phui-object-item-col2 {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-29 21:17:54 +02:00
|
|
|
|
|
|
|
|
/* - Launcher List ---------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.phui-object-item-image-icon {
|
|
|
|
|
background: none;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
2015-05-23 20:01:29 +02:00
|
|
|
margin: 4px 0;
|
2014-05-29 21:17:54 +02:00
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-image-icon .phui-icon-view {
|
|
|
|
|
position: absolute;
|
2015-01-26 17:19:22 +01:00
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
left: 6px;
|
|
|
|
|
top: 10px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: bottom;
|
2014-05-29 21:17:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-with-image-icon .phui-object-item-frame {
|
|
|
|
|
min-height: 48px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-object-item-with-image-icon .phui-object-item-content-box {
|
2015-01-26 17:19:22 +01:00
|
|
|
margin-left: 36px;
|
2014-05-29 21:17:54 +02:00
|
|
|
}
|
2014-06-05 19:09:14 +02:00
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
|
|
|
|
|
.phui-object-item-image {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
2016-01-24 01:02:29 +01:00
|
|
|
border-radius: 3px;
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
background-size: 100%;
|
2016-01-26 22:41:24 +01:00
|
|
|
margin: 8px 6px;
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
2015-09-04 19:34:25 +02:00
|
|
|
|
|
|
|
|
/* - Launcher Button -------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.phui-object-item-col2.phui-object-item-launch-button {
|
|
|
|
|
text-align: right;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .phui-object-item-col2.phui-object-item-launch-button {
|
|
|
|
|
padding: 0 8px 8px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
