-
diff --git a/plugins/help/localization/de_DE.inc b/plugins/help/localization/de_DE.inc
index c9ab16a0f..7b4bd8585 100644
--- a/plugins/help/localization/de_DE.inc
+++ b/plugins/help/localization/de_DE.inc
@@ -18,5 +18,5 @@
$labels['help'] = 'Hilfe';
$labels['about'] = 'Über';
$labels['license'] = 'Lizenz';
-$labels['csrfinfo'] = 'Erfahren Sie mehr über CSRF und wie wir Sie schützen';
+$labels['csrfinfo'] = 'Mehr über CSRF und wie wir Sie schützen lesen';
?>
diff --git a/plugins/managesieve/localization/de_CH.inc b/plugins/managesieve/localization/de_CH.inc
index 8740d45ce..0cbd7ec79 100644
--- a/plugins/managesieve/localization/de_CH.inc
+++ b/plugins/managesieve/localization/de_CH.inc
@@ -15,8 +15,6 @@
For translation see https://www.transifex.com/projects/p/roundcube-webmail/resource/plugin-managesieve/
*/
-
-
$labels['filters'] = 'Filter';
$labels['managefilters'] = 'Verwalte eingehende Nachrichtenfilter';
$labels['filtername'] = 'Filtername';
@@ -222,8 +220,6 @@ $labels['duplicate.header'] = 'Kopfzeile:';
$labels['duplicate.uniqueid'] = 'Bezeichner:';
$labels['duplicate.seconds'] = 'Zeitüberschreitung (Sekunden):';
$labels['duplicate.last'] = 'relativ zur letzten Ausführung';
-
-$messages = array();
$messages['filterunknownerror'] = 'Unbekannter Serverfehler';
$messages['filterconnerror'] = 'Kann nicht zum Sieve-Server verbinden';
$messages['filterdeleteerror'] = 'Serverfehler beim Löschen des Filters.';
@@ -264,5 +260,4 @@ $messages['forwardsaved'] = 'Weiterleitungsdaten erfolgreich gespeichert.';
$messages['emptyvacationbody'] = 'Mitteilungstext ist erforderlich!';
$messages['duplicate.conflict.err'] = 'Kopfzeile und eindeutiger Bezeichner sind nicht zusammen erlaubt.';
$messages['disabledaction'] = 'Aktion nicht erlaubt.';
-
?>
diff --git a/plugins/managesieve/localization/de_DE.inc b/plugins/managesieve/localization/de_DE.inc
index 32dbb856c..99e8ec2e0 100644
--- a/plugins/managesieve/localization/de_DE.inc
+++ b/plugins/managesieve/localization/de_DE.inc
@@ -15,8 +15,6 @@
For translation see https://www.transifex.com/projects/p/roundcube-webmail/resource/plugin-managesieve/
*/
-
-
$labels['filters'] = 'Filter';
$labels['managefilters'] = 'Filter für eingehende Nachrichten verwalten';
$labels['filtername'] = 'Filtername';
@@ -183,8 +181,8 @@ $labels['vacation.advanced'] = 'Erweiterte Einstellungen';
$labels['vacation.from'] = 'Antwort E-Mail-Adresse:';
$labels['vacation.subject'] = 'Betreff';
$labels['vacation.body'] = 'Nachricht';
-$labels['vacation.start'] = 'Beginn des Abwesenheit';
-$labels['vacation.end'] = 'Ende des Abwesenheit';
+$labels['vacation.start'] = 'Beginn der Abwesenheit';
+$labels['vacation.end'] = 'Ende der Abwesenheit';
$labels['vacation.status'] = 'Status';
$labels['vacation.on'] = 'An';
$labels['vacation.off'] = 'Aus';
@@ -222,8 +220,6 @@ $labels['duplicate.header'] = 'Kopfzeile:';
$labels['duplicate.uniqueid'] = 'Bezeichner:';
$labels['duplicate.seconds'] = 'Zeitüberschreitung (Sekunden):';
$labels['duplicate.last'] = 'relativ zur letzten Ausführung';
-
-$messages = array();
$messages['filterunknownerror'] = 'Unbekannter Serverfehler';
$messages['filterconnerror'] = 'Kann keine Verbindung mit Managesieve-Server herstellen';
$messages['filterdeleteerror'] = 'Filter kann nicht gelöscht werden. Ein Serverfehler ist aufgetreten.';
@@ -264,5 +260,4 @@ $messages['forwardsaved'] = 'Weiterleitungsdaten erfolgreich gespeichert.';
$messages['emptyvacationbody'] = 'Inhalt der Abwesenheitsbenachrichtigung wird benötigt!';
$messages['duplicate.conflict.err'] = 'Beides, Kopfzeilen und eindeutige Kennzeichner, sind nicht erlaubt.';
$messages['disabledaction'] = 'Aktion nicht erlaubt.';
-
?>
diff --git a/plugins/zipdownload/localization/de_CH.inc b/plugins/zipdownload/localization/de_CH.inc
index f1a180e8b..19e1ece97 100644
--- a/plugins/zipdownload/localization/de_CH.inc
+++ b/plugins/zipdownload/localization/de_CH.inc
@@ -20,3 +20,4 @@ $labels['download'] = 'Download...';
$labels['downloadmbox'] = 'Mbox Format (.zip)';
$labels['downloadmaildir'] = 'Maildir Format (.zip)';
$labels['downloademl'] = 'Source (.eml)';
+$labels['sizelimiterror'] = 'Die gesamte Grösse der ausgewählten Nachrichten übersteigt das Limit ($size)';
diff --git a/plugins/zipdownload/localization/de_DE.inc b/plugins/zipdownload/localization/de_DE.inc
index d3dadc025..acbca7de6 100644
--- a/plugins/zipdownload/localization/de_DE.inc
+++ b/plugins/zipdownload/localization/de_DE.inc
@@ -20,3 +20,4 @@ $labels['download'] = 'Herunterladen...';
$labels['downloadmbox'] = 'Mbox-Format (.zip)';
$labels['downloadmaildir'] = 'Maildir-Format (.zip)';
$labels['downloademl'] = 'Quelltext (.eml)';
+$labels['sizelimiterror'] = 'Die gesamte Größe der ausgewählten Nachrichten übersteigt das Limit ($size)';
diff --git a/program/include/rcmail_output_html.php b/program/include/rcmail_output_html.php
index 62370891b..ffec00c2e 100644
--- a/program/include/rcmail_output_html.php
+++ b/program/include/rcmail_output_html.php
@@ -94,6 +94,14 @@ class rcmail_output_html extends rcmail_output
$this->set_env('cookie_path', ini_get('session.cookie_path'));
$this->set_env('cookie_secure', filter_var(ini_get('session.cookie_secure'), FILTER_VALIDATE_BOOLEAN));
+ // Easy way to change skin via GET argument, for developers
+ if ($this->devel_mode && !empty($_GET['skin']) && preg_match('/^[a-z0-9-_]+$/i', $_GET['skin'])) {
+ if ($this->check_skin($_GET['skin'])) {
+ $this->set_skin($_GET['skin']);
+ $this->app->user->save_prefs(array('skin' => $_GET['skin']));
+ }
+ }
+
// load and setup the skin
$this->set_skin($this->config->get('skin'));
$this->set_assets_path($this->config->get('assets_path'), $this->config->get('assets_dir'));
@@ -514,7 +522,7 @@ EOF;
/**
* Send the request output to the client.
- * This will either parse a skin tempalte or send an AJAX response
+ * This will either parse a skin template.
*
* @param string $templ Template name
* @param boolean $exit True if script should terminate (default)
@@ -2177,7 +2185,7 @@ EOF;
'title' => 'options',
'tabindex' => '0',
'innerclass' => 'inner',
- 'data-popup' => $attrib['options']
+ 'data-target' => $attrib['options']
));
}
@@ -2202,10 +2210,10 @@ EOF;
));
$out = html::div(array(
- 'role' => 'search',
- 'aria-labelledby' => $attrib['label'] ? 'aria-label-' . $attrib['label'] : null,
- 'class' => $attrib['wrapper'],
- ), "$header$out\n$options_button\n$reset_button\n$search_button");
+ 'role' => 'search',
+ 'aria-labelledby' => $attrib['label'] ? 'aria-label-' . $attrib['label'] : null,
+ 'class' => $attrib['wrapper'],
+ ), "$header$out\n$reset_button\n$options_button\n$search_button");
}
return $out;
diff --git a/program/js/list.js b/program/js/list.js
index edfb19065..a4b800131 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -407,34 +407,7 @@ insert_row: function(row, before)
}
if (this.checkbox_selection) {
- var key, cell = document.createElement(this.col_tagname()),
- chbox = document.createElement('input');
-
- chbox.type = 'checkbox';
- chbox.tabIndex = -1;
- chbox.onchange = function(e) {
- self.select_row(row.uid, key || CONTROL_KEY, true);
- e.stopPropagation();
- key = null;
- };
- chbox.onmousedown = function(e) {
- key = rcube_event.get_modifier(e);
- };
-
- cell.className = 'selection';
- // make the whole cell "touchable" for touch devices
- cell.onclick = function(e) {
- if (!$(e.target).is('input')) {
- key = rcube_event.get_modifier(e);
- $(chbox).prop('checked', !chbox.checked).change();
- }
-
- e.stopPropagation();
- };
-
- cell.appendChild(chbox);
-
- row.insertBefore(cell, row.firstChild);
+ this.insert_checkbox(row);
}
if (before && tbody.childNodes.length)
@@ -451,7 +424,7 @@ insert_row: function(row, before)
},
/**
- *
+ * Update existing record
*/
update_row: function(id, cols, newid, select)
{
@@ -477,6 +450,60 @@ update_row: function(id, cols, newid, select)
}
},
+/**
+ * Add selection checkbox to the list record
+ */
+insert_checkbox: function(row)
+{
+ var key, self = this,
+ cell = document.createElement(this.col_tagname()),
+ chbox = document.createElement('input');
+
+ chbox.type = 'checkbox';
+ chbox.tabIndex = -1;
+ chbox.onchange = function(e) {
+ self.select_row(row.uid, key || CONTROL_KEY, true);
+ e.stopPropagation();
+ key = null;
+ };
+ chbox.onmousedown = function(e) {
+ key = rcube_event.get_modifier(e);
+ };
+
+ cell.className = 'selection';
+ // make the whole cell "touchable" for touch devices
+ cell.onclick = function(e) {
+ if (!$(e.target).is('input')) {
+ key = rcube_event.get_modifier(e);
+ $(chbox).prop('checked', !chbox.checked).change();
+ }
+ e.stopPropagation();
+ };
+
+ cell.appendChild(chbox);
+
+ row.insertBefore(cell, row.firstChild);
+},
+
+/**
+ * Enable checkbox selection
+ */
+enable_checkbox_selection: function()
+{
+ this.checkbox_selection = true;
+
+ // Add checkbox to existing records if any
+ var r, len, cell, row_tag = this.row_tagname().toUpperCase(),
+ rows = this.tbody.childNodes;
+
+ for (r=0, len=rows.length; r
config->get('dont_override'));
foreach ($sections as $idx => $sect) {
- $sections[$idx]['class'] = $idx;
+ $sections[$idx]['class'] = $sect['class'] ?: $idx;
if ($current && $sect['id'] != $current) {
continue;
diff --git a/skins/elastic/README.md b/skins/elastic/README.md
index 33fcf50d2..1150e30c7 100644
--- a/skins/elastic/README.md
+++ b/skins/elastic/README.md
@@ -93,7 +93,7 @@ FOR DEVELOPERS
Can be used for example for functionality not implemented or that has no sense
on phones or touch devices. Contains a comma-separated list following values:
`large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
- `phone` (width =< 480px).
+ `phone` (width =< 480px), `lbs` (width > 480px).
- `data-content-button`: Makes the action button with this attribute to be copied
to the content frame header on small/phone screens.
diff --git a/skins/elastic/images/download.svg b/skins/elastic/images/download.svg
new file mode 100644
index 000000000..10fbd4861
--- /dev/null
+++ b/skins/elastic/images/download.svg
@@ -0,0 +1,3 @@
+
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 15dd09a25..9acf5706a 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -32,9 +32,11 @@
@color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
-@color-layout-header-background: #fff;
+@color-layout-header-background: #f4f4f4;
@color-layout-footer-background: #fff;
+@color-layout-mobile-header-background: @color-layout-header-background;
+@color-layout-mobile-footer-background: @color-layout-header-background;
// Task menu
@color-taskmenu-background: #414e54;
@@ -60,10 +62,10 @@
// Toolbar
@color-toolbar-button: @color-font;
-@color-toolbar-button-background-hover: tint(@color-main, 96%);
+@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
@color-searchbar-icon-active: green;
-
+@color-searchbar-background: #fbfbfb;
// Toolbar menu
@color-toolbarmenu-hover: #fff;
@@ -91,7 +93,6 @@
@color-list-icon: fadeout(@color-list-secondary, 25%);
-
// Drag-n-drop layer
@color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background;
@@ -163,7 +164,7 @@
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
-@color-quota-background: @color-black-shade-bg;
+@color-quota-background: #fff;
@color-quota-text: @color-black-shade-text;
@color-quota-value: @color-main;
@color-quota-value-warning: @color-error;
diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 642ae9088..996a4ca26 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -55,13 +55,6 @@ body > #layout {
flex-direction: column;
max-width: 30%;
border-right: 1px solid @color-layout-border;
-
- & > .header {
- a.button {
- margin: 0;
- padding: 0 .5rem;
- }
- }
}
&.content {
@@ -105,6 +98,7 @@ body > #layout {
min-width: 300px;
background-color: @color-layout-list-background;
}
+
& > .scroller {
flex: 1;
position: relative; // for .listing-info positioning
@@ -141,11 +135,25 @@ body > #layout {
text-align: center;
margin: 0 -20rem;
}
+
+ a.toolbar-list-button,
+ a.toolbar-menu-button {
+ order: 99; // always the last button
+ }
}
& > .footer {
border-top: 1px solid @color-layout-border;
background-color: @color-layout-footer-background;
+ height: @layout-footer-height;
+ min-height: @layout-footer-height;
+ line-height: @layout-footer-height;
+
+ &.small {
+ height: @layout-footer-small-height;
+ min-height: @layout-footer-small-height;
+ line-height: @layout-footer-small-height;
+ }
&:empty {
display: none;
@@ -171,6 +179,11 @@ html.iframe {
min-width: 260px;
flex: 3;
}
+
+ body > #layout > div.list > .header > a.button {
+ padding: 0 .25rem;
+ margin: 0 .25rem;
+ }
}
@media screen and (max-width: @screen-width-medium) {
@@ -184,6 +197,8 @@ html.iframe {
}
body > #layout > div > .header {
+ background-color: @color-layout-mobile-header-background;
+
a.button {
// make the button active area smaller on touch devices
margin: 0 .3rem !important;
@@ -205,16 +220,12 @@ html.iframe {
}
}
- body > #layout > div > .header {
- &.with-search:not(.no-toolbar) {
- .searchbar {
- right: @layout-touch-icon-width;
- }
+ body > #layout > div > .footer {
+ background-color: @color-layout-mobile-footer-background;
+ }
- .searchfilterbar {
- right: (@layout-touch-icon-width * 2);
- }
- }
+ a.toolbar-list-button {
+ display: none;
}
}
@@ -229,7 +240,7 @@ html.iframe {
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
- body > #layout > div > .header > a.menu-button {
+ a.menu-button {
display: none;
}
@@ -244,7 +255,7 @@ html.iframe {
.floating-action-buttons,
body > #layout > .content > .header > .header-title,
body > #layout > div > .header > .buttons,
- body > #layout > div > .header > a.toolbar-menu-button {
+ a.toolbar-menu-button {
display: none;
}
@@ -260,8 +271,10 @@ html.iframe {
}
@media screen and (min-width: (@screen-width-large + 1px)) {
- body > #layout > div > .header > a.back-list-button,
- body > #layout > div > .header > a.back-sidebar-button {
+ body > #layout > .list > .header > .header-title:not(.all-sizes),
+ a.toolbar-list-button,
+ a.back-list-button,
+ a.back-sidebar-button {
display: none;
}
}
@@ -279,8 +292,15 @@ html.layout-small {
}
}
+html.layout-small {
+ .hidden-lbs {
+ display: none !important;
+ }
+}
+
html.layout-large,
html.layout-normal {
+ .hidden-lbs,
.hidden-big {
display: none !important;
}
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 3063d2692..75cd2ccac 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -124,7 +124,6 @@ a {
@import "widgets/taskmenu";
@import "widgets/messages";
@import "widgets/toolbar";
-@import "widgets/searchbar";
@import "widgets/lists";
@import "widgets/forms";
@import "widgets/editor";
diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
index 800c13e4e..c62a562ab 100644
--- a/skins/elastic/styles/variables.less
+++ b/skins/elastic/styles/variables.less
@@ -26,8 +26,10 @@
@layout-menu-width: 5rem;
@layout-header-height: 4.2rem;
+@layout-footer-height: @layout-header-height;
+@layout-footer-small-height: 2.5rem;
@layout-header-font-size: 1rem;
-@layout-pagenav-height: 2rem;
+@layout-searchbar-height: 2.6rem;
@layout-touch-header-height: @layout-header-height;
@layout-touch-header-font-size: 1.2rem;
@@ -45,4 +47,5 @@
@listing-treetoggle-width: 1.5em;
// Additional icons
-@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
+@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
+@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index 0406b0e22..bb5d7e990 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/skins/elastic/styles/widgets/buttons.less
@@ -36,8 +36,11 @@ button.btn {
&:before {
&:extend(.font-icon-class);
}
- &.toolbar-menu-button:before {
+ &.sidebar-menu:before,
+ &.toolbar-menu-button:before,
+ &.toolbar-list-button:before {
content: @fa-var-ellipsis-v;
+ width: 1em;
}
&.menu-button:before {
content: @fa-var-bars;
@@ -47,6 +50,9 @@ button.btn {
&.back-list-button:before {
content: @fa-var-chevron-left;
}
+ &.refresh:before {
+ content: @fa-var-sync;
+ }
&.generate:before,
&.yes:before,
&.submit:before,
@@ -113,9 +119,6 @@ button.btn {
&.help:before {
.font-icon-regular(@fa-var-life-ring);
}
- &.toggleselect:before {
- .font-icon-regular(@fa-var-check-square);
- }
&.folders:before {
content: @fa-var-folder-open;
}
@@ -123,10 +126,12 @@ button.btn {
&.settings:before {
content: @fa-var-wrench;
}
-
&.properties:before {
content: @fa-var-info-circle;
}
+ &.select:before {
+ .font-icon-regular(@fa-var-check-circle);
+ }
}
a.btn,
@@ -164,7 +169,7 @@ html.touch {
bottom: 0;
.footer:not(:empty) + & {
- bottom: @layout-touch-header-height;
+ bottom: @layout-footer-small-height;
}
a.button {
diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less
index ef7b776ae..6642d6712 100644
--- a/skins/elastic/styles/widgets/common.less
+++ b/skins/elastic/styles/widgets/common.less
@@ -72,10 +72,6 @@ font.bold {
}
}
-.pagenav.expanded + .navlist {
- border-bottom: 1px solid @color-layout-border;
-}
-
.contact-header {
display: flex;
margin-bottom: 1rem;
@@ -271,35 +267,39 @@ fieldset.image-attachment {
}
.quota-widget {
- width: 5rem;
- max-width: 8rem;
- padding: .5rem;
- text-align: center;
- position: relative;
+ width: 100%;
+ max-width: 15em;
+ padding: .5rem 1rem;
+ display: flex;
+ align-items: center;
+ color: @color-quota-text;
+
+ &:before {
+ &:extend(.font-icon-class);
+ content: @fa-var-hdd;
+ line-height: 1;
+ }
.count {
- display: block;
color: @color-quota-text;
- font-size: 1.1rem;
- line-height: 2;
+ font-size: 80%;
+ order: 2;
}
.bar {
- display: block;
+ flex: 1;
height: .5rem;
- position: absolute;
- bottom: .85rem;
- left: .5rem;
- right: .5rem;
+ margin: 0 1rem;
background-color: @color-quota-background;
+ border: 1px solid @color-layout-border;
border-radius: .25rem;
+ overflow: hidden;
}
.value {
display: block;
background-color: @color-quota-value;
- border-radius: .25rem;
- height: .5rem;
+ height: 1rem;
opacity: .75;
&.warning {
@@ -373,6 +373,7 @@ fieldset.image-attachment {
& > .footer {
height: 3.5rem;
border-top: 1px solid @color-table-border;
+ text-align: left;
a.button {
padding: 0;
diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index f1c7a3491..f4d578a49 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/skins/elastic/styles/widgets/dialogs.less
@@ -72,6 +72,7 @@ html.layout-phone {
margin: 0 !important;
padding: 0;
right: 0;
+ left: initial !important;
bottom: 0;
top: 0;
width: @layout-mobile-menu-width;
@@ -80,6 +81,7 @@ html.layout-phone {
border: 0;
display: flex;
flex-direction: column;
+ box-shadow: none;
div.arrow {
display: none;
@@ -90,8 +92,8 @@ html.layout-phone {
}
}
- .popover:not(#rcmKSearchpane) {
- left: initial !important;
+ .popover.menu {
+ left: 0 !important;
}
.popover-overlay {
@@ -106,7 +108,6 @@ html.layout-phone {
#rcmKSearchpane {
bottom: auto;
border: 1px solid @color-input-border;
- box-shadow: none;
}
.popover-header {
@@ -115,6 +116,7 @@ html.layout-phone {
border: 0;
padding: 0 .5em;
height: @layout-touch-header-height;
+ min-height: @layout-touch-header-height; // for when it's a flex item
line-height: @layout-touch-header-height;
font-size: @layout-touch-header-font-size;
color: @color-popover-mobile-header;
diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index 3a1e9d17c..af7cbd74b 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -35,6 +35,12 @@
box-shadow: none !important;
}
+.mce-btn {
+ &.mce-active {
+ background: @color-btn-secondary-background !important;
+ }
+}
+
.mce-window {
&.mce-container {
border: 0;
@@ -140,6 +146,28 @@
}
}
+ .mce-btn {
+ .btn-secondary;
+ border-radius: .3rem;
+ border-color: transparent;
+
+ &:focus {
+ border-color: transparent !important;
+ color: @color-btn-secondary;
+ background: @color-btn-secondary-background;
+ }
+
+ &.mce-primary {
+ .btn-primary;
+ }
+
+ button:hover,
+ button {
+ color: @color-btn-secondary;
+ padding: .5rem .75rem;
+ }
+ }
+
.mce-btn:last-child button:before {
content: @fa-var-times;
}
@@ -408,6 +436,10 @@
border-bottom-color: transparent;
border-bottom: 0;
}
+
+ &:focus {
+ outline: unset !important;
+ }
}
}
@@ -417,33 +449,6 @@
}
}
-.mce-btn {
- &.mce-active {
- background: @color-btn-secondary-background !important;
- }
-
- .mce-window .mce-foot & {
- .btn-secondary;
- border-radius: .3rem;
- border-color: transparent;
-
- &:focus {
- border-color: transparent !important;
- color: @color-btn-secondary;
- background: @color-btn-secondary-background;
- }
-
- &.mce-primary {
- .btn-primary;
- }
-
- button:hover,
- button {
- color: @color-btn-secondary;
- padding: .5rem .75rem;
- }
- }
-}
// Menus and popovers, e.g. color selector, emoticons selector, font selector
.mce-menu,
@@ -489,7 +494,23 @@
width: 100% !important;
}
+ .mce-window-head {
+ background-color: @color-layout-mobile-header-background;
+
+ .mce-title {
+ font-size: 1rem;
+ text-align: center;
+ padding: 0 1rem;
+ }
+
+ .mce-close {
+ display: none;
+ }
+ }
+
.mce-foot {
+ background-color: @color-layout-mobile-footer-background;
+
.mce-container-body {
justify-content: space-evenly;
@@ -508,6 +529,10 @@
background: transparent;
}
+ &:last-child {
+ margin: 0;
+ }
+
button {
color: @color-font;
padding: .45rem;
@@ -658,6 +683,10 @@ html.touch .mce-grid td {
&.droptarget {
border: .2rem dashed @color-table-border;
+
+ &:after {
+ margin-top: 2rem;
+ }
}
button {
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 9c8b786ef..7a1af4569 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -92,7 +92,6 @@ input.smart-upload {
td.rowactions {
width: 1%;
- .custom-select,
.form-control {
width: auto;
}
@@ -620,20 +619,25 @@ html.ms .propform {
td.editfield { width: 99%; /* TODO */ }
-
-ul.proplist {
+@proplist-record-height: 2rem;
+.proplist {
margin-bottom: 0;
- @media screen and (min-width: (@screen-width-bs-phone + 1px)) {
+ .formcontent > &,
+ fieldset > & {
padding-left: 0;
}
li {
list-style-type: none;
- line-height: 2.4rem;
+ line-height: @proplist-record-height;
margin-bottom: .25rem;
display: flex;
+ &:last-child {
+ margin-bottom: 0;
+ }
+
input[type=radio] {
vertical-align: middle;
margin-right: .5em;
@@ -645,16 +649,22 @@ ul.proplist {
label {
margin: 0;
+ line-height: @proplist-record-height;
}
.icon-checkbox {
- height: 2.4rem !important;
+ height: @proplist-record-height;
margin-left: -1.2em;
& + label {
- height: 2rem;
+ height: @proplist-record-height;
margin-right: .5rem;
- padding: 0;
+ padding: 0 !important;
+ line-height: 1.25;
+
+ html.touch &:before {
+ line-height: 1.1;
+ }
}
}
@@ -665,7 +675,6 @@ ul.proplist {
}
}
-
.checklist {
.form-check-input + label {
margin-right: .25rem;
@@ -818,8 +827,6 @@ html.touch .popupmenu.form {
margin: 0;
}
- // TODO background image
-
.upload-form {
text-align: center;
padding-bottom: 1em;
@@ -864,6 +871,15 @@ html.touch .popupmenu.form {
}
&.droptarget {
+ padding-bottom: .5rem !important;
+
+ &:after {
+ content: @icon-file-drop;
+ width: 10rem;
+ margin: 5rem auto 0 auto;
+ display: block;
+ }
+
&.active {
border-color: darken(@color-toolbar-button-background-hover, 20%);
}
@@ -1260,4 +1276,9 @@ td.input-group input {
.input-group-text {
color: @color-input;
background-color: @color-input-addon-background;
+
+ input:focus {
+ z-index: 1;
+ border-color: @color-input-border-focus !important;
+ }
}
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index 92594278a..f18e96c0e 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -79,6 +79,7 @@
position: absolute;
height: (@layout-header-height - .7rem);
margin: .25rem;
+ padding-bottom: .375rem;
cursor: pointer;
&:before {
@@ -171,6 +172,7 @@
.ui-dialog-titlebar {
height: @layout-touch-header-height;
text-align: center;
+ background-color: @color-layout-mobile-header-background;
}
.ui-dialog-title {
@@ -191,6 +193,7 @@
text-align: center !important;
border-top: 1px solid @color-dialog-header-border;
height: @layout-header-height !important;
+ background-color: @color-layout-mobile-footer-background;
.ui-dialog-buttonset {
justify-content: space-around;
@@ -284,6 +287,10 @@
transform: translate(-50%, -50%);
box-shadow: 10px 10px 10px 1000px @color-dialog-overlay-background;
+ &:not(.ui-datepicker-inline) {
+ z-index: 120 !important; // fixes datepicker over input-group and dialogs
+ }
+
.ui-datepicker-header,
.ui-datepicker-title {
line-height: 4rem;
@@ -367,6 +374,12 @@ html.touch {
}
}
+// Fixes datepicker z-index issue on input-group inputs in dialogs
+// With non-relative position the input's z-index is ignored
+.input-group > .form-control.hasDatepicker {
+ position: initial;
+}
+
.minicolors-panel {
border: 1px solid @color-datepicker-border;
box-shadow: 3px 3px 5px @color-popover-shadow;
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index fda3724d9..f06489828 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -335,6 +335,9 @@ html.ie11 .listing.iconized li a:before {
&.calendar > td.section:before {
content: @fa-var-calendar;
}
+ &.chat > td.section:before {
+ content: @fa-var-comments;
+ }
}
/* selecatable list: e.g. spellcheck language selection */
@@ -638,53 +641,52 @@ table.fixedcopy {
cursor: pointer;
width: 1em;
}
+
tr.thread.expanded td.threads div:before {
content: @fa-var-angle-down;
}
- td.subject span.msgicon.status:before {
- &:extend(.font-icon-class);
- content: @fa-var-circle;
- cursor: pointer;
- font-size: .4em;
- width: 3em;
- height: 2rem;
- }
- td.subject span.msgicon.status.unread:before {
- content: @fa-var-star;
- font-size: 1.1em;
- width: 1.1em;
- line-height: 1.75;
- color: @color-warning;
- }
- td.subject span.msgicon.status.unreadchildren:before {
- .font-icon-regular(@fa-var-star);
- font-size: 1.1em;
- width: 1.1em;
- line-height: 1.75;
- }
- td.subject span.msgicon.status.replied:before {
- content: @fa-var-reply;
- font-size: 1.1em;
- line-height: 1.75;
- width: 1.1em;
- }
- td.subject span.msgicon.status.forwarded:before {
- .font-icon-solid(@fa-var-share);
- font-size: 1.1em;
- line-height: 1.75;
- width: 1.1em;
- }
- td.subject span.msgicon.status.replied.forwarded:before {
- content: @fa-var-reply; // TODO
- font-size: 1.1em;
- line-height: 1.75;
- width: 1.1em;
- }
- tr.deleted td.subject span.msgicon.status:before {
- content: @fa-var-ban;
- font-size: 1.1em;
- line-height: 1.75;
- width: 1.1em;
+
+ td.subject span.msgicon.status {
+ &:before {
+ &:extend(.font-icon-class);
+ content: @fa-var-circle;
+ cursor: pointer;
+ font-size: .4em;
+ width: 1.1rem;
+ height: 2rem;
+ line-height: 2rem;
+ }
+
+ &.unread:before {
+ content: @fa-var-circle;
+ color: @color-warning;
+ font-size: .5em;
+ }
+
+ &.unreadchildren:before {
+ .font-icon-regular(@fa-var-circle);
+ font-size: .5em;
+ }
+
+ &.replied:before {
+ .font-icon-solid(@fa-var-reply);
+ font-size: 1.1em;
+ }
+
+ &.forwarded:before {
+ .font-icon-solid(@fa-var-share);
+ font-size: 1.1em;
+ }
+
+ &.replied.forwarded:before {
+ .font-icon-solid(@fa-var-reply); // TODO
+ font-size: 1.1em;
+ }
+
+ tr.deleted &:before {
+ .font-icon-solid(@fa-var-ban);
+ font-size: 1.1em;
+ }
}
span.attachment span {
diff --git a/skins/elastic/styles/widgets/mail.less b/skins/elastic/styles/widgets/mail.less
index 85de0253e..13d9e10c4 100644
--- a/skins/elastic/styles/widgets/mail.less
+++ b/skins/elastic/styles/widgets/mail.less
@@ -19,7 +19,7 @@
margin-bottom: 1rem;
.subject {
- .overflow-ellipsis;
+ display: flex;
font-size: 1.5rem;
font-weight: bold;
white-space: nowrap;
@@ -32,6 +32,26 @@
font-size: 1em;
color: @color-error;
}
+
+ a.extwin {
+ margin-left: .25rem;
+
+ &:before {
+ &:extend(.font-icon-class);
+ font-size: 75%;
+ line-height: 1.5;
+ margin: 0;
+ content: @fa-var-external-link-square-alt;
+ }
+ }
+
+ & > span {
+ .overflow-ellipsis;
+ }
+
+ span.inner {
+ display: none;
+ }
}
.short-header {
@@ -65,25 +85,16 @@
margin-right: .5rem;
text-decoration: none;
white-space: nowrap;
- line-height: 1.5;
display: inline-block;
&:before {
&:extend(.font-icon-class);
- display: inline-block;
- float: none;
- }
-
- &.extwin:before {
- content: @fa-var-external-link-square-alt;
- }
-
- &.headers:before {
- content: @fa-var-wrench;
+ height: 1.5rem;
+ line-height: 1.3;
}
&.envelope:before {
- .font-icon-regular(@fa-var-envelope);
+ content: @fa-var-envelope;
}
&.html:before {
@@ -105,6 +116,11 @@
padding: .25rem 0 !important;
}
}
+
+ a.extwin,
+ a.headers {
+ text-decoration: none;
+ }
}
#message-content {
diff --git a/skins/elastic/styles/widgets/searchbar.less b/skins/elastic/styles/widgets/searchbar.less
deleted file mode 100644
index a97a54adf..000000000
--- a/skins/elastic/styles/widgets/searchbar.less
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Roundcube webmail styles 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 authors in the README.md file.
- * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
- */
-
-/*** Searchbar and searchfilterbar widgets ***/
-
-.searchbar {
- position: absolute;
- background-color: @color-layout-header-background;
- right: .25rem;
- height: @layout-header-height;
-
- a.button {
- min-width: auto;
- padding: 0;
- display: block;
-
- &:before {
- line-height: @layout-header-height;
- }
-
- span.inner {
- display: none;
- }
- }
-
- .input-group {
- margin-top: calc(@layout-header-height/2 - 2.25rem/2);
- display: none;
- padding: 0 .5rem;
-
- .icon:before {
- font-size: 1em;
- line-height: 1.1;
- }
-
- .icon.filter,
- .icon.search {
- color: #888;
- }
- }
-
- form {
- display: none;
- }
-
- a.icon {
- &:before {
- &:extend(.font-icon-class);
- margin: 0;
- }
-
- &.reset:before {
- content: @fa-var-trash-alt;
- }
-
- &.options:before {
- content: @fa-var-angle-down;
- }
- }
-
- &.active a.button.search {
- color: @color-searchbar-icon-active;
- }
-
- &.open {
- z-index: 10;
- left: 0 !important;
- right: 0 !important;
-
- .input-group {
- display: flex;
- }
-
- form {
- display: flex;
- }
-
- a.button.filter,
- a.button.search {
- display: none;
- }
- }
-
- a.button.search {
- padding: 0 .5rem;
- }
-}
-
-.searchfilterbar {
- right: @layout-touch-icon-width + .25rem;
-
- &.active a.button.filter {
- color: @color-searchbar-icon-active;
- }
-}
-
-html.ie11 {
- .searchbar {
- a.button.filter:before,
- a.button.search:before {
- line-height: 3.2;
- font-size: 1.25rem;
- }
- }
-}
diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
index 2bc561cfc..29c4f45a4 100644
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ b/skins/elastic/styles/widgets/taskmenu.less
@@ -59,6 +59,9 @@
&.notes:before {
content: @fa-var-sticky-note;
}
+ &.chat:before {
+ content: @fa-var-comments;
+ }
}
@media screen and (max-width: @screen-width-xs) {
diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less
index b874d0b42..21160d8d8 100644
--- a/skins/elastic/styles/widgets/toolbar.less
+++ b/skins/elastic/styles/widgets/toolbar.less
@@ -14,6 +14,7 @@
.toolbar {
margin: 0;
font-size: 1rem;
+ text-align: center;
&.listing a,
a {
@@ -46,7 +47,6 @@
&:before {
&:extend(.font-icon-class);
- display: inline;
float: none;
margin: 0;
line-height: 1.75;
@@ -112,23 +112,23 @@
&.encrypt:before {
content: @fa-var-lock;
}
- &.firstpage:before {
- content: @fa-var-fast-backward;
- }
&.prev:before {
content: @fa-var-arrow-left;
}
&.next:before {
content: @fa-var-arrow-right;
}
+ &.firstpage:before {
+ content: @fa-var-angle-double-left;
+ }
&.prevpage:before {
- content: @fa-var-backward;
+ content: @fa-var-angle-left;
}
&.nextpage:before {
- content: @fa-var-forward;
+ content: @fa-var-angle-right;
}
&.lastpage:before {
- content: @fa-var-fast-forward;
+ content: @fa-var-angle-double-right;
}
&.send:before {
content: @fa-var-paper-plane;
@@ -156,7 +156,7 @@
content: @fa-var-comment;
}
&.select:before {
- .font-icon-regular(@fa-var-check-square);
+ .font-icon-regular(@fa-var-check-circle);
}
&.threads:before {
content: @fa-var-comments;
@@ -180,10 +180,10 @@
content: @fa-var-user;
}
&.expand:before {
- content: @fa-var-caret-down;
+ content: @fa-var-angle-right;
}
&.collapse:before {
- content: @fa-var-caret-up;
+ content: @fa-var-angle-down;
}
&.submit:before {
content: @fa-var-check;
@@ -233,42 +233,38 @@
}
&.pagenav {
- text-align: center;
display: flex;
- border-bottom: 1px solid @color-layout-border;
- height: @layout-pagenav-height;
- overflow: hidden;
+ justify-content: normal !important;
+ align-items: center;
a.button {
flex-grow: 1;
- font-size: 80%;
min-width: 2rem !important;
- height: @layout-pagenav-height !important;
- color: @color-list-pagenav;
- overflow: hidden;
+ height: @layout-footer-small-height;
&:before {
- line-height: 1 !important;
+ line-height: 1.25;
}
}
.pagenav-text {
.overflow-ellipsis;
+ color: @color-list-pagenav;
flex-grow: 4;
- line-height: @layout-pagenav-height;
font-size: 80%;
- color: @color-list-pagenav;
white-space: nowrap;
}
input {
width: 3rem;
+ max-width: 5rem;
font-size: 90%;
- line-height: 1;
- padding: .25rem;
- margin: .15rem;
- display: inline;
text-align: center;
+ max-height: 1.6rem;
+
+ html.layout-phone & {
+ display: none;
+ }
}
span.inner {
@@ -277,18 +273,25 @@
&.pagenav-list {
cursor: pointer;
+ background-color: @color-searchbar-background;
+ border-bottom: 1px solid @color-list-border;
a.button {
- flex-grow: initial;
+ flex-grow: unset;
}
.pagenav-text {
text-align: left;
+ font-size: 100%;
}
& + .navlist {
background-color: #fbfbfb;
}
+
+ &.expanded + .navlist {
+ border-bottom: 1px solid @color-layout-border;
+ }
}
}
@@ -301,6 +304,12 @@
}
}
+ &.footer.small {
+ a.button:before {
+ height: auto; // for Chrome
+ }
+ }
+
&.content-frame-navigation.hide-nav-buttons {
a.next,
a.prev {
@@ -489,10 +498,10 @@
content: @fa-var-pencil-alt;
}
a.read:before {
- .font-icon-regular(@fa-var-star);
+ .font-icon-regular(@fa-var-circle);
}
a.unread:before {
- content: @fa-var-star;
+ content: @fa-var-circle;
}
a.flag:before {
content: @fa-var-flag;
@@ -522,6 +531,15 @@
a.export.all:before {
content: @fa-var-download;
}
+ a.select:before {
+ content: @fa-var-check-circle;
+ }
+ a.threads:before {
+ content: @fa-var-comments;
+ }
+ a.selection:before {
+ content: @fa-var-mouse-pointer;
+ }
a.select.all:before {
.font-icon-regular(@fa-var-check-square);
}
@@ -619,17 +637,6 @@
}
}
-#layout > .sidebar > .header,
-#layout > .list > .header {
- span.inner {
- display: none;
- }
-}
-
-#layout > .content > * > .toolbar {
- text-align: center;
-}
-
html.touch {
.toolbarmenu.listing td,
.toolbarmenu.listing li,
@@ -655,11 +662,11 @@ html.ie11 .toolbar .dropbutton a.dropdown:before {
}
@media screen and (min-width: (@screen-width-small + 1px)) {
- ul.toolbar {
- flex: 1;
- }
-
.toolbar {
+ .header > & {
+ display: flex; // for Safari on desktop
+ }
+
a.button {
&:not(.disabled):focus,
&:not(.disabled):hover {
@@ -743,3 +750,140 @@ html.ie11 .toolbar .dropbutton a.dropdown:before {
color: @color-font;
}
}
+
+a.button.icon.toolbar-button {
+ order: 8;
+
+ @media screen and (min-width: (@screen-width-large + 1px)) {
+ height: @layout-header-height;
+ line-height: 1.5;
+ padding: .45rem;
+
+ &:before {
+ float: none;
+ height: 1.75rem;
+ line-height: 1.75;
+ width: auto;
+ }
+
+ span.inner {
+ display: inline;
+ font-weight: normal;
+ font-size: 90%;
+ }
+ }
+}
+
+
+/*** Searchbar and searchoptions widgets ***/
+
+.searchbar {
+ height: @layout-searchbar-height;
+ min-height: @layout-searchbar-height; // because of Flexbox
+ line-height: @layout-searchbar-height;
+ background-color: @color-searchbar-background;
+ border-bottom: 1px solid @color-list-border;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
+ position: relative;
+ padding-right: .5rem;
+
+ form {
+ flex: 1;
+ display: flex;
+
+ &:before {
+ &:extend(.font-icon-class);
+ content: @fa-var-search;
+ height: @layout-searchbar-height;
+ color: @color-list-pagenav;
+ margin: 0 0 0 .75rem;
+ }
+ }
+
+ input {
+ width: 100%;
+ border: 0;
+ background: transparent;
+ padding: .5rem;
+ }
+
+ a.button {
+ height: @layout-searchbar-height;
+ min-width: auto;
+ color: @color-toolbar-button;
+
+ &:before {
+ &:extend(.font-icon-class);
+ }
+
+ &.options {
+ &:before {
+ content: @fa-var-angle-down;
+ line-height: 1.25;
+ width: 1em;
+ }
+ }
+
+ &.reset {
+ display: none;
+
+ &:before {
+ content: @fa-var-times;
+ font-size: 1em;
+ }
+ }
+
+ &.search {
+ display: none;
+ }
+ }
+
+ span.inner {
+ display: none;
+ }
+
+ &.active {
+ a.button.reset {
+ display: inline;
+ }
+ }
+
+ &.open a.button.options:before {
+ content: @fa-var-angle-up;
+ }
+}
+
+.searchoptions {
+ button.search {
+ width: 100%;
+ }
+
+ ul.proplist {
+ & + div {
+ margin-top: 1rem;
+ }
+ }
+
+ .input-group {
+ &:not(:last-child) {
+ margin-bottom: .5rem;
+ }
+
+ .input-group-prepend {
+ width: 30%;
+ }
+
+ label {
+ width: 100%;
+ }
+ }
+
+ .formbuttons {
+ // this is needed because we hide .formbuttons on small devices
+ // we don't want it for search options form
+ display: block !important;
+ }
+}
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
index 3717ce98f..4e1bf5b2a 100644
--- a/skins/elastic/templates/addressbook.html
+++ b/skins/elastic/templates/addressbook.html
@@ -8,18 +8,14 @@
-