diff --git a/skins/elastic/.gitignore b/skins/elastic/.gitignore new file mode 100644 index 000000000..95d2545c1 --- /dev/null +++ b/skins/elastic/.gitignore @@ -0,0 +1,3 @@ +styles/styles.css +styles/print.css +styles/embed.css diff --git a/skins/elastic/README.md b/skins/elastic/README.md new file mode 100644 index 000000000..db5e8d83c --- /dev/null +++ b/skins/elastic/README.md @@ -0,0 +1,114 @@ +Roundcube Webmail Skin "Elastic" +================================ + +This skin package contains a theme for the Roundcube Webmail +software. It can be used, modified and redistributed according to +the terms described in the LICENSE section. + +For information about building or modifying Roundcube skins please visit +https://github.com/roundcube/roundcubemail/wiki/Skins + + +LICENSE +------- +The contents of this folder are subject to the Creative Commons +Attribution-ShareAlike License. It is allowed to copy, distribute, +transmit and to adapt the work by keeping credits to the original +authors in the README.md file. +See http://creativecommons.org/licenses/by-sa/3.0/ for details. + +This folder also contains code licensed separately: +- Bootstrap Framework 4 from https://github.com/twbs/bootstrap +- FontAwesome 5 fonts from https://fontawesome.com/ +- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext + + +PROJECT GOALS +------------- +Create a user interface that is clean and usable with any screen size. +Use new technologies like e.g. flexbox, @media, font-icons or less. +Cleanup css/html and unify as much as possible. + + +INSTALLATION (development): +--------------------------- +1. git clone https://github.com/roundcube/roundcubemail.git +2. cd roundcubemail/skins +3. git clone https://github.com/roundcube/elastic.git +4. Disable all external plugins and set devel_mode=true. + + +INSTALLATION (production): +-------------------------- +All styles are written using LESS syntax. Thus it needs to be compiled +using the `lessc` command line tool. This comes with the `nodejs-less` +RPM package which depends on nodejs. +``` + $ lessc -x styles/styles.less > styles/styles.css + $ lessc -x styles/print.less > styles/print.css + $ lessc -x styles/embed.less > styles/embed.css +``` +(the -x option minifies the CSS code) + +References to image files from the included CSS files can be appended +with cache-buster marks to avoid browser caching issues after updating. + +Run `bin/updatecss.sh --dir skins/elastic` from the Roundcube +package before packaging the skin or after installing it on the +destination system. + + +RULES: +------ +- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari, + Android Browser 5+, iOS Safari 9+. + +- Minimum supported screen width is 240px (note that even if the device screen + resolution is e.g.320x372 changing the text size in device settings will reduce + the resolution) + +- Every page (which is not a frame) has following required structure: +``` + +
+
+
+
+
+
+ +``` + where `sidebar` and `list` are optional. Which element of the `layout` will be displayed + as a main view on mobile devices can be defined by adding `selected` class to it. + +- The `` element will receive special classes that will be updated on resize + or orientation change: + - `touch`: A touch device, screen width <= 1024px, + - 'layout-large`: Screen width > 1200px, + - `layout-normal`: Screen width <= 1200px and >= 768px, + - `layout-small`: Screen width < 768px and > 480px, + - `layout-phone`: Screen width <= 480px. + + Frames will have the same classes applied as their parent windows. + +- Every button, that is not + + +
+

+ +
+ +
+

+ +
+ + diff --git a/skins/elastic/templates/bounce.html b/skins/elastic/templates/bounce.html new file mode 100644 index 000000000..80bb03dfc --- /dev/null +++ b/skins/elastic/templates/bounce.html @@ -0,0 +1,73 @@ + + +

+ +
+ +
+

+
+
+ +
+
+ + + " tabindex="1"> +
+
+
+
+ +
+
+ + + " tabindex="1"> + +
+
+
+ + +
+ +
+ +
+ +
+
+ + +
+ +
+

+ +
+ + diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html new file mode 100644 index 000000000..5028a2232 --- /dev/null +++ b/skins/elastic/templates/compose.html @@ -0,0 +1,284 @@ + + + + + + + +

+ + +
+
+ + + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ +
+

+ +
+ +
+ +
+
+ + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + + + + +
+
+

+
+ + +
+ + +
+
+
+ +
+

+
+ + + + +
+
+ + +
+

+
+
+ +
+
+ + + " tabindex="1"> + +
+
+
+
+ +
+
+ + + " tabindex="1"> + +
+
+
+ + + + +
+ +
+ +
+
+
+
+ +
+ + +
+ +
+ +
+
+
+ + + +
+ +
+

