Summary: See screenshot. This does look like an improvement to me.
Test Plan: {F133255}
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: epriestley, chad
Differential Revision: https://secure.phabricator.com/D8597
Summary: Update notes, important, and warnings to look different than codeblocks.
Test Plan: test in diviner and legalpad
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin, chad, avivey
Differential Revision: https://secure.phabricator.com/D8592
Summary: This should use the same spacing as paragraphcs
Test Plan: Tested a few block quotes
Reviewers: btrahan, epriestley
Reviewed By: epriestley
CC: Korvin, epriestley, aran
Differential Revision: https://secure.phabricator.com/D8482
Summary: Uses standard spacing and colors in Remarkup. Also removed 'remarkup dark' since it doesn't exist anymore (Pholio). Left font sizes in em's for spacing.
Test Plan: Tested a few dozen Diviner pages, my wiki pages, and a few tasks.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
CC: Korvin, epriestley, aran
Differential Revision: https://secure.phabricator.com/D8439
Summary:
Updates PhabricatorTimeline to PHUITimeline. Uses standard colors and spacing, softens up the actors, and reduces visual spacing of action-only events.
- Also updated some 2x sprite images.
Test Plan: Tested Tasks Paste and Pholio in my sandbox.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: Korvin, epriestley, aran
Differential Revision: https://secure.phabricator.com/D8205
Summary: Ref T3116. I did not update the remarkup doc (yet) as I think this syntax should stay buried until the bubbler looks right
Test Plan: modified a legalpad document and verified BUBBLE: showed up and looked okay to my pitiful design skillz
Reviewers: epriestley, chad
Reviewed By: epriestley
CC: chad, Korvin, epriestley, aran
Maniphest Tasks: T3116
Differential Revision: https://secure.phabricator.com/D8053
Summary: This one CSS file has a pre-transformed URI in it, just use a raw resource name. The tranform pipeline will fix it (and this URI is no longer correct).
Test Plan: Loaded some pages.
Reviewers: btrahan, chad
Reviewed By: chad
CC: chad, aran
Differential Revision: https://secure.phabricator.com/D7895
Summary: Ref T3887. `300px` is a little too wide on devices.
Test Plan: Viewed on a phone.
Reviewers: btrahan, chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T3887
Differential Revision: https://secure.phabricator.com/D7157
Summary: Ref T3887. Similar to how we render images with `<img />`, render audio with `<audio />` if possible.
Test Plan: See screenshots.
Reviewers: btrahan, chad
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T3887
Differential Revision: https://secure.phabricator.com/D7156
Summary: More grey tweaks, breaking these up so I can test and tweak each as needed.
Test Plan: Review pages.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: Korvin, aran
Differential Revision: https://secure.phabricator.com/D6866
Summary: This adds standard 'blues' and start integration of standard colors for text, backgrounds, and borders.
Test Plan: sb
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: Korvin, aran
Differential Revision: https://secure.phabricator.com/D6857
Summary: Split some of these up for safe regexes.
Test Plan: reload celerity
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: Korvin, aran
Differential Revision: https://secure.phabricator.com/D6858
Summary:
Fixes T3782. Two changes:
- Remove the "Chaos" mode, which wasn't as funny as I'd hoped and has had a good run.
- Fix "Order" (now "Fullscreen") mode in Conpherence. Best fix I could come up with is dropping the "position: fixed" on all parents while in the mode.
Test Plan: Used Fullscreen mode in Conpherence in Chrome.
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T3782
Differential Revision: https://secure.phabricator.com/D6844
Summary:
This attempts some consistency in form layouts. Notably, they all now contain headers and are 16px off the sides and tops of pages. Also updated dialogs to the same look and feel. I think I got 98% of forms with this pass, but it's likely I missed some buried somewhere.
TODO: will take another pass as consolidating these colors and new gradients in another diff.
Test Plan: Played in my sandbox all week. Please play with it too and let me know how they feel.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: Korvin, aran
Differential Revision: https://secure.phabricator.com/D6806
Summary: Depends on D6769, removes 'dust' and uses a similar color background.
Test Plan: Review colors in sandbox.
Reviewers: epriestley
Reviewed By: epriestley
CC: Korvin, aran
Differential Revision: https://secure.phabricator.com/D6772
Summary:
Ref T3671. A lot of applications have pretty ad-hoc preview code. Clean it up a bit and add Summary preview to Differential.
After ApplicationTransactions we might want to try to serialize the whole form and show a preview of all the transactions, but this seems not very useful in most cases (I'd guess that Remarkup previews are 99% of the value) and tricky to get right (e.g., adding images which don't exist yet to Pholio mocks).
I think I can add this in a few other places, too.
Test Plan:
Edited Maniphest Tasks and Differential Revisions, mashed some buttons. Verified previews rendered correctly. Grepped for removed CSS classes (no hits).
{F52907}
Reviewers: btrahan, Firehed
Reviewed By: btrahan
CC: aran, chad
Maniphest Tasks: T3671
Differential Revision: https://secure.phabricator.com/D6673
Summary:
We have two separate pieces of rendering code and both are pretty ugly. Move them toward being more reasonable.
This could no doubt be improved:
- Getting a text style which was readable on both the dark and light bars was hard, maybe we should change the colors or maybe I am just bad.
- Could probably benefit from actual competent design in general.
- JS magic is temporarily ineffective, I'll restore that in the future.
- Embed style is a little funky (margin/centering).
- Could use a little cleanup.
Test Plan:
{F50226}
{F50227}
{F50228}
Reviewers: chad, btrahan
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D6465
Summary: Fixes T3473, mostly reverts previous changes to clean up required field text, will have to redesign that in general for responsiveness.
Test Plan: use logout form, use new conpherence form
Reviewers: epriestley
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T3473
Differential Revision: https://secure.phabricator.com/D6371
Summary: Ref T3322. Depends on D6297. Here are some Phabricator tweaks to complment D6297.
Test Plan: {F47522}
Reviewers: garoevans
Reviewed By: garoevans
CC: aran, chad
Maniphest Tasks: T3322
Differential Revision: https://secure.phabricator.com/D6298
Summary: make it work with z-index and make it grey.
Test Plan:
clicked the grey button and it worked! Safari and Chrome
clicked around and observed loading mask functioning correctly
Reviewers: epriestley, chad
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T3396
Differential Revision: https://secure.phabricator.com/D6207
Summary: Rough pass at a PHUIButtonView Class. Keeps phutil_tag intact and adds some image features if you use the class.
Test Plan: UIExamples
Reviewers: epriestley
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D6192
Summary:
- Use the same styles for shared operations (`drag-ghost`, `drag-dragging`).
- Move shared code into the base class.
Test Plan: Dragged around tasks and named queries.
Reviewers: chad
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D6141
Summary:
Also you have to drop them. So drag, and then drop.
This needs some cleanup and reconciliation/generalization with the Maniphest implementation. In particular, you can't drag things to the very top right now, and they should share more CSS and more behaviors.
Test Plan:
Look I alphabetized them:
{F45286}
Reviewers: chad
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D6136
Summary:
This diff covers a bit of ground.
- PHUIDocumentExample has been added
- PHUIDocument has been extended with new features
- PhabricatorMenuView is now PHUIListView
- PhabricatorMenuItemView is now PHUIItemListView
Overall - I think I've gotten all the edges covered here. There is some derpi-ness that we can talk about, comments in the code. Responsive design is missing from the new features on PHUIDocument, will follow up later.
Test Plan: Tested mobile and desktop menus, old phriction layout, new document views, new lists, and object lists.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D6130
Summary: Semi-decent pass at cleaning up the Conpherence dropdown and widgets. Will continue to update but have diff questions.
Test Plan: Testing Conpherence in my sb.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D6043
Summary: I'll build out a PHUI Class for this soonish.
Test Plan: UIExamples
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D6023
Summary:
Ref T2232. Very busy day on IRC so I feel like I've made 20 minutes of progress in 1-minute spurts here, but this adds the basics for a form that can have multiple pages and automatically handle pagination and reading to/from the request, objects and responses.
The UIExample is reasonably instructive. Basically, you make a form, add pages to the form, and add controls to the pages. The core flow control looks like this:
if ($request->isFormPost()) {
$form->readFromRequest($request); // (1)
if ($form->isComplete()) { // (2)
$response = $form->writeToResponse($response); // (3)
// Process result here. // (4)
}
} else {
$form->readFromObject($object); // (5)
}
The key parts are:
# This reads the form state from the request, including reading all the inactive pages.
# This tests if all pages are valid and the user just clicked "Done" on the last page.
# This produces a "response", which might be writing to an object (for simpler forms) or creating a transaction record (for more complex forms).
# Here, we would save the object or apply the transactions.
# When the user views the form for the first time, we preload all the values from some object (which might just be empty).
Ultimate goal here is to fix repository creation to not be a terrible pit of awfulness.
There are probably a lot of rough edges and missing features still, but this seems to not be totally crazy.
I'm using two submit buttons with different names which doesn't work on IE7 or something, but we can JS our way out of that if we need to.
Test Plan: Paged forward and backward through the form.
Reviewers: btrahan, chad
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T2232
Differential Revision: https://secure.phabricator.com/D6003
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
Summary: Less jarring if the background image doesn't load.
Test Plan: reload page, test without background-image
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5769
Summary:
- Moves z-index rules to z-index CSS.
- Fixes Order mode in Firefox with JS. ;_;
Test Plan: Used Order mode in FF, Safari, Chrome.
Reviewers: AnhNhan, chad, btrahan
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D5740
Summary:
Ref T2599.
Implements an "order" mode which fullscreens the editor and reduces distractions, similar to Asana's "focus" mode and GitHub's "zen" mode. This can help users who need fewer distractions get work done.
Implements a "chaos" mode which does the opposite. This can help users who need more distractions to get work done.
Test Plan: Clicked "order" and "chaos" buttons.
Reviewers: chad, btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T2599
Differential Revision: https://secure.phabricator.com/D5735
Summary: This is mostly minor, but visually it makes the wiki feel more 'page like' and better separates the actual content from other data displayed.
Test Plan: Tested Chrome, iPhone, and iPad.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin, AnhNhan
Maniphest Tasks: T2686
Differential Revision: https://secure.phabricator.com/D5366
Summary: Fixes T2912. I put this above dialogs but below tooltips, which I think is the right place.
Test Plan: {F39797}
Reviewers: chad, AnhNhan, edward
Reviewed By: chad
CC: aran
Maniphest Tasks: T2912
Differential Revision: https://secure.phabricator.com/D5629
Summary: Creates CSS Gradients for buttons. Also tweaked hover and active styles. "Fixed" disabled state (this may require follow up diffs to correct around site)
Test Plan: Tested Maniphest and UI Examples in Chrome and IE10/9/8
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5624
Summary: Simple alternative to D5448. Adds a "header" type which renders a visual separator.
Test Plan:
{F39507}
{F39508}
Reviewers: jamesr, btrahan, chad
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D5616
Summary: Abstract out the multi-column code from workboards and have it be available separately. I feel like there will be some benefit here especially for custom developers in how they present infromation (like releeph). It also scales back to tablet and mobile fairly well, so they get those things for free.
Test Plan: Tested mobile, tablet and chrome layouts.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5529
Summary: Currently, the thread list is in a standard side nav, but that makes it awkward to render (rendering logic needs to live in the base controller) and gives it some bad beahviors (like autohiding on mobile). Instead, move it into its own view and make it a little more custom. Ref T2421.
Test Plan: {F38098}
Reviewers: btrahan
Reviewed By: btrahan
CC: aran, chad
Maniphest Tasks: T2421
Differential Revision: https://secure.phabricator.com/D5504
Summary: Adds ability to add 20, 10 and 5 px of margin or padding without adding additional rules.
Test Plan: Reloaded any Phabricator Page. It didn't break.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5477
Summary:
Added rules for <tt> (##`## [inline code]) (did bright text on somewhat dark bg), `NOTE:` block and tables. These were all the ones I could think of and found that they required triage.
I did not touch minor things like links etc., which may require refinement. I try to stay away from design details.
Test Plan: {F35940}
Reviewers: chad, epriestley
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5345
Summary:
A few things
- pht Maniphest where I could
- implement dust background
- optimize pages for mobile
- adds aphront-two-column-layout
- reworks maniphest page with two column layout
- tweaks task table for mobile, though we should move to object-list-view
Stopping here as I want to get feedback in. Super excited about mobile and the new tasks views. Only sort of excited about the sidebar filters, they need more UI work, but we should talk about that.
Test Plan: Test Maniphest, Differential, and Homepage views. Sort tasks, make reports
Reviewers: epriestley, btrahan
Reviewed By: btrahan
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5314
Summary: Fix the visited state on visited closed tasks.
Test Plan: Create and close tasks, visit them, note state doesnt change. Check hover states.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5298
Summary: This is supposed to look a lot like the way Remarkup renders a block of code, so you can render some out of context message inside another container. For example in Releeph, it renders a message someone has associated with a Releeph request.
Test Plan:
I've added an abstract uiexample, but the use case in Releeph is more explanatory:
{F33900}
Reviewers: epriestley, chad
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T2094
Differential Revision: https://secure.phabricator.com/D5125
Summary: Aphront widgets that render the either a discrete or continuous value as a horizontal shape. Like a progress bar, or a five-star rating bar.
Test Plan:
`/uiexample/view/PhabricatorAphrontBarExample/` ...which shows this, amongst other things:
{F33898}
Reviewers: epriestley, chad
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T2094
Differential Revision: https://secure.phabricator.com/D5122
