2013-04-20 02:44:20 +02:00
|
|
|
/**
|
|
|
|
|
* @provides phui-icon-view-css
|
|
|
|
|
*/
|
|
|
|
|
|
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
|
|
|
.phui-icon-example .phui-icon-view {
|
2013-04-20 02:44:20 +02:00
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.phui-icon-view.sprite-tokens {
|
2016-07-01 06:20:16 +02:00
|
|
|
height: 18px;
|
|
|
|
|
width: 18px;
|
2014-03-31 00:22:45 +02:00
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
2013-04-20 02:44:20 +02:00
|
|
|
}
|
|
|
|
|
|
2013-06-13 00:05:16 +02:00
|
|
|
.phui-icon-view.sprite-login {
|
2015-07-17 02:14:50 +02:00
|
|
|
height: 28px;
|
|
|
|
|
width: 28px;
|
2013-06-13 00:05:16 +02: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 21:57:01 +02:00
|
|
|
.phui-icon-view.phuihead-medium {
|
2013-04-20 02:44:20 +02:00
|
|
|
height: 50px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.phui-icon-view.phuihead-small {
|
2013-04-20 02:44:20 +02:00
|
|
|
height: 35px;
|
|
|
|
|
width: 35px;
|
|
|
|
|
background-size: 35px;
|
|
|
|
|
}
|
2014-04-19 19:00:37 +02:00
|
|
|
|
2014-04-23 03:29:14 +02:00
|
|
|
.phui-icon-has-text:before {
|
2017-02-21 23:18:17 +01:00
|
|
|
margin-right: 6px;
|
2014-04-19 19:00:37 +02:00
|
|
|
}
|
2014-05-21 19:18:43 +02:00
|
|
|
|
|
|
|
|
a.phui-icon-view:hover {
|
|
|
|
|
text-decoration: none;
|
[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
|
|
|
color: {$sky};
|
2014-05-21 19:18:43 +02:00
|
|
|
}
|
2016-01-16 06:37:36 +01:00
|
|
|
|
2017-02-21 23:18:17 +01:00
|
|
|
img.phui-image-disabled {
|
|
|
|
|
opacity: .8;
|
|
|
|
|
-webkit-filter: grayscale(100%);
|
|
|
|
|
filter: grayscale(100%);
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-16 06:37:36 +01:00
|
|
|
/* - Icon in a Circle ------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.phui-icon-circle {
|
|
|
|
|
border: 1px solid {$lightblueborder};
|
|
|
|
|
border-radius: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
cursor: pointer;
|
2016-11-29 20:58:42 +01:00
|
|
|
background: transparent;
|
|
|
|
|
padding: 0;
|
2017-05-26 20:42:31 +02:00
|
|
|
position: relative;
|
2016-01-16 06:37:36 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-icon-circle.circle-medium {
|
|
|
|
|
height: 36px;
|
|
|
|
|
width: 36px;
|
|
|
|
|
border-radius: 36px;
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-26 20:42:31 +02:00
|
|
|
.phui-icon-circle.phui-icon-circle-state {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
background-color: {$bluebackground};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-icon-circle.phui-icon-circle-state .phui-icon-circle-icon {
|
|
|
|
|
color: {$bluetext};
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-circle.phui-icon-circle-state:hover {
|
|
|
|
|
border-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-icon-circle .phui-icon-circle-icon {
|
2016-01-16 06:37:36 +01:00
|
|
|
height: 24px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
color: {$lightblueborder};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-26 20:42:31 +02:00
|
|
|
.phui-icon-circle.circle-medium .phui-icon-circle-icon {
|
2016-01-16 06:37:36 +01:00
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
}
|
|
|
|
|
|
2016-09-15 06:05:19 +02:00
|
|
|
a.phui-icon-circle.hover-sky:hover {
|
2016-01-16 06:37:36 +01:00
|
|
|
text-decoration: none;
|
|
|
|
|
border-color: {$sky};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2016-09-15 06:05:19 +02:00
|
|
|
a.phui-icon-circle.hover-sky:hover .phui-icon-view {
|
2016-01-16 06:37:36 +01:00
|
|
|
color: {$sky};
|
|
|
|
|
}
|
2016-08-19 21:49:38 +02:00
|
|
|
|
2016-09-15 06:05:19 +02:00
|
|
|
a.phui-icon-circle.hover-violet:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
border-color: {$violet};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-circle.hover-violet:hover .phui-icon-view {
|
|
|
|
|
color: {$violet};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-circle.hover-pink:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
border-color: {$pink};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-circle.hover-pink:hover .phui-icon-view {
|
|
|
|
|
color: {$pink};
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-13 20:09:54 +02:00
|
|
|
a.phui-icon-circle.hover-green:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
border-color: {$green};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-circle.hover-green:hover .phui-icon-view {
|
|
|
|
|
color: {$green};
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-29 20:58:42 +01:00
|
|
|
a.phui-icon-circle.hover-red:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
border-color: {$red};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-circle.hover-red:hover .phui-icon-view {
|
|
|
|
|
color: {$red};
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-28 02:55:44 +02:00
|
|
|
.phui-icon-circle .phui-icon-view.phui-icon-circle-state-icon {
|
2017-05-26 20:42:31 +02:00
|
|
|
position: absolute;
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
right: -3px;
|
|
|
|
|
top: -4px;
|
|
|
|
|
text-shadow:
|
|
|
|
|
-1px -1px 0 #fff,
|
|
|
|
|
1px -1px 0 #fff,
|
|
|
|
|
-1px 1px 0 #fff,
|
|
|
|
|
1px 1px 0 #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2016-08-19 21:49:38 +02:00
|
|
|
/* - Icon in a Square ------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.phui-icon-view.phui-icon-square {
|
|
|
|
|
height: 40px;
|
|
|
|
|
width: 40px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.phui-icon-view.phui-icon-square:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
