New filtering system

Jerud

Jay Such exciting stuff!!! Responses below in kinda random order, sorry:

The show/hide toggle mechanism differs slightly from mobile. Mobile cycles through show-hide-off. This interface uses single-click to show, double-click to hide, and then single click toggles off from either show or hide. I prefer how you have the Demo working – can mobile be updated to match? And can you make the double-click window just a tiny bit longer?
I like “HAS” and agree with how you’ve grouped the buttons, however I would put the “PRI” group at the top since those are surely the most frequently-used ones. Also: consider renaming “PRI” to “STATUS”. I think that ‘priorities’ should be called ‘statuses’ in general, but also this is a bit more suitable for including star and complete.
And yes, as @studgeek says, put some whitespace between the ½/3 statuses and the star/complete buttons – I’d like to see the option of 2 (or more) additional color-statuses in the future, too.
I like the “Advanced” checkbox. Can you make it so the filter string remains visible even when the flyout is closed, if that box is left checked? I would want that if I were using it…and it feels more expected.
Yes, I’d like to see a full-width second-row toolbar for filters. But the current flyout menu is also great, if that user wants that toolbar hidden. I was thinking the flyout can have a “dock as toolbar” button in it…but if that’s too busy it would be fine to bury the preference under the kebab menu.
I think “clear” should stay right where it is, and clear ALL filters. This works very well with my proposal for putting the text filter under a button, since user could simply toggle it off without any confusion around “clearing” filters or just the text. I know this would complicate the ctrl+F behavior, but it seems like that could just open the flyout automatically instead of typing directly into the filter-text field. I also think this would just plain be more consistent and robust, and it would mean all users (that aren’t using Advanced Mode) would have an entirely icon-based interface up there.
What about dedicating the filter area to be icon-centric, period? Active filters would be shown with icons as you have it now – but they can be larger because they won’t be inside a text box. Then user can click them directly to toggle, alt-click to remove, without even opening the flyout. That would make for very fast temporary filter changes! If the text filter is under a button, clicking that button can fly out the textbox for just that filter. Then add a (funnel icon) button to open the big flyout panel. Clicking the “advanced” checkbox would, instead of replacing the icons with text in the Pane Toolbar, slide down a text-editing field from the bottom of the filter’s flyout. This would also allow for a longer text field and larger font.
I like Alt instead of Shift for ‘OR-ing’ filters. It seems more consistent with how Alt (similar function but different) and shift (mostly related to selecting things) are used elsewhere.
is:parent and is:child are fine for me if they’re only available for typing into advanced filters. My use was to differentiate between “big” Tasks (that have subtasks) and “small” Tasks (no subtasks). @studgeek also apparently has a use case, too.
I like today’s “?” button directly in the flyout as a quick reference to the ‘hidden’ filters. Can you put that button next to the “advanced” checkbox? Or have it slide out automatically when the box is checked? I would not mind that it covers some of the Pane contents. You could put a button/link at the top of this reference, to open a full “advanced filtering guide” – maybe just a blog post/webpage (for now?).
How about a fourth group “PANE” for the special controls such as “show projects from anywhere”, calendar filter, etc. It would obviously only appear when the PaneType warrants it. Will there eventually be a “document filter” too, or will that be controlled from the Overview? I’d like to see that, and this would be a good place for it. There will generally only be one of these buttons for any single Pane, so you could make them wider or add explanatory text to fill the whitespace. I think rephrasing each of these buttons as “filters” would just be helpful in general.
@studgeek’s, comment about the helpful Toasts: maybe these could get disabled – along with other similar feedbacks – by having a “training wheels” mode that is on by default and toggled off in Settings.
Thanks for setting me straight on the “google-like” filtering…I swear I tried to use it recently and had no results…but maybe I was combining it with my attempts at symbols in #tags and mis-attributed the problem.

