Ask / Submit
5

Tag picker

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

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
1

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

1 Answer

Sort by » oldest newest most voted
3

answered 2015-08-21 17:43:50 +0300

Allright, I've started to work on it with some ideas I had... It's not fully working yet, but I can already :

  • Display a Tag cloud ;
  • When enabled, this Tag cloud is clickable and opens a TagPicker Dialog ;
  • In this dialog you can see another Tag cloud with both selected and available (existing) tags ;
  • You can (un)select a tag by clicking on it ;
  • The searchfield allows you to filter the Tag cloud ;
  • It also allows you to create a new Tag : when you type, a new unselected Tag appears at the very begining of the Tag cloud, clicking it creates this new tag and empties the searchfield.

Mandatory screenshot of the Tag cloud :

Tag cloud

The Dialog :

TagPicker Dialog

Creating a new Tag :

image description

edit flag offensive delete publish link more

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
1

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
Login/Signup to Answer

Question tools

Follow
4 followers

Stats

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

Seen: 258 times

Last updated: Aug 21 '15