UI: Improve Add Dialog

[linuxcaffe]

Describe your improvement idea or feature request

Improve and extend Add Task Dialog

How would you like to see it implemented?

(see screenshot)

Put here any screenshots or videos (optional)

How can we contact you (optional)

No response

Would you like to work on this issue?

None

By submitting this issue, I have confirmed that:

• I have starred the repo ⭐ and watched 👀 it on GitHub and followed the contribution guidelines.

[linuxcaffe]

[D-extremity]

do we really need this change? please confirm it, so that i will start working on it

[Pavel401]

@D-extremity , I have assigned it to you.

PS.
Keep less margin outside and more space inside the dialog.

[Pavel401]

#410 Link this as well

[Pavel401]

@D-extremity keep the changes of this PR #399

[linuxcaffe]

@D-extremity maybe even consider #414 ?

[D-extremity]

Okay okay i will do consider those PR and issues

[SGI-CAPP-AT2]

Hey @D-extremity ,
Are you still working on this ?, if not i would like to work on this one.

[linuxcaffe]

Here's another rough mockup of a new and improved Add Dialog, hope you like it.

I'm sure the colors and fonts and outlines and rounded corners above are not yet following the theme, but that's okay, tweak away!

What I like about this layout is;

• I like the Save and Cancel buttons at the top, nice and obvious that the user will have to Save it. That placement also saves one line of Dialog real-estate, and is consistent with other mockups I've submitted.
• I like that the field names are in lower-case, shaded and centered on the dialog. Field-names are of lesser importance to the actual field contents, they are not Field Titles and lower-case is consistent with CLI taskwarrior. User-data should be bolder, more contrasty white text and left-justified.
• I like that the description has a full-width text box
• I like that this date-selector has a date-type dropdown and a calendar-date-picker icon.
• I like a nice wide project box, for those longer project names. It would be ideal if one could enter a new project name directly OR pick an existing one from the dropdown.
• I like the new priority Picker! (nice work on UI: a better priority picker mockup #410 @arjav1528 !)
• I like being able to add new tags in a text-box and/or pick existing tags from the chips. I think it's kind of important to be able to see your most common tags and quickly assign them. I would also suggest that the Add Task dialog might limit as many chips as will reasonably fit the bottom 3 rows area, and maybe scroll for more? The best thing would be for the chips to be sorted most-used-tags-first, so your favorites rise to the top.

Thanks for considering all this @SGI-CAPP-AT2 , have fun with it!

[SGI-CAPP-AT2]

ok @linuxcaffe, let me work on this with following notes

1. The project input should be AutoCompleteTextView instead of just Dropdown menu.
2. Priority Picker and tags input width should be increased
3. Tags input should also be AutoCompleteTextView so that we can suggest all previously used tags.

AutoCompleteTextView is native android view, check flutter alternative here

[arjav1528]

@linuxcaffe I am really happy that I could contribute.. It would be great if you merge the PR

[linuxcaffe]

@SGI-CAPP-AT2 yeah, looks good!
I DO think AutoCompleteTextView may be amazing, but there is a real value to looking at chips, too, picking some without typing anything.

@arjav1528 that's great! .. but I don't think I have auth to actually merge stuff ;-)

[arjav1528]

@Pavel401 could you merge plz..
#410

[its-me-abhishek]

I DO think AutoCompleteTextView may be amazing, but there is a real value to looking at chips, too, picking some without typing anything.

Storing the previously used tags in something like SharedPreferences, or a simple SQFlite DB would be easy to implement for tags

[SGI-CAPP-AT2]

I DO think AutoCompleteTextView may be amazing, but there is a real value to looking at chips, too, picking some without typing anything.

Yep, at first I was thinking about chips but the problem with chips is
how can we show them?

1. In a row which is scrollable
2. OR just show as shown in the filter sidebar

But if we show as in filter sidebar, the problem is height of the dialogue

Storing the previously used tags in something like SharedPreferences, or a simple SQFlite DB would be easy to implement for tags

there's already a method to get previous tags which is used for filters
I think that should be used.

[its-me-abhishek]

Assuming we are also implementing similar UI for TW3.0/CCSync, and as adding/editing Tags are not a feature in that yet. Maybe you can try implementing separate storage of task tags in the same DB, for 3.0 /CCSync (other than the method mentioned by you for 2.0), as the CCSync integration generally works on SQFlite only, that would keep things separate, and we can then update the data models in the API as well as the Filter Drawer similarly, for 3.0/CCSync.

[linuxcaffe]

I DO think AutoCompleteTextView may be amazing, but there is a real value to looking at chips, too, picking some without typing anything.

Storing the previously used tags in something like SharedPreferences, or a simple SQFlite DB would be easy to implement for tags

I'm not suggesting separate set of "previously used tags" I'm talking about the existing tags in the user's current data set. Just like entering "task tags" at the taskwarrior CLI. No extra storage required.

[linuxcaffe]

I DO think AutoCompleteTextView may be amazing, but there is a real value to looking at chips, too, picking some without typing anything.

Yep, at first I was thinking about chips but the problem with chips is
how can we show them?

1. In a row which is scrollable
2. OR just show as shown in the filter sidebar

But if we show as in filter sidebar, the problem is height of the dialogue

I agree that showing a set of chips without affecting the height of the dialog is a challenge, but I think it's worth attempting. In my last mock-up I limit the chip space to 3 closely packed lines, and if the user has more than that, perhaps the bottom chips are could allow scrolling to show the rest?

Storing the previously used tags in something like SharedPreferences, or a simple SQFlite DB would be easy to implement for tags

Seperate DB for tags is (IMHO) not required, a bad idea, don't do it! ;-)

there's already a method to get previous tags which is used for filters
I think that should be used.

The advantage of showing a set of tag chips, especially if sorted by most-used-first (ie. most-numerous-in-the-user's-current-data-set) is the ability to select common tags with a single click, and that the user doesn't have to remember them all before typing tag names.

[linuxcaffe]

Hey @SGI-CAPP-AT2 , you're right, tag chips integrated at the bottom of the dialog is problematic. Here's an idea for a compromise, maybe best of both worlds!? So text autocomplete, yes! and a dropdown option? Instead of a vertical list, which could be too long, a chip box! Ideal for those tags you should have assigned, but almost forgot!

[SGI-CAPP-AT2]

Hey I found this solution,
It's a library for flutter https://pub.dev/packages/textfield_tags.
what do you think @linuxcaffe ?

[linuxcaffe]

Hey I found this solution,

@SGI-CAPP-AT2 that looks like just the thing! Good find!

I'm thinking the chip box can be as big as needed, but the bottom edge should connected to the top edge of tag input field, sort of like the mock-up above?

[linuxcaffe]

Hey I found this solution,
It's a library for flutter https://pub.dev/packages/textfield_tags.

@arjav1528 not too duplicate effort, this looks good for the #421 tag chip box too?

Slightly different layout, very similar behavior, same Library?

[arjav1528]

@linuxcaffe yep, looks great, will surely checkout

[SGI-CAPP-AT2]

Hey @linuxcaffe,
This is something I've created, This is very different from mockups but it satisfies most of the conditions.
To keep Simple Look I've used TextFields with outline for every input
Also You can choose multiple types of dates while creating task
also we've suggestion for tags which uses AutoCompleteTextView

AddTaskDialogChanges.mp4

[linuxcaffe]

Hey! Just add a project field, and that looks usable!

[SGI-CAPP-AT2]

Hey! Just add a project field, and that looks usable!

Oh I forgot project field
Thanks for reminding