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

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

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

Write Preview
Loading…
Cancel
Save