0000724: improve ergonomy on tag selection

(0002102)
mathiasm (manager)
2008.01.29 17:47

Actually, he meant to be aligned rather than sorted.

(0002104)
jpupier (reporter)
2008.01.29 19:01

>Actually, he meant to be aligned rather than sorted.

Aligned & sorted..
:o)

(0002222)
plg (manager)
2008.05.29 00:23

We all agree that tags are sorted, but not aligned.

Adding a table would really make the tag list better? How do you configure the number of columns to display? What if 3 tags are very long string (and of course, they are in 3 distinct columns?

(0002223)
jpupier (reporter)
2008.05.29 08:32

Maybe the checkbox interface is not a good one..
Two lists with a "drag & drop" may be better

---------------- ----------------
Available Tags Selected Tags
---------------- ----------------
Pets Horses
Travels Country
Cats |>
Fish <|
Sea

Jérôme

(0002229)
plg (manager)
2008.06.04 00:29
edited on: 2008.06.04 00:31

Your last suggestion already sounds better than the table. But I think we need more ideas to make this feature more usable (in term of ergonomy). I have ideas based on other tools like dotclear or wordpress. I have to see the code related to it.

Anyway, I don't think it can be considered as a bug (it works as expected). It's just that the ergonomy does not fit large tag sets. The improvement should be added on Butterfly, not on branch 1.7.

(0002243)
mathiasm (manager)
2008.06.07 09:42

We may use a liquid layout as for the thumbnails.
The edge poitn is to defined the width of the block. Maybe a setting in config_default, or better, in Administration > Configuration.
If the text of the tag is too long, apply wordwrap on it.Thus the line will be taller but the column-like alignment will be kept.

(0002244)
mathiasm (manager)
2008.06.09 14:35

New way to handle tags in admin:

The trick is to set the correct width and height that suits your needs.
The height should be forced to the maximum number of lines you will have in your
tags. Otherwise, you will have some lines with just 1 element.
The width should be adjusted to the width of the longest word. I did set it to
100px, because I am sure it always needs tweaking :-)
I upload several screenshosts in various widths.

Well, I set the gray background to better check CSS config, but I feel like
it is more readable this way.

You should add this piece of code at the end of template\yoga\theme\admin\theme.css

#theAdminPage UL.tagSelection LI { width: 100px; padding: 2px 2px 5px; margin: 2px;
background-color: 0000333; float: left; white-space: normal;
height: 2.2em;}
/* here, !important is to counter the template\yoga\default-layout.css line 226 =>
UL.tagSelection LI { display: inline; white-space: nowrap; }
*/
#theAdminPage UL.tagSelection LI INPUT { float: left; margin-right: 2px}
/* to get the P on a new line */
#theAdminPage UL.tagSelection + P { clear: both;}

(0002245)
mathiasm (manager)
2008.06.09 14:48

We can also add a summary bar, like the Calendar Bar, which permits to choose which tags to show, by selecting their first letter; with an additionnal show all/Hide all to reset display.
All tags will be loaded, but hidden by defautl, so checkboxes are reminded but can be hidden to better find other ones.
Example:
one click on a letter show all tags beginning by this letter, another click will hide them.
So clicking on A, then on C will show all tags beginnning by A and C.

(0002246)
plg (manager)
2008.06.11 23:13

mathiasm, I really don't think that just changing the display is enough. I think we have to completely think the ergonomy once again (I admit I had not really think a lot for this first version of tag management) as you propose in your last note.

You can also think of something like what delicious proposes (AJAX) even if I find it a bit limited.

(0002247)
plg (manager)
2008.06.19 12:41

http://forum.phpwebgallery.net/viewtopic.php?pid=33284#p33284 [^]

rvelices had suggested to introduce a piece of AJAX to dynamically search among existing tags. That's an interesting point :-)

(0002249)
plg (manager)
2008.06.27 00:14
edited on: 2008.06.27 00:14

see also aeonflux_spy post on http://forum.phpwebgallery.net/viewtopic.php?pid=90043#p90043 [^]

(0002734)
plg (manager)
2009.07.29 00:55

There is currently a forum topic related to this feature request: http://piwigo.org/forum/viewtopic.php?id=15260 [^]

(0003495)
svn (reporter)
2010.03.06 23:10

[Subversion] r5067 by plg on trunk

-----[Subversion commit log]----------------------------------------------------
feature 724: improved "add tags" form. Instead of a big list of checkboxes,
displays a dynamic list of tags with jQuery, with suggestions based on
existing tags and the ability to create new tags on the fly.

The change was applied only on admin/picture_modify.php for test purpose.

Note : FCBKcomplete 2.7 had a bug on "remote tag" click, and the bug was fixed
on 2.7.1. But the suggestions were not working with 2.7.1. So I took the 2.7
and applied the tiny change to make the "remove tag" click work.