+ +
+ +
+

+ +
+ +
+

+ +
+ +
+ +
+ + diff --git a/skins/elastic/templates/contact.html b/skins/elastic/templates/contact.html new file mode 100644 index 000000000..d2755ffab --- /dev/null +++ b/skins/elastic/templates/contact.html @@ -0,0 +1,23 @@ + + +

+ +
+
+
+ +
+ +
+
+ +
+
+ +
+ +
+ + diff --git a/skins/elastic/templates/contactedit.html b/skins/elastic/templates/contactedit.html new file mode 100644 index 000000000..32a678ff4 --- /dev/null +++ b/skins/elastic/templates/contactedit.html @@ -0,0 +1,29 @@ + + +

+ + +
+
+ + + + + +
+ +
+
+ +
+ + +
+ +
+ + + + diff --git a/skins/elastic/templates/contactimport.html b/skins/elastic/templates/contactimport.html new file mode 100644 index 000000000..1434feb6e --- /dev/null +++ b/skins/elastic/templates/contactimport.html @@ -0,0 +1,9 @@ + + +

:

+ +
+ +
+ + diff --git a/skins/elastic/templates/contactprint.html b/skins/elastic/templates/contactprint.html new file mode 100644 index 000000000..246827e60 --- /dev/null +++ b/skins/elastic/templates/contactprint.html @@ -0,0 +1,17 @@ + + +
+
+
+ +
+ +
+
+ +
+
+ + diff --git a/skins/elastic/templates/contactsearch.html b/skins/elastic/templates/contactsearch.html new file mode 100644 index 000000000..86de93d7f --- /dev/null +++ b/skins/elastic/templates/contactsearch.html @@ -0,0 +1,9 @@ + + +

:

+ +
+ +
+ + diff --git a/skins/elastic/templates/dialog.html b/skins/elastic/templates/dialog.html new file mode 100644 index 000000000..f885a547e --- /dev/null +++ b/skins/elastic/templates/dialog.html @@ -0,0 +1,7 @@ + + +
+ +
+ + diff --git a/skins/elastic/templates/error.html b/skins/elastic/templates/error.html new file mode 100644 index 000000000..3f8663496 --- /dev/null +++ b/skins/elastic/templates/error.html @@ -0,0 +1,20 @@ + + + + +
+
+ +
+
+ +
+
+ + +$__page_content + +
+
+ + diff --git a/skins/elastic/templates/folderedit.html b/skins/elastic/templates/folderedit.html new file mode 100644 index 000000000..e2c55f01c --- /dev/null +++ b/skins/elastic/templates/folderedit.html @@ -0,0 +1,13 @@ + + +

+ +
+ +
+ +
+ +
+ + diff --git a/skins/elastic/templates/folders.html b/skins/elastic/templates/folders.html new file mode 100644 index 000000000..9a8d47c6e --- /dev/null +++ b/skins/elastic/templates/folders.html @@ -0,0 +1,59 @@ + + + + +

+ + +
+
+ + + + +
+
+ +
+
+ +
+ + +
+ +
+
+ + +
+

+ +
+ +
+
+ +
+ +
+ + diff --git a/skins/elastic/templates/identities.html b/skins/elastic/templates/identities.html new file mode 100644 index 000000000..22134bf5e --- /dev/null +++ b/skins/elastic/templates/identities.html @@ -0,0 +1,45 @@ + + + + +

:

+ + +
+
+ + + +
+
+ +
+
+
+ + +
+

+ +
+ +
+
+ + diff --git a/skins/elastic/templates/identityedit.html b/skins/elastic/templates/identityedit.html new file mode 100644 index 000000000..7ffff1520 --- /dev/null +++ b/skins/elastic/templates/identityedit.html @@ -0,0 +1,13 @@ + + +

+ +
+ +
+ +
+ +
+ + diff --git a/skins/elastic/templates/includes/footer.html b/skins/elastic/templates/includes/footer.html new file mode 100644 index 000000000..165aeee94 --- /dev/null +++ b/skins/elastic/templates/includes/footer.html @@ -0,0 +1,14 @@ + +
+ + + + + + + + + + + + diff --git a/skins/elastic/templates/includes/layout.html b/skins/elastic/templates/includes/layout.html new file mode 100644 index 000000000..5d8768d5a --- /dev/null +++ b/skins/elastic/templates/includes/layout.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + <roundcube:object name="pagetitle" /> + + + + + + + + + + + + + + + +"> + +
layout"> + diff --git a/skins/elastic/templates/includes/mail-menu.html b/skins/elastic/templates/includes/mail-menu.html new file mode 100644 index 000000000..302f4e734 --- /dev/null +++ b/skins/elastic/templates/includes/mail-menu.html @@ -0,0 +1,85 @@ + + + +
+