I still don’t have a great answer to the default “hide completes” behavior. I do like it, because yes, nearly every pane hides completes. I do like that the filter is consistently-applied as a red/hide filter, even though that feels awkward for such a frequently-used setting. My three suggestions, none of which are great:

Add a relatively visible user setting for “new Panes default to hide completes”. That at least makes it explicit, but doesn’t really help your panicking new users.
(weird idea) Make “hide completes” a setting within the Pane Configuration rather than the Filters. I don’t love this, too ‘buried’ and hard to toggle.
Use “Orientation Mode” Default Panes to no filters at first install, but when user toggles themselves out of “orientation mode”, the default changes to ‘hide completes’. I envision ‘orientation mode’ being basically a toggle in the Settings – so this is kinda like #1 – but it would be shown to users upon completing the “getting started” tutorial, and that can explain what exactly the differences are.

andrew

Mutually exclusive criteria (types, priorities) should be visually grouped together and either only allow 1 value to be selected (like radio buttons) or use OR logic when selecting more than 1 from the same group.

Jay

New update out! Changes:

Advanced mode more functional: Highlights filter text in red/blue, always shows text instead of icons, improved editing
Fixed handling of enter/tab
Panes hide complete by default as before (I’ll consider changing this later but keeping it the same for now)
X button clears the whole filter
Slightly increased double click window for negating filters
Advanced filtering will be a premium feature
Changed star to “is:star” rather than “pi:star”
Priority buttons set to low+, med+, high, and turn off other priority filters. You can do more complex priority filters in advanced mode like pri:low or pri:high
Put in a similar hints popup behind a ? button
Added the options and calendar buttons

Buttons don’t do OR modifiers

We discussed different modifiers for buttons to add or, but as I thought about that more, I think it’s either impossible or extremely complex. or effectively creates groupings, like a b or c d is equal to (a b) or (c d). So inserting an or with a button would have different behavior depending on the current state of the filter. I think the UI would have to be much more complex to set up or correctly, so I think it’s best to make it only available in Advanced mode, at least for now?

Ready to go!

I believe this is now ready to take out of the demo-mode experiment and make it a real beta feature. I will just test the migration from the previous filter system some more and release it as a “Test Beta Features” feature.

I will come back to the other suggestions as I’d like to get this set of features finished and releasable, then we can build on it.

Misc

is:parent and is:child sound very interesting! But with the way filtering works matching all the way up the hierarchy, those would just match everything because a hierarchy will always have at least one parent and one child. If you could give me some more examples of how you’d like a filter like that to work, we might find a way to make that filter work, or maybe it should be an option, or solved a different way.

If you’re wanting filtering to show only matches and not their children, List view does that. But of course it loses hierarchy. My struggle with hiding all children is it could be confusing why large projects have no children, and behaviors like indenting would break - they would immediately get hidden because children should not exist). That’s why it’s only a feature of Flat view for now. Another way to solve it could be to have an option/button/hotkey to collapse the deepest nodes that match the filter?

@andrew I made the priorities mutually exclusive and toggle others off as you suggested. Types are not necessarily mutually exclusive, like is:project is:task would find task children of projects. So I think those should stay as they are?

andrew

Jay Another way to solve it could be to have an option/button/hotkey to collapse the deepest nodes that match the filter?

I’ve been begging for this for years :-)

Jerud

