revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-20 20:40:56 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/layout/phabricator-action-header-view.css

130 lines
3 KiB
CSS
Raw Normal View History

PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
/**
* @provides phabricator-action-header-view-css
*/
.phabricator-action-header {
padding: 0 5px 0 8px;
overflow: hidden;
}
.phabricator-action-header-title {
Color consolidation Summary: Another pass at consolidating colors Test Plan: Test various pages and UI elements Reviewers: epriestley Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6905
2013-09-07 18:13:55 +02:00
color: {$darkgreytext};
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
float: left;
font-size: 14px;
font-weight: bold;
line-height: 15px;
padding: 8px 0;
white-space: nowrap;
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
-webkit-font-smoothing: antialiased;
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
}
Dashboard display tweaks Summary: Changes headers to standard light blue, tweaks spacing for uniformity. Test Plan: Test editing and using my dashboard. {F157744} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9228
2014-05-21 01:23:51 +02:00
.gradient-lightblue-header .phabricator-action-header-title {
Dashboard CSS updates Summary: Updates ObjectList dashboarda and tweaks minor css items elsewhere. Test Plan: Test my dashboard, editing, and standalone Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9275
2014-05-24 06:48:15 +02:00
color: {$darkbluetext};
Dashboard display tweaks Summary: Changes headers to standard light blue, tweaks spacing for uniformity. Test Plan: Test editing and using my dashboard. {F157744} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9228
2014-05-21 01:23:51 +02:00
}
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
.phabricator-action-header-icon-list {
float: right;
padding-top: 4px;
}
.phabricator-action-header-icon-item {
float: right;
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
padding-left: 4px;
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +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
.phabricator-action-header-icon-item .phui-icon-view {
display: inline-block;
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
font-size: 18px;
margin: 4px 0;
height: 18px;
width: 18px;
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
}
Move PhabricatorTagView to PHUITagView Summary: For consistency and great justice. Test Plan: tested audit, uiexamples, action headers Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7967
2014-01-14 23:09:52 +01:00
.phabricator-action-header-icon-item .phui-tag-view {
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
margin: 4px 2px 0;
Remove nowrap from PHUITagCore Summary: Removes the outer inline-block on PHUITags, it isn't needed and causes issues in some browsers, like Chrome Android. Tags also wrap again on long tags. Test Plan: tested hovercards, tags, people tags, maniphest, project tags, typeahead tags. Chrome, IE 8-11, Safari for good measure. {F164573} Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9439
2014-06-10 22:33:38 +02:00
display: inline-block;
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
}
.phabricator-action-header-link {
Color consolidation Summary: Another pass at consolidating colors Test Plan: Test various pages and UI elements Reviewers: epriestley Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6905
2013-09-07 18:13:55 +02:00
color: {$darkgreytext};
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
}
[redesign] Remove most gradients, tweak hovercards Summary: The removes our least used gradients and uses base colors. Tweaked Hovercards to use. Test Plan: Test Hovercards and UIExamples Actions Headers Reviewers: epriestley, btrahan Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9347
2014-06-02 20:45:30 +02:00
.phabricator-action-header.gradient-green-header {
background: {$green};
}
.phabricator-action-header.gradient-blue-header {
background: {$blue};
}
.phabricator-action-header.gradient-yellow-header {
background: {$yellow};
}
.phabricator-action-header.gradient-red-header {
background: {$red};
}
Add white as ActionHeader color, use on Dashboards Summary: Trying to lessen the visual footprint of a heavy-widget dashboard. Adds a plain style. Test Plan: Tested my homepage and dashboards {F164709} Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9454
2014-06-10 18:16:29 +02:00
.phabricator-action-header.gradient-white-header {
background: #fff;
}
.phabricator-action-header.gradient-white-header .phabricator-action-header-title {
color: {$darkbluetext};
padding: 12px 0 12px 4px;
}
Add hover state to white header icons Summary: Adds a hover state and color for white headers. Fixes T5318 Test Plan: Test on managing a dashboard. Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5318 Differential Revision: https://secure.phabricator.com/D9482
2014-06-11 19:39:38 +02:00
.phabricator-action-header.gradient-white-header
.phabricator-action-header-icon-list .phui-icon-view {
color: {$lightbluetext};
}
.phabricator-action-header.gradient-white-header
.phabricator-action-header-icon-list .phui-icon-view:hover {
color: {$darkbluetext};
}
Add white as ActionHeader color, use on Dashboards Summary: Trying to lessen the visual footprint of a heavy-widget dashboard. Adds a plain style. Test Plan: Tested my homepage and dashboards {F164709} Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9454
2014-06-10 18:16:29 +02:00
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
.gradient-green-header .phabricator-action-header-title,
.gradient-red-header .phabricator-action-header-title,
.gradient-blue-header .phabricator-action-header-title,
.gradient-yellow-header .phabricator-action-header-title,
.gradient-green-header .phabricator-action-header-link,
.gradient-red-header .phabricator-action-header-link,
.gradient-blue-header .phabricator-action-header-link,
.gradient-yellow-header .phabricator-action-header-link {
color: #fff;
[redesign] Remove most gradients, tweak hovercards Summary: The removes our least used gradients and uses base colors. Tweaked Hovercards to use. Test Plan: Test Hovercards and UIExamples Actions Headers Reviewers: epriestley, btrahan Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9347
2014-06-02 20:45:30 +02:00
-webkit-font-smoothing: antialiased;
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
}
Move PhabricatorTagView to PHUITagView Summary: For consistency and great justice. Test Plan: tested audit, uiexamples, action headers Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7967
2014-01-14 23:09:52 +01:00
.phabricator-action-header-icon-list .phui-tag-view {
ObjectHeader Status icons Summary: Adds status icons and colors to Maniphest and Differential. Also minor tweaks to them in hovercards. Probably some other stuff too. Test Plan: Test many diff and task states. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D7098
2013-09-24 17:42:04 +02:00
font-weight: normal;
}
PhabricatorActionHeaderView v0 Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features. Test Plan: Tested UIExamples and Workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5585
2013-04-05 16:40:27 +02:00
.phabricator-action-header-title span {
float: left;
height: 16px;
width: 16px;
margin-right: 4px;
}
Dashboard View for Feed Summary: A basic rendering of feed in dashboards Test Plan: built a feed in dashboards, viewed it as my homepage. {F157119} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9209
2014-05-20 17:05:03 +02:00
Style text boxes and tab panels in dashboards Summary: Adds basic borders, spacing to tab panels and text boxes. Test Plan: Added some of each to my Dashboard. {F157622} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5078 Differential Revision: https://secure.phabricator.com/D9216
2014-05-20 19:53:16 +02:00
/* - Dashboards ------------------------------------------------------------ */
Dashboard View for Feed Summary: A basic rendering of feed in dashboards Test Plan: built a feed in dashboards, viewed it as my homepage. {F157119} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9209
2014-05-20 17:05:03 +02:00
Dashboard display tweaks Summary: Changes headers to standard light blue, tweaks spacing for uniformity. Test Plan: Test editing and using my dashboard. {F157744} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9228
2014-05-21 01:23:51 +02:00
.dashboard-panel .phabricator-action-header.gradient-grey-header,
.dashboard-panel .phabricator-action-header.gradient-lightblue-header {
Style text boxes and tab panels in dashboards Summary: Adds basic borders, spacing to tab panels and text boxes. Test Plan: Added some of each to my Dashboard. {F157622} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5078 Differential Revision: https://secure.phabricator.com/D9216
2014-05-20 19:53:16 +02:00
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$thinblueborder};
Dashboard View for Feed Summary: A basic rendering of feed in dashboards Test Plan: built a feed in dashboards, viewed it as my homepage. {F157119} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9209
2014-05-20 17:05:03 +02:00
}
Add hover state to white header icons Summary: Adds a hover state and color for white headers. Fixes T5318 Test Plan: Test on managing a dashboard. Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5318 Differential Revision: https://secure.phabricator.com/D9482
2014-06-11 19:39:38 +02:00
.dashboard-panel .phabricator-action-header.gradient-white-header {
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$thinblueborder};
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.dashboard-panel .phabricator-action-header.gradient-white-header
.phabricator-action-header-icon-list {
padding-top: 6px;
padding-right: 6px;
}
Copy permalink