+ +
+ +
+

+ +
+ +
+

+ +
+ +
+

+ +
diff --git a/skins/elastic/templates/includes/menu.html b/skins/elastic/templates/includes/menu.html new file mode 100644 index 000000000..87bd4de7b --- /dev/null +++ b/skins/elastic/templates/includes/menu.html @@ -0,0 +1,26 @@ +
+

+
+ +
+ +
diff --git a/skins/elastic/templates/includes/pagenav.html b/skins/elastic/templates/includes/pagenav.html new file mode 100644 index 000000000..b1d477078 --- /dev/null +++ b/skins/elastic/templates/includes/pagenav.html @@ -0,0 +1,24 @@ + diff --git a/skins/elastic/templates/includes/settings-menu.html b/skins/elastic/templates/includes/settings-menu.html new file mode 100644 index 000000000..ec2d8d89a --- /dev/null +++ b/skins/elastic/templates/includes/settings-menu.html @@ -0,0 +1,12 @@ +
" role="navigation" aria-labelledby="aria-label-settingstabs"> +
+ + +
+
+
    "> + + +
+
+
diff --git a/skins/elastic/templates/login.html b/skins/elastic/templates/login.html new file mode 100644 index 000000000..d600e29cc --- /dev/null +++ b/skins/elastic/templates/login.html @@ -0,0 +1,23 @@ + + +

+ +
+ + + + +
+ + + + diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html new file mode 100644 index 000000000..d52225b27 --- /dev/null +++ b/skins/elastic/templates/mail.html @@ -0,0 +1,189 @@ + + + +

+ + + + + +
+
+ + + +
+ +
+

+ +
+ +
+ + +
+

+ +

+
+ +
+
+ + +
+

+ +
+
+ +
+

+ +
+ +
+

+ +
+ +
+

+ +
+ +
+

+ +
+ + + + + + diff --git a/skins/elastic/templates/message.html b/skins/elastic/templates/message.html new file mode 100644 index 000000000..00fdd1bac --- /dev/null +++ b/skins/elastic/templates/message.html @@ -0,0 +1,85 @@ + + + + + +

+ +
+ +

+ + +
+
+

+ + : + + +

+
+ +
+ + +
+ + + + + + + + + + + + +
+
+
+
+
+
+

+ +
+
+

+ + +
+
+
+
+ + +
+

+ +
+ +
+

+ +
+ + diff --git a/skins/elastic/templates/messageerror.html b/skins/elastic/templates/messageerror.html new file mode 100644 index 000000000..848290e8e --- /dev/null +++ b/skins/elastic/templates/messageerror.html @@ -0,0 +1,16 @@ + + + +

+ +
+ +

+ + +
+
+ + diff --git a/skins/elastic/templates/messagepart.html b/skins/elastic/templates/messagepart.html new file mode 100644 index 000000000..5dedc08b3 --- /dev/null +++ b/skins/elastic/templates/messagepart.html @@ -0,0 +1,123 @@ + + +

+ +
+
+ + +
+ +
+ +
+

+ +

+
+ +
+
+ + +
+

+ +
+ +
+

+ +
+ +
+

+ +
+ + + + + + + diff --git a/skins/elastic/templates/messageprint.html b/skins/elastic/templates/messageprint.html new file mode 100644 index 000000000..ac6330d48 --- /dev/null +++ b/skins/elastic/templates/messageprint.html @@ -0,0 +1,27 @@ + + +
+
+

+ +

+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+ + diff --git a/skins/elastic/templates/plugin.html b/skins/elastic/templates/plugin.html new file mode 100644 index 000000000..ea73d49e8 --- /dev/null +++ b/skins/elastic/templates/plugin.html @@ -0,0 +1,15 @@ + + + + +
+
+ + +
+ +
+ + + + diff --git a/skins/elastic/templates/responseedit.html b/skins/elastic/templates/responseedit.html new file mode 100644 index 000000000..e00bda9f3 --- /dev/null +++ b/skins/elastic/templates/responseedit.html @@ -0,0 +1,13 @@ + + +

+ +
+ +
+ +
+ +
+ + diff --git a/skins/elastic/templates/responses.html b/skins/elastic/templates/responses.html new file mode 100644 index 000000000..e463d55ed --- /dev/null +++ b/skins/elastic/templates/responses.html @@ -0,0 +1,43 @@ + + + + +

