diff --git a/media/css/seahub.css b/media/css/seahub.css index dad21f7f49..59ee95ec17 100644 --- a/media/css/seahub.css +++ b/media/css/seahub.css @@ -21,7 +21,7 @@ body, h1,h2,h3,h4,h5,h6, ul,ol,li,dl,dt,dd, p,pre,blockquote, -form,input,textarea,button,img { +form,input,textarea,select,button,img { padding:0; margin:0; } @@ -455,9 +455,10 @@ textarea:-moz-placeholder {/* for FF */ margin-bottom:25px; } #header-inner { + height:40px; width:950px; margin:0 auto; - overflow:hidden; + /*overflow:hidden;*/ } #main { min-height: 400px; @@ -2227,11 +2228,10 @@ textarea:-moz-placeholder {/* for FF */ border:1px solid #ddd; border-radius:3px; background:#fff; - overflow:hidden;/*for some chromium*/ + /*overflow:hidden;for some chromium*/ + position:relative; } #top-search-form { - width:214px; - *width:218px; margin-top:4px; } .search-input, @@ -2239,12 +2239,37 @@ textarea:-moz-placeholder {/* for FF */ height:24px; border:0; margin:0; - vertical-align:middle; + vertical-align:top; } .search-input { - width:180px; + width:172px; outline:0; } +.search-form .icon-caret-down { + color:#bbb; + cursor:pointer; + line-height:24px; +} +.search-scales { + position:absolute; + padding:2px 0; + font-weight:normal; + background:#fff; + border:1px solid #ddd; + border-radius:3px; + box-shadow:0 0 10px #ddd; +} +.search-scales .item { + padding:2px 6px; +} +.search-scales .item-hover { + color:#fff; + background:#666; + cursor:pointer; +} +.search-scales [class^="icon-"] { + margin-right:5px; +} .search-form .search-submit { width:30px; background:#fff; diff --git a/seahub/templates/base.html b/seahub/templates/base.html index 2d2493b1d9..9d2a15c0a9 100644 --- a/seahub/templates/base.html +++ b/seahub/templates/base.html @@ -72,13 +72,18 @@ {% if enable_file_search and request.user.is_authenticated %}
- + + +
{% endif %} -
+
{% block title_panel %}{% endblock %}
@@ -187,6 +192,45 @@ $(document).ready(function(){ return false; }); +{% if enable_file_search %} +$('#top-search-form .icon-caret-down').click(function() { + var form = $(this).parent(); + form.find('.search-scales').css({'right':form.find('.search-submit').outerWidth(true), 'top':form.outerHeight()}).toggleClass('hide'); +}); +$('.search-scales li').hover( + function() { + $(this).addClass('item-hover'); + }, + function() { + $(this).removeClass('item-hover'); + } +).click(function() { + $(this).parent().find('span').attr('class', 'icon-'); + $(this).children('span').attr('class', 'icon-ok'); + if (!pseudo_support) { + $(this).parent().find('span').html(''); + setCon($(this).children('span'), 'icon-', fa_icons); + } + $('#top-search-form [name="scale"]').val($(this).data('value')); + $(this).parent().addClass('hide'); + var search_input = $('#top-search-form .search-input'); + if ($.trim(search_input.val())) { + $('#top-search-form').submit(); + } else { + search_input.attr('placeholder', $(this).text().replace(/^&#x\w+;$/,'')); // replace(...) to rm icon text for some browsers + if (!('placeholder' in document.createElement('input'))) { // for browsers which don't natively support 'placeholder' attr + search_input.attr('value', search_input.attr('placeholder')); + } + } +}); +$(document).click(function(e) { + var target = e.target || event.srcElement; + if (!$('.search-scales, #top-search-form .icon-caret-down').is(target) && !($('.search-scales').find('*').is(target))) { + $('.search-scales').addClass('hide'); + } +}); +{% endif %} + {% endif %} {% block extra_script %}{% endblock %} @@ -225,7 +269,9 @@ $(document).ready(function(){ {'name':'undo', 'con':'f0e2'}, {'name':'repeat', 'con':'f01e'}, {'name':'star', 'con':'f005'}, - {'name':'star-empty', 'con':'f006'} + {'name':'star-empty', 'con':'f006'}, + {'name':'caret-down', 'con':'f0d7'}, + {'name':'ok', 'con':'f00c'} ]; function setCon(icon, icon_class_prefix, icon_list) { for (var i = 0, len = icon_list.length; i < len; i++) { @@ -235,8 +281,10 @@ $(document).ready(function(){ } } } + var pseudo_support = true; var pseudo_test = $('body').append('').children('.pseudo-test'); if (pseudo_test.width() == 0) { + pseudo_support = false; $('[class^="sf-icon-"]').each(function() { setCon($(this), 'sf-icon-', sf_icons); });