revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-22 13:30:55 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/phui/phui-icon.css

142 lines
2.4 KiB
CSS
Raw Normal View History

PHUIIconView Summary: Adds a base class for displaying images and icons. Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5736
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 {
PHUIIconView Summary: Adds a base class for displaying images and icons. Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5736
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 {
New Tokens Summary: New tokens, slightly larger (18x18 vs 16x16). I think these all feel decent, I might tweak the thumbs icons a little more color-wise. Test Plan: Use Tokens. {F1707411} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T11244 Differential Revision: https://secure.phabricator.com/D16211
2016-07-01 06:20:16 +02:00
height: 18px;
width: 18px;
Normalize token line height Summary: This resolves mysterious extra space below tokens in property list view and timeline view. Test Plan: Check Property List in Phriction, Timeline examples, Token Application, and giving my fake accounts tokens. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin, chad Differential Revision: https://secure.phabricator.com/D8651
2014-03-31 00:22:45 +02:00
display: inline-block;
vertical-align: top;
PHUIIconView Summary: Adds a base class for displaying images and icons. Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5736
2013-04-20 02:44:20 +02:00
}
Add Login icons to PHUIIconView. Summary: Prepping to use. Test Plan: UIExamples Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6191
2013-06-13 00:05:16 +02:00
.phui-icon-view.sprite-login {
Update login icons Summary: Smaller footprint, flat style, updated logos. Test Plan: Buttons in UIExamples. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D13622
2015-07-17 02:14:50 +02:00
height: 28px;
width: 28px;
Add Login icons to PHUIIconView. Summary: Prepping to use. Test Plan: UIExamples Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6191
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 {
PHUIIconView Summary: Adds a base class for displaying images and icons. Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5736
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 {
PHUIIconView Summary: Adds a base class for displaying images and icons. Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5736
2013-04-20 02:44:20 +02:00
height: 35px;
width: 35px;
background-size: 35px;
}
Add FontAwesome as a font/icon choice Summary: This adds FontAwesome and attempts to make use as icons as consistent as possible. May require additional tweaks once we start using, but in practice this is pretty finished. - Adds FontAwesome - Adds additional transforms (rotates, spins) - Adds additional colors - Better scopes halflings and fontawesome - Shares CSS between fonts for consistency Test Plan: Tested various browsers back to IE8, mobile. {F146146} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D8818
2014-04-19 19:00:37 +02:00
Clean up FontAwesome / Timeline CSS Summary: Normalize FA CSS, expand timeline icons to 14px, fix mobile browsers, give attribution in uiexamples Test Plan: tested iOS simulator, chrome, ie Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D8845
2014-04-23 03:29:14 +02:00
.phui-icon-has-text:before {
Standardize spacing when icons have text Summary: Our standard icon -> button spacing is 4px, not 8px. Test Plan: Review search icon in Conpherence Full Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12365
2015-04-12 06:25:36 +02:00
margin-right: 4px;
Add FontAwesome as a font/icon choice Summary: This adds FontAwesome and attempts to make use as icons as consistent as possible. May require additional tweaks once we start using, but in practice this is pretty finished. - Adds FontAwesome - Adds additional transforms (rotates, spins) - Adds additional colors - Better scopes halflings and fontawesome - Shares CSS between fonts for consistency Test Plan: Tested various browsers back to IE8, mobile. {F146146} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D8818
2014-04-19 19:00:37 +02:00
}
Replace action sprite with FontAwesome Summary: Replaces the action icons in action headers with FontAwesome Test Plan: - grep SPRITE_ACTIONS - grep sprite-actions - Replace on UIExamples - Replace on Workboards - Replace on Dashboards - Replace on FeedStories {F157840} {F157841} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9230
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};
Replace action sprite with FontAwesome Summary: Replaces the action icons in action headers with FontAwesome Test Plan: - grep SPRITE_ACTIONS - grep sprite-actions - Replace on UIExamples - Replace on Workboards - Replace on Dashboards - Replace on FeedStories {F157840} {F157841} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9230
2014-05-21 19:18:43 +02:00
}
PHUIIconCircleView Summary: Icon in a circle. Base class, not much in the way of color choices. Test Plan: UIExamples, Chrome. {F1062027} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15034
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;
Make lightbox buttons more roundy Summary: Ref T3612. Mobilizes the new lightbox, changes large buttons to circle icons like Conpherence. Test Plan: Click each new button on desktop, mobile. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T3612 Differential Revision: https://secure.phabricator.com/D16961
2016-11-29 20:58:42 +01:00
background: transparent;
padding: 0;
PHUIIconCircleView Summary: Icon in a circle. Base class, not much in the way of color choices. Test Plan: UIExamples, Chrome. {F1062027} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15034
2016-01-16 06:37:36 +01:00
}
.phui-icon-circle.circle-medium {
height: 36px;
width: 36px;
border-radius: 36px;
}
.phui-icon-circle .phui-icon-view {
height: 24px;
width: 24px;
font-size: 11px;
line-height: 24px;
color: {$lightblueborder};
cursor: pointer;
}
.phui-icon-circle.circle-medium .phui-icon-view {
font-size: 18px;
line-height: 36px;
}
Clean up some Conpherence header CSS Summary: Darkens the topic, adds fun colors to action icons. Test Plan: Hover over new action icons. See darker topic text. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16556
2016-09-15 06:05:19 +02:00
a.phui-icon-circle.hover-sky:hover {
PHUIIconCircleView Summary: Icon in a circle. Base class, not much in the way of color choices. Test Plan: UIExamples, Chrome. {F1062027} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15034
2016-01-16 06:37:36 +01:00
text-decoration: none;
border-color: {$sky};
cursor: pointer;
}
Clean up some Conpherence header CSS Summary: Darkens the topic, adds fun colors to action icons. Test Plan: Hover over new action icons. See darker topic text. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16556
2016-09-15 06:05:19 +02:00
a.phui-icon-circle.hover-sky:hover .phui-icon-view {
PHUIIconCircleView Summary: Icon in a circle. Base class, not much in the way of color choices. Test Plan: UIExamples, Chrome. {F1062027} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15034
2016-01-16 06:37:36 +01:00
color: {$sky};
}
Add setBackground to PHUIIconView Summary: Ref T11132. Adds a background color option to PHUIIconView, for use whereever, and NUX. Also normalize icon placement for mixed image/icon result list. Test Plan: Test in UIExamples, and Global Settings. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T11132 Differential Revision: https://secure.phabricator.com/D16424
2016-08-19 21:49:38 +02:00
Clean up some Conpherence header CSS Summary: Darkens the topic, adds fun colors to action icons. Test Plan: Hover over new action icons. See darker topic text. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16556
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};
}
Basic Conpherence Search in Thread Summary: Adds a search bar toggle and results for searching inside a Conpherence Room. The UI of the results itself are not styled yet, and will follow up with another diff. Test Plan: Go to Conpherence, search for "asdf", get lots of results. Search for nothing, get no change, search for something fictitious, get no threads found (will follow up with search result UI). Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16697
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};
}
Make lightbox buttons more roundy Summary: Ref T3612. Mobilizes the new lightbox, changes large buttons to circle icons like Conpherence. Test Plan: Click each new button on desktop, mobile. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T3612 Differential Revision: https://secure.phabricator.com/D16961
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};
}
Add setBackground to PHUIIconView Summary: Ref T11132. Adds a background color option to PHUIIconView, for use whereever, and NUX. Also normalize icon placement for mixed image/icon result list. Test Plan: Test in UIExamples, and Global Settings. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T11132 Differential Revision: https://secure.phabricator.com/D16424
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;
}
Copy permalink