Summary: Currently these break at the icon and any whitespace, instead force them to notwrap and stack the display if there are too many large tags. I think we're much more resilient CSS wise now I can't find any hairy edge cases.
Test Plan:
Try to break tags in 50/50 dashboard layouts like Wikimedia
{F1082103}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Maniphest Tasks: T10245
Differential Revision: https://secure.phabricator.com/D15143
Summary: This should make code easier to read. Right now large blocks get a really bright treatment, and this should tone it down. Also upped the spacing a bit.
Test Plan:
Review Remarkup Examples from Diviner, also some test code blocks and counter examples.
{F1081606}
{F1081607}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15141
Summary: There is a hair of #fff hanging out on the right side, round it a bit.
Test Plan: ZOOOOM IN on a Workboard
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15138
Summary: Moves CSS into 3 files, Boards, Panels, Cards. Cleans up Workcards to present more info, hide edit until card hover.
Test Plan:
Lots of photoshop. Verify links to edit still work.
{F1081276}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15137
Summary:
Fixes T10229. Broadly:
- When the user hovers over a line number or inline comment, we update the yellow reticle to highlight the relevant lines. Specifically, this is in response to a `mouseover` event.
- On touch devices, touches fire `mouseover` and if you mutate the DOM inside the event, the device aborts the touch.
To remedy this:
- Distingiush between mouse-originated and touch-originated cursor events.
- We do this, roughly, by setting a flag when we see "touchstart", and clearing it when we see the second copy of any unique cursor event.
- This method is complex, but should be robust to any implementation differences between devices (for example, it will work no matter which order the events are fired in).
- This method should also produce the correct results on weird devices that have both mouse-devices and touch-devices available for cursor input.
- When we see a touch-originated `mouseover` or `mouseout`, don't mutate the DOM.
- Put an extra DOM mutation into the `click` event to improve highlighting behavior on touch devices.
Test Plan:
- In iOS Simulator (4s, iOS 9.2), clicked various inline actions ("Reply", "Hide", "Done", "Cancel", line numbers, etc). Got responses after a single touch.
- Verified hover + click behavior on a desktop.
- Logged and examined a bunch of events as a general sanity check.
Reviewers: chad
Reviewed By: chad
Subscribers: aljungberg
Maniphest Tasks: T10229
Differential Revision: https://secure.phabricator.com/D15136
Summary: Spaces out the page a little better if there is no information on it.
Test Plan: review a profile and a project home
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15134
Summary: All our builtin images use #c4cde0 for the backdrop. This makes generation match the builtins.
Test Plan:
Build a new bug icon in Maniphest
{F1077934}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15126
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
Summary:
- Better spacing for images
- Remove border
- White BG on Members page
Test Plan: Review Projects / Project Home / Project Members
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15118
Summary: Cleans up Workboards to match the mocks. No new functionality, just more consistent colors/spacing/common components.
Test Plan:
Visit a few workboards, drag and drop items. Mobile, Tablet, Desktop
{F1070733}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15115
Summary: Updates People profiles to look more like Project profiles. This removes Conpherence and Flag links. Don't think you like Conpherence links much and for Flags maybe we can put them in the quick create menu?
Test Plan:
View profiles with and without Badges.
{F1069365}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15111
Summary: Minor point of polish, but feels really nice. Hover over photo and edit a link to change the picture.
Test Plan:
hover hover, clicky clicky
{F1069179}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15109
Summary: Moves some profile css into PHUI, cleans up mobile view and desktop spacing.
Test Plan: Test Project at desktop and mobile breakpoints.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15106
Summary: This felt a little dark in actual use, lighten it up 40%.
Test Plan: Review project home pages.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15101
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
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
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
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
Summary:
Fixes T10190. This is still a touch weird (newly typed tokens lose icons when copied) but basically works correctly. Saving/editing rules is fine, just some minor display glitching.
Fixing the icon thing is a little more involved.
Test Plan: Swapped Herald tokenizer fields around saw values (approximately) preserved.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10190
Differential Revision: https://secure.phabricator.com/D15077
Summary:
Ref T10054. This fix is a little rough but the "right" fix involves a ton of rewriting to `AphrontSideNavFilterView` and I don't want to open that can of worms up yet.
Specifically, the problem is:
- we build the menu in order to populate the mobile/application menu;
- as a side effect of building the menu (not rendering the menu), we initialize the menu collapse/expand behavior;
- but we never actually render the menu, so the `JX.$()` call fails.
The right fix would be to initialize the behavior only when we render the menu, but then `AphorntSideNavFilterView` would need to know about profile menu behaviors. It probably should some day, but I think today is not that day.
Test Plan: Set icons on a link on a profile menu.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10054
Differential Revision: https://secure.phabricator.com/D15073
Summary: We plan to use these more in future mocks. Adds base colors and re-uses in Phame.
Test Plan: Phame, mobile and desktop.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15069
Summary:
Ref T10054. Ref T6113. I'm going to remove subscribers from projects to fix the confusion between "watch" and "subscribe".
Users who have unusual use cases where they legitimately want to know when a project's description is updated or members change can use Herald to follow it.
This is also useful in general and improves consistency, although I don't have too many use cases for it.
Test Plan: Wrote a Herald rule, edited a project, saw the rule fire and send me email about the change.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T6113, T10054
Differential Revision: https://secure.phabricator.com/D15061
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
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
Summary: These are old project image choices, remove and only go with FontAwesome related images.
Test Plan: Project -> Edit Picture -> Save
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15051
Summary: Removes header gradient images for flat, CSS controlled colors. I didn't convert the "pony" colors over, going with few options for easier theme-ability.
Test Plan:
Test each color choice.
{F1063828}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15052
Summary: Icon in a circle. Base class, not much in the way of color choices.
Test Plan:
UIExamples, Chrome.
{F1062027}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15034
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
Summary:
Ref T10163. If you right-click the suggestion menu, just eat it. I don't think we can really choose a different behavior reasonably, or that users have any reason to do this.
I'm leaving "clicking the header dismisses it", I think that behavior is fine and reasonable.
Test Plan: Control-clicked a suggestion menu, didn't trigger a suggestion.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15042
Summary: Ref T10163. When a user autocompletes, add a space for them, unless they already added a comma, colon, or space themsevles.
Test Plan: Autocompleted `@dog`, got `@dog `. Autocompleted `@epriestley,` got `@epriestley,`.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15041
Summary:
Ref T10163. Currently, we don't activate on indented lines, but were too aggressive about this, and would not activate on lines like ` - Hey, @user...`, where we should.
Instead, don't activate on indented lines if there's only an indent (i.e., `#` probably means enumerated list).
Also, if results don't have autocompletes (rare but possible with projects missing slugs), improve behavior.
Test Plan:
- Typed ` #a`, got no autocomplete.
- Missing slug thing is a pain to test locallly, `#1 z z z z` reproduces in production. I'll just verify it there.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15040
Summary:
Ref T10163. When we think the user has finished typing a word (because they typed a space, period, or other similar characters) and nothing else they might type could possibly change the outcome (usually because the words they have typed already match nothing), just deactivate the autocomplete.
As a special case, if the word they have typed already select exactly one result, //and// they have already typed exactly that result, assume they just typed it from memory and deactivate.
Test Plan:
- Typed `@dog qwer zxcv` and saw autocomplete deactivate on the space before `z` (on my local install, `@dog` is ambiguous but `@dog qwer` matches nothing).
- Typed `@epriestley ` and saw autocomplete deactivate on space.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15039
Summary: Ref T10163. In cases like Conpherence, the autocompleter can currently render off the bottom of the screen. Put it above if it would be offscreen.
Test Plan: {F1062286}
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15038
Summary: Ref T10163. Activate on `@d`, not just `@`. Note that if you type `@d` and then press delete once so you're left with `@`, we stay active (and show the "type a username" hint).
Test Plan:
- Typed `@`, no completer.
- Typed `d`, got completer.
- Typed delete, still had completer, now showing hint prompt.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15037
Summary:
Ref T10163. Some characters are almost certainly punctuation or markup rather than autocomplete requests. Immediately cancel any active autocomplete when the user types one of these.
Note that some of these are also suffix characters. If you type `@dog,`, you have until the next character to decide you actually mean to autocomplete. Once you type something else we deactivate.
If you type `#dog#` or `##`, we deactivate immediately.
Test Plan: Typed `@dog#`, etc.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15036
Summary: Ref T10163. This allows activation in blockquotes or after `NOTE:`, for consistency.
Test Plan: Typed `>@dog`, etc., got autocomplete.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15035
Summary:
Ref T10163.
- If a user types an autocomplete character ("@" or "#") and then a space, deactivate immediately (probably an ordered list).
- If a user types an autocomplete character indented on a line with no other prior text, don't activate (probably an ordered list or code block).
Test Plan:
Typed:
- `# `, saw immediate deactivation.
- ` #`, saw no activation in the first place.
- `#x`, saw activation.
- `asdf #x`, saw activation.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15033
Summary: Ref T10163. I would still sometimes not get a replacement after clicking with the delayed blur. This seems to fix the issue more consistently: instead of listening for a click event (which fires after the blur), listen for a mousedown event (which fires before the blur).
Test Plan: Observed consistent selection via mouse locally.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15032
Summary:
Ref T10163.
- If you click a result, we get a blur before your click hits, and deactivate before the click can work. Instead, wait before responding to blur.
- Use the standard sort handler which puts unixnames over human names. Also use the standard filter which deals with disabled users not matching unless they're the only match.
Test Plan:
- Clicked a result, got a replacement.
- Named myself "dog dog", typed "@dog", user "@dog" was now first match despite me being "@admin".
- Used normal typeaheads to make sure I didn't break sort handler.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10163
Differential Revision: https://secure.phabricator.com/D15031
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
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
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
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
Summary: Ref T3725. This probably has 900,000 bugs. This will need updates for subprojects/milestones.
Test Plan:
- Tested very gently in Safari, Firefox and Chrome.
- Reasonable inputs appear to work.
- Clicking, escape, tab, return, arrow keys work OK?
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T3725
Differential Revision: https://secure.phabricator.com/D15029
Summary: Ref T10054. Allows users to drag menu items to reorder them.
Test Plan: Reordered a project menu.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10054
Differential Revision: https://secure.phabricator.com/D15011
