From 5257aad873f71bb0125d8b576748c7bf1bf3163d Mon Sep 17 00:00:00 2001 From: mistic100 Date: Wed, 25 May 2011 13:33:29 +0000 Subject: bug:2278 fixed (merge r10970 r11008 r11039 from trunk) replace FCBKcomplete by TokenInput to avoid 3rd tag issue on autocomplete git-svn-id: http://piwigo.org/svn/branches/2.2@11056 68402e56-0260-453c-a942-63ccdbb3a9ee --- .../default/template/batch_manager_global.tpl | 32 +++++------ .../themes/default/template/batch_manager_unit.tpl | 38 ++++++------- admin/themes/default/template/picture_modify.tpl | 34 ++++++------ admin/themes/default/theme.css | 62 +++++++--------------- admin/themes/roma/theme.css | 7 +++ 5 files changed, 80 insertions(+), 93 deletions(-) (limited to 'admin/themes') diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl index cadd7ce13..b01a120a1 100644 --- a/admin/themes/default/template/batch_manager_global.tpl +++ b/admin/themes/default/template/batch_manager_global.tpl @@ -5,22 +5,24 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set"); {/literal}{/footer_script} -{combine_script id='jquery.fcbkcomplete' load='footer' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'} - -{footer_script require='jquery.fcbkcomplete'}{literal} -jQuery(document).ready(function() { - jQuery("#tags").fcbkcomplete({ - json_url: "admin.php?fckb_tags=1", - cache: false, - filter_case: false, - filter_hide: true, - firstselected: true, - filter_selected: true, - maxitems: 100, - newel: true - }); +{combine_script id='jquery.tokeninput' load='footer' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} + +{footer_script require='jquery.tokeninput'} +jQuery(document).ready(function() {ldelim} + jQuery("#tags").tokenInput( + [{foreach from=$tags item=tag name=tags}{ldelim}"name":"{$tag.name}","id":"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}], + {ldelim} + hintText: '{'Type in a search term'|@translate}', + noResultsText: '{'No results'|@translate}', + searchingText: '{'Searching...'|@translate}', + newText: ' ({'new'|@translate})', + animateDropdown: false, + preventDuplicates: true, + allowCreation: true + } + ); }); -{/literal}{/footer_script} +{/footer_script} {footer_script} var nb_thumbs_page = {$nb_thumbs_page}; diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl index 9a1dde834..66b8b6b17 100644 --- a/admin/themes/default/template/batch_manager_unit.tpl +++ b/admin/themes/default/template/batch_manager_unit.tpl @@ -2,8 +2,8 @@ {include file='include/datepicker.inc.tpl'} {include file='include/colorbox.inc.tpl'} -{combine_script id='jquery.fcbkcomplete' load='async' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'} -{footer_script require='jquery.fcbkcomplete'} +{combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} +{footer_script require='jquery.tokeninput'} var tag_boxes_selector = ""; {foreach from=$elements item=element name=element} {if $smarty.foreach.element.first} @@ -13,22 +13,24 @@ prefix = ", "; {/if} tag_boxes_selector = tag_boxes_selector + prefix + "#tags-" + {$element.ID}; {/foreach} -{literal} -jQuery(document).ready(function() { - $(tag_boxes_selector).fcbkcomplete({ - json_url: "admin.php?fckb_tags=1", - cache: false, - filter_case: false, - filter_hide: true, - firstselected: true, - filter_selected: true, - maxitems: 100, - newel: true - }); - - $("a.preview-box").colorbox(); + +jQuery(document).ready(function() {ldelim} + jQuery(tag_boxes_selector).tokenInput( + [{foreach from=$tags item=tag name=tags}{ldelim}"name":"{$tag.name}","id":"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}], + {ldelim} + hintText: '{'Type in a search term'|@translate}', + noResultsText: '{'No results'|@translate}', + searchingText: '{'Searching...'|@translate}', + newText: ' ({'new'|@translate})', + animateDropdown: false, + preventDuplicates: true, + allowCreation: true + } + ); + + jQuery("a.preview-box").colorbox(); }); -{/literal}{/footer_script} +{/footer_script}

{'Batch Manager'|@translate}