+ + +
+
+ + + +
+
+ +
+
+
+ + +
+

+ +
+ +
+
+ + diff --git a/skins/elastic/templates/settings.html b/skins/elastic/templates/settings.html new file mode 100644 index 000000000..387d5c227 --- /dev/null +++ b/skins/elastic/templates/settings.html @@ -0,0 +1,29 @@ + + + + +

+ +
" aria-labelledby="aria-label-prefsection"> +
+ + + +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ + diff --git a/skins/elastic/templates/settingsedit.html b/skins/elastic/templates/settingsedit.html new file mode 100644 index 000000000..a716ee9bb --- /dev/null +++ b/skins/elastic/templates/settingsedit.html @@ -0,0 +1,13 @@ + + +

+ +
+ +
+ +
+ +
+ + diff --git a/skins/elastic/thumbnail.png b/skins/elastic/thumbnail.png new file mode 100644 index 000000000..5b6f54a6e Binary files /dev/null and b/skins/elastic/thumbnail.png differ diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js new file mode 100644 index 000000000..ff568ebf3 --- /dev/null +++ b/skins/elastic/ui.js @@ -0,0 +1,3183 @@ +/** + * Roundcube webmail functions for the Elastic skin + * + * Copyright (c) 2017-2018, The Roundcube Dev Team + * + * The contents are subject to the Creative Commons Attribution-ShareAlike + * License. It is allowed to copy, distribute, transmit and to adapt the work + * by keeping credits to the original autors in the README file. + * See http://creativecommons.org/licenses/by-sa/3.0/ for details. + * + * @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 + */ + +"use strict"; + +function rcube_elastic_ui() +{ + var ref = this, + mode = 'normal', // one of: large, normal, small, phone + touch = false, + ios = false, + is_framed = rcmail.is_framed(), + env = { + config: { + standard_windows: rcmail.env.standard_windows, + message_extwin: rcmail.env.message_extwin, + compose_extwin: rcmail.env.compose_extwin, + help_open_extwin: rcmail.env.help_open_extwin + }, + small_screen_config: { + standard_windows: true, + message_extwin: false, + compose_extwin: false, + help_open_extwin: false + } + }, + menus = {}, + content_buttons = [], + frame_buttons = [], + layout = { + menu: $('#layout > .menu'), + sidebar: $('#layout > .sidebar'), + list: $('#layout > .list'), + content: $('#layout > .content'), + }, + buttons = { + menu: $('a.menu-button'), + back_sidebar: $('a.back-sidebar-button'), + back_list: $('a.back-list-button'), + back_content: $('a.back-content-button'), + }; + + + // Public methods + this.register_content_buttons = register_content_buttons; + this.menu_hide = menu_hide; + this.menu_toggle = menu_toggle; + this.menu_destroy = menu_destroy; + this.popup_init = popup_init; + this.about_dialog = about_dialog; + this.headers_dialog = headers_dialog; + this.headers_show = headers_show; + this.spellmenu = spellmenu; + this.searchmenu = searchmenu; + this.headersmenu = headersmenu; + this.attachmentmenu = attachmentmenu; + this.mailtomenu = mailtomenu; + this.show_list = show_list; + this.show_sidebar = show_sidebar; + this.smart_field_init = smart_field_init; + this.smart_field_reset = smart_field_reset; + this.form_errors = form_errors; + this.switch_nav_list = switch_nav_list; + this.searchbar_init = searchbar_init; + this.pretty_checkbox = pretty_checkbox; + + + // Initialize layout + layout_init(); + + // Convert some elements to Bootstrap style + bootstrap_style(); + + // Initialize responsive toolbars (have to be before popups init) + toolbar_init(); + + // Initialize content frame and list handlers + content_frame_init(); + + // Initialize menu dropdowns + dropdowns_init(); + + // Setup various UI elements + setup(); + + // Update layout after initialization + resize(); + + + /** + * Setup procedure + */ + function setup() + { + var title, form, content_buttons = []; + + // Initialize search forms (in list headers) + $('.header > .searchbar').each(function() { searchbar_init(this); }); + $('.header > .searchfilterbar').each(function() { searchfilterbar_init(this); }); + + // Intercept jQuery-UI dialogs to re-style them + if ($.ui) { + $.widget('ui.dialog', $.ui.dialog, { + open: function() { + this._super(); + dialog_open(this); + return this; + } + }); + } + + // menu/sidebar/list button + buttons.menu.on('click', function() { app_menu(true); return false; }); + buttons.back_sidebar.on('click', function() { show_sidebar(); return false; }); + buttons.back_list.on('click', function() { show_list(); return false; }); + buttons.back_content.on('click', function() { show_content(true); return false; }); + + // Set content frame title in parent window (exclude ext-windows and dialog frames) + if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) { + if (title = $('h1.voice:first').text()) { + parent.$('#layout > .content > .header > .header-title:not(.constant)').text(title); + } + } + else if (!is_framed) { + title = $('.boxtitle:first', layout.content).detach().text(); + + if (!title) { + title = $('h1.voice:first').text(); + } + + if (title) { + $('.header > .header-title', layout.content).text(title); + } + } + + // Add content frame toolbar in the footer, for content buttons and navigation + if (!is_framed && layout.content.length && !$(layout.content).is('.no-navbar') + && !$(layout.content).children('.frame-content').length + ) { + env.frame_nav = $('
') + .append($(''), + target_id = target.attr('id'), + button_id = target_id + '-clone', + btn_class = target[0].className; + + btn_class = $.trim(btn_class.replace('btn-primary', 'primary').replace(/(btn[a-z-]*|button|disabled)/g, '')) + btn_class += ' button disabled'; + + button.attr({'onclick': '', id: button_id, href: '#', 'class': btn_class}) + .append($('').text(target.text())) + .on('click', function(e) { target.click(); }); + + if (is_framed) { + button.data('target', target); + frame_buttons.push($.extend({button_id: button_id}, find_button(target[0].id))); + } + else { + // Register the button to get active state updates + register_cloned_button(target_id, button_id, btn_class.replace(' disabled', '')); + } + + return button; + }; + + /** + * Finds an rcmail button + */ + function find_button(id) + { + var i, button, command; + + for (command in rcmail.buttons) { + for (i = 0; i < rcmail.buttons[command].length; i++) { + button = rcmail.buttons[command][i]; + if (button.id == id) { + return { + command: command, + index: i, + data: button + }; + } + } + } + }; + + /** + * Setup environment + */ + function layout_init() + { + // Select current layout element + env.last_selected = $('#layout > div.selected')[0]; + if (!env.last_selected && layout.content.length) { + $.each(['sidebar', 'list', 'content'], function() { + if (layout[this].length) { + env.last_selected = layout[this][0]; + layout[this].addClass('selected'); + return false; + } + }); + } + + // Register resize handler + $(window).on('resize', function() { + clearTimeout(env.resize_timeout); + env.resize_timeout = setTimeout(function() { resize(); }, 25); + }); + + // Enable rcmail.open_window intercepting + env.open_window = rcmail.open_window; + rcmail.open_window = window_open; + + rcmail + .addEventListener('message', message_displayed) + .addEventListener('menu-open', menu_toggle) + .addEventListener('menu-close', menu_toggle) + .addEventListener('editor-init', tinymce_init) + .addEventListener('autocomplete_create', rcmail_popup_init) + .addEventListener('googiespell_create', rcmail_popup_init) + .addEventListener('setquota', update_quota) + .addEventListener('enable-command', enable_command_handler) + .addEventListener('init', init); + }; + + /** + * rcmail 'init' event handler + */ + function init() + { + // Additional functionality on list widgets + $('table[data-list]').each(function() { + var button, + table = $(this), + list = table.data('list'); + + if (rcmail[list] && rcmail[list].multiselect) { + // Enable checkbox selection on list widgets + rcmail[list].checkbox_selection = true; + + // Add Select button to the list navigation bar + button = $('').attr({'class': 'button icon toggleselect disabled', role: 'button'}) + .on('click', function() { if ($(this).is('.active')) table.toggleClass('withselection'); }) + .append($('').text(rcmail.gettext('select'))) + .insertBefore(table.parents('.sidebar,.list').find('.header-title')); + + // Update Select button state on list update + rcmail.addEventListener('listupdate', function(prop) { + if (prop.list && prop.list == rcmail[list]) { + if (prop.rowcount) { + button.addClass('active').removeClass('disabled').attr('tabindex', 0); + } + else { + button.removeClass('active').addClass('disabled').attr('tabindex', -1); + } + } + }); + } + + // https://github.com/roundcube/elastic/issues/45 + // Draggable blocks scrolling on touch devices, we'll disable it there + if (touch && rcmail[list]) { + if (typeof rcmail[list].draggable == 'function') { + rcmail[list].draggable('destroy'); + } + else if (typeof rcmail[list].draggable == 'boolean') { + rcmail[list].draggable = false; + } + } + }); + + // Display "List is empty..." on the list + if (window.MutationObserver) { + $('[data-label-msg]').filter('li,table').each(function() { + var fn, observer, callback, + info = $('