revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 15:22:41 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/phui/phui-profile-menu.css

303 lines
7.2 KiB
CSS
Raw Normal View History

Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
/**
* @provides phui-profile-menu-css
*/
Make profile menu full-height Summary: Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic: - `calc()`, which allows you to do math in CSS. - The `vh` unit, which is CSS for "viewport height". Apparently this kind of stuff just works now? CSS got good at some point? Test Plan: - Page looks correct in Safari, Chrome, Firefox. - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported? Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15017
2016-01-14 02:29:25 +01:00
.device-desktop .phui-navigation-shell.phui-profile-menu {
display: table;
Remove icon nav entirely Summary: Ref T10054. People, projects, and instances no longer use icon nav, so we can get rid of it in favor of profile menus. Test Plan: Grepped for everything, looked through workboards/profiles again. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15022
2016-01-14 16:17:10 +01:00
width: 100%;
Make profile menu full-height Summary: Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic: - `calc()`, which allows you to do math in CSS. - The `vh` unit, which is CSS for "viewport height". Apparently this kind of stuff just works now? CSS got good at some point? Test Plan: - Page looks correct in Safari, Chrome, Firefox. - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported? Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15017
2016-01-14 02:29:25 +01:00
height: calc(100vh - {$menu.main.height});
}
.device-desktop .phui-profile-menu .phabricator-nav {
display: table-row;
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
}
Make profile menu full-height Summary: Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic: - `calc()`, which allows you to do math in CSS. - The `vh` unit, which is CSS for "viewport height". Apparently this kind of stuff just works now? CSS got good at some point? Test Plan: - Page looks correct in Safari, Chrome, Firefox. - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported? Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15017
2016-01-14 02:29:25 +01:00
.device-desktop .phui-profile-menu .phabricator-nav-local {
display: table-cell;
position: relative;
vertical-align: top;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
width: {$menu.profile.width};
max-width: {$menu.profile.width};
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
margin-top: 0;
Fix an issue where the profile menu could become enormous Summary: Ref T10054. Without `max-width`, Safari can make this too large with a long project name (maybe because of `table-cell`?). Test Plan: Saw normal-width menu instead of huge menu on very long project. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15046
2016-01-18 17:32:36 +01:00
overflow: hidden;
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
}
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
.device-desktop .phui-profile-menu-collapsed .phabricator-nav-local {
width: {$menu.profile.width.collapsed};
max-width: {$menu.profile.width.collapsed};
}
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
.device-desktop .phui-profile-menu .phabricator-nav-content {
Make profile menu full-height Summary: Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic: - `calc()`, which allows you to do math in CSS. - The `vh` unit, which is CSS for "viewport height". Apparently this kind of stuff just works now? CSS got good at some point? Test Plan: - Page looks correct in Safari, Chrome, Firefox. - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported? Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15017
2016-01-14 02:29:25 +01:00
display: table-cell;
margin-left: 0;
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
}
Make profile menu full-height Summary: Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic: - `calc()`, which allows you to do math in CSS. - The `vh` unit, which is CSS for "viewport height". Apparently this kind of stuff just works now? CSS got good at some point? Test Plan: - Page looks correct in Safari, Chrome, Firefox. - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported? Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15017
2016-01-14 02:29:25 +01:00
.phui-profile-menu .phabricator-side-menu {
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
background: #525867;
Make profile menu full-height Summary: Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic: - `calc()`, which allows you to do math in CSS. - The `vh` unit, which is CSS for "viewport height". Apparently this kind of stuff just works now? CSS got good at some point? Test Plan: - Page looks correct in Safari, Chrome, Firefox. - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported? Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15017
2016-01-14 02:29:25 +01:00
box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.150);
width: 240px;
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
}
.phui-profile-menu .phabricator-side-menu .phui-list-item-view {
position: relative;
}
.phui-profile-menu .phabricator-side-menu .phui-list-item-href {
display: block;
text-decoration: none;
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
padding: 0 8px 0 48px;
height: 48px;
font-size: {$biggerfontsize};
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
-webkit-font-smoothing: antialiased;
color: {$menu.profile.text};
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
line-height: 48px;
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
}
.phui-profile-menu .phabricator-side-menu .phui-list-item-icon,
Add a motivational profile menu panel Summary: Motivate your employees with inspirational quotes. A new quote every day! Test Plan: So inspirational. Reviewers: chad Reviewed By: chad Differential Revision: https://secure.phabricator.com/D15026
2016-01-15 00:29:21 +01:00
.phui-profile-menu .phabricator-side-menu
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-list-item-href .phui-list-item-icon {
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
position: absolute;
top: 12px;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
left: 13px;
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
text-align: center;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
color: {$menu.profile.text};
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
background-size: 100%;
}
Move member/watch actions to "Members/Watchers" page Summary: Ref T10054. This tries to make the members page a bit more consistent and provide hints to users about subproject/milestone membership rules. In particular: - You now join, leave, watch, unwatch, add and remove members, and lock and unlock membership from the members screen. - We now explain the membership rule for the project on this screen. There are currently four rules: - Normal Project: Join/leave normally. - Parent Project: Uses subprojects to determine members. - Milestone: Uses parent project to determine members. - Locked: Membership is locked. - (Future) Imported from LDAP/other external sources: Membership is determined by something else. Test Plan: {F1064878} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15059
2016-01-20 01:27:36 +01:00
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-list-item-href {
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
text-align: center;
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
padding: 42px 4px 14px;
line-height: 14px;
height: auto;
font-size: {$smallerfontsize};
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
Move member/watch actions to "Members/Watchers" page Summary: Ref T10054. This tries to make the members page a bit more consistent and provide hints to users about subproject/milestone membership rules. In particular: - You now join, leave, watch, unwatch, add and remove members, and lock and unlock membership from the members screen. - We now explain the membership rule for the project on this screen. There are currently four rules: - Normal Project: Join/leave normally. - Parent Project: Uses subprojects to determine members. - Milestone: Uses parent project to determine members. - Locked: Membership is locked. - (Future) Imported from LDAP/other external sources: Membership is determined by something else. Test Plan: {F1064878} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15059
2016-01-20 01:27:36 +01:00
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-list-item-name {
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
Move member/watch actions to "Members/Watchers" page Summary: Ref T10054. This tries to make the members page a bit more consistent and provide hints to users about subproject/milestone membership rules. In particular: - You now join, leave, watch, unwatch, add and remove members, and lock and unlock membership from the members screen. - We now explain the membership rule for the project on this screen. There are currently four rules: - Normal Project: Join/leave normally. - Parent Project: Uses subprojects to determine members. - Milestone: Uses parent project to determine members. - Locked: Membership is locked. - (Future) Imported from LDAP/other external sources: Membership is determined by something else. Test Plan: {F1064878} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15059
2016-01-20 01:27:36 +01:00
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-list-item-icon,
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-list-item-href .phui-list-item-icon {
top: 14px;
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
left: 32px;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
.phui-profile-menu .phabricator-side-menu
.phui-list-item-disabled
.phui-list-item-icon {
color: {$menu.profile.icon.disabled};
}
.phui-profile-menu .phabricator-side-menu .phui-icon-view {
border-radius: 3px;
}
.device-desktop .phui-profile-menu .phabricator-side-menu
.phui-list-item-href:hover {
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
background-color: rgba(0,0,0,0.15);
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
color: {$menu.profile.text.selected};
}
.phui-profile-menu .phabricator-side-menu
.phui-list-item-selected
.phui-list-item-icon,
.device-desktop .phui-profile-menu .phabricator-side-menu
.phui-list-item-href:hover
.phui-list-item-icon {
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
color: {$menu.profile.text.selected};
}
.phui-profile-menu .phabricator-side-menu .phui-list-item-selected
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
.phui-list-item-href {
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
background-color: rgba(0,0,0,0.3);
Rough initial cut of profile new profile menu Summary: Ref T10054. I haven't done any of the big-picture layout stuff yet, but this should get look-and-feel somewhere in the ballpark of reasonablness, I think. Major missing stuff: - No "collapse" state or action yet. - Menu is not full-height (requires changes to the rendering pipeline). Test Plan: {F1060941} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15016
2016-01-14 01:07:04 +01:00
color: {$menu.profile.text.selected};
}
Add a visual divider element to profile menus Summary: Ref T10054. Test Plan: {F1061529} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15024
2016-01-14 23:34:21 +01:00
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
.phui-profile-menu .phabricator-side-menu .phui-list-item-selected
.phui-list-item-href:hover {
background-color: rgba(0,0,0,0.45);
}
Add a visual divider element to profile menus Summary: Ref T10054. Test Plan: {F1061529} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15024
2016-01-14 23:34:21 +01:00
.phui-profile-menu .phabricator-side-menu .phui-divider {
margin: 4px 0;
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
Add a visual divider element to profile menus Summary: Ref T10054. Test Plan: {F1061529} Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15024
2016-01-14 23:34:21 +01:00
}
Add a motivational profile menu panel Summary: Motivate your employees with inspirational quotes. A new quote every day! Test Plan: So inspirational. Reviewers: chad Reviewed By: chad Differential Revision: https://secure.phabricator.com/D15026
2016-01-15 00:29:21 +01:00
.phui-profile-menu .phabricator-side-menu .phui-motivator {
white-space: normal;
padding: 18px 15px;
font-size: 12px;
color: {$menu.profile.text};
}
.phui-profile-menu .phabricator-side-menu .phui-motivator .phui-icon-view {
position: static;
font-size: 12px;
color: {$menu.profile.text};
}
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
.phui-profile-menu .phabricator-side-menu .phui-profile-menu-spacer {
box-sizing: border-box;
height: {$menu.profile.item.height};
}
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer
.phui-list-item-name {
display: none;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-profile-menu .phui-profile-menu-expanded
.phui-profile-menu-visible-when-collapsed,
.phui-profile-menu .phui-profile-menu-collapsed
.phui-profile-menu-visible-when-expanded {
display: none;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer .phui-list-item-href {
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
padding: 20px 0 24px;
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
}
.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer
.phui-list-item-href:hover {
background: transparent;
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer .phui-list-item-href .phui-list-item-icon {
top: 8px;
}
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-profile-menu .phui-profile-menu-footer .phui-icon-circle {
border-color: {$menu.profile.text};
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-profile-menu .phui-profile-menu-footer .phui-icon-circle .phui-icon-view {
color: {$menu.profile.text};
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
.phui-profile-menu .phui-profile-menu-footer .phui-list-item-href:hover
.phui-icon-circle,
.phui-profile-menu .phui-list-item-selected.phui-profile-menu-footer
.phui-icon-circle {
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
border-color: {$menu.profile.text.selected};
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
.phui-profile-menu .phui-profile-menu-footer .phui-list-item-href:hover
.phui-icon-circle .phui-icon-view,
.phui-profile-menu .phui-list-item-selected.phui-profile-menu-footer
.phui-icon-circle .phui-icon-view {
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
color: {$menu.profile.text.selected};
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
Spiffy up new sidebar, simplify UI Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished. Test Plan: Projects, Profiles, wide and narrow. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15081
2016-01-21 23:07:09 +01:00
.phui-profile-menu .phui-profile-menu-footer
.phui-icon-circle.phui-list-item-icon {
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
font-size: 12px;
Allow profile menus to be collapsed and expanded Summary: Ref T10054. I think this gets everything except: - circles on icons; - I spent ~15 minutes poking at animations but wasn't able to get anything that looked reasonable whatsoever. Test Plan: - Collapsed menus. - Expanded menus. Reviewers: chad Reviewed By: chad Maniphest Tasks: T10054 Differential Revision: https://secure.phabricator.com/D15056
2016-01-19 19:35:32 +01:00
}
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
Extend PHUITheme to include Profile Nav Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI. Test Plan: Switch between all the colors, hover over all the states. {F1076766} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15120
2016-01-27 22:37:36 +01:00
.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-1 {
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
bottom: 0;
position: fixed;
}
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
.phui-profile-menu .phui-profile-menu-footer-1 {
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
width: {$menu.profile.width};
}
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
.phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-1 {
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
width: {$menu.profile.width.collapsed};
}
.phui-profile-menu .phabricator-side-menu
.phui-list-item-selected.phui-profile-menu-footer .phui-list-item-href {
Improve profile menu animation Summary: The text sliding around feels a bit jank to me. Instead, here's an attempt at a three-part effect: - Fade out the content of the menu (first quarter of the animation). - Shrink the menu (half the animation). - Fade the menu content back in (final quarter). This isn't perfect, but feels less weird to me since the text doesn't dance? Test Plan: clickey clickey Reviewers: chad Reviewed By: chad Differential Revision: https://secure.phabricator.com/D15098
2016-01-23 23:24:09 +01:00
background: transparent;
}
.phui-profile-menu .phui-profile-menu-collapsing
.phabricator-nav-local {
animation: profile-menu-collapse 0.2s;
}
.phui-profile-menu .phui-profile-menu-expanding
.phabricator-nav-local {
animation: profile-menu-expand 0.2s;
}
.phui-profile-menu .phui-profile-menu-collapsing
.phabricator-side-menu .phui-list-item-href {
animation: profile-menu-blink 0.2s;
}
.phui-profile-menu .phui-profile-menu-expanding
.phabricator-side-menu .phui-list-item-href {
animation: profile-menu-blink 0.2s;
}
@keyframes profile-menu-blink {
0% {
opacity: 1.0;
}
25% {
opacity: 0.0;
}
75% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes profile-menu-collapse {
0% {
width: {$menu.profile.width};
max-width: {$menu.profile.width};
}
33% {
width: {$menu.profile.width};
max-width: {$menu.profile.width};
}
66% {
width: {$menu.profile.width.collapsed};
max-width: {$menu.profile.width.collapsed};
}
100% {
width: {$menu.profile.width.collapsed};
max-width: {$menu.profile.width.collapsed};
}
}
@keyframes profile-menu-expand {
0% {
width: {$menu.profile.width.collapsed};
max-width: {$menu.profile.width.collapsed};
}
33% {
width: {$menu.profile.width.collapsed};
max-width: {$menu.profile.width.collapsed};
}
66% {
width: {$menu.profile.width};
max-width: {$menu.profile.width};
}
100% {
width: {$menu.profile.width};
max-width: {$menu.profile.width};
}
More profile nav updates Summary: Sets the edit, collapse icons back in the footer, also adds basic transitions. Test Plan: lots of clicking, safari and chrome {F1066381} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15083
2016-01-22 04:02:08 +01:00
}
Copy permalink