revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-11 16:16:14 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/application/conpherence/header-pane.css

131 lines
2.6 KiB
CSS
Raw Normal View History

Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02:00
/**
* @provides conpherence-header-pane-css
*/
.conpherence-header-pane .phui-header-shell {
padding: 8px 16px 10px;
min-height: 38px;
}
.conpherence-header-pane .phui-header-header {
font-size: 16px;
Add an Experimental Dark Mode to Phabricator Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work. Test Plan: Visit lots and lots of pages with dark mode on and off. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18227
2017-07-17 20:08:17 +02:00
color: {$blacktext};
Use PHUIListItemView in ConpherenceThreadList Summary: Fixes T12556 Uses more common components in ConpherenceThreadList by moving to PHUIListItemView. Reduces clutter by moving privacy into the header. Gets ride of "See More" double interchanges. Test Plan: I need to test this more, doesn't seem to auto-select top room any more, also might build a lipsum generator. - Create lots of rooms with various policies - Test clicking on policy object - Click on different rooms - Post in rooms - Load up second account, see room numbers - Clear room message count by clicking on room Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12556 Differential Revision: https://secure.phabricator.com/D17698
2017-04-17 19:59:11 +02:00
display: block;
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02:00
}
.conpherence-header-pane .phui-header-subheader {
padding: 0;
margin: 0;
Use PHUIListItemView in ConpherenceThreadList Summary: Fixes T12556 Uses more common components in ConpherenceThreadList by moving to PHUIListItemView. Reduces clutter by moving privacy into the header. Gets ride of "See More" double interchanges. Test Plan: I need to test this more, doesn't seem to auto-select top room any more, also might build a lipsum generator. - Create lots of rooms with various policies - Test clicking on policy object - Click on different rooms - Post in rooms - Load up second account, see room numbers - Clear room message count by clicking on room Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12556 Differential Revision: https://secure.phabricator.com/D17698
2017-04-17 19:59:11 +02:00
}
.conpherence-header-pane .conpherence-header-topic .phui-tag-core {
color: {$sh-indigotext};
Minor Topic CSS tweaks Summary: Cleans up the topic UI a little more, I think this feels nice for some reason. Test Plan: visit a room with and without a topic, desktop, tablet, mobile Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17711
2017-04-18 00:03:07 +02:00
padding: 0 4px;
Use PHUIListItemView in ConpherenceThreadList Summary: Fixes T12556 Uses more common components in ConpherenceThreadList by moving to PHUIListItemView. Reduces clutter by moving privacy into the header. Gets ride of "See More" double interchanges. Test Plan: I need to test this more, doesn't seem to auto-select top room any more, also might build a lipsum generator. - Create lots of rooms with various policies - Test clicking on policy object - Click on different rooms - Post in rooms - Load up second account, see room numbers - Clear room message count by clicking on room Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12556 Differential Revision: https://secure.phabricator.com/D17698
2017-04-17 19:59:11 +02:00
font-size: 12px;
margin: 0 8px 0 0;
Fix super long topics in Conpherence header Summary: Add some ellipsis if the topic is absurdly long. Test Plan: desktop, mobile, tablet. MMMMMMMmmmMMMMMMmMMMmMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16718
2016-10-18 20:22:54 +02:00
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Use PHUIListItemView in ConpherenceThreadList Summary: Fixes T12556 Uses more common components in ConpherenceThreadList by moving to PHUIListItemView. Reduces clutter by moving privacy into the header. Gets ride of "See More" double interchanges. Test Plan: I need to test this more, doesn't seem to auto-select top room any more, also might build a lipsum generator. - Create lots of rooms with various policies - Test clicking on policy object - Click on different rooms - Post in rooms - Load up second account, see room numbers - Clear room message count by clicking on room Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12556 Differential Revision: https://secure.phabricator.com/D17698
2017-04-17 19:59:11 +02:00
font-style: italic;
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02:00
}
Minor Topic CSS tweaks Summary: Cleans up the topic UI a little more, I think this feels nice for some reason. Test Plan: visit a room with and without a topic, desktop, tablet, mobile Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17711
2017-04-18 00:03:07 +02:00
.device-phone .conpherence-header-pane .conpherence-header-topic {
display: none;
}
Add Room Image to Conpherence header Summary: This adds the room image to the main header in full Conpherence. It's nice, plus I plan to move the image edit workflow to it to simplify the move to EditEngine. I plan to build some default images for Conpherence which should be better about denoting the room, not just the last person writing. Test Plan: Click on lots of rooms with and without topics. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16666
2016-10-05 01:15:52 +02:00
.conpherence-header-pane .phui-header-col1 {
width: 46px;
height: 35px;
}
.conpherence-header-pane .phui-header-image {
height: 35px;
width: 35px;
background-size: 35px;
position: absolute;
top: 4px;
left: 0;
}
Minor Topic CSS tweaks Summary: Cleans up the topic UI a little more, I think this feels nice for some reason. Test Plan: visit a room with and without a topic, desktop, tablet, mobile Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17711
2017-04-18 00:03:07 +02:00
.conpherence-header-pane .policy-header-callout {
Use PHUIListItemView in ConpherenceThreadList Summary: Fixes T12556 Uses more common components in ConpherenceThreadList by moving to PHUIListItemView. Reduces clutter by moving privacy into the header. Gets ride of "See More" double interchanges. Test Plan: I need to test this more, doesn't seem to auto-select top room any more, also might build a lipsum generator. - Create lots of rooms with various policies - Test clicking on policy object - Click on different rooms - Post in rooms - Load up second account, see room numbers - Clear room message count by clicking on room Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12556 Differential Revision: https://secure.phabricator.com/D17698
2017-04-17 19:59:11 +02:00
background: transparent;
font-size: 12px;
margin: 0 8px 0 0;
padding: 3px 0;
font-style: normal;
}
.conpherence-header-pane .phui-header-subheader .policy-link {
color: {$lightbluetext};
}
.conpherence-header-pane .phui-header-subheader .policy-header-callout
.phui-icon-view {
font-size: 12px;
color: {$lightbluetext};
}
.conpherence-header-pane .phui-header-subheader .policy-link:hover {
color: {$darkbluetext};
}
Convert Conpherence to use normal picture setting flows Summary: This moves room pictures out of the dialog and into it's own PictureController. Also adds a standard image (and removes the "last person to chat" picture (though we could add that back. My plan is though that direct messages use auto use the other person's photo, after we have editengine and room pictures will have a plain, replaceable image. Test Plan: Set a new room picture, remove a picture. Run migration, see old images properly set with new image. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T11730 Differential Revision: https://secure.phabricator.com/D16669
2016-10-05 21:03:57 +02:00
.conpherence-header-pane .phui-header-image-href {
position: inherit;
}
Add Room Image to Conpherence header Summary: This adds the room image to the main header in full Conpherence. It's nice, plus I plan to move the image edit workflow to it to simplify the move to EditEngine. I plan to build some default images for Conpherence which should be better about denoting the room, not just the last person writing. Test Plan: Click on lots of rooms with and without topics. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16666
2016-10-05 01:15:52 +02:00
.conpherence-header-pane .phui-header-col2 {
height: 40px;
Fix super long topics in Conpherence header Summary: Add some ellipsis if the topic is absurdly long. Test Plan: desktop, mobile, tablet. MMMMMMMmmmMMMMMMmMMMmMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16718
2016-10-18 20:22:54 +02:00
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 60%;
max-width: 0;
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02:00
}
.conpherence-header-pane .phui-header-action-list .phui-header-action-item
.phui-icon-view {
height: 18px;
width: 24px;
font-size: 14px;
line-height: 23px;
display: block;
}
.device .hide-on-device {
display: none;
}
.device-phone .conpherence-header-pane .phui-header-col3 {
vertical-align: middle;
}
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
.conpherence-participant-toggle.phui-icon-circle {
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02: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
.conpherence-participant-toggle.phui-icon-circle .phui-icon-view {
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
color: {$sky};
}
.show-searchbar .conpherence-search-toggle.phui-icon-circle {
text-decoration: none;
border-color: {$green};
cursor: pointer;
}
.show-searchbar .conpherence-search-toggle.phui-icon-circle .phui-icon-view {
color: {$green};
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +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
.hide-widgets .conpherence-participant-toggle.phui-icon-circle {
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02:00
text-decoration: none;
border-color: {$lightblueborder};
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
.hide-widgets .conpherence-participant-toggle.phui-icon-circle .phui-icon-view {
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
color: {$lightblueborder};
Rebuild Conpherence Summary: Minor rebuild / redesign of Conpherence. Most of this is new UX and tossing out things like widgets, device fallbacks. I expect some of the UI to get more polished after next pass, but most everything here is in place. - Removed "Widgets", now just a single Participants pane - Added "Topic" - New header - Settings, Edit are action icons - Removed a lot of JS - Simplified CSS as much as I could Test Plan: Desktop, Tablet, Mobile. Adding and removing people. Setting new topics, new rooms. {F1828662} {F1828669} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16550
2016-09-15 03:34:11 +02:00
}
Copy permalink