Totally agree with advanced editing and OR filters being Premium…but what if a Premium user includes an OR filter in a template for all users…will they get that filter? What if they blow it away and need to recreate? Not an issue today, but something to worry about when templates come.
red/blue highlighting is very nice!
new double-click window is perfect 😉
is:parent / is:child. Given the complexities you mention, seems far more important to roll out this filters update as-is and maybe discuss adding these later (or never).
“X” button in the advanced help flyout closes the whole filter dialog instead of just the flyout. Honestly that “X” doesn’t even need to exist; the “?” can toggle the flyout just fine. Please save the expand-state of the flyout between invocations of the filter dialog.
Andrew’s mutually-exclusive grouping sounded good to me, until I read your “task children of project parents” example. Frankly I still have not wrapped my head around how parents and children get filtered – so I have more work to do before I request anything else 😅 . Meanwhile the current arrangement seems good. I’d rather see ‘complete’ and ‘star’ listed before priorities…but meh.
In future, maybe Legend can “test” in the background and for any buttons that would result in an empty Pane, make those buttons grey.
I can still apply multiple PRI filters…and I still like that better than the 1+, 2+, 3+ scheme that is evidently supposed to be there; I think it’s clearer and more intuitive in the interface. I guess leave it up to the users, see which gets more complaints 😆
“Added the options and calendar buttons” – I don’t see these? Maybe same reason the PRI buttons aren’t as-described? I did do a force-refresh of my tab, and did get the “update” banner.

Jay

It’s ready!

The new filtering system is now out of demo-only experiment and into actual beta!

To use it

You can enable it by enabling “Test beta features” in the General section of settings. It will migrate from the old filter system but not overwrite it, so you can disable “Test beta features” to go back if there’s any issues.

Changes

Fixed: select all was highlighting into the icons
Hooked up sync and migration from old version

Jerud
I think the missing calendar buttons and new PRI behavior should be fixed now. Let me know if they’re still not working?

andrew

In a pane that is grouped by project or tag, clicking in the filter box results in an error and the filter pane is not shown.

Jay

Thanks @andrew! Fixed in latest version.

andrew

I notice that clicking twice to “hide” only works if the button is gray and not blue (i.e., filter enabled). That was a little confusing to me because I kept clicking twice to switch a filter from show to hide, but it would just go back to show.

Also “Click Twice” seems potentially confusing… does that mean “double click” or click twice with enough time in between so it is not a double click but 2 separate clicks? It seems like it is a “double click”.

andrew

I have a hard time with the black on red, particularly trying to read the black text on red background in advanced mode. Maybe keep the text and icons as white on the red background?

Or make the red background lighter… this would make the red high priority standout better when hiding high priority (which is bright red on slighly less bright red). Though I think I prefer the white-on-red in the advanced mode so all the text is white and just the background is different… easier to read the text.

Jay

Thanks andrew ! Fixed all of that in the latest update, except changing the red color. I’ll play with colors some more to find a better one that doesn’t conflict with high priority. Or do you think it would make sense to use a color other than red for negated filters?

andrew

Jay Could you also change the filter text that is on a red background in advanced mode to white as well?

Red does make the most sense for negated filters, but doesn’t work so great as a background for the priority icons. Maybe you could try making it just a little bit lighter in both light and dark modes (and also make the blue a little lighter to match)?

Alternatively, in light mode, you could make the red and blue background much lighter and keep all the icons and text black. In dark mode, you might keep the background colors a little darker, with white icons and text.

webalstrom

I think this new filtering system is great. Having the buttons will make it easier for new users to learn what filters are available, but even users that have been around a while can learn something new (I know I did, not that I’ve been using Moodo/Legend for a real long time…).

I have a few suggestions/ideas to make this even better (in sort of order of priority to me):

