Bugzilla – Full Text Bug Listing
| Summary: | [Graphics] Improve Look and Feel of FilteredTree | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | [Eclipse Project] Platform | Reporter: | Benjamin Pasero <bpasero> | ||||||||||||||||||||||||
| Component: | UI | Assignee: | Boris Bokowski <bokowski> | ||||||||||||||||||||||||
| Status: | RESOLVED FIXED | QA Contact: | |||||||||||||||||||||||||
| Severity: | enhancement | ||||||||||||||||||||||||||
| Priority: | P5 | CC: | andre_weinand, bokowski, daniel_megert, eclipse, Kevin_McGuire, konstantin, kpeter, markus.kell.r, martinae, mik.kersten, Mike_Wilson, remy.suen | ||||||||||||||||||||||||
| Version: | 3.2 | Keywords: | helpwanted | ||||||||||||||||||||||||
| Target Milestone: | 3.5 M4 | ||||||||||||||||||||||||||
| Hardware: | PC | ||||||||||||||||||||||||||
| OS: | Windows XP | ||||||||||||||||||||||||||
| Whiteboard: | |||||||||||||||||||||||||||
| Bug Depends on: | 128536, 183581 | ||||||||||||||||||||||||||
| Bug Blocks: | |||||||||||||||||||||||||||
| Attachments: |
|
||||||||||||||||||||||||||
|
Description
Benjamin Pasero
Created attachment 41411 [details]
Version as used in RSSOwl 1
This is the version I use in RSSOwl 1. A Composite surrounding the Text widget and the ToolItem for clearing. The gray "Search" is deleted once the widget gains focus.
Created attachment 41412 [details]
Version as used in RSSOwl 2 (initial)
Here is another variant of the FilteredTree I use for a TreeViewer. The lense indicates that the inputfield can be used for a search (similiar to Mac's Spotlight). When the input is empty, the inputfield spans the entire width. See the next shot for whats happening when you type in something.
Created attachment 41413 [details]
Version as used in RSSOwl 2 (filled)
As soon as text is filled into the input field, the button for clearing the search becomes visible.
I like the updated icons - I can bring them up with the visual designers. Are you searching on the bottom on one of these? I don't think that would be very obvious. Great to hear that. Yeah the searchbox is on the bottom of the Tree for a simple reason: Initially the Search-Box is not present. As soon as the Tree has focus and the user types some keys, the Box will "pop up" and run the incremental search. This feature is also known to Firefox where its called "Begin finding when you begin typing". As you can imagine, showing the Box on top of the Tree would move the entire Tree down by some pixels, which is not very user friendly. Ben Right - I see where you are coming from. However Firefox is in a tab so it doesn't have a better spot for it (i.e. it put it in the only trim which is at the bottom). As people read top down and left to right I think we would want to keep it where it is by default or it is too easy to miss. In your case as you bring it up with a keybinding people are expecting something to pop up somewhere. Yep I agree and I dont wanted to recommend putting the Search-Box below the Tree for the FilteredTree. More interesting for me was making it more obvious for the user what the control is about (by using more/different icons, seperating the control from the Tree). Ben I'll take this one as it is really about updating graphics right now My issue with the FilterTree is not so much the eraser graphic but the placement of the eraser: - if there is no eraser, there is a white area at the end of text field, that prevents the text from being aligned nicely with the Tree (see my first screenshot). - and if there is an eraser, it is not well integrated with the text field (see my second screenshot). So I like Ben's first screenshot, but not 2&3 because they suffer from the same problem. I've added two more shots that show how the Mac solves the problem. Created attachment 45443 [details]
Eclipse 1 (initial)
Created attachment 45444 [details]
Eclipse 2 (filled)
Created attachment 45445 [details]
Mac 1 (initial)
Created attachment 45446 [details]
Mac 1 (initial)
Created attachment 45447 [details]
Mac 2 (filled)
We have no plans to work on this any further but if you had patch for us to look over we could review it. Created attachment 104873 [details]
patch
Suggested fix
Created attachment 104876 [details]
screenshot witrh patch
This how it looks on WinXP with the same image as before. I suggest that we use make a image request to something a bit smaller, maybe similar as on the Mac, see mockup below
On the Mac, we are already using the native widget (rounded corners with in-line icon for clearing the search text.) I like the circle and think it looks good, especially being inside the box, but I wonder if it is a bit too Mac-ish since it is a circle, which tends to look very nice within a very rounded box. On Vista the icon tends to be square-ish. Check out the screenshots on bug 183581, perhaps this discussion should go there. One other thing to consider is where else this clear icon should reappear. Currently Mylyn uses the same little "x" for both the filtered tree icon and for other places where the big "X" for remove looks too big. I'll attach screenshots to bug 183581. We should do this for 3.5. Boris, can you apply the patch and follow up with Kevin. As noted in bug 183581, I can attach the cut images for the small eraser to be used inside the filter field. I just need to know the plugin. Thanks! (In reply to comment #21) > As noted in bug 183581, I can attach the cut images for the small eraser to be > used inside the filter field. I just need to know the plugin. Thanks! fyi - The images are now attached in bug 183581. Created attachment 119206 [details]
updated patch
I updated the patch to not use Platform.getOS(). It creates a "test widget", once per session, to find out whether the current platform honors the SWT.SEARCH and SWT.CANCEL style bits.
Patch released to HEAD, together with the images from bug 183581. Tested on Windows XP, GTK, and Carbon. The Cocoa build I got did not work for me, I'll test Cocoa tomorrow. See bug 257176 and bug 257175 for follow-up problem with look and feel. |