(0003559)
svn (reporter)
2010.03.19 13:50

[Subversion] r5188 by plg on trunk

-----[Subversion commit log]----------------------------------------------------
feature 724: FCBKcomplete propagated to element_set_global and
element_set_unit to manage tags.

Note: multiple instances of FCBKcomplete on the same page does not work as
good as a single instance.

(0003560)
svn (reporter)
2010.03.19 14:15

[Subversion] r5189 by plg on trunk

-----[Subversion commit log]----------------------------------------------------
feature 724: bug fixed on element_set_unit for FCKB, better use
$("#tags-123, #tags-456") than $(".tags") to apply FCKB widget on
the select box.

Use a dedicated function to return the tag list, formatted for FCKB.

(0003566)
svn (reporter)
2010.03.20 00:20

[Subversion] r5198 by plg on trunk

-----[Subversion commit log]----------------------------------------------------
feature 724: improvement, auto-complete is not case sensitive anymore

Issue History
Date Modified	Username	Field	Change
2007.07.18 14:07	jpupier	New Issue
2007.07.18 14:07	jpupier	browser	=> any
2007.07.18 14:07	jpupier	Web server	=> Apache 1.3.x
2007.10.04 09:17	plg	Assigned To	=> plg
2007.10.04 09:17	plg	Status	new => feedback
2007.10.04 09:17	plg	Description Updated
2007.10.04 09:17	plg	Additional Information Updated
2007.10.04 09:18	plg	Additional Information Updated
2007.10.05 09:50	jpupier	File Added: Tags.png
2008.01.29 17:47	mathiasm	Note Added: 0002102
2008.01.29 19:01	jpupier	Note Added: 0002104
2008.05.29 00:23	plg	Note Added: 0002222
2008.05.29 08:32	jpupier	Note Added: 0002223
2008.05.29 13:53	plg	Relationship added	related to 0000828
2008.06.04 00:29	plg	Note Added: 0002229
2008.06.04 00:31	plg	Note Edited: 0002229
2008.06.04 00:31	plg	Severity	tweak => feature
2008.06.04 00:31	plg	Summary	Tag checkboxes alignment => improve ergonomy on tag selection
2008.06.07 09:42	mathiasm	Note Added: 0002243
2008.06.07 22:23	plg	Target Version	=> Butterfly
2008.06.09 14:35	mathiasm	Note Added: 0002244
2008.06.09 14:37	mathiasm	File Added: 100px.png
2008.06.09 14:43	mathiasm	File Added: 150px-1_line_height.png
2008.06.09 14:43	mathiasm	File Added: 150px.png
2008.06.09 14:43	mathiasm	File Added: 150px-no_height.png
2008.06.09 14:48	mathiasm	Note Added: 0002245
2008.06.11 23:13	plg	Note Added: 0002246
2008.06.19 12:41	plg	Note Added: 0002247
2008.06.27 00:14	plg	Note Added: 0002249
2008.06.27 00:14	plg	Note Edited: 0002249
2009.07.29 00:55	plg	Note Added: 0002734
2010.03.06 23:10	svn	Checkin
2010.03.06 23:10	svn	Note Added: 0003495
2010.03.19 13:50	svn	Checkin
2010.03.19 13:50	svn	Note Added: 0003559
2010.03.19 14:15	svn	Checkin
2010.03.19 14:15	svn	Note Added: 0003560
2010.03.20 00:20	svn	Checkin
2010.03.20 00:20	svn	Note Added: 0003566
2010.04.14 17:20	plg	Status	feedback => closed
2010.04.14 17:20	plg	Resolution	open => fixed
2010.04.14 17:20	plg	Fixed in Version	=> 2.1.0RC1
2010.04.14 17:20	plg	Target Version	2.0.0 => 2.1.0RC1

Notes
(0002102) mathiasm (manager) 2008.01.29 17:47	Actually, he meant to be aligned rather than sorted.

(0002104) jpupier (reporter) 2008.01.29 19:01	>Actually, he meant to be aligned rather than sorted. Aligned & sorted.. :o)

