Summary: Ref T8099, makes the home nav elements more resilient to font size changes, fixes alignment on mobile.
Test Plan: Review home nav with smaller and larger font, check hover states, check phone layouts.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13465
Summary: Ref T8099, test a few themes and fix some inconsistencies.
Test Plan: Lots of changing headers, checking colors.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13466
Summary: Ref T8099, Ref T8614. Reasonable attempt at a larger font size PostProcessor, will need additional UI cleanup (places where we fix height) but overall very decent.
Test Plan: Use lots of the UI elements with new font sizes.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T8099, T8614
Differential Revision: https://secure.phabricator.com/D13457
Summary: Ref T8099, lots of little tweaks, mostly to icon nav.
Test Plan: Test side navigation elements on home, workboards, conpherence, and maniphest
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13456
Summary: Not sure if we want this, but it seems to work fine.
Test Plan: {F516736}
Reviewers: joshuaspence, chad
Reviewed By: joshuaspence, chad
Subscribers: joshuaspence, epriestley
Differential Revision: https://secure.phabricator.com/D13363
Summary: Ref T8099, uses original bgcolor when dark headers are used.
Test Plan: Switch between light and dark Phabricator, see new colors.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13361
Summary: Ref T8099. This adds a new class which all search engines return for layout. I thought about this a number of ways, and I think this is the cleanest path. Each Engine can return whatever UI bits they needs, and AppSearch or Dashboard picks and lays the bits out as needed. In the AppSearch case, interfaces like Notifications, Calendar, Legalpad all need more custom layouts. I think this also leaves a resonable path forward for NUX as well. Also, not sure I implemented the class correctly, but assume thats easy to fix?
Test Plan: Review and do a search in each application changed. Grep for all call sites.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13332
Summary: Ref T8099, hashtag#yolo. Adds back the original gradients plus a 'light' theme. Unclear which should be default, but we can play with it until a decision needs to be made.
Test Plan: Change colors a lot, turn on durable column.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13146
Summary: Ref T8099. Makes subheaders in object lists darker with a background. Moves to lighter icons in the header with a dark instead of blue hover state. Gives a nicer blue selected state for sidenavs.
Test Plan: Just eyeballing a lot of this, but with some level of consistency.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D13065
Summary:
Ref T8099. In most cases we return either an ObjectList or AphrontTable, and can pretty up the UI in ApplicationSearch. There are a few edge cases, like PeopleUserLog, that can be cleanup up individually in the future, but look fine for now.
Also added 'setNotice' for AphrontTable for a few cases where we want to convey addtional information.
TODO: Seems we always pass a Pager Object, which tries to get displayed, I'll redesign that interaction in the future, probably by passing the Pager to the ObjectBox
Test Plan: Went throught most/all ApplicationSearch panels I could find, even edge cases look better.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12989
Summary: Ref T8099, minor adds back the border, makes blue highlight {$blue}
Test Plan: Hover over new crumbs, match header hovers. Check Phriction for border
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12959
Summary: Ref T8099, make the main menu and search menu lighter to match new UI.
Test Plan: set browser to smaller breakpoints, test mobile menus and search.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12958
Summary: Use a consistent blue across all anchors. Slightly lighter than current blue. Ref T8099
Test Plan: Visit Phriction, Remarkup, various apps.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12918
Summary: Shares more CSS between header styles, unifies the look. Ref T8099
Test Plan: Open and Close Durable Column a lot. Inspect pixels.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12877
Summary:
Ref T7707. Handles currently have a "status" field and a "disabled" field.
The "status" field has these possible values: "open", "closed", "1", "2". durp durp durp
Instead, do:
- status = <open, closed>
- availability = <full, partial, none, disabled>
I think these make more sense? And are a bit more general? And use the same kind of constants for all values!
Test Plan: Looked at all affected handles in all states (probably).
Reviewers: chad, btrahan
Reviewed By: btrahan
Subscribers: epriestley
Maniphest Tasks: T7707
Differential Revision: https://secure.phabricator.com/D12832
Summary:
Ref T8151. This is option (5). It needs a few adjustments but feels pretty good. Major issues are:
- Without a mouse, the scrollbars overlap by default, so we //must// move the column off the right margin.
- Scrolling sometimes "bleeds" between the chat vs the main frame in a way that's not as discrete as the old framed content, but feels generally reasonable to me.
If we pursue this, I'd plan to make these additional changes:
- Move the panel away from the right margin only if the page scrollbars are zero-width (i.e., in OSX trackpad mode).
- Fix the notch in the upper right corner when the chat is moved away from the right margin.
- Probably remove the body "overflow-y: scroll" on Conpherence and Workboards.
- Update the resizing code to deal with 300px vs 315px widths.
- We can probably clean up some JX.Scrollbar "main panel" code.
Here's the "bad" case, where I've visually separated the column to provide room for a scrollbar. This isn't ideal, but looks and feels OK to me:
{F398375}
Test Plan:
- Tried Firefox, Chrome, Safari, with and without a mouse.
- Tried normal Conpherence.
Reviewers: btrahan, chad
Reviewed By: btrahan
Subscribers: avivey, epriestley
Maniphest Tasks: T8151
Differential Revision: https://secure.phabricator.com/D12789
Summary: Very quick pass at cleaner sidenavs, filterviews.
Test Plan:
look at lots of pages, still roughing out design.
{F395931}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12762
Summary: Ref T8099. These are still in progress, but helps visualize the major UI changes before getting deep into the details.
Test Plan:
Visit basic dashboard, task, diff, and edit pages.
{F395806}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12757
Summary: Ref T8099. Update logo and font to use Blindigo (tm) color system. Also tweak hover backgrounds a hair.
Test Plan: Photoshop.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12753
Summary: First cut of redesign branch, simpler, lighter header. Will check in new graphics in follow up diff.
Test Plan: Mostly all just new colors, but this also removes setting of `header-color` in Config.
Reviewers: epriestley, btrahan
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12745
Summary: Fixes T7914. Firefox is a special browser with special needs.
Test Plan: On Mac, test Safari, Chrome, Firefox. On Windows, IE and Firefox.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7914
Differential Revision: https://secure.phabricator.com/D12611
Summary: Use an angle-down icon instead of hard edged caret for search bar. I tested replacing this globally, but it didn't hold up as well.
Test Plan:
hover states, desktop, tablet, mobile.
{F379596}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12521
Summary: Moved the dropdown outside of the input to give text more space. Also changed the 'current app' icon to the target icon, it feels a little better in use. I will follow up with a fix to T5218.
Test Plan:
Tested desktop, mobile, tablet searching.
{F379466}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12516
Summary:
See M1433. Fixes T7266. Fixes T4475. Ref T7314.
Future work/notes/etc:
- Write the User Guide (see TODO).
- This might needs some design tweaks -- I think it's functionally almost-equivalent to the mock, but the UI isn't quite the same.
- (Mobile design is a touch off-looking I think?)
- When you use a custom query, the duplicate "magnifying glass" icons are a little weird. Maybe change one or the other.
- Maybe worth adding an "Open Documents in Current Application" option? Planning to wait for feedback on that.
- Need a Quicksand integration to change the current application at some point.
- Searching in "Current Application" from, e.g., the 404 page just searches all documents. Current plan is to just document this behavior, since the icon is a pretty good callout and it seems plausible that this is intuitive enough that users won't have a hard time with it.
Test Plan:
New dropdown:
{F379150}
Device-ish:
{F379151}
Normal search (current application, from maniphest, selects tasks):
{F379153}
Application search from non-application:
{F379154}
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: johnny-bit, epriestley
Maniphest Tasks: T7266, T7314, T4475
Differential Revision: https://secure.phabricator.com/D12509
Summary: Fixes T7830. Moves the callout to sit under the main header, which resolved Differential issues and Durable Column issues, but still some extra CSS shenanigans.
Test Plan:
Test lots of pages, Home, Dashboards, Conpherence, Durable Column, Inline Diff Replies, Mobile, Workboards, etc.
{F375821}
{F375822}
{F375823}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7830
Differential Revision: https://secure.phabricator.com/D12466
Summary: Simplifies some common CSS rules.
Test Plan: Test some dialogs and menus.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12406
Summary: This just matches the UI of icons on mobile with the icons size, color on desktop.
Test Plan:
test tablet and phone breakpoints.
{F369688}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12407
Summary: Extends the focus highlight around the button on main search bar as well as input.
Test Plan: reviewed on desktop and mobile breakpoints. did a search. woo.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12364
Summary: This is the new search UI as seen in Pholio. Unrounds it (mostly, and makes the eyeglass more button like.
Test Plan:
Review in all header colors, check photoshop for pixel layout consistency. Review in FF, Chrome, Safari, IE. Make sure I didn't mess up mobile.
{F359366}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12277
Summary: Previously, this text was transparent, moved it to a new span and set visibility on it.
Test Plan: review search in FF, Chrome. Text no longer displays.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7710
Differential Revision: https://secure.phabricator.com/D12219
Summary: Swaps out search icon for font-awesome. Tweaks colors a bit for different color headers.
Test Plan: Test a number of colors in the search box. Click on button and still go to advanced search.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12200
Summary: Fixes T7609. When we moved the sidenav background to z-index -1, the footer then reappeared. Make the hiding more specific in CSS.
Test Plan: test mobile layout of homepage, check footer still exists on all other pages.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7609
Differential Revision: https://secure.phabricator.com/D12138
Summary: Fixes T7529. I think stylesheet order got juggled at some point and made this more specific, but we don't actually need it.
Test Plan:
- Column now looks reasonable.
- Everything else does too.
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: epriestley
Maniphest Tasks: T7529
Differential Revision: https://secure.phabricator.com/D12084
Summary: Numerous visual updates to the Durable Column, mostly to emulate current Conpherence look and feel.
Test Plan: Lots of little pixel chasing. Also Chrome, Firefox.
Reviewers: epriestley, btrahan
Reviewed By: btrahan
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12041
Summary: This still needs some fine tuning, but wanted to get opinions. Using it on a laptop feels pretty good. This also moves `durable-column.css` into its own file since it'll likely continue to grow. Minor CSS tweaks to the near perfect rendition of durable column from pixel based mockups.
Test Plan:
Press \ on my laptop. Having issues with Chrome however, but FF and Safari work as expected.
{F322506}
Reviewers: epriestley, btrahan
Reviewed By: btrahan
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11901
Summary: Fixes T7382, specifically we were drawing double navs, removed those from each page and added the correct CSS rule.
Test Plan: Test a number of people and profile pages with a footer set.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7382
Differential Revision: https://secure.phabricator.com/D11895
Summary: The sky blue colors in the alerts was problematic in other color headers (not black). Rather than hand tweak each color, just going with white seems best. There is also a small animation now, which you may or may not like. It is playful and enjoyable to me at least.
Test Plan: Tested various header colors with and without alert notifications.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11838
Summary: This adds Phacility "Indigo" as well as uses rgba for colors and hovers improving icon colors.
Test Plan:
Tested each color and hover states. Set test instance to scootaloo.
{F310660}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11836
Summary: This increases the transparent space around the Phabricator logo. The logo itself is the same size. This allows for adding of other logos more easily without needing to alter the space provided. (Like Phacility)
Test Plan:
Reload page, screenshot logo, pull into Photoshop and verify spacing top and bottom.
{F309985}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11828
Summary: Fixes T7115, at least for me. Unclear if this is the "correct" fix.
Test Plan: Try to print, get page.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7115
Differential Revision: https://secure.phabricator.com/D11636
Summary:
Ref T7014. This is very rough and not hooked up to anything, but gets a couple of the layout pieces in place so we can (a) see that it looks like it'll kinda work; (b) look for problematic interactions and (c) you can fix my mangling of your design.
NOTE: Press "\" to toggle the column.
Test Plan:
Feels pretty good to me?
{F275722}
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: epriestley
Maniphest Tasks: T7014
Differential Revision: https://secure.phabricator.com/D11497
Summary:
When JX.Scrollbar activates, the page needs to be clicked before scrolling keys work.
Instead, set focus into the content after we set the page frame (if something else isn't already focused).
Also fixes T7042.
Test Plan: In Safari, Chrome and Firefox, scrolling with key commands is now immediately active.
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: epriestley
Maniphest Tasks: T7042
Differential Revision: https://secure.phabricator.com/D11508
Summary: This seems to improve behavior on iOS, good call.
Test Plan: Hard to be totally sure since my local install isn't set up with a real phone, but behavior seems better on iOS simulator.
Reviewers: chad
Reviewed By: chad
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D11481
Summary:
See discussion on rPc40bc0c8bf75. Fixes a couple of glitchy things:
- Things were generally not nice on iOS.
- On OSX, with no mouse, the OS scrollbar and our fake scrollbar would both draw.
- Bar z-index was not set quite correctly.
Specifically, check if we need these bars. If we don't, just exit immediately and use the OS bars.
Test Plan:
- Tested Safari, Firefox, Chrome with and without a mouse.
- Tested iOS Simualtor.
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D11480
Summary:
Ref T7014. With a mouse plugged in, multi-panel UIs are pretty hideous on OSX. This is somewhat offputting for me in Conpherence, and really jumps out at me with the new column mocks in T7014.
Sites like Twitch and Facebook approach this by emulating the touchpad scrollbar to achieve a more aesthetic UI. Use a similar approach.
This:
- Replaces the main scrollbar with a prettier fake one.
- This prepares the standard page frame for a persistent chat column.
Test Plan:
- Seems to work properly on OSX, Chrome and Firefox. Haven't tested on IE; my Windows setup is pretty iffy at the moment.
- Tried Conpherence.
- Tried Workboards.
Reviewers: btrahan, chad
Reviewed By: btrahan
Subscribers: epriestley
Maniphest Tasks: T7014
Differential Revision: https://secure.phabricator.com/D11472
