From 1c545c601beeeaafacd367d7af2077742c0fcce6 Mon Sep 17 00:00:00 2001 From: plegall Date: Sat, 6 Mar 2010 22:10:23 +0000 Subject: 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. git-svn-id: http://piwigo.org/svn/trunk@5067 68402e56-0260-453c-a942-63ccdbb3a9ee --- admin/template/goto/default-layout.css | 44 ++++++++++++++++++++++++ admin/template/goto/icon/fcbkcomplete_close.gif | Bin 0 -> 90 bytes admin/template/goto/picture_modify.tpl | 27 +++++++++++++-- 3 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 admin/template/goto/icon/fcbkcomplete_close.gif (limited to 'admin/template') diff --git a/admin/template/goto/default-layout.css b/admin/template/goto/default-layout.css index 14116e1c2..9f4437d06 100644 --- a/admin/template/goto/default-layout.css +++ b/admin/template/goto/default-layout.css @@ -455,3 +455,47 @@ UL.tagSelection LI { img.ui-datepicker-trigger { cursor : pointer; } + +/* jQuery FCBKcomplete */ +/* TextboxList sample CSS */ +ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; } +*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */ +ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;} +ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; } +ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; } +ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; } +ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */ +ul.holder li.bit-input input.smallinput { width: 20px; } + +/* Facebook demo CSS */ +#add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; } +form ol li { list-style-type: none; } +form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; } +form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; } +form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; } +form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; } +form ul.holder { width: 500px; } +form ul { margin: 0 !important } +ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;} +#apple-list ul.holder li.bit-input { margin: 0; } +#apple-list ul.holder li.bit-input input.smallinput { width: 5px; } +ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; } +ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; } +ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url(icon/fcbkcomplete_close.gif); } +ul.holder li.bit-box a.closebutton:hover { background-position: 7px; } +ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; } + +/* Autocompleter */ + +.facebook-auto { display: none; position: absolute; width: 512px; background: #eee; } +.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; } +.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999} +.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee } +.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; } +.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; } +.facebook-auto ul li.auto-focus em { background: none; } +.deleted { background-color:#4173CC !important; color:#ffffff !important;} +.hidden { display:none;} + +#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; } +.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;} \ No newline at end of file diff --git a/admin/template/goto/icon/fcbkcomplete_close.gif b/admin/template/goto/icon/fcbkcomplete_close.gif new file mode 100644 index 000000000..cc2199248 Binary files /dev/null and b/admin/template/goto/icon/fcbkcomplete_close.gif differ diff --git a/admin/template/goto/picture_modify.tpl b/admin/template/goto/picture_modify.tpl index 4c8315d9b..77f1671a6 100644 --- a/admin/template/goto/picture_modify.tpl +++ b/admin/template/goto/picture_modify.tpl @@ -1,8 +1,25 @@ - {include file='include/autosize.inc.tpl'} {include file='include/dbselect.inc.tpl'} {include file='include/datepicker.inc.tpl'} +{known_script id="jquery.fcbkcomplete" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.fcbkcomplete.js"} +{literal} + +{/literal} + {literal}