Tag picker

asked 2015-08-11 12:58:20 +0300

François

1836 ●22 ●33 ●34

http://francois.kubler.or...

Hi,

My issue is really simple : I need a tag picker for my app.

I've been thinking about it for a few days, and the only solutions I can think about are not very "Sailfishy" :/

So, what I'd like is to gather community ideas (and maybe even Sailors' ones) and build a TagPicker component that I would share with other devs/apps needing one. This would also bring consistency in UX.

My needs are :

Allow the user to pick one or more tags at the same time ;
Allow user to untag ;
Allow the user to create one or more new tag(s) ;
Some kind of autocompletion/filtering from a list of existing tags ;
Initialize the TagPicker with selected tags.

For now, the best solution I can see is to use a SilicaListView containing TextSwitches. On top of this list, a SearchField would allow the user to filter the list and/or create new tags. A "+" button on the right side of the SearchField would allow the user to create the new tag.

I already have a component to show tags (basically, Labels put in a Flow layout) and I'm pretty happy with it. I think it could be part of the final TagPicker component (touching it would open the TagPicker).

What do you think about this ? Any ideas ?

edit retag flag offensive close delete

Comments

The general design looks good to me. :)

MartinK ( 2015-08-11 13:47:30 +0300 )edit

I support your idea, and would use it also. Besides, I was quite a fan of the N900 tag picker. What was its strength, in my opinion, was that it makes the recently / most used tags obvious to select.

In your implementation, it should be nice to have the same capability. I thought already about it for a while, but didn't find any simple solution. The list may be sorted by recently / most used tags, or alphabetically (switchable with a pulley menu maybe).

Do you think it could be a good idea (in an ideal world) to have the tag base shared between applications ? This may influence the design of the underliying implementation.

Which licence do you plan to use ? To you think you will put the code in a Github or equivalent, so we can begin to use it also and report usability / design remarks ?

Damien Caliste ( 2015-08-11 14:50:35 +0300 )edit

@Damien Caliste : I don't know how the N900 tag picker was but I'll try to have a look at it.

Having a tag base shared between applications is a very good idea. But that should be part of the official API. I don't see how we (the comunity) could distribute this. Any idea ? (Tags application ? How do we resolve dependencies ?...)

I'll put the code in a Github as soon as I get something working. I don't know about the licence yet (and I don't really care about it to be honest. I will probably chose LGPL or something similar).

But I would like to have some more comments / opinions about this before getting (really) started.

Thanks for your thoughts :)

François ( 2015-08-11 15:17:33 +0300 )edit

@MartinK : I see a few drawbacks with the solution I gave :

I'm not that fond of the "+ button", I'd like something more sailfishy (but don't know what :/ ).
The list is very different from the "tag cloud" that would open it : I'm not sure it's ideal for the user experience.
If the list of existing tags is long enough, the user won't be able to review his selection before validating the dialog.

I'm pretty sure we can improve that :)

François ( 2015-08-11 17:34:21 +0300 )edit

Comments

beautiful! Would be nice if tag cloud would be center aligned.

Macilaci457 ( 2015-08-21 20:45:49 +0300 )edit

Good, I'm waiting for availability of source code to try it and report feedback on devel usability. Thank you very much for your effort.

Damien Caliste ( 2015-08-28 10:22:57 +0300 )edit

@Macilaci457: Thanks for your answer :) I tried to center-align it but it looks weird when you have only a very few tags. I'll leave it left-aligned for now and propose a vote or something like that when the component will have its own repo.

@Damien Caliste: Thanks for your comment, it's very encouraging :) The source code is available on my GitHub : https://github.com/Frzk/Reminders/

WARNING : it's a big WIP :

I have to find a way to make the SilicaFlickable work with the Flow in the Dialog ;
I need to find the best way to feed the TagPicker with existing tags (for now, it's just a hard-coded ListModel);
I need to find the best way to return the selected Tags when the Dialog is accepted ;
I need to find a way to distribute it, since it requires some C++ files and some qmlRegisterType calls to work.
Less important, I have a few issues with font sizes, but this is not directly related to the TagPicker.

Any help, remarks or ideas are welcome !

François ( 2015-08-28 11:33:01 +0300 )edit

Thanks for the code pointer. I'll try it in the coming days or weeks… Congrats anyway for launching this.

Damien Caliste ( 2015-08-28 13:12:49 +0300 )edit

Hello @François, I've used part of your code for the UI part of a project of mine to add tags to the document application. Since I didn't found any licence information, I took the liberty to add your name in a GPLv2 header for the parts I'm using (namely Tag.qml from Thomas Perl and parts of TagPicker.qml). You can find it in a beta shape at https://github.com/dcaliste/sailfish-office/tree/tags the mentionned code parts are in qml/Tag.qml and qml/TagsSelector.qml.

Do you agree for me to reuse your code like that ? Do you want to suggest some modifications ? When I'll be happy with the code, I plan to submit it upstream, since parts are your own code, do you agree ?

Damien Caliste ( 2015-10-16 16:53:44 +0300 )edit

Tag picker

Comments

1 Answer

Comments

Question tools

Stats

Related questions

Tag picker

Comments

1 Answer

Comments

Question tools

Public thread

Stats

Related questions