banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor/restyle search bars

Browse Source 
Generally we don't use the animation effect it didn't work in all browsers
TODO: cleanup and test with IE
pull/5742/merge
Aleksander Machniak 7 years ago
parent 00a7caf7c6
commit 032625e696
4 changed files with 74 additions and 99 deletions
Show Stats Download Patch File Download Diff File

8
skins/elastic/styles/layout.less
Unescape Escape View File

@ -213,13 +213,13 @@ html.iframe body {
body > #layout > div > .header {
&.with-search:not(.no-toolbar) {
.searchfilterbar {
right: (@layout-touch-icon-width * 2);
}
.searchbar {
right: @layout-touch-icon-width;
}
.searchfilterbar {
right: (@layout-touch-icon-width * 2);
}
}
}

6
skins/elastic/styles/widgets/forms.less
Unescape Escape View File

@ -179,6 +179,12 @@ html.ms .propform {
&.add:before {
content: @fa-var-plus;
}
&.search:before {
content: @fa-var-search;
}
&.filter:before {
content: @fa-var-filter;
}
.inner {
display: none;

87
skins/elastic/styles/widgets/searchbar.less
Unescape Escape View File

@ -9,50 +9,47 @@
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Searchbar widget ***/
/*** Searchbar and searchfilterbar widgets ***/
.searchbar {
text-align: right;
position: absolute;
background-color: @color-layout-header-background;
z-index: 10;
top: 0;
right: 0;
display: flex !important;
height: @layout-header-height;
a.button {
min-width: auto;
padding: 0 .5rem;
&:before {
line-height: @layout-header-height;
}
}
form,
a.button.reset,
a.button.cancel,
a.button.options {
.input-group {
display: none;
width: 1%;
flex-grow: 1;
padding: 0 .5rem;
height: @layout-header-height;
}
form {
width: 97%;
text-align: left;
padding-left: .25em;
.input-group-addon {
padding: .5rem;
font-size: 80%;
}
a.icon {
&:before {
&:extend(.font-icon-class);
content: @fa-var-search;
}
}
input {
width: 80%;
border: none;
border-bottom: 1px solid #ddd;
border-radius: 0;
background: transparent;
line-height: 1.2;
padding-left: .1em;
margin: 0;
}
a {
&.button.reset:before {
&.reset:before {
content: @fa-var-trash;
}
&.button.options:before {
&.options:before {
content: @fa-var-angle-down;
}
}
@ -62,48 +59,15 @@
}
}
/*** Searchfilterbar widget ***/
.searchfilterbar {
text-align: right;
position: absolute;
background-color: @color-layout-header-background;
z-index: 10;
top: 0;
right: @layout-touch-icon-width;
select,
a.button.cancel {
display: none;
width: 1%;
}
select {
width: 98%;
padding-left: .25em;
}
&.active a.button.filter {
color: @color-searchbar-icon-active;
}
}
.searchbar,
.searchfilterbar {
height: @layout-header-height;
display: table !important;
a.button {
/* Reset toolbar style */
min-width: auto;
padding: 0 .5rem;
&:before {
line-height: @layout-header-height;
}
}
}
/*
html.ie11 {
.searchbar,
.searchfilterbar {
@ -113,3 +77,4 @@ html.ie11 {
}
}
}
*/

42
skins/elastic/ui.js
Unescape Escape View File

@ -1200,11 +1200,9 @@ function rcube_elastic_ui()
*/
function searchbar_init(bar)
{
var input = $('input', bar),
var input = $('input', bar).addClass('form-control'),
button = $('a.button.search', bar),
cancel = $('<a class="button icon cancel">').insertBefore(button),
form = $('form', bar),
all_elements = $('form, a.button.options, a.button.reset, a.button.cancel', bar),
is_search_pending = function() {
// TODO: This have to be improved to detect real searching state
// There are cases when search is active but the input is empty
@ -1214,8 +1212,7 @@ function rcube_elastic_ui()
if (button.is(':visible')) {
return;
}
$(bar).animate({'width': '0'}, 200, 'swing', function() {
all_elements.hide();
form.hide();
// width:auto fixes search button position in Chrome
// reset padding set when the form is displayed
$(bar).css({width: 'auto', 'padding-left': 0})[is_search_pending() ? 'addClass' : 'removeClass']('active');
@ -1223,7 +1220,6 @@ function rcube_elastic_ui()
if (focus && rcube_event.is_keyboard(event)) {
button.focus();
}
});
};
$(bar).parent().addClass('with-search');
@ -1232,17 +1228,24 @@ function rcube_elastic_ui()
$(bar).addClass('active');
}
// Display search form (with animation effect)
// make the input pretty
form.addClass('input-group')
.prepend($('<i class="input-group-addon icon search">'))
.append($('a.options').detach().removeClass('button').addClass('icon input-group-addon'))
.append($('a.reset').detach().removeClass('button').addClass('icon input-group-addon'))
.append($('<a class="icon cancel input-group-addon">'));
// Display search form
button.on('click', function() {
var margin = $(bar).css('right');
$(bar).css('padding-left', margin).animate({'width': '100%'}, 200);
all_elements.css('display', 'table-cell');
$(bar).css({'padding-left': margin, width: '100%'});
form.css('display', 'flex');
button.hide();
input.focus();
});
// Search reset action
$('a.button.reset', bar).on('click', function(e) {
$('a.reset', bar).on('click', function(e) {
// for treelist widget's search setting val and keyup.treelist is needed
// in normal search form reset-search command will do the trick
// TODO: This calls for some generalization, what about two searchboxes on a page?
@ -1255,7 +1258,7 @@ function rcube_elastic_ui()
hide_func(e, true);
});
cancel.attr('title', rcmail.gettext('close')).on('click', function(e) { hide_func(e, true); });
$('a.cancel', bar).attr('title', rcmail.gettext('close')).on('click', function(e) { hide_func(e, true); });
// These will hide the form, but not reset it
rcube_webmail.set_iframe_events({mousedown: hide_func});
@ -1274,15 +1277,18 @@ function rcube_elastic_ui()
*/
function searchfilterbar_init(bar)
{
bar = $('<div class="searchfilterbar toolbar">')
bar = $('<div class="searchfilterbar searchbar toolbar">')
.insertAfter(bar)
.append($(bar).detach())
.append($('<a class="button icon cancel">').attr('title', rcmail.gettext('close')))
.append($('<a class="button icon filter">').attr('title', rcmail.gettext('filter')));
$('select', bar).wrap($('<div class="input-group">'))
.parent().prepend($('<i class="input-group-addon icon filter">'))
.append($('<a class="icon cancel input-group-addon">').attr('title', rcmail.gettext('close')));
var select = $('select', bar),
button = $('a.button.filter', bar),
all_elements = $('select, a.button.cancel', bar),
all_elements = $('.input-group', bar),
is_filter_enabled = function() {
var value = select.val();
return value && value != 'ALL';
@ -1291,7 +1297,6 @@ function rcube_elastic_ui()
if (button.is(':visible')) {
return;
}
$(bar).animate({'width': '0'}, 200, 'swing', function() {
all_elements.hide();
// width:auto fixes search button position in Chrome
// reset padding set when the form is displayed
@ -1300,7 +1305,6 @@ function rcube_elastic_ui()
if (focus && rcube_event.is_keyboard(event)) {
button.focus();
}
});
};
bar.parent().addClass('with-filter');
@ -1321,14 +1325,14 @@ function rcube_elastic_ui()
// Display filter selection (with animation effect)
button.on('click', function() {
var margin = $(bar).css('right');
$(bar).css('padding-left', margin).animate({'width': '100%'}, 200);
all_elements.css('display', 'table-cell');
$(bar).css({'padding-left': margin, width: '100%'});
all_elements.css('display', 'flex');
button.hide();
select.focus();
});
// Filter close button
$('a.button.cancel', bar).on('click', function(e) { hide_func(e, true); });
$('a.cancel', bar).on('click', function(e) { hide_func(e, true); });
// These will hide the form, but not reset it
rcube_webmail.set_iframe_events({mousedown: hide_func});

Write Preview
Loading…
Cancel
Save