Make the categories on the menu less confusing. What is “pri”? I know it is priority but it could be confusing for new users (even though the filter code is “pri”. What about “contains” instead of “has”? Has seems like a less exact term than contains.
Could there be another row for date options? Maybe the most “popular” and these could be a way to help new users learn what is available. I would suggest buttons for today, tomorrow, last week next week. I would keep the date search suggestions in the “Filtering Hints” tool tips so new users will understand there are more options if they type them in manually.
What about an option at the bottom of the pop out menu to “save” the search (i.e. create a new pane with that filter)? Or instructions/link to instructions on how to do this (i.e. how to create a new pane and save it). This was one of the confusing parts of Moodo/Legend when I first started using the app. In my previous outliner you could save the search/filter as a bookmark to return to. In Legend, you need to create a new board and then right click to “Save view as default.” While this is powerful and has advantages over just bookmarking a filter you want to save, it is not intuitive!
Will there be an option for experienced users to turn off automatically opening up the pop out menu? I can see wanting to just type in a quick filter once I know the options instead of having the visual clutter of the pop up when I hit Alt+F.
Will there a button to filter on the numbered list type? Is that even an option? I think it should be if it isn’t.

Jerud

andrew I like your screenshots and txt-color suggestions but disagree about using lighter versions of blue and red. Legend’s interface is, in general, “fully saturated”. The colors are all rich and bright – no tints or shades, just full-intensity color. Lightening the blue and red would not fit in well unless you adjusted other colors for consistency.

Jerud

Haven’t gone through all my Boards and verified function yet, but strictly regarding the interface:

I like the change to “double click”
Priority filters are now working as-intended. Not my preferred mode, but I can live with it – however I emphasize that these three buttons should somehow look different than all the others, since they do work quite differently. They are effectively a single control – I say smush them together like they were before.
I still don’t see an “options” button – just the Advanced checkbox and the “?” button. What is supposed to be “in” the options button? I’m also not sure if I’m missing the calendar buttons, too. Can someone post a screenshot of what I should be seeing?
I like “TYPE” and “HAS” but “PRI” doesn’t really cut it. Too short/obscure and irrelevant to the star & complete buttons. I still like “STATUS”. What if all these labels were actually just removed? I’m not sure they are adding a whole lot. The spatial grouping can make logical sense without being ‘labeled’. You could move the row labels into the tooltips for each button instead, if they need to be clarified better. “Type: Project” “Has: Date”, etc. This would also allow more clarity on the top row such as: “At least: medium” for the PRI buttons but the other two can be “is: starred” and “is: complete”
The Pane header has to shift to accommodate the long “advanced” filter terms in the text box. In narrow panes/small screens, it’s only possible to see 2 or 3 terms. This seems overly disruptive, since this expanded state is only visible with the dialog open anyway. Showing the expanded filter text in its own box (below the checkbox) would help with that. Leave the Pane Header alone and show the expanded terms within the “advanced” flyout. I sympathize with @webalstrom ’s wish for better keyboard entry…but frankly there are a plenty of old, substantial, many-times-a-day obstacles to keyboard-centric use that would be far more impactful to fix than the ability to quickly enter an advanced filter…so it’s hard for me to see that as a priority.
For the text/background of PRI buttons: remember we now have control over these colors, so there will never be a universal solution that contrasts well. I suggest putting a thin black/white outline around the inner color-boxes to separate them from the red/blue button color.

andrew

Jerud Many sites, including most Google sites (e.g., Gmail, Drive, Calendar, etc.), use lighter colors as background colors to indicate selection along with darker colors for text, icons, and badges. In fact, this is described in the first sentence about colors in Material Design guidelines:

https://material.io/archive/guidelines/style/color.html
“Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.”

It’s also consistent with the light gray and in some cases, light blue background colors used throughout Legend already.

btw, these background colors have a greater lightness value (in HSL or HSLA), not necessarily lower saturation. Actually in some cases these lighter colors have a higher saturation value.

Jerud

andrew All good points. I’m no UI design expert or developer. But I do enjoy a good-natured ‘argument’ 😉

“bold hues juxtaposed with muted environments” sounds exactly like why I opposed the lighter button-backgrounds. Yes it’s a “background” but it’s the background of a control element and according to the intro video on the Material Design site, those should be bright.
Same with the light grey and light blue “background” elements you mention. This is a button not a background. Red and blue are dynamic indicators of status just like the slider in the intro video – they should be bright not dull.
My meager background in color comes from art class, not computer science. I think of hue, saturation, and intensity, which I believe maps to HSL but maybe not. But I do think the colors I’m thinking of are ‘saturated’ – not the ‘backgrounds’ of Legend, but only the other places where “real colors” – aka not greys – are used. Things that are meant to stand out: highlighting, tag formatting, buttons, etc.
Also, the palette of emojis in general, which I use often for labels and headings and are at least as big as these UI elements on the screen, tend to be bolder, too.
Oh and also: This isn’t an Android app. 😇

Jerud

@Jay I’m so sorry, I just realized I didn’t have the option button because I wasn’t in a PaneType that should have one. The priority-buttons thing was real, though : ).

