Summary: 'cuz new fluid layouts require the westerlyness. Looks like D4126 started the N and W implementation but didn't finish it...? note I had to do the shifting of the 5 pixels in javascript; using the CSS didn't work for me in chrome.
Test Plan: uiexample, and hoping it goes well when deployed in prod for differential case
Reviewers: epriestley
Reviewed By: epriestley
CC: chad, aran, Korvin
Maniphest Tasks: T2211
Differential Revision: https://secure.phabricator.com/D4257
Summary: This is probably not the most useful app to have work on mobile, but get the log view to do something fairly sensible.
Test Plan: Looked at all Drydock views in mobile.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T2015
Differential Revision: https://secure.phabricator.com/D4224
Summary: Most cells in Diffusion were aligning text to the top, and the sigil height is fixed. This lines all up on center.
Test Plan: Tested diffusion with new cell alignment, clicked around to other tables. Looks good in Chrome.
Reviewers: epriestley, asherkin, btrahan
Reviewed By: btrahan
CC: aran, Korvin
Maniphest Tasks: T2189
Differential Revision: https://secure.phabricator.com/D4210
Summary:
- Fixes a bug where dragging a flexible left nav and then pressing "f" to hide it didn't properly reset the content panel's left margin.
- Fixes a bug where D4185 removed "white-space: nowrap;" accidentally (from @asherkin)
Test Plan:
- Dragged bar, then pressed "f".
- Can't repro the nowrap thing for some reason.
iiam
Reviewers: asherkin, vrana
Reviewed By: vrana
CC: aran
Differential Revision: https://secure.phabricator.com/D4194
Summary:
Fixes glitches in the side nav. Resolves T1828. Resolves T2156.
- Elastic scrolling (T2156): in Safari on OSX, using a scroll touch on the trackpad to scroll up past the top of the document caused newer-style side menus to scroll down, leaving a visible whitespace bar.
- Whitespace glitch: Particularly in Safari, scrolling down the document quickly from the top caused the top menu to scroll away before the side menu rose to meet it. Use a fixed background color bar that extends under the menu so this doesn't happen.
- Use of "!important": use CSS better so we don't need to "!important" things.
- Dark Console (T1828): Instead of hard-coding the top position, determine it dynamically by looking at where the content is. This also fixes the menu overlapping with the red "there are errors on this page" development bar.
- General "fixed" glitchiness: don't use fixed-position for menu content other than flexible (draggable) menus.
Test Plan:
- Viewed and scrolled menus in Paste. Opened and closed DarkConsole. Switched devices.
- Viewed and scrolled flexible menus in Differential and Diffusion. Opened and closed DarkConsole. Switched devices.
Reviewers: vrana, chad, btrahan
Reviewed By: vrana
CC: aran
Maniphest Tasks: T1828, T2156
Differential Revision: https://secure.phabricator.com/D4185
Summary: noticed when creating a task that the "you made a task - make another" ui element had a bottom margin element which seemed out of place in the re-design. killed the margin
Test Plan: looks good to me!
Reviewers: epriestley, chad
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D4178
Summary:
upgrades are CrumbsView, HeaderView, PropertyListView, and ActionListView. I had to modify CrumbsView stuff a bit to handle the "advanced" diffusion crumbs.
Quirks fixed include making file tree view show up in diffusion, the page not have extra space when the file tree is hidden, links no longer breaking once you visit files (since without the change the files always got "/" appended and thus 404'd), and a differential quirk where it read "next step:" and that colon is a no no,
Test Plan: played around in diffusion and differential
Reviewers: epriestley
Reviewed By: epriestley
CC: aran, Korvin, chad
Maniphest Tasks: T2048, T2178
Differential Revision: https://secure.phabricator.com/D4169
Summary: actions are still a bit messy - unsatisfactory icons (T2013 will help!)
Test Plan: viewed diffs - they look good
Reviewers: epriestley, vrana
Reviewed By: epriestley
CC: chad, aran, Korvin
Maniphest Tasks: T2007
Differential Revision: https://secure.phabricator.com/D3904
Summary:
Allows you to edit or delete comments in appplications which support ApplicationTransactions.
UI/UX stuff:
- The dialogs are rough but I want to do a dialog design pass more generally, @chad has some mocks.
- When you add new mentions via edit, they don't currently count as mentions. I'm not sure what I want to do about this.
- When you edit or delete a comment, we do not publish any notifications about it. I think this is reasonable.
- I didn't separate "delete" out versus "edit"; I assume it will be reasonably intuitive that deleting all the text deletes effectively deletes the comment. I also want to discourage deletion somewhat (we still show the transaction, just show that the comment has been deleted).
Test Plan:
Transaction view, note "Edit" and "Edited" links:
{F26914}
Edit view, has some design issues but I want to do a pass on dialogs in general:
{F26915}
History view:
{F26913}
Reviewers: vrana, btrahan, chad
Reviewed By: vrana
CC: aran
Maniphest Tasks: T1082
Differential Revision: https://secure.phabricator.com/D4149
Summary: This updates spacing and colors on the calendar page.
Test Plan: View calendar, make an event, view it again.
Reviewers: epriestley, btrahan
Reviewed By: btrahan
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D4130
Summary: Adds little arrows in CSS to the tooltipcs.
Test Plan: Tested UIExamples and Remarkup Box
Reviewers: epriestley, btrahan
Reviewed By: btrahan
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D4126
Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }".
Test Plan: Browsed the site a bit without incident.
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4103
Summary:
This doesn't lay in everything, but:
- Break the buttons gradient apart into components and rebuild it (along with other gradients) into a single gradient sprite (possible after {D4099}).
- Use the sliced gradient for the crumbs background.
- Use the sliced image for the crumb divider.
- Adds the black/white app sheets, but I'm not generating them quite yet.
Test Plan: {F26537} {F26540}
Reviewers: chad, btrahan
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4100
Summary:
Add a basic breadcrumbs element, and implement it in Paste.
This needs some polish but is most of the way there.
Test Plan:
{F26443}
{F26444}
{F26445}
(This element is not visible on devices.)
Reviewers: chad
Reviewed By: chad
CC: aran, btrahan
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4087
Summary:
- Adds `PhabricatorMenuItemView` which is a non-hacky object representing a single menu item.
- Adds `PhabricatorMenuView`, a collection of items.
- Deletes some busted/old interfaces full of garbage nonsense.
- Merges menu item styles from `aphront-side-nav-view-css` and `phabricator-nav-view-css`. These are old-style and new-style rules which got partially updated recently.
- The new-style menus have a darker background (#ececec) than the old-style menus (#f7f7f7) so some of the highlight/hover colors weren't visible. I shuffled them around but something or other might need further adjustment.
Test Plan: looked at every menu I could
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4036
Summary:
Toss this completely as per discussion elsewhere. Basically it doesn't feel as useful as we imagined it would, and breadcrumbs from T1960 will replace the primary useful part (navigating up).
There's some more cleanup to do but I'll hit that in the next few diffs.
Closes T1828 as wontfix.
Test Plan: Viewed app + local, app-without-local interfaces. Saw no app menus.
Reviewers: chad
Reviewed By: chad
CC: aran, vrana
Maniphest Tasks: T1828, T1960
Differential Revision: https://secure.phabricator.com/D4033
Summary: Mainly this changes the fonts and some minor navigation colors. I wanted to get rid of some of the 'girly blues' from Facebook and mute everything a little bit to match the change to Helvetica and new buttons.
Test Plan: Tested Manifest, Profiles, and other random pages I could find. Single and Multiple Navigations. http://phab1.pushlabs.net/
Reviewers: epriestley, btrahan
Reviewed By: btrahan
CC: vrana, aran, Korvin
Differential Revision: https://secure.phabricator.com/D3955
Summary:
In Differential, viewer can hit 'f' key to hide/show file tree on the left
side. Useful on narrow monitors.
Test Plan: Open any diff in Differential tool, hit 'f', watch file tree disappears
Reviewers: vrana, mattchoi, epriestley
Reviewed By: vrana
CC: aran, epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D3844
Summary: you can now add, edit, and delete status events. also added a "description" to status events and surface it in the big calendar view on mouse hover. some refactoring changes as well to make validation logic centralized within the storage class.
Test Plan: added, edited, deleted. yay.
Reviewers: epriestley, vrana
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T407
Differential Revision: https://secure.phabricator.com/D3810
Summary: We can let the browser do the scaling with some simpler CSS rules.
Test Plan: Opened very large images in Safari, Firefox and Chrome and resized the browser. Observed smooth scaling and no issues with the image overlapping UI elements, etc.
Reviewers: btrahan, vrana
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T1896
Differential Revision: https://secure.phabricator.com/D3802
Summary: Our "html { overflow-y: scroll; }" makes Safari flip out when we put "hidden" on body. Instead, put the scroll on `body` and then replace it with `hidden` when the lightbox is visible.
Test Plan: In Safari, the body scrollbar vanishes when the lightbox is active and scrolling no longer causes spasms.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D3800
Summary:
See discussion in T404. Basically, the problem with date-only controls is that they may behave unpredictably in the presence of timezones. When you say "This needs to be done by Oct 23", you probably mean "Oct 23 5PM PST" or something like that, but someone in China may see the "Oct 24" and hit the deadline in good faith but be 10 hours too late. T404 has more discussion and examples. There are ways to fake this, but they get more complicated if the guy in China needs to move the date forward 24 hours.
I think the best solution to this is to not have date-only controls, and always display the time. This makes it absolutley unambiguous what something means, because the guy in the US will set "Oct 23 5PM" and the guy in China will see that accurately in local time.
The downside is that it's slightly more visual clutter and work for the user to specify things precisely, but I added some hints (start/end of day, start/end of business) that will hopefully let us pick the right default in most cases.
Test Plan:
Set some dates.
{F21956}
This has a couple of edge case issues on resize and some not-so-edge-case issues on mobile, but should be good to build T407 on without API changes.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T404, T407
Differential Revision: https://secure.phabricator.com/D3793
Summary: See D3795 / D3797. Also made the mask darker.
Test Plan: Mask now sizes properly on window resize in all browsers / mask uses.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D3798
Summary:
images attached to maniphest tasks and mentioned in remarkup anywhere now invoke a lightbox control that lets the user page through all the images.
lightbox includes a download button, next / prev buttons, and if we're not at the tippy toppy of hte page an "X" or close button.
we also respond to left, right, and esc for navigating.
next time we should get non-images working in here...!
Test Plan:
played with maniphest - looks good
made comments with images. looks good.
made sure multiple image comments worked.
Reviewers: epriestley
Reviewed By: epriestley
CC: aran, Korvin, chad
Maniphest Tasks: T1896
Differential Revision: https://secure.phabricator.com/D3705
Summary:
It currently looks like this:
{F21417, size=full}
Test Plan: Hovered file name in filetree.
Reviewers: epriestley
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D3729
Summary:
- Better icons and action order.
- "Move Post" action.
- (Bugfix) Allow multiple blogs to be set to not having custom domains.
- Make "Write Post" skip the "select a blog" step when coming from a blog view.
- Sort blog list on "Write Post".
- Show messages when a post is a draft or not on a blog.
Test Plan: Created posts, blogs, moved posts, preview/live'd posts, etc.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T1373
Differential Revision: https://secure.phabricator.com/D3708
Summary: Currently, we do a poor job of communicating drag-and-drop upload errors. Show progress and success/failure in notifications.
Test Plan:
{F20671}
{F20672}
Uploaded files to maniphest attachments, remarkup text areas, Files tool.
Reviewers: btrahan, vrana
Reviewed By: vrana
CC: aran
Differential Revision: https://secure.phabricator.com/D3655
Summary:
Currently, in Maniphest, if you drag-and-drop a file it always attaches. Instead, I want you to have two options:
- Drag and drop to the attachment area to attach; or
- drag and drop to the Remarkup panel to upload + inline.
For the first step, make the input have a clear drop target instead of it being the entire panel.
Test Plan: Attached files in Create Task, task view, meta mta send test.
Reviewers: btrahan, vrana
Reviewed By: vrana
CC: aran
Differential Revision: https://secure.phabricator.com/D3651
Summary: @chad, can you do the icon sheets based on 1.6? We're using a few icons not present in 1.5. I put the 1.6 "pro" source on Dropbox.
Test Plan:
Nav hover and selected states:
{F20598}
Launch hover state:
{F20596}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1856
Differential Revision: https://secure.phabricator.com/D3649
Summary: When I have displayed DarkConsole and write a comment it keeps scrolling because new AJAX requests pop up.
Test Plan: Displayed it, issued couple of AJAX requests.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T1316
Differential Revision: https://secure.phabricator.com/D3605
Summary:
It always bothered me that adding/removing blame view takes two clicks.
Showing it like this saves a click for almost all transformations, and I think it feels nicer too.
I'm open to adding a user-setting for this (This form or the drop-down), but figured I'd ask first.
Test Plan:
Use buttons to switch modes - make sure text on button matches action.
Repeate with lines highlighted.
Reviewers: epriestley, vrana
Reviewed By: epriestley
CC: jungejason, Two9A, aran, Korvin
Differential Revision: https://secure.phabricator.com/D3499
Summary: Unblocker for D3547. Adds markup assist UI (buttons which generate remarkup for you -- not WYSIWYG) to Remarkup text areas.
Test Plan: See screenshot. Clicked the buttons a bunch with selected/unselcted text. Results seem broadly reasonable.
Reviewers: btrahan, vrana, teisenbe
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T337
Differential Revision: https://secure.phabricator.com/D3594
Summary:
This is the last Paste UI element that doesn't work properly on tablets/phones. Make it flexible.
Also add empty states to Paste.
Test Plan: Viewed various errors, and `/uiexample/errors/`.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D3429
Summary: Replaces the full names after D3413.
Test Plan: See screenshot.
Reviewers: vrana
Reviewed By: vrana
CC: aran
Differential Revision: https://secure.phabricator.com/D3414
Summary:
There is basically no reason for anyone to ever use the uncollapsed mode for more than the first 2 minutes of using the tool.
Delete all code related to collapse/expand.
(I'm going to add tooltips next.)
Also move the drag bar a few pixels to the right, so it does not overlap with the scrollbar on the "local" nav if there is one.
Test Plan: Viewed in desktop/tablet/phone modes.
Reviewers: vrana
Reviewed By: vrana
CC: aran
Differential Revision: https://secure.phabricator.com/D3413
Summary:
See some discussion in D1673.
- There's a concrete (if minor) problem with this in Firefox with wrapping search.
- People complain about how we're stealing all their pixels.
- There isn't much of a functional purpose to it since all the operations are fairly rare.
- This addresses the aesthetic purpose of the fixed-position nav (not making the side nav ugly) by making the side nav scroll up 44px and then stop.
Test Plan: Scrolled in desktop, tablet modes.
Reviewers: vrana
Reviewed By: vrana
CC: aran
Differential Revision: https://secure.phabricator.com/D3412
- Use a gradient on the main menu.
- Slightly darken the application menu.
- Use kerned logo text.
- Use cleaner logo image.
- Adjust search input colors to fit the darker scheme better.
Summary:
- Fix width, corresponding to wider sprites.
- Sprite the "Audit" icon.
- Mark the meta-application as device-ready.
- Fix some collapse/expand bugs with the draggable local navs.
- Add texture to local nav.
- Darken the application nav to make it more cohesive with the main nav. I think this is an improvement?
Test Plan: See screenshots.
Reviewers: chad, btrahan
Reviewed By: btrahan
CC: aran, netfoxcity
Maniphest Tasks: T1569
Differential Revision: https://secure.phabricator.com/D3338
Summary:
This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later).
Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices.
The only differences for existing forms are:
- No colon after labels (looks cleaner anyway).
- Non-error required text is no longer a red star but a the grey word "Required" (this is clearer).
Test Plan:
Viewed paste form on a phone.
Viewed ~20 other forms on the site to verify that I didn't break anything.
Reviewers: btrahan, chad, vrana
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T1569
Differential Revision: https://secure.phabricator.com/D3298
Summary:
Add a new left-side application menu. This menu shows which application you're in and provides a quick way to get to other applications.
On desktops, menus are always shown but the app menu can be collapsed to be very small.
On tablets, navigation buttons allow you to choose between the menus and the content.
On phones, navigation buttons allow you to choose between the app menu, the local menu, and the content.
This needs some code and UI cleanup, but has no effect yet so I think it's okay to land as-is, I'll clean it up a bit as I start integrating it. I want to play around with it a bit and see if it's good/useful or horrible anyway.
Test Plan: Will include screenshots.
Reviewers: vrana, btrahan, chad
Reviewed By: btrahan
CC: aran, alanh
Maniphest Tasks: T1569
Differential Revision: https://secure.phabricator.com/D3223
Summary:
Unlike (all? most?) other tables, the flag table has two wide
columns: the object name and the flag note. This fiddles with the
classes so neither gets squished too much by the other.
This is kind of a hack and I don't even know if it's cross-browser
compatible because I only have WebKit here. But maybe it's fine.
Test Plan:
View Differential home page while changing revision names and
flag notes to weird things.
Reviewers: epriestley
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T1586
Differential Revision: https://secure.phabricator.com/D3128
Summary:
This allows the nav to be laid out with divs instead of tables and for the navigation column to be made flexible. Design is non-final, this is just a step toward reactive menus that work on tablets/phones and an application menu.
I'm going to play around with flexible nav and document navigation and see if that goes anywhere.
Test Plan: Will attach screenshots.
Reviewers: btrahan, vrana, chad
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T1569
Differential Revision: https://secure.phabricator.com/D3114
Summary: show project profile image on pertinent edit page. also add a "Use Default Image" checkbox for both project and user profiles. Also added a function for projects to get the profile picture to prevent some copy + paste action.
Test Plan: set my user profile and project profile image. clicked "Use Default Image" and got the default image back.
Reviewers: epriestley, floatinglomas
Reviewed By: floatinglomas
CC: aran, Korvin
Maniphest Tasks: T1307
Differential Revision: https://secure.phabricator.com/D2852
Summary:
Currently, notifications aren't z-indexed so they can end up underneath some other elements:
{F13144}
Fix this so they float correctly.
Test Plan: {F13166}
Reviewers: jungejason, btrahan
Reviewed By: jungejason
CC: aran
Maniphest Tasks: T1398
Differential Revision: https://secure.phabricator.com/D2834
Summary: Add a `notification.debug` setting that shows debug info in the browser. Also improve some logging/error handling stuff and fix a bug with host names.
Test Plan: {F13098}
Reviewers: jungejason, btrahan, vrana
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T944
Differential Revision: https://secure.phabricator.com/D2810
Summary:
- Allow more than one notification to be shown.
- Allow notifications to be customized with extra classes.
Test Plan: {F12776}
Reviewers: allenjohnashton, ddfisher, keebuhm, jungejason
Reviewed By: jungejason
CC: aran
Maniphest Tasks: T944
Differential Revision: https://secure.phabricator.com/D2758