@@ -112,7 +114,7 @@ jQuery(document).ready(function() { diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl index a5244f240..8cc01c43a 100644 --- a/admin/themes/default/template/picture_modify.tpl +++ b/admin/themes/default/template/picture_modify.tpl @@ -2,21 +2,23 @@ {include file='include/dbselect.inc.tpl'} {include file='include/datepicker.inc.tpl'} -{combine_script id='jquery.fcbkcomplete' load='async' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'} -{footer_script require='jquery.fcbkcomplete'}{literal} -jQuery(document).ready(function() { - jQuery("#tags").fcbkcomplete({ - json_url: "admin.php?fckb_tags=1", - cache: false, - filter_case: false, - filter_hide: true, - firstselected: true, - filter_selected: true, - maxitems: 100, - newel: true - }); +{combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} +{footer_script require='jquery.tokeninput'} +jQuery(document).ready(function() {ldelim} + jQuery("#tags").tokenInput( + [{foreach from=$tags item=tag name=tags}{ldelim}"name":"{$tag.name}","id":"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}], + {ldelim} + hintText: '{'Type in a search term'|@translate}', + noResultsText: '{'No results'|@translate}', + searchingText: '{'Searching...'|@translate}', + newText: ' ({'new'|@translate})', + animateDropdown: false, + preventDuplicates: true, + allowCreation: true + } + ); }); -{/literal}{/footer_script} +{/footer_script} {footer_script} pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set"); @@ -136,8 +138,8 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da {'Tags'|@translate} diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index e3cab2eff..870844682 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -585,50 +585,6 @@ img.ui-datepicker-trigger { margin:-3px 5px 2px 5px; } -/* 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;} - /* Add photos, direct mode */ #uploadBoxes P { margin:0; @@ -1045,6 +1001,24 @@ LEGEND { #batchManagerGlobal #applyFilterBlock {margin-top:20px;} #batchManagerGlobal .useFilterCheckbox {display:none} + +/* TokenInput (with Facebook style) */ +ul.token-input-list {overflow: hidden; height: auto !important; height: 1%;width: 400px;border: 1px solid #8496ba;cursor: text;font-size: 12px;font-family: Verdana;min-height: 1px;z-index: 999;margin: 0;padding: 0;background-color: #fff;list-style-type: none;clear: left;} +ul.token-input-list li input {border: 0;width: 100px;padding: 3px 8px;background-color: white;margin: 2px 0;-webkit-appearance: caret;} +li.token-input-token {overflow: hidden; height: auto !important; height: 15px;margin: 3px;padding: 1px 3px;background-color: #eff2f7;color: #000;cursor: default;border: 1px solid #ccd5e4;font-size: 11px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;float: left;white-space: nowrap;} +li.token-input-token p {display: inline;padding: 0;margin: 0;} +li.token-input-token span {color: #a6b3cf;margin-left: 5px;font-weight: bold;cursor: pointer;} +li.token-input-selected-token {background-color: #5670a6;border: 1px solid #3b5998;color: #fff;} +li.token-input-input-token {float: left;margin: 0;padding: 0;list-style-type: none;width:10px;} +div.token-input-dropdown {position: absolute;width: 400px;background-color: #fff;overflow: hidden;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;cursor: default;font-size: 11px;font-family: Verdana;z-index: 1;} +div.token-input-dropdown p {margin: 0;padding: 5px;font-weight: bold;color: #777;} +div.token-input-dropdown ul {margin: 0;padding: 0;} +div.token-input-dropdown ul li {background-color: #fff;padding: 3px;margin: 0;list-style-type: none;} +div.token-input-dropdown ul li.token-input-dropdown-item {background-color: #fff;} +div.token-input-dropdown ul li.token-input-dropdown-item2 {background-color: #fff;} +div.token-input-dropdown ul li em {font-weight: bold;font-style: normal;} +div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color: #3b5998;color: #fff;} + .warning { background:url(icon/warning.png) no-repeat top left; width: 130px; diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 8830f5a12..3fb62a2df 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -245,3 +245,10 @@ display:block; height:85px; left:225px; position:relative; top:-42px; width:313p #batchManagerGlobal .thumbSelected {background-color:#555 !important} #batchManagerGlobal #selectedMessage {background-color:#555; color:#ddd;} +/* TokenInput (with Facebook style for ROMA) */ +ul.token-input-list {border-color:#666;background-color:#444;} +ul.token-input-list li input {background-color:#444;} +li.token-input-token span {color:#878787;} +div.token-input-dropdown {background-color:#eee;border-color:#666;} +div.token-input-dropdown ul li {background-color:#eee;} +div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800;} -- cgit v1.2.3