(0002222) plg (manager) 2008.05.29 00:23	We all agree that tags are sorted, but not aligned. Adding a table would really make the tag list better? How do you configure the number of columns to display? What if 3 tags are very long string (and of course, they are in 3 distinct columns?

(0002223) jpupier (reporter) 2008.05.29 08:32	Maybe the checkbox interface is not a good one.. Two lists with a "drag & drop" may be better ---------------- ---------------- Available Tags Selected Tags ---------------- ---------------- Pets Horses Travels Country Cats \|> Fish <\| Sea Jérôme

(0002229) plg (manager) 2008.06.04 00:29 edited on: 2008.06.04 00:31	Your last suggestion already sounds better than the table. But I think we need more ideas to make this feature more usable (in term of ergonomy). I have ideas based on other tools like dotclear or wordpress. I have to see the code related to it. Anyway, I don't think it can be considered as a bug (it works as expected). It's just that the ergonomy does not fit large tag sets. The improvement should be added on Butterfly, not on branch 1.7.

(0002243) mathiasm (manager) 2008.06.07 09:42	We may use a liquid layout as for the thumbnails. The edge poitn is to defined the width of the block. Maybe a setting in config_default, or better, in Administration > Configuration. If the text of the tag is too long, apply wordwrap on it.Thus the line will be taller but the column-like alignment will be kept.

(0002244) mathiasm (manager) 2008.06.09 14:35	New way to handle tags in admin: The trick is to set the correct width and height that suits your needs. The height should be forced to the maximum number of lines you will have in your tags. Otherwise, you will have some lines with just 1 element. The width should be adjusted to the width of the longest word. I did set it to 100px, because I am sure it always needs tweaking :-) I upload several screenshosts in various widths. Well, I set the gray background to better check CSS config, but I feel like it is more readable this way. You should add this piece of code at the end of template\yoga\theme\admin\theme.css #theAdminPage UL.tagSelection LI { width: 100px; padding: 2px 2px 5px; margin: 2px; background-color: 0000333; float: left; white-space: normal; height: 2.2em;} /* here, !important is to counter the template\yoga\default-layout.css line 226 => UL.tagSelection LI { display: inline; white-space: nowrap; } / #theAdminPage UL.tagSelection LI INPUT { float: left; margin-right: 2px} / to get the P on a new line */ #theAdminPage UL.tagSelection + P { clear: both;}

(0002245) mathiasm (manager) 2008.06.09 14:48	We can also add a summary bar, like the Calendar Bar, which permits to choose which tags to show, by selecting their first letter; with an additionnal show all/Hide all to reset display. All tags will be loaded, but hidden by defautl, so checkboxes are reminded but can be hidden to better find other ones. Example: one click on a letter show all tags beginning by this letter, another click will hide them. So clicking on A, then on C will show all tags beginnning by A and C.

(0002246) plg (manager) 2008.06.11 23:13	mathiasm, I really don't think that just changing the display is enough. I think we have to completely think the ergonomy once again (I admit I had not really think a lot for this first version of tag management) as you propose in your last note. You can also think of something like what delicious proposes (AJAX) even if I find it a bit limited.

(0002247) plg (manager) 2008.06.19 12:41	http://forum.phpwebgallery.net/viewtopic.php?pid=33284#p33284 [^] rvelices had suggested to introduce a piece of AJAX to dynamically search among existing tags. That's an interesting point :-)

(0002249) plg (manager) 2008.06.27 00:14 edited on: 2008.06.27 00:14	see also aeonflux_spy post on http://forum.phpwebgallery.net/viewtopic.php?pid=90043#p90043 [^]

(0002734) plg (manager) 2009.07.29 00:55	There is currently a forum topic related to this feature request: http://piwigo.org/forum/viewtopic.php?id=15260 [^]

(0003495) svn (reporter) 2010.03.06 23:10	[Subversion] r5067 by plg on trunk -----[Subversion commit log]---------------------------------------------------- feature 724: improved "add tags" form. Instead of a big list of checkboxes, displays a dynamic list of tags with jQuery, with suggestions based on existing tags and the ability to create new tags on the fly. The change was applied only on admin/picture_modify.php for test purpose. Note : FCBKcomplete 2.7 had a bug on "remote tag" click, and the bug was fixed on 2.7.1. But the suggestions were not working with 2.7.1. So I took the 2.7 and applied the tiny change to make the "remove tag" click work.

(0003559) svn (reporter) 2010.03.19 13:50	[Subversion] r5188 by plg on trunk -----[Subversion commit log]---------------------------------------------------- feature 724: FCBKcomplete propagated to element_set_global and element_set_unit to manage tags. Note: multiple instances of FCBKcomplete on the same page does not work as good as a single instance.

(0003560) svn (reporter) 2010.03.19 14:15	[Subversion] r5189 by plg on trunk -----[Subversion commit log]---------------------------------------------------- feature 724: bug fixed on element_set_unit for FCKB, better use $("#tags-123, #tags-456") than $(".tags") to apply FCKB widget on the select box. Use a dedicated function to return the tag list, formatted for FCKB.

(0003566) svn (reporter) 2010.03.20 00:20	[Subversion] r5198 by plg on trunk -----[Subversion commit log]---------------------------------------------------- feature 724: improvement, auto-complete is not case sensitive anymore