2012-08-15 10:45:06 -07:00
|
|
|
/**
|
|
|
|
|
* @provides phabricator-object-item-list-view-css
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-list-view {
|
2012-12-13 10:59:29 -08:00
|
|
|
padding: 8px 6px;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2013-01-18 18:08:06 -08:00
|
|
|
.device-desktop .phabricator-object-item-list-view {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-25 12:20:49 -07:00
|
|
|
.phabricator-object-item-list-view.phabricator-object-list-flush {
|
2013-03-23 14:37:18 -07:00
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-08-15 10:45:06 -07:00
|
|
|
.phabricator-object-item {
|
2012-12-13 10:59:29 -08:00
|
|
|
background: #ffffff;
|
|
|
|
|
border-style: solid;
|
2013-01-24 21:00:47 -08:00
|
|
|
border-color: #c0c5d1;
|
2013-06-19 08:37:56 -07:00
|
|
|
border-width: 0 0 0 4px;
|
2013-01-24 21:00:47 -08:00
|
|
|
margin: 5px 0;
|
2012-08-15 10:45:06 -07:00
|
|
|
|
|
|
|
|
overflow: hidden;
|
2012-12-13 10:59:29 -08:00
|
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.phabricator-object-item-frame {
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: #c0c5d1;
|
|
|
|
|
border-width: 1px 1px 1px 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
2013-04-03 08:28:22 -07:00
|
|
|
min-height: 29px;
|
2013-03-25 12:20:49 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-frame {
|
2013-03-23 19:50:26 -07:00
|
|
|
border-bottom-right-radius: 3px;
|
|
|
|
|
border-top-right-radius: 3px;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
2013-01-18 18:08:06 -08:00
|
|
|
.device-desktop .phabricator-object-item {
|
|
|
|
|
margin: 0 0 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-08-15 10:45:06 -07:00
|
|
|
.phabricator-object-item-name {
|
2013-03-23 14:38:01 -07:00
|
|
|
display: inline-block;
|
2012-08-15 10:45:06 -07:00
|
|
|
font-weight: bold;
|
2013-04-06 11:38:43 -07:00
|
|
|
padding: 6px 8px 0;
|
|
|
|
|
white-space: nowrap;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-link {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-objname {
|
|
|
|
|
color: #222222;
|
2013-03-23 14:38:01 -07:00
|
|
|
cursor: text;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2012-12-17 08:26:44 -08:00
|
|
|
.phabricator-object-item-content {
|
2013-05-31 08:40:03 -07:00
|
|
|
margin-top: 4px;
|
2012-12-17 08:26:44 -08:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.phabricator-object-item-grippable {
|
|
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-grip {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2013-04-06 11:38:43 -07:00
|
|
|
width: 17px;
|
2013-03-23 14:37:18 -07:00
|
|
|
background: url(/rsrc/image/texture/grip.png) center center no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-grippable .phabricator-object-item-frame {
|
2013-04-06 11:38:43 -07:00
|
|
|
padding-left: 11px;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
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 12:57:01 -07:00
|
|
|
/* - Item Actions --------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Action buttons, like "Edit" and "Delete".
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-actions {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
text-align: right;
|
|
|
|
|
border-left: 1px solid #c0c5d1;
|
|
|
|
|
box-shadow: inset 1px 0 1px 0px rgba(0, 0, 0, 0.07);
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-05 08:41:43 -07:00
|
|
|
.phabricator-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 12:57:01 -07:00
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 24px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-05 08:41:43 -07:00
|
|
|
.phabricator-object-item-actions .phui-list-item-view +
|
|
|
|
|
.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 12:57:01 -07:00
|
|
|
border-right: 1px solid #d6d6e9;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-05 08:41:43 -07:00
|
|
|
.phabricator-object-item-actions .phui-list-item-href {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-actions .phui-list-item-href:hover {
|
2013-05-31 08:40:03 -07:00
|
|
|
background: #e9e9f9;
|
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 12:57:01 -07:00
|
|
|
}
|
|
|
|
|
|
2013-06-05 08:41:43 -07:00
|
|
|
.phabricator-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 12:57:01 -07:00
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin-top: -7px;
|
|
|
|
|
left: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-05 08:41:43 -07:00
|
|
|
.phabricator-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 12:57:01 -07:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-with-1-actions .phabricator-object-item-content-box {
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-with-2-actions .phabricator-object-item-content-box {
|
|
|
|
|
margin-right: 48px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-with-3-actions .phabricator-object-item-content-box {
|
|
|
|
|
margin-right: 72px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-09 17:55:01 -08:00
|
|
|
|
|
|
|
|
/* - Stackable List ------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Tighter, stacking list.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-list-view.phabricator-object-list-stackable
|
|
|
|
|
.phabricator-object-item {
|
|
|
|
|
margin: -1px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-list-stackable .phabricator-object-item {
|
2013-03-23 14:37:18 -07:00
|
|
|
border-left-width: 1px;
|
2013-03-09 17:55:01 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .phabricator-object-list-stackable
|
|
|
|
|
.phabricator-object-item:hover {
|
|
|
|
|
background: #e9ecf5;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-06 14:01:57 -07:00
|
|
|
/* - Subhead -------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Descriptive Text or Links under the main header, before attributes.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-subhead {
|
|
|
|
|
color: #777;
|
|
|
|
|
padding: 0 8px 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-09 17:55:01 -08:00
|
|
|
|
2012-12-17 08:26:44 -08:00
|
|
|
/* - Attribute List ------------------------------------------------------------
|
2012-12-13 10:59:29 -08:00
|
|
|
|
|
|
|
|
Object attributes, commonly used to render created date, etc.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-attributes {
|
2013-04-03 08:28:22 -07:00
|
|
|
padding: 0 8px 6px;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-attribute {
|
|
|
|
|
display: inline;
|
2013-01-24 21:00:47 -08:00
|
|
|
color: #777;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
2012-08-15 10:45:06 -07:00
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-attribute-spacer {
|
|
|
|
|
padding: 0 4px;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2012-12-17 08:26:44 -08:00
|
|
|
/* - Icons ---------------------------------------------------------------------
|
2012-12-13 10:59:29 -08:00
|
|
|
|
2012-12-17 08:26:44 -08:00
|
|
|
Icons, which show object state. On mobile, they are rendered without labels
|
|
|
|
|
to save space.
|
2012-08-15 10:45:06 -07:00
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.phabricator-object-icon-pane {
|
|
|
|
|
float: right;
|
2013-05-31 08:40:03 -07:00
|
|
|
margin-top: 6px;
|
2013-04-06 11:38:43 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device .phabricator-object-item-no-icon-images .phabricator-object-icon-pane {
|
|
|
|
|
display: none;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-with-handle-icons .phabricator-object-item-icons {
|
2013-03-25 12:20:49 -07:00
|
|
|
padding-bottom: 30px;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-icons {
|
|
|
|
|
float: right;
|
2013-04-06 11:38:43 -07:00
|
|
|
padding: 0 10px;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
2012-08-15 10:45:06 -07:00
|
|
|
|
2012-12-17 08:26:44 -08:00
|
|
|
/* NOTE: The main content is an "overflow: hidden" div which we give a right
|
|
|
|
|
margin so it doesn't overlap the icons. The margin is slightly larger than
|
|
|
|
|
the width + padding of the icon div, so the icons have some space even if
|
|
|
|
|
the content is wider than available space. */
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.device-desktop .phabricator-object-icon-pane {
|
2012-12-13 10:59:29 -08:00
|
|
|
width: 120px;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2013-03-09 17:55:01 -08:00
|
|
|
.device-desktop .phabricator-object-item-with-icons
|
2013-03-23 14:37:18 -07:00
|
|
|
.phabricator-object-item-content,
|
|
|
|
|
.device-desktop .phabricator-object-item-with-handle-icons
|
2013-03-09 17:55:01 -08:00
|
|
|
.phabricator-object-item-content {
|
2012-12-17 08:26:44 -08:00
|
|
|
margin-right: 132px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.device .phabricator-object-item-icons {
|
|
|
|
|
width: 18px;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.device .phabricator-object-item-with-icons .phabricator-object-item-content,
|
|
|
|
|
.device .phabricator-object-item-with-handle-icons
|
|
|
|
|
.phabricator-object-item-content {
|
2012-12-17 08:26:44 -08:00
|
|
|
margin-right: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.device .phabricator-object-item-icon-label {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-icon {
|
2013-03-23 14:37:18 -07:00
|
|
|
vertical-align: middle;
|
2012-12-13 10:59:29 -08:00
|
|
|
position: relative;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #666666;
|
2012-08-15 10:45:06 -07:00
|
|
|
text-align: right;
|
2012-12-13 10:59:29 -08:00
|
|
|
white-space: nowrap;
|
2012-08-15 10:45:06 -07:00
|
|
|
overflow: hidden;
|
2012-12-13 10:59:29 -08:00
|
|
|
|
|
|
|
|
min-height: 18px;
|
|
|
|
|
line-height: 18px;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.device-desktop .phabricator-object-item-icon {
|
|
|
|
|
padding-right: 22px;
|
|
|
|
|
}
|
2012-08-15 10:45:06 -07:00
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.device-desktop .phabricator-object-item-icon-none {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-icon-image {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 2px;
|
|
|
|
|
top: 2px;
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2012-12-16 16:33:02 -08:00
|
|
|
/* - Bar Colors ----------------------------------------------------------------
|
2012-08-15 10:45:06 -07:00
|
|
|
|
2012-12-16 16:33:02 -08:00
|
|
|
Colors for the left-hand border bars, used to indicate object status or other
|
|
|
|
|
attributes.
|
2012-08-15 10:45:06 -07:00
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-bar-color-red {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #c0392b;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
2012-08-15 10:45:06 -07:00
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-bar-color-orange {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #e67e22;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-bar-color-yellow {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #f1c40f;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-bar-color-green {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #27ae60;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-bar-color-sky {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #3498db;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-bar-color-blue {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #2980b9;
|
2012-12-13 10:59:29 -08:00
|
|
|
}
|
|
|
|
|
|
2013-06-18 15:35:14 -07:00
|
|
|
.phabricator-object-item-bar-color-indigo { /* TODO */
|
2012-12-13 10:59:29 -08:00
|
|
|
border-left-color: #3a00cc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-bar-color-violet {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #8e44ad;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
.phabricator-object-item-bar-color-magenta {
|
2013-06-18 15:35:14 -07:00
|
|
|
border-left-color: #cB4d9f;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-bar-color-grey {
|
2013-06-19 08:37:56 -07:00
|
|
|
border-left-color: #bdc3c7;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
|
|
|
|
|
2012-12-13 10:59:29 -08:00
|
|
|
.phabricator-object-item-bar-color-black {
|
|
|
|
|
border-left-color: #333333;
|
2012-08-15 10:45:06 -07:00
|
|
|
}
|
2012-12-16 16:33:02 -08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
/* - Effects -------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Effects like highlighted items.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-highlighted {
|
2013-06-19 15:50:15 -07:00
|
|
|
background: #fdf5d4;
|
2013-06-11 20:53:55 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-list-cards
|
|
|
|
|
.phabricator-object-item.phabricator-object-item-highlighted {
|
|
|
|
|
background-image: linear-gradient(to bottom, rgb(253, 255, 221), rgb(243, 245, 206));
|
|
|
|
|
background-image: -webkit-linear-gradient(top, rgb(253, 255, 221), rgb(243, 245, 206));
|
2013-03-09 17:55:01 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-selected {
|
2013-06-19 15:50:15 -07:00
|
|
|
background: #daeaf3;
|
2013-03-09 17:55:01 -08:00
|
|
|
}
|
|
|
|
|
|
2013-05-18 10:49:37 -07:00
|
|
|
.phabricator-object-list-flush .aphront-error-view {
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-09 17:55:01 -08:00
|
|
|
|
|
|
|
|
/* - Foot Icons ----------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Object counts shown in the footer.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-foot-icons {
|
|
|
|
|
margin-left: 10px;
|
2013-03-23 14:37:18 -07:00
|
|
|
bottom: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-with-foot-icons .phabricator-object-item-content {
|
|
|
|
|
padding-bottom: 22px;
|
2013-03-09 17:55:01 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-foot-icon {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background: #909090;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
padding: 1px 4px 0 22px;
|
|
|
|
|
height: 19px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
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 12:57:01 -07:00
|
|
|
.phabricator-object-item-foot-icon .sprite-icons {
|
2013-03-09 17:55:01 -08:00
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 4px;
|
|
|
|
|
top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* - Handle Icons --------------------------------------------------------------
|
|
|
|
|
|
2013-04-06 11:38:43 -07:00
|
|
|
Shows owners, reviewers, etc., using profile picture icons.
|
2013-03-09 17:55:01 -08:00
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-handle-icons {
|
|
|
|
|
height: 28px;
|
|
|
|
|
margin-right: 10px;
|
2013-03-23 14:37:18 -07:00
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
text-align: right;
|
|
|
|
|
position: absolute;
|
2013-03-09 17:55:01 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-handle-icon {
|
2013-05-31 08:40:03 -07:00
|
|
|
margin: 1px;
|
2013-03-09 17:55:01 -08:00
|
|
|
width: 28px;
|
|
|
|
|
height: 28px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background-size: 28px 28px;
|
|
|
|
|
background-repeat: no-repeat;
|
2012-12-16 16:33:02 -08:00
|
|
|
}
|
2013-03-23 14:37:18 -07:00
|
|
|
|
|
|
|
|
|
2013-04-06 11:38:43 -07:00
|
|
|
/* - Bylines -------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Shows owners, authors, reviewers, etc., in text.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-object-item-bylines {
|
|
|
|
|
float: right;
|
|
|
|
|
clear: right;
|
|
|
|
|
padding: 0 10px;
|
2013-05-31 08:40:03 -07:00
|
|
|
margin: 5px 0;
|
2013-04-06 11:38:43 -07:00
|
|
|
font-size: 11px;
|
2013-05-31 08:40:03 -07:00
|
|
|
color: #666;
|
2013-04-06 11:38:43 -07:00
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-23 14:37:18 -07:00
|
|
|
/* - Card List -----------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Rounded card list.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* Hard to sprite since we can't have other sprites appearing in tall cells */
|
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item {
|
|
|
|
|
border-radius: 3px;
|
2013-03-23 18:38:03 -07:00
|
|
|
border-left-width: 6px;
|
2013-03-23 19:50:26 -07:00
|
|
|
background: #f0f0f0 url('/rsrc/image/texture/card-gradient.png') repeat-x;
|
2013-04-06 11:38:43 -07:00
|
|
|
margin-bottom: 4px;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
2013-03-23 18:38:03 -07:00
|
|
|
.phabricator-object-list-cards .phabricator-object-item-frame {
|
2013-05-31 08:40:03 -07:00
|
|
|
min-height: 50px;
|
2013-03-23 14:37:18 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-selected {
|
|
|
|
|
background: #bfdcff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-list-cards .phabricator-object-item-selected
|
|
|
|
|
.phabricator-object-item-frame {
|
|
|
|
|
border-color: #99ccff;
|
|
|
|
|
}
|
2013-06-05 16:22:27 -07:00
|
|
|
|
|
|
|
|
|
2013-06-05 17:36:33 -07:00
|
|
|
/* - Draggable List ------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
These classes are applied by and/or provided for use with JX.DraggableList.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-06-05 16:22:27 -07:00
|
|
|
.drag-ghost {
|
|
|
|
|
position: relative;
|
|
|
|
|
border: 1px dashed #aaaaaa;
|
|
|
|
|
background: #f9f9f9;
|
|
|
|
|
margin: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-dragging {
|
|
|
|
|
position: relative;
|
2013-06-05 17:36:33 -07:00
|
|
|
opacity: 0.9;
|
2013-06-05 16:22:27 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-sending {
|
2013-06-05 17:36:33 -07:00
|
|
|
opacity: 0.75;
|
2013-06-05 16:22:27 -07:00
|
|
|
}
|
