Page MenuHomePhabricator

Clean up the Diffusion search UI a little bit
ClosedPublic

Authored by epriestley on Feb 1 2014, 5:13 PM.
Tags
None
Referenced Files
F14029805: D8125.diff
Fri, Nov 8, 9:31 PM
F14029224: D8125.diff
Fri, Nov 8, 8:04 PM
F14028062: D8125.id18379.diff
Fri, Nov 8, 11:40 AM
F14023281: D8125.id18379.diff
Thu, Nov 7, 12:35 AM
F14011094: D8125.id18377.diff
Thu, Oct 31, 5:33 PM
F13996505: D8125.id18378.diff
Wed, Oct 23, 9:41 PM
F13976727: D8125.diff
Oct 18 2024, 3:26 PM
F13966894: D8125.id18376.diff
Oct 16 2024, 10:20 AM
Subscribers

Details

Reviewers
vlada
btrahan
chad
Maniphest Tasks
Restricted Maniphest Task
Commits
Restricted Diffusion Commit
rPbb633fb42afa: Clean up the Diffusion search UI a little bit
Summary

Ref T156. @vlada recently implemented filename search in Diffusion, this cleans up the UI a little bit:

  • Instead of showing one search box with two different buttons, let the submit buttons appear to the right of the text boxes and separate the search modes.
  • Clean up the results a little bit (don't show columns which don't exist).
Test Plan

{F107260}

Diff Detail

Lint
Lint Skipped
Unit
Tests Skipped

Event Timeline

I don't think we used fixed width buttons anywhere do we? You can also use icons on those buttons to better denote they'll instantly do something. Also, would probably wrap the results in an ObjectBox, something like "Results matching "cat"' or similar

The buttons are they're technically variable width. On devices, they'll layout vertically. For reference, here's what's in HEAD right now (the field is interpreted according to which button you click):

{F107278}

Making them blue instead of grey would be more consistent, but it looked a little ehh. We could also not add a text-with-button element, but then the resulting form will be huge (4 lines).

I think the unified text input is really unclear, and it's very hard to access from the keyboard (return always performs content search, which is surprising).

I'll add an object box...

webroot/rsrc/css/phui/phui-form-view.css
441

(Here.)

epriestley updated this revision to Unknown Object (????).Feb 1 2014, 5:54 PM
  • Use box views.
  • @chad: Is there a better way to get the pager to line up?

{F107280}

src/applications/diffusion/controller/DiffusionBrowseSearchController.php
111–114

This is the suspicious-seeming approach I'm using to line up the pager.

I'm fine with doing whatever you want with the buttons, my thoughts are:

  • If they both just have something like a magnifying glass icon, I worry it will make the UI a bit harder to use, because it will be less clear which text field means "file names" and which one means "file content".
  • I don't know how to represent "file names" and "file content" differently with icons in a reasonable way.
  • If we have a single submit button for the entire form, it will imply that the operations are combined, but you can not currently do both a filename and a content search (and this is probably rarely useful, and not easy technically).
  • If we have two normal forms, the thing gets really huge and weird looking.
  • The solution in HEAD, which is one input with two buttons, is really confusing to me and hard to use with the keyboard.
  • Another approach would be a text field, a select for search type, and then a single button, but this seems harder to use than the two-field UI.

We could also remove the buttons entirely (i.e., submit by pressing return) and wait for someone to complain that they're confused.

(But then we lose the disambiguation value of having differently-labeled buttons.)

Find and Grep seem clearer than icons, at least in English. You could e.g. have a magnifying glass over a folder for find and a magnifying glass over a file for grep, but it would still be confusing.

The only problem I have with there being two text boxes is that you're unlikely to use both at the same time, so on some level it feels like wasted space.

Oh sorry, I just meant that texting floating in a button always seem strange to me. What if we did something like:

File Name: [ //input//                      ] [ Search File Names ]
Pattern:   [ //input//                      ] [ Grep File Content ]

I think the grey was fine.

Ah, yeah, that was a half-hearted nod to "maybe 'grep' in French is 'telecharguer la enfiloes du content macheé la expression regular". Your way sounds good to me.

epriestley updated this revision to Unknown Object (????).Feb 1 2014, 7:17 PM

CSS on this is still a little weird, but does reasonable things at all breakpoints.

{F107297}

I can come through after and look at css/pagers.