Page MenuHomePhabricator

Config re-design

Authored by chad on Sep 2 2017, 4:11 AM.
Referenced Files
Unknown Object (File)
Fri, Mar 17, 9:12 PM
Unknown Object (File)
Feb 21 2023, 7:51 AM
Unknown Object (File)
Feb 9 2023, 10:07 AM
Unknown Object (File)
Feb 4 2023, 6:26 PM
Unknown Object (File)
Feb 4 2023, 6:32 AM
Unknown Object (File)
Jan 28 2023, 4:33 AM
Unknown Object (File)
Jan 18 2023, 5:24 PM
Unknown Object (File)
Jan 16 2023, 8:29 PM



This is a full UI pass at a cleaner "Config" application. The main idea is to simplify the UI, center it, and have a different feel than other UI, a sort of "manage" UI theme for objects with loads of settings. Also adds a new minimalistic "WHITE_CONFIG" box type which may get re-used in Diffusion settings. This is a 90% pass, I'll have a few follow up diffs. Specifically:

  • Build breadcrumbs as a flexible UI to go into headers.
  • One click ObjectItemView option, for hover states.
  • Sidenav doesn't always select (AphrontFilter issue)
  • Mobile touchups, though it's pretty reasonable.
Test Plan

Click through every page here, edit options, see new navigation UI. Test a few various setup issue layouts including fatals.

Screen Shot 2017-09-02 at 8.05.07 PM.png (2×2 px, 467 KB)

Screen Shot 2017-09-02 at 8.05.02 PM.png (2×2 px, 395 KB)

Screen Shot 2017-09-02 at 8.05.28 PM.png (2×2 px, 444 KB)

Screen Shot 2017-09-02 at 8.04.56 PM.png (2×2 px, 619 KB)

Screen Shot 2017-09-02 at 8.04.46 PM.png (2×2 px, 555 KB)

Screen Shot 2017-09-02 at 8.05.21 PM.png (2×2 px, 578 KB)

Screen Shot 2017-09-02 at 8.04.52 PM.png (2×2 px, 426 KB)

Diff Detail

rP Phabricator
Lint Not Applicable
Tests Not Applicable

Event Timeline

chad retitled this revision from [WIP] Config re-design to Config re-design.Sep 3 2017, 3:10 AM
chad edited the summary of this revision. (Show Details)
chad edited the test plan for this revision. (Show Details)
chad added a reviewer: epriestley.
chad edited the summary of this revision. (Show Details)
  • add todo for crumbs
  • move header css change
  • back out setup issue CSS
  • back out phui-info-view tweaks


At first glance, this feels worse to me: it's wasting a lot of space for no apparent reason. The headers, in particular, feel much bigger than they were before. "The UI feels different from other UIs" doesn't seem like a desirable goal to me -- I like that the same UI conventions apply to every application. We've lost the navigation icons, which I find useful in using this UI because of the large number of options. Bread crumbs (but it sounds like this is getting addressed in a followup) and navigation are no longer in a consistent position relative to the dimensions of my browser window. I'm not sure what problem hiding most of the configuration values solves: it seems like this makes the UI less useful.

This revision is now accepted and ready to land.Sep 5 2017, 1:09 PM

Icons: I can add back icons, I'm sort of on the fence of how useful they are.

Crumbs: My plan is to keep all navigation in a tight, centered area vs. moving the eyes/mouse of the user all the way to the left of back to the top of the page. Or I could just add the crumbs back to the top. I think I'd use crumbs if they were in the header, but when they are in the top left, I tend to just click the back button on my browser.

Hiding values: not sure the value of having the entire value listed over making the list easy to read and browse. This comes down to what your doing. If I need a specific value change as a developer, I usually just go to "All Settings" and search for it, then click through. Discourse has a really nice search field that returns matching results from titles and descriptions. Inside the browse view though, it's not clear seeing the entire value on each object is important. Is there a particular workflow you have?

This is the search thing in Discourse and it works super well. As a first time admin, I used it like 50 times to find all the stuff I wanted to change without feeling overwhelmed by 500 options. I thinkkkkkk I could build a typeahead datasource and do this?

image.png (1×2 px, 350 KB)

chad planned changes to this revision.Sep 5 2017, 6:31 PM

Will update with crumbs and icons.

  • Add back crumbs, icons
This revision is now accepted and ready to land.Sep 5 2017, 10:04 PM
  • double check diff by hand
This revision was automatically updated to reflect the committed changes.
quark.zju added inline comments.

$this->getApplicationURI($group_uri) returns something like /config/config/application.

Maybe still use PhabricatorConfigGroupConstants::getGroupURI but use getApplicationURI to calculate the full URI?