|
|
|
@ -77,7 +77,8 @@ function rcube_elastic_ui()
|
|
|
|
.addEventListener('afterlistsearch', list_handler)
|
|
|
|
.addEventListener('afterlistsearch', list_handler)
|
|
|
|
.addEventListener('message', message_displayed)
|
|
|
|
.addEventListener('message', message_displayed)
|
|
|
|
.addEventListener('menu-open', menu_toggle)
|
|
|
|
.addEventListener('menu-open', menu_toggle)
|
|
|
|
.addEventListener('menu-close', menu_toggle);
|
|
|
|
.addEventListener('menu-close', menu_toggle)
|
|
|
|
|
|
|
|
.addEventListener('init', init);
|
|
|
|
|
|
|
|
|
|
|
|
// menu/sidebar button
|
|
|
|
// menu/sidebar button
|
|
|
|
buttons.menu.on('click', function() { show_menu(); return false; });
|
|
|
|
buttons.menu.on('click', function() { show_menu(); return false; });
|
|
|
|
@ -93,36 +94,8 @@ function rcube_elastic_ui()
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Semantic-UI style
|
|
|
|
// Convert some elements to bootstrap style
|
|
|
|
$('input.button').addClass('ui');
|
|
|
|
bootstrap_style();
|
|
|
|
$('input.button.mainaction').addClass('primary');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: Most of this style-related code should not be needed
|
|
|
|
|
|
|
|
// We should implement some features in the core that would
|
|
|
|
|
|
|
|
// allow as to tell the engine to add additional html code/attribs
|
|
|
|
|
|
|
|
$('select').dropdown();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Make forms pretty with semantic-ui's accordion widget
|
|
|
|
|
|
|
|
// TODO: Consider using tabs when the page width is big enough
|
|
|
|
|
|
|
|
$('form.propform,.tabbed').each(function() {
|
|
|
|
|
|
|
|
var form = $(this), fieldsets = form.children('fieldset');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (fieldsets.length) {
|
|
|
|
|
|
|
|
$(this).addClass('ui styled fluid accordion');
|
|
|
|
|
|
|
|
fieldsets.each(function(i, fieldset) {
|
|
|
|
|
|
|
|
var title = $('<div>').attr('class', 'title' + (i ? '' : ' active'))
|
|
|
|
|
|
|
|
.html('<i class="dropdown icon"></i>') // TODO: replace <i> with css
|
|
|
|
|
|
|
|
.append($('<span>').text($('legend', fieldset).text()));
|
|
|
|
|
|
|
|
var content = $('<div>').attr('class', 'content' + (i ? '' : ' active'))
|
|
|
|
|
|
|
|
.append($(fieldset).children().not('legend'));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form.append(title).append(content);
|
|
|
|
|
|
|
|
$(fieldset).remove();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form.accordion({animateChildren: false});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Initialize responsive toolbars (have to be before popups init)
|
|
|
|
// Initialize responsive toolbars (have to be before popups init)
|
|
|
|
toolbar_init();
|
|
|
|
toolbar_init();
|
|
|
|
@ -132,11 +105,14 @@ function rcube_elastic_ui()
|
|
|
|
|
|
|
|
|
|
|
|
// close popups on click in an iframe on the page
|
|
|
|
// close popups on click in an iframe on the page
|
|
|
|
var close_all_popups = function() {
|
|
|
|
var close_all_popups = function() {
|
|
|
|
$('.ui.popup:visible').each(function() {
|
|
|
|
$('.popover-content:visible').each(function() {
|
|
|
|
$($(this).data('button')).popup('hide');
|
|
|
|
console.log($(this).children('*:first').data('button'));
|
|
|
|
|
|
|
|
$($(this).children('*:first').data('button')).popover('hide');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: Fix unwanted popups closing on click inside a popup
|
|
|
|
|
|
|
|
$(document).on('click', close_all_popups);
|
|
|
|
rcube_webmail.set_iframe_events({mousedown: close_all_popups});
|
|
|
|
rcube_webmail.set_iframe_events({mousedown: close_all_popups});
|
|
|
|
|
|
|
|
|
|
|
|
// Move form buttons from the content frame into the frame header (on parent window)
|
|
|
|
// Move form buttons from the content frame into the frame header (on parent window)
|
|
|
|
@ -195,24 +171,6 @@ function rcube_elastic_ui()
|
|
|
|
// Initialize search forms (in list headers)
|
|
|
|
// Initialize search forms (in list headers)
|
|
|
|
$('.header > .searchbar').each(function() { searchbar_init(this); });
|
|
|
|
$('.header > .searchbar').each(function() { searchbar_init(this); });
|
|
|
|
|
|
|
|
|
|
|
|
// Make login form pretty
|
|
|
|
|
|
|
|
if (rcmail.env.task == 'login') {
|
|
|
|
|
|
|
|
var inputs = [],
|
|
|
|
|
|
|
|
icon_map = {user: 'user', pass: 'lock', host: 'home'},
|
|
|
|
|
|
|
|
table = $('#login-form table');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('tr', table).each(function() {
|
|
|
|
|
|
|
|
var input = $('input', this).detach(),
|
|
|
|
|
|
|
|
input_name = input.attr('name').replace('_', ''),
|
|
|
|
|
|
|
|
icon = $('<i>').attr('class', 'icon ' + icon_map[input_name]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
input.attr('placeholder', $('label', this).text());
|
|
|
|
|
|
|
|
inputs.push($('<div>').attr('class', 'ui left icon input').append([input, icon]));
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
table.after(inputs);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Intercept jQuery-UI dialogs to re-style them
|
|
|
|
// Intercept jQuery-UI dialogs to re-style them
|
|
|
|
if ($.ui) {
|
|
|
|
if ($.ui) {
|
|
|
|
$.widget('ui.dialog', $.ui.dialog, {
|
|
|
|
$.widget('ui.dialog', $.ui.dialog, {
|
|
|
|
@ -224,15 +182,23 @@ function rcube_elastic_ui()
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// rcmail 'init' event handler
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
// Add checkbox selection to list widgets
|
|
|
|
// Add checkbox selection to list widgets
|
|
|
|
rcmail.addEventListener('init', function() {
|
|
|
|
|
|
|
|
$('table[data-list]').each(function() {
|
|
|
|
$('table[data-list]').each(function() {
|
|
|
|
var list = $(this).data('list');
|
|
|
|
var list = $(this).data('list');
|
|
|
|
if (rcmail[list] && rcmail[list].multiselect) {
|
|
|
|
if (rcmail[list] && rcmail[list].multiselect) {
|
|
|
|
rcmail[list].checkbox_selection = true;
|
|
|
|
rcmail[list].checkbox_selection = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function bootstrap_style(parent)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
$('input.button,button', parent || window).addClass('btn');
|
|
|
|
|
|
|
|
$('input.button.mainaction,button.primary,button.mainaction', parent || window).addClass('btn-primary');
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// window resize handler
|
|
|
|
// window resize handler
|
|
|
|
function resize()
|
|
|
|
function resize()
|
|
|
|
@ -417,24 +383,23 @@ function rcube_elastic_ui()
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
function message_displayed(p)
|
|
|
|
function message_displayed(p)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
var icon, classes = 'ui icon message',
|
|
|
|
var cl, classes = 'ui alert',
|
|
|
|
map = {
|
|
|
|
map = {
|
|
|
|
information: ['success', 'info circle icon'],
|
|
|
|
information: 'alert-success',
|
|
|
|
confirmation: ['success', 'info circle icon'],
|
|
|
|
confirmation: 'alert-success',
|
|
|
|
notice: ['', 'info circle icon'],
|
|
|
|
notice: 'alert-info',
|
|
|
|
error: ['negative', 'warning circle icon'],
|
|
|
|
error: 'alert-danger',
|
|
|
|
warning: ['negative', 'warning sign icon'],
|
|
|
|
warning: 'alert-warning',
|
|
|
|
loading: ['', 'notched circle loading icon']
|
|
|
|
loading: 'alert-info loading'
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
if (icon = map[p.type]) {
|
|
|
|
if (cl = map[p.type]) {
|
|
|
|
if (icon[0])
|
|
|
|
classes += ' ' + cl;
|
|
|
|
classes += ' ' + icon[0];
|
|
|
|
$('<i>').attr('class', 'icon').prependTo(p.object);
|
|
|
|
$('<i>').attr('class', icon[1]).prependTo(p.object);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$(p.object).addClass(classes);
|
|
|
|
$(p.object).addClass(classes).attr('role', 'alert');
|
|
|
|
|
|
|
|
$('a', p.object).addClass('alert-link');
|
|
|
|
/*
|
|
|
|
/*
|
|
|
|
var siblings = $(p.object).siblings('div');
|
|
|
|
var siblings = $(p.object).siblings('div');
|
|
|
|
if (siblings.length)
|
|
|
|
if (siblings.length)
|
|
|
|
@ -455,6 +420,7 @@ function rcube_elastic_ui()
|
|
|
|
{
|
|
|
|
{
|
|
|
|
var input = $('input', bar),
|
|
|
|
var input = $('input', bar),
|
|
|
|
button = $('a.button.search', bar),
|
|
|
|
button = $('a.button.search', bar),
|
|
|
|
|
|
|
|
settings_button = $('a.button.settings', bar)[0],
|
|
|
|
form = $('form', bar),
|
|
|
|
form = $('form', bar),
|
|
|
|
all_elements = $('form, a.button.options, a.button.reset', bar),
|
|
|
|
all_elements = $('form, a.button.options, a.button.reset', bar),
|
|
|
|
is_search_pending = function() {
|
|
|
|
is_search_pending = function() {
|
|
|
|
@ -543,7 +509,7 @@ function rcube_elastic_ui()
|
|
|
|
// append the new toolbar and menu button
|
|
|
|
// append the new toolbar and menu button
|
|
|
|
if (items.length) {
|
|
|
|
if (items.length) {
|
|
|
|
var menu_button = $('<a class="button icon toolbar-menu-button" href="#menu">')
|
|
|
|
var menu_button = $('<a class="button icon toolbar-menu-button" href="#menu">')
|
|
|
|
.attr({'data-popup': 'toolbar-menu', 'data-popup-pos': 'bottom right'});
|
|
|
|
.attr({'data-popup': 'toolbar-menu'});
|
|
|
|
|
|
|
|
|
|
|
|
layout.content.children('.header')
|
|
|
|
layout.content.children('.header')
|
|
|
|
// TODO: copy original toolbar attributes (class, role, aria-*)
|
|
|
|
// TODO: copy original toolbar attributes (class, role, aria-*)
|
|
|
|
@ -562,22 +528,26 @@ function rcube_elastic_ui()
|
|
|
|
{
|
|
|
|
{
|
|
|
|
var popup_id = $(item).data('popup'),
|
|
|
|
var popup_id = $(item).data('popup'),
|
|
|
|
popup = $('#' + popup_id)[0],
|
|
|
|
popup = $('#' + popup_id)[0],
|
|
|
|
popup_position = $(item).data('popup-pos') || 'bottom left';
|
|
|
|
title = $(item).attr('title'),
|
|
|
|
|
|
|
|
popup_position = $(item).data('popup-pos') || 'bottom';
|
|
|
|
|
|
|
|
|
|
|
|
$(item).attr({
|
|
|
|
$(item).attr({
|
|
|
|
'aria-haspopup': 'true',
|
|
|
|
'aria-haspopup': 'true',
|
|
|
|
'aria-expanded': 'false',
|
|
|
|
'aria-expanded': 'false',
|
|
|
|
'aria-owns': popup_id
|
|
|
|
'aria-owns': popup_id
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.popup({
|
|
|
|
.popover({
|
|
|
|
popup: popup,
|
|
|
|
trigger: 'click',
|
|
|
|
exclusive: true,
|
|
|
|
container: 'body',
|
|
|
|
on: 'click',
|
|
|
|
content: popup,
|
|
|
|
position: popup_position,
|
|
|
|
placement: popup_position,
|
|
|
|
lastResort: true
|
|
|
|
html: true
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
.on('show.bs.popover', function() { $(popup).removeClass('popup').attr('aria-hidden', false); })
|
|
|
|
|
|
|
|
.on('hide.bs.popover', function() { $(popup).attr('aria-hidden', true); })
|
|
|
|
|
|
|
|
.attr('title', title); // re-add title attribute removed by bootstrap
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: Set aria attributes on menu show/hide
|
|
|
|
// TODO: Fix popup positioning
|
|
|
|
// TODO: Set popup height so it is less that window height
|
|
|
|
// TODO: Set popup height so it is less that window height
|
|
|
|
$(popup).attr('aria-hidden', 'true')
|
|
|
|
$(popup).attr('aria-hidden', 'true')
|
|
|
|
.data('button', item);
|
|
|
|
.data('button', item);
|
|
|
|
@ -607,6 +577,7 @@ function rcube_elastic_ui()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: style buttons/forms
|
|
|
|
// TODO: style buttons/forms
|
|
|
|
|
|
|
|
bootstrap_style(dialog.uiDialog);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
|
Aleksander Machniak
8 years ago