For me, after the filter migration, -! -!! -!!! filters are being treated as literal text. I also just realized those aren’t in the “filtering hints” but maybe it was always that way?

I keep wishing the ‘complete’ and the ‘star’ buttons were first and second on that top row.

Can the filter dialog open automatically on-hover? Current interface requires min. 2 clicks for any change except txt filter – and even the 1 click for editing txt filter still opens the dialog.

Jay

Lots of great feedback! I think I will revisit the discussion of saving searches since that’s a bigger mostly unrelated issue. I want to finish and release this current project before jumping onto bigger things.

Jerud I removed all the old hacky filters like ! to favor the new ones like pri:high. I forgot to migrate those - I’ll add that in an upcoming release.

andrew

Most other outline apps have a search box with the ability to star, bookmark or otherwise save a search to be recalled later, effectively creating a saved filter. A lot of users have asked for the ability to save a filter in Legend, which is currently best accomplished by using mulitple panes. So given that, how about this:

Add a “Save as Pane Default” button to the filter panel, so that when you click the X, the filter settings revert back to that saved default. The initial default for every new pane would be to hide complete ( -is:complete ).

This way users could use the filter box to temporarily make multiple changes to the filter or for searching (which I still do because it works like search in other outliners, and ctrl-F and shift-ctrl-F don’t work for me plus a lot of users will never discover these hidden commands) and then quickly revert back to the default filter. Right now, it seems that there is an initial pane filter state that is saved when you switch boards or exit the app, and recalled when you return to the board. While you can revert back to this filter state by using the Back button in the pane header, if you switch boards or exit the app without clicking all the way back to that initial filter in each pane first, then you may lose that filter state since the current state will become the new initial state, with no way to recover that initial filter state since the back history is cleared when changing boards or exiting the app.

So this would require you to save not only the current filter state (to be restored upon returning to a board, as you do now) but an additional default state (to be restored when a user clears the filter). When restoring a pane with current state different than the default state, you could also set the filter to the current state and make that the second state in history, with the first history state set to the default so you could navigate back to it with the Back button (or save the entire history).

LauraH

andrew
Hey Andrew - this feature already exists - but it is a little hidden / not obvious.

It’s the “Save View as Default” option.
Set up the board (filters, etc.) as you wish, then right click the board title and choose “Save View as Default”.
Then, mess up the filters, set up, etc. to your hearts content…. when ready to return to default, right click the board name again and choose “Restore Default View”.

webalstrom

LauraH and andrew
While I know about this option to save the default view, it is a bit obscure, especially for new users. That is why I asked @Jay if he could put a “save this filter view” as a button on the filter drop down filter choice menu. I’m not sure how it would be set up or if there would need to be more than one option. I can think of two obvious choices:

Save this filter and the current view in this pane in the current board
Save this filter and view as a new pane in the current (or new?) board

I think it would make it much easier (as well as obvious it can be done) if the option to save the filter set up was right there where the filters are being set.

Jerud

Why not push the “change view”, “expand all”, and “back” buttons right, up against the kebab menu, and let the filters sit to the left of those four buttons? That way nothing has to move when the filters resize, and it’s easier to consistently find those buttons b/c they’re in the same place.

I’d actually love to see the “back” button somehow at the left side, between Overview and Pane Name…never seen any app where “back” is right-of-center. I generally forget this button even exists. Makes more sense to have all the “navigation” buttons grouped to the left and “pane settings” controls grouped to the right.