Changeset 72cc08e in indico


Ignore:
Timestamp:
04/23/12 14:46:28 (13 months ago)
Author:
Pedro Ferreira <jose.pedro.ferreira@…>
Branches:
master, hello-world-walkthrough, ipv6, v0.98-series, v0.98.2, v0.98.3, v0.99, 051b2622c51afb171a1dedb46a0df4fbb0cbd02e, 4c7d4152dff271ba5df5a8606605969cab454080
Children:
2ffcbf
Parents:
db1132
git-author:
Pedro Ferreira <jose.pedro.ferreira@…> (04/20/12 18:57:09)
git-committer:
Pedro Ferreira <jose.pedro.ferreira@…> (04/23/12 14:46:28)
Message:

[FIX] Simplified search tag code

  • Put it in separate jQuery UI widget;
  • Made it look nicer;
  • Also made search dialog look nicer;
Location:
indico
Files:
1 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • indico/MaKaC/webinterface/tpls/DomainControlFrame.tpl

    r128e2e r72cc08e  
    5959                          if (!$('.savedText', $this.closest('li')).length) { 
    6060                              var saved = $('<span class="savedText">saved</span>'); 
    61                               $this.closest('li').append(saved);    
     61                              $this.closest('li').append(saved); 
    6262                              saved.delay(1000).fadeOut('slow', function() { 
    6363                                  $(this).remove(); 

  • indico/MaKaC/webinterface/tpls/Search.tpl

    rcfc263 r72cc08e  
    180180 
    181181 
    182 IndicoUI.executeOnLoad(function(){ 
     182$(function(){ 
    183183 
    184184% if len(eventResults) > 0 or len(contribResults) > 0: 
    … …  
    205205startDate.set('${ startDate }'); 
    206206endDate.set('${ endDate }'); 
    207  
    208  
    209 if ($('#categId').attr('value')!=0){ 
    210     $('#searchText2').before('<div id="searchTag2" class="inCategory2">'+ 
    211             '<div id="cross2" class="cross2">x</div>'+ 
    212             '<div id="categorySearch2">${_("in %s") % categName}</div>'+ 
    213             '<div id="noCategorySearch2" style="display: none;">${_("Everywhere")}</div></div>​'); 
    214 } 
    215 else{ 
    216     $('#searchText2').before('<div id="searchTag2" class="everywhere2">'+ 
    217             '<div id="cross2" class="cross2" style="display: none;">x</div>'+ 
    218             '<div id="categorySearch2" style="display: none;">${_("in %s") % categName}</div>'+ 
    219             '<div id="noCategorySearch2">${_("Everywhere")}</div></div>​'); 
    220 } 
    221  
    222 $('#cross2').click(function() { 
    223     $('#categorySearch2').fadeOut('fast'); 
    224     $('#cross2').fadeOut('fast'); 
    225  
    226      $('#searchTag2').animate({ 
    227         width: $('#noCategorySearch2').width(), 
    228         opacity: 0.6 
    229     }, 500); 
    230  
    231  
    232     $('#categId').attr('value', 0); 
    233     $('#searchTag2').attr('class', 'everywhere2'); 
    234     $('#noCategorySearch2').fadeIn('fast'); 
    235  
    236207}); 
    237 var animDone2=false; 
    238 $('.everywhere2').live('mouseenter', function() { 
    239     $('#noCategorySearch2').addClass('hasFocus'); 
    240     setTimeout(function(){ 
    241         if ($('#noCategorySearch2').hasClass('hasFocus')){ 
    242             if (${categId}!=0){ 
    243                 $('#noCategorySearch2').fadeOut('fast'); 
    244  
    245                     $('#searchTag2').animate({ 
    246                         width: $('#categorySearch2').width(), 
    247                         opacity: 1 
    248                     },500,'linear', function(){animDone2=true;}); 
    249  
    250                 $('#searchTag2').attr('class', 'inCategoryOver2'); 
    251                 $('#categorySearch2').fadeIn('fast'); 
    252             } 
    253         } 
    254     }, 200); 
    255  
    256 }); 
    257  
    258 $('#noCategorySearch2').mouseleave(function() { 
    259     $('#noCategorySearch2').removeClass('hasFocus'); 
    260 }); 
    261  
    262 $('#categorySearch2').mouseenter(function() { 
    263     $('#noCategorySearch2').removeClass('hasFocus'); 
    264 }); 
    265  
    266 $('.inCategoryOver2').live('mouseleave', function() { 
    267     $('#noCategorySearch2').removeClass('hasFocus'); 
    268     animDone2=false; 
    269     setTimeout(function(){ 
    270         if(!$('#noCategorySearch2').hasClass('hasFocus')){ 
    271             if ($('#categId').attr('value')==0){ 
    272                 $('#categorySearch2').fadeOut('fast'); 
    273                 $('#cross2').fadeOut('fast'); 
    274  
    275                 $('#searchTag2').animate({ 
    276                 width: $('#noCategorySearch2').width(), 
    277                 opacity: 0.6 
    278                 },500); 
    279  
    280  
    281                 $('#searchTag2').attr('class', 'everywhere2'); 
    282                 $('#noCategorySearch2').fadeIn('fast'); 
    283             } 
    284         } 
    285     }, 200); 
    286 }); 
    287  
    288 $('#categorySearch2').click(function() { 
    289     if($('#searchTag2').attr('class')=='inCategoryOver2' && animDone2==true){ 
    290         animDone2=false; 
    291         $('#searchTag2').animate( 
    292                 {width: $('#categorySearch2').width()+$('#cross2').width()+6, 
    293                  opacity: 1}, 
    294                  500, 
    295                  'swing', 
    296                  function(){ 
    297                      $('#cross2').fadeIn('fast'); 
    298                      } 
    299                  ); 
    300  
    301         $('#searchTag2').attr('class', 'inCategory2'); 
    302         $('#categId').attr('value', ${categId}); 
    303     } 
    304 }); 
    305  
    306 $('#noCategorySearch2').click(function() { 
    307     if (navigator.platform.indexOf("iPad")!=-1 || 
    308         navigator.platform.indexOf("iPod")!=-1 || 
    309         navigator.platform.indexOf("iPhone")!=-1 || 
    310         navigator.userAgent.indexOf("Android")!=-1){ 
    311         if (${categId}!=0){ 
    312             $('#noCategorySearch2').fadeOut('fast'); 
    313             $('#categorySearch2').fadeIn('fast'); 
    314             $('#searchTag2').attr('class', 'inCategory'); 
    315             $('#categId').attr('value', ${categId}); 
    316             $('#searchTag2').animate( 
    317                 {width: $('#categorySearch2').width()+$('#cross2').width()+6, 
    318                 opacity: 1}, 
    319                 500, 
    320                 'swing', 
    321                 function(){ 
    322                 $('#cross2').fadeIn('fast'); 
    323                 } 
    324             ); 
    325         } 
    326     } 
    327 }); 
    328  
    329 $('.inCategoryOver2').live('mouseover', function(event) { 
    330     $('.inCategoryOver2').qtip({ 
    331         content:'${_("Click to search inside %s." % categName)}', 
    332         position:{ 
    333             at: 'bottom center', 
    334             my: 'top center' 
    335         }, 
    336         style: { 
    337             classes: 'ui-tooltip-shadow' 
    338         }, 
    339         events: { 
    340             show: function(event, api) { 
    341                if($('#searchTag2').attr('class')!='inCategoryOver2') { 
    342                   try { event.preventDefault(); } catch(e) {} 
    343                } 
    344             } 
    345          }, 
    346         show: { 
    347             event: event.type, 
    348             ready: true 
    349          } 
    350         }, event); 
    351 }); 
    352  
    353  
    354  
    355  
    356 }); 
    357  
    358208</script> 

  • indico/MaKaC/webinterface/tpls/SearchBox.tpl

    r1dd1a0 r72cc08e  
    11<form method="get" action="${ searchAction }" id="searchBoxForm" style="margin: 0px;"> 
    2 <input type="hidden" id="searchCategId" name="categId" value="${categId}"/> 
     2<input type="hidden" id="searchCategId" name="categId" value="0" data-current="${categId}" data-current-name="${categName}"/> 
    33<div id="UISearchBox"> 
    44    <div id="searchControls"> 
    5         <div class="yellowButton searchButton"> 
    6             <input style="background-color: transparent;" class="button" type="submit" value="${ _('Search')}" onclick="javascript: return verifyForm();" id="searchSubmit"/> 
     5        <div class="searchButton"> 
     6 
    77        </div> 
    8         <div id="yoo" class="${ moreOptionsClass }" onclick="javascript:return expandMenu(this);" on></div> 
    9         <input style="background-color: transparent; margin-top: -1px;" type="text" id="searchText" name="p" /> 
     8        <div id="moreOptions" class="${ moreOptionsClass }" onclick="javascript:return expandMenu(this);" on></div> 
     9        <input style="background-color: transparent;" type="text" id="searchText" name="p" /> 
    1010</div> 
    1111 
    … …  
    4141                <td> 
    4242                    <span id="startDatePlaceBox"> 
     43                      <input name="startDate" id="startDate" type="text" /> 
    4344                    </span> 
    4445                </td> 
    … …  
    4849                <td> 
    4950                    <span id="endDatePlaceBox"> 
     51                      <input name="endDate" id="endDate" type="text" /> 
    5052                    </span> 
    5153                </td> 
    … …  
    6668        var controls = searchControls; 
    6769 
    68         IndicoUI.Effect.appear(extraOptions, 'block'); 
     70        $('#extraOptions').width($('#searchControls').width()).slideDown('fast'); 
    6971        elem.dom.extraShown=true; 
    7072        resetForm(); 
    … …  
    7274    else 
    7375    { 
    74         IndicoUI.Effect.disappear(extraOptions) 
     76        $('#extraOptions').slideUp('fast'); 
    7577        elem.dom.extraShown=null; 
    7678        resetForm(); 
    … …  
    9395function verifyForm() 
    9496{ 
    95     if ((startDateBox.get() && !startDateBox.processDate()) || (endDateBox.get() && !endDateBox.processDate())) 
    96     { 
    97         return false; 
    98     } 
    99     else 
    100     { 
    101         return true; 
    102     } 
     97    var startDate = $('#startDate').val(); 
     98    var endDate = $('#endDate').val(); 
     99    return Util.parseDateTime(startDate, IndicoDateTimeFormats.DefaultHourless) && 
     100        Util.parseDateTime(endDate, IndicoDateTimeFormats.DefaultHourless); 
    103101} 
    104102 
    105103 
    106  
    107 var startDateBox = IndicoUI.Widgets.Generic.dateField(null, {name: 'startDate'}); 
    108 var endDateBox = IndicoUI.Widgets.Generic.dateField(null, {name: 'endDate'}); 
    109  
    110104var searchControls = $E('searchControls'); 
    111 var extraOptions = $E('extraOptions'); 
    112105 
    113106var intelligentSearchBox = new IntelligentSearchBox({name: 'p', id: 'searchText', 
    114                                  style: {backgroundColor: 'transparent', outline: 'none', marginTop: '-1px'} 
     107                                 style: {backgroundColor: 'transparent', outline: 'none'} 
    115108                 }, $E('UISearchBox'), $E('searchSubmit')); 
    116109 
    117 IndicoUI.executeOnLoad(function(){ 
    118   $E('startDatePlaceBox').set(startDateBox); 
    119   $E('endDatePlaceBox').set(endDateBox); 
    120   $E('searchText').replaceWith( 
    121          intelligentSearchBox.draw() 
    122      ); 
    123110 
    124   if ($('#searchCategId').attr('value')!=0){ 
    125       $('#yoo').after('<div id="searchTag" class="inCategory">'+ 
    126               '<div id="cross" class="cross">x</div>'+ 
    127               '<div id="categorySearch">${_("in %s") % categName}</div>'+ 
    128               '<div id="noCategorySearch" style="display: none;">${_("Everywhere")}</div></div>​'); 
    129   } 
    130   else{ 
    131       $('#yoo').after('<div id="searchTag" class="everywhere">'+ 
    132               '<div id="cross" class="cross" style="display: none;">x</div>'+ 
    133               '<div id="categorySearch" style="display: none;">${_("in %s") % categName}</div>'+ 
    134               '<div id="noCategorySearch">${_("Everywhere")}</div></div>​'); 
    135   } 
     111$(function() { 
     112    $('#startDate').datepicker(); 
     113    $('#endDate').datepicker(); 
    136114 
    137   $('#cross').click(function() { 
    138       $('#categorySearch').fadeOut('fast'); 
    139       $('#cross').fadeOut('fast'); 
     115    $E('searchText').replaceWith( 
     116        intelligentSearchBox.draw() 
     117    ); 
    140118 
    141        $('#searchTag').animate({ 
    142           width: $('#noCategorySearch').width() 
    143       }, 500); 
     119    var where = $('#searchCategId').data('current'); 
     120    var target_title = $('#searchCategId').data('current-name'); 
    144121 
     122    $('.searchButton').click(function() { 
     123        if (verifyForm()) { 
     124            $('#searchBoxForm').submit(); 
     125        }; 
     126    }) 
    145127 
    146       $('#searchCategId').attr('value', 0); 
    147       $('#searchTag').attr('class', 'everywhere'); 
    148       $('#noCategorySearch').fadeIn('fast'); 
     128    $('#searchText').keypress(function(e) { 
     129        if(e.which == 13){ 
     130            $('form#searchBoxForm').submit(); 
     131        } 
     132    }); 
    149133 
    150   }); 
    151 var animDone=false; 
    152   $('.everywhere').live('mouseenter', function() { 
    153       $('#noCategorySearch').addClass('hasFocus'); 
    154       setTimeout(function(){ 
    155           if ($('#noCategorySearch').hasClass('hasFocus')){ 
    156               if (${categId}!=0){ 
    157                   $('#noCategorySearch').fadeOut('fast'); 
    158  
    159                           $('#searchTag').animate({ 
    160                               width: $('#categorySearch').width() 
    161                           },500,'linear', 
    162                           function(){animDone=true;}); 
    163  
    164                   $('#searchTag').attr('class', 'inCategoryOver'); 
    165                   $('#categorySearch').fadeIn('fast'); 
    166               } 
    167           } 
    168       }, 200); 
    169  
    170   }); 
    171  
    172   $('#noCategorySearch').click(function() { 
    173       if (navigator.platform.indexOf("iPad")!=-1 || 
    174           navigator.platform.indexOf("iPod")!=-1 || 
    175           navigator.platform.indexOf("iPhone")!=-1 || 
    176           navigator.userAgent.indexOf("Android")!=-1){ 
    177           if (${categId}!=0){ 
    178               $('#noCategorySearch').fadeOut('fast'); 
    179               $('#categorySearch').fadeIn('fast'); 
    180               $('#searchTag').attr('class', 'inCategory'); 
    181               $('#searchCategId').attr('value', ${categId}); 
    182               $('#searchTag').animate( 
    183                   {width: $('#categorySearch').width()+$('#cross').width()+6}, 
    184                   500, 
    185                   'swing', 
    186                   function(){ 
    187                   $('#cross').fadeIn('fast'); 
    188                   } 
    189               ); 
    190           } 
    191       } 
    192   }); 
    193  
    194  
    195   $('#noCategorySearch').mouseleave(function() { 
    196       $('#noCategorySearch').removeClass('hasFocus'); 
    197   }); 
    198  
    199   $('#categorySearch').mouseenter(function() { 
    200       $('#noCategorySearch').removeClass('hasFocus'); 
    201   }); 
    202  
    203   $('.inCategoryOver').live('mouseleave', function() { 
    204       $('#noCategorySearch').removeClass('hasFocus'); 
    205       animDone=false; 
    206       setTimeout(function(){ 
    207           if(!$('#noCategorySearch').hasClass('hasFocus')){ 
    208               if ($('#searchCategId').attr('value')==0){ 
    209                   $('#categorySearch').fadeOut('fast'); 
    210                   $('#cross').fadeOut('fast'); 
    211  
    212                   $('#searchTag').animate({ 
    213                   width: $('#noCategorySearch').width(), 
    214                   opacity: 0.6 
    215                   },500); 
    216  
    217  
    218                   $('#searchTag').attr('class', 'everywhere'); 
    219                   $('#noCategorySearch').fadeIn('fast'); 
    220               } 
    221           } 
    222       }, 200); 
    223   }); 
    224  
    225   $('.inCategoryOver').live('click',function() { 
    226           if($('#searchTag').attr('class')=='inCategoryOver' && animDone==true){ 
    227           animDone=false; 
    228           $('#searchTag').animate( 
    229                   {width: $('#categorySearch').width()+$('#cross').width()+6}, 
    230                    500, 
    231                    'swing', 
    232                    function(){ 
    233                        $('#cross').fadeIn('fast'); 
    234                        justClicked = false; 
    235                        } 
    236                    ); 
    237  
    238           $('#searchTag').attr('class', 'inCategory'); 
    239           $('#searchCategId').attr('value', ${categId}); 
    240           } 
    241   }); 
    242  
    243   $('.inCategoryOver').live('mouseover', function(event) { 
    244       $('.inCategoryOver').qtip({ 
    245           content: '${_("Click to search inside %s.") % categName}', 
    246           position:{ 
    247               at: 'bottom center', 
    248               my: 'top center' 
    249           }, 
    250           style: { 
    251               classes: 'ui-tooltip-shadow' 
    252           }, 
    253           events: { 
    254               show: function(event, api) { 
    255                  if($('#searchTag').attr('class')!='inCategoryOver') { 
    256                     try { event.preventDefault(); } catch(e) {} 
    257                  } 
    258               } 
    259            }, 
    260           show: { 
    261               event: event.type, 
    262               ready: true 
    263            } 
    264           }, event); 
    265   }); 
    266  
     134    if (where != '0') { 
     135        $('.searchButton', '#searchBoxForm').before($('<div class="searchTag"/>')); 
     136        $('.searchTag').search_tag({ 
     137            everywhere: true, 
     138            categ_title: target_title, 
     139            categ_id: where, 
     140            input: $('#searchCategId') 
     141        }); 
     142    } 
    267143}); 
    268144 

  • indico/htdocs/css/Default.css

    r128e2e r72cc08e  
    22422242    float:right; 
    22432243    border-left: 1px solid #888; 
     2244    width: 28px; 
     2245    height: 21px; 
     2246    background: #888 url('../images/search.png') 5px 3px no-repeat; 
     2247    cursor: pointer; 
     2248} 
     2249 
     2250div#UISearchBox #searchControls 
     2251{ 
    22442252    width: auto; 
    2245 } 
    2246  
    2247 div#UISearchBox #searchControls 
     2253    border: 1px solid #888; 
     2254    border-radius: 6px; 
     2255    height: 21px; 
     2256    overflow: hidden; 
     2257    background-color: white; 
     2258} 
     2259 
     2260div#UISearchBox #searchControls input 
     2261{ 
     2262    border: 0; 
     2263    font-weight: normal; 
     2264    color: #333; 
     2265} 
     2266 
     2267div#UISearchBox #searchText 
     2268{ 
     2269    min-width: 150px;Se 
     2270    width: auto; 
     2271} 
     2272 
     2273div#UISearchBox #extraOptions 
     2274{ 
     2275    border: 1px solid #888888; 
     2276    border-radius: 6px; 
     2277    min-width: 250px; 
     2278    display: none; 
     2279    position: absolute; 
     2280    top: 23px; 
     2281    right: 0px; 
     2282    background-color: white; 
     2283} 
     2284 
     2285 
     2286div#UISearchBox #extraOptions table { 
     2287    width:auto; 
     2288} 
     2289 
     2290div#UISearchBox #extraOptions input { 
     2291    margin-left: 8px; 
     2292    font-size: 12px; 
     2293    width: 110px; 
     2294} 
     2295 
     2296div#UISearchBox #extraOptions select { 
     2297    margin-left: 8px; 
     2298    font-size: 12px; 
     2299    width: 148px; 
     2300} 
     2301 
     2302div#UISearchBox #extraOptions td { 
     2303    font-size: 12px; 
     2304    color: #444; 
     2305} 
     2306 
     2307div#UISearchBox #advancedOptionsLabel { 
     2308    text-align: center; 
     2309    padding: 5px; 
     2310    border-radius: 6px 6px 0 0; 
     2311    background-color: #ECECEC; 
     2312    font-style: italic; 
     2313    border-bottom: 1px solid #AAAAAA; 
     2314} 
     2315 
     2316div#UISearch 
     2317{ 
     2318    position:relative; 
     2319    border: none; 
     2320    font-size: 13px; 
     2321    z-index: 1; 
     2322} 
     2323 
     2324div#UISearch .searchButton 
     2325{ 
     2326    float:right; 
     2327    border-left: 1px solid #888; 
     2328    width: auto; 
     2329} 
     2330 
     2331div#UISearch #searchText2 
     2332{ 
     2333    padding:3px; 
     2334    width: auto; 
     2335} 
     2336 
     2337div#UISearch #searchControls 
    22482338{ 
    22492339    width: auto; 
    … …  
    22542344} 
    22552345 
    2256 div#UISearchBox #searchControls input 
     2346div#UISearch #searchControls input 
    22572347{ 
    22582348    border: 0; 
    … …  
    22612351} 
    22622352 
    2263 div#UISearchBox #searchText 
    2264 { 
    2265     padding:3px; 
    2266     width: auto; 
    2267 } 
    2268  
    2269 div#UISearchBox #extraOptions 
    2270 { 
    2271     border: 1px solid #888888; 
    2272     border-top: none; 
    2273     width: auto; 
    2274     display: none; 
    2275     position: absolute; 
    2276     top: 23px; 
    2277     right: 0px; 
    2278     background-color: white; 
    2279 } 
    2280  
    2281  
    2282 div#UISearchBox #extraOptions table { 
    2283     width:auto; 
    2284 } 
    2285  
    2286 div#UISearchBox #extraOptions input { 
    2287     margin-left: 8px; 
    2288     font-size: 12px; 
    2289     width: 119px; 
    2290 } 
    2291  
    2292 div#UISearchBox #extraOptions select { 
    2293     margin-left: 8px; 
    2294     font-size: 12px; 
    2295     width: 148px; 
    2296 } 
    2297  
    2298 div#UISearchBox #extraOptions td { 
    2299     font-size: 12px; 
    2300     color: #444; 
    2301 } 
    2302  
    2303 div#UISearchBox #advancedOptionsLabel { 
    2304     text-align: center; 
    2305     padding: 5px; 
    2306     background-color: #ECECEC; 
    2307     font-style: italic; 
    2308     border-bottom: 1px solid #AAAAAA; 
    2309 } 
    2310  
    2311 div#UISearch 
    2312 { 
    2313     position:relative; 
    2314     border: none; 
    2315     font-size: 13px; 
    2316     z-index: 1; 
    2317 } 
    2318  
    2319 div#UISearch .searchButton 
    2320 { 
    2321     float:right; 
    2322     border-left: 1px solid #888; 
    2323     width: auto; 
    2324 } 
    2325  
    2326 div#UISearch #searchText2 
    2327 { 
    2328     padding:3px; 
    2329     width: auto; 
    2330 } 
    2331  
    2332 div#UISearch #searchControls 
    2333 { 
    2334     width: auto; 
    2335     border: 1px solid #888; 
    2336     height: 21px; 
    2337     overflow: hidden; 
    2338     background-color: white; 
    2339 } 
    2340  
    2341 div#UISearch #searchControls input 
    2342 { 
    2343     border: 0; 
    2344     color: black; 
    2345     font-weight: normal; 
    2346 } 
    2347  
    2348 div#searchTag, div#searchTag2 
     2353div.searchTag 
    23492354{ 
    23502355    max-width:112px; 
    2351     border-radius: 2px; 
    2352     -webkit-border-radius:2px; 
    2353     -moz-border-radius:2px; 
     2356    border-radius: 4px 0 0 4px; 
     2357    -webkit-border-radius:4px 0 0 4px; 
     2358    -moz-border-radius:4px 0 0 4px; 
    23542359    display:table-cell; 
    2355     line-height: 15px; 
    2356     height: 15px; 
     2360    line-height: 13px; 
     2361    height: 13px; 
    23572362    vertical-align: middle; 
    2358     margin-top:3px; 
    2359     margin-right:2px; 
    2360     padding-right:4px; 
    2361     padding-left:4px; 
    2362     float:right; 
    2363     color:#FFF; 
     2363    margin: 1px 1px 1px 1px; 
     2364    padding: 2px 5px; 
     2365    float: left; 
    23642366    user-select: none; 
    23652367    -ms-user-select:none; 
    … …  
    23692371    font-size: 11px; 
    23702372    overflow: hidden; 
    2371  
    2372 } 
    2373  
    2374 div#categorySearch, div#categorySearch2 
     2373    opacity: 0.6; 
     2374} 
     2375 
     2376.searchTag .where 
    23752377{ 
    23762378    max-width:100px; 
    … …  
    23802382    float:left; 
    23812383} 
    2382 div#noCategorySearch, div#noCategorySearch2 
    2383 { 
    2384     white-space: nowrap; 
    2385     overflow: hidden; 
    2386     text-overflow:ellipsis; 
    2387 } 
    2388 .everywhere, .everywhere2 
    2389 { 
    2390     background-color: #5089B8; 
    2391     opacity: 0.4; 
     2384 
     2385.everywhere 
     2386{ 
     2387    color: #fff !important; 
     2388    border: 1px solid #566E89; 
     2389    text-shadow: 0 1px 0 #666; 
     2390    background-color: #aaa; 
    23922391    cursor: default; 
    23932392 
    23942393} 
    2395 .inCategory, .inCategory2 
    2396 { 
    2397     background-color: #5089B8; 
     2394.inCategory 
     2395{ 
     2396    color: #fff; 
     2397    border: 1px solid #566E89; 
     2398    background-color: #8EA1B7; 
     2399    text-shadow: 0 1px 0 #666; 
    23982400    cursor: default; 
    23992401} 
    2400 .inCategoryOver, .inCategoryOver2 
    2401 { 
    2402     background-color: #5089B8; 
    2403     box-shadow: 1px 1px 1px #888; 
     2402.inCategoryOver 
     2403{ 
     2404    color: #566E89; 
     2405    border: 1px solid #566E89; 
     2406    background-color: #8EA1B7; 
    24042407    cursor: pointer; 
    24052408} 
    2406 .cross, .cross2 
     2409.cross 
    24072410{ 
    24082411    font-weight:bold; 
    2409     color:#111; 
     2412    color: #566E89; 
    24102413    float: right; 
    24112414    cursor: pointer; 
    … …  
    52695272 
    52705273.key { 
    5271         display: inline; 
    5272         min-width: 1em; 
    5273         padding: .2em .3em; 
    5274         text-align: center; 
    5275         -moz-border-radius: .3em; 
    5276         -webkit-border-radius: .3em; 
    5277         border-radius: .3em; 
    5278         border: none; 
    5279         cursor: default; 
    5280         background: rgb(250, 250, 250); 
    5281         color:  rgb(50, 50, 50); 
    5282         text-shadow: 0 0 2px rgb(255, 255, 255); 
    5283         -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); 
    5284         -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); 
    5285         box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); 
     5274        display: inline; 
     5275        min-width: 1em; 
     5276        padding: .2em .3em; 
     5277        text-align: center; 
     5278        -moz-border-radius: .3em; 
     5279        -webkit-border-radius: .3em; 
     5280        border-radius: .3em; 
     5281        border: none; 
     5282        cursor: default; 
     5283        background: rgb(250, 250, 250); 
     5284        color:  rgb(50, 50, 50); 
     5285        text-shadow: 0 0 2px rgb(255, 255, 255); 
     5286        -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); 
     5287        -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); 
     5288        box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); 
    52865289} 
    52875290 
    … …  
    80198022 
    80208023.icalExportPopup .agreement { 
    8021     padding: 5px; 
     8024    padding: 5px;Ssearch 
    80228025    border-radius: 8px; 
    80238026    margin-bottom: 5px; 

  • indico/htdocs/images/search.png

    • Property mode changed from 100755 to 100644

  • indico/htdocs/js/indico/Common/IntelligentSearchBox.js

    r52752ae r72cc08e  
    307307              * To make it even better, onclick is called before onkeyup, 
    308308              * which forces us to do the last two checks. 
    309               */ 
     309y              */ 
    310310 
    311311             if (self.suggestionBox && 
    … …  
    320320     } 
    321321    ); 
     322 
     323 
     324$.widget('ui.search_tag', { 
     325    options: { 
     326        categ_title: 'Home', 
     327        everywhere: true, 
     328        categ_id: 0 
     329    }, 
     330 
     331    _transition: function(title) { 
     332        var $tag = this.$tag; 
     333        var old_width = $tag.width() 
     334 
     335        $tag.width('').find('.where').html(title); 
     336        var new_width = $tag.width(); 
     337 
     338        // store target width 
     339        $tag.fadeIn().width(old_width).data('target-width', new_width); 
     340 
     341        $tag.animate({ 
     342            width: new_width 
     343        }, 200, 'linear', function(){ 
     344            animDone = true; 
     345        }); 
     346    }, 
     347 
     348    _create: function() { 
     349        var self = this; 
     350 
     351        var tag_template = _.template('<div class="searchTag">' + 
     352                                      '<div class="cross">x</div>' + 
     353                                      '<div class="where"><%= categ_title %></div>' + 
     354                                      '</div>'); 
     355 
     356        var $tag = this.$tag = $(tag_template({ 
     357            categ_title: this.options.everywhere ? $T('Everywhere') : this.options.categ_title 
     358        })); 
     359 
     360        $(this.element).replaceWith($tag); 
     361        var $where = $('.where', $tag); 
     362 
     363        if (this.options.everywhere) { 
     364            $tag.addClass('everywhere'); 
     365            $('.cross', this.$tag).hide(); 
     366        } else { 
     367            $tag.addClass('inCategory'); 
     368            $('.cross', this.$tag).show(); 
     369        } 
     370 
     371        $('.cross', $tag).on('click', function() { 
     372            self.search_everywhere(); 
     373        }); 
     374 
     375        var $parent = $tag.parent(); 
     376 
     377        $parent.on('mouseenter', '.searchTag.everywhere', function() { 
     378            self.show_categ(); 
     379        }); 
     380        $parent.on('mouseover', '.searchTag.everywhere', function() { 
     381            self.show_tip(); 
     382        }); 
     383        $parent.on('mouseleave', '.searchTag.everywhere', function() { 
     384            $where.removeClass('hasFocus'); 
     385        }); 
     386        $parent.on('click', '.searchTag.inCategoryOver', function() { 
     387            self.confirm_tip(); 
     388        }); 
     389        $parent.on('mouseleave', '.searchTag.inCategoryOver', function() { 
     390            self.back_to_everywhere(); 
     391        }); 
     392    }, 
     393 
     394    confirm_tip: function() { 
     395        var $where = $('.where', this.$tag) 
     396        var $tag = this.$tag; 
     397 
     398        $tag.qtip('destroy'); 
     399        $where.fadeOut('fast', function() { 
     400            $(this).fadeIn('fast'); 
     401        }); 
     402 
     403        this.$tag.addClass('inCategory').removeClass('everywhere').removeClass('inCategoryOver'); 
     404        this.options.input.attr('value', this.options.categ_id); 
     405 
     406        // use target-width as searchTag may still be growing 
     407        $tag.animate({ 
     408            width: $tag.data('target-width') + $('.cross', $tag).width() + 10 
     409        }, 200, 'swing', function(){ 
     410            $('.cross', $tag).fadeIn('fast'); 
     411        }); 
     412    }, 
     413 
     414    search_everywhere: function() { 
     415        $('.cross', this.$tag).hide(); 
     416        this.$tag.addClass('everywhere').removeClass('inCategory'); 
     417        this._transition($T('Everywhere')); 
     418        this.options.input.attr('value', 0); 
     419    }, 
     420 
     421    show_categ: function() { 
     422        var $tag = this.$tag; 
     423        var $where = $('.where', $tag) 
     424        var self = this; 
     425        $where.addClass('hasFocus'); 
     426        setTimeout(function(){ 
     427            if ($where.hasClass('hasFocus')) { 
     428                self._transition(self.options.categ_title); 
     429                $tag.addClass('inCategoryOver'); 
     430            } 
     431        }, 200); 
     432    }, 
     433 
     434    show_tip: function() { 
     435        this.$tag.qtip({ 
     436            content: 'Click to search inside ' + this.options.categ_title, 
     437            position:{ 
     438                at: 'bottom center', 
     439                my: 'top center' 
     440            }, 
     441            style: { 
     442                classes: 'ui-tooltip-shadow' 
     443            }, 
     444            show: { 
     445                event: event.type, 
     446                ready: true 
     447            } 
     448        }, event); 
     449    }, 
     450 
     451    back_to_everywhere: function() { 
     452        var $where = $('.where', this.$tag); 
     453        var self = this; 
     454 
     455        this.$tag.removeClass('inCategoryOver'); 
     456        $where.removeClass('hasFocus'); 
     457        setTimeout(function(){ 
     458            if (!$where.hasClass('hasFocus')) { 
     459                self._transition($T('Everywhere')); 
     460                self.$tag.addClass('everywhere'); 
     461            } 
     462        }, 200); 
     463    } 
     464}); 
Note: See TracChangeset for help on using the changeset viewer.