Various improvements

skins/elastic/styles/colors.less

@@ -12,6 +12,7 @@
 @layout-content-background-color:   #fff;
 @layout-header-background-color:    #f9f9f9;
 
+@layout-header-button-color:        #0275d8;
 
 @badge-font-color:                  #fff;
 @searchbar-icon-active-color:       green;

skins/elastic/styles/icons.less

@@ -1,6 +1,6 @@
 /* font-icons */
 
-button.btn.icon:before,
+button.btn:before,
 a.btn.icon:before,
 a.button.icon:before,
 .toolbar a.button:before,
@@ -64,43 +64,6 @@ a.rcmaddcontact:before,
 }
 
 
-button.btn.icon:before {
-	font-size: 1em;
-}
-
-.toolbar a.button:before {
-	display: inline;
-	float: initial;
-}
-
-.toolbar a.button {
-	padding: 0 0.3em;
-}
-
-.toolbar .dropbutton > a.button:first-child {
-	padding-right: 0;
-}
-.toolbar .dropbutton > a.button.dropdown {
-	font-size: 70%;
-	padding-left: 0;
-}
-
-#taskmenu a {
-	padding: 0.4em 0;
-}
-
-#taskmenu a,
-#taskmenu a:before {
-	display: block;
-	width: 60px;
-	text-align: center;
-}
-
-#taskmenu a:before {
-	font-size: 1.5em;
-	margin-bottom: 0.1em;
-}
-
 #taskmenu a.button-mail:before {
 	content: @fa-var-envelope;
 }
@@ -330,18 +293,22 @@ button.btn.icon:before {
 	content: @fa-var-angle-down;
 }
 
-button.icon.save:before {
+button.btn.save:before {
   content: @fa-var-check;
 }
-button.icon.edit:before {
+button.btn.edit:before {
 	content: @fa-var-pencil;
 }
-button.icon.qrcode:before {
+button.btn.qrcode:before {
   content: @fa-var-qrcode;
 }
-button.icon.search:before {
+button.btn.search:before {
 	content: @fa-var-search;
 }
+button.btn.import:before {
+	content: @fa-var-upload;
+}
+
 
 a.button.icon.toolbar-menu-button:before {
 	content: @fa-var-ellipsis-v;

skins/elastic/styles/layout.less

@@ -129,12 +129,14 @@ body > #layout > div > .header > a.menu-button {
 	background-color: @layout-header-background-color;
 	font-size: 1.2em;
 	font-weight: bold;
-	line-height: 2.4em;
+	line-height: 2.5em;
-	height: 2.4em;
+	height: 2.5em;
 	padding: 0 0.5em;
 	margin: 0;
 	position: relative; /* for absolute positioning of searchbar */
 	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 #layout > div > .header {
 	border-bottom: 1px solid #ddd;
@@ -168,7 +170,8 @@ body > #layout > div > .header > a.menu-button {
 		display: none;
 	}
 	body > #layout > div > .header > a.back-sidebar-button {
-		display: inline;
+		display: block;
+		float: left;
 	}
 	body > #layout > div.menu,
 	body > #layout > div.content {
@@ -215,7 +218,8 @@ body > #layout > div > .header > a.menu-button {
 
 @media screen and (max-width: 480px) { /* phone */
 	body > #layout > div > .header > a.menu-button {
-		display: inline;
+		display: block;
+		float: left;
 	}
 	body > #layout > div.menu span.inner {
 		display: block;

skins/elastic/styles/styles.less

@@ -1,8 +1,8 @@
 @import (reference) "fontawesome.less";
 @import (reference) "colors.less";
 @import "layout.less";
-@import "widgets.less";
 @import "icons.less";
+@import "widgets.less";
 
 
 /*** Login form ***/

skins/elastic/styles/widgets.less

@@ -94,6 +94,24 @@ a.button {
 	text-decoration: none;
 }
 
+
+#taskmenu a {
+	padding: 0.4em 0;
+}
+
+#taskmenu a,
+#taskmenu a:before {
+	display: block;
+	width: 60px;
+	text-align: center;
+}
+
+#taskmenu a:before {
+	font-size: 1.5em;
+	margin-bottom: 0.1em;
+}
+
+
 .toolbar > .spacer {
 	display: inline-block;
 	width: 1.2em;
@@ -112,11 +130,48 @@ a.button {
 	height: auto;
 }
 
+.toolbar a.button:before {
+	display: inline;
+	float: initial;
+}
+
+.toolbar a.button {
+	padding: 0 0.3em;
+}
+
+.toolbar .dropbutton > a.button:first-child {
+	padding-right: 0;
+}
+.toolbar .dropbutton > a.button.dropdown {
+	font-size: 70%;
+	padding-left: 0;
+}
+
+
 .header > .buttons > input.button {
 	padding: 0.3em 0.8em;
 	font-size: 1em;
 }
 
+.header > .buttons > button.btn {
+	color: @layout-header-button-color;
+	background-color: transparent;
+	border: 0;
+	padding: 0 0.25em;
+	font-size: 1em;
+	float: left;
+	height: 2.5em;
+	line-height: 1.25em;
+	border-radius: 0;
+	cursor: pointer;
+}
+
+.header > a {
+	height: 2.5em;
+	line-height: 2.5em;
+}
+
+
 .searchbar {
 	display: table;
 	text-align: right;
@@ -128,7 +183,7 @@ a.button {
 }
 
 .searchbar > * {
-	height: 2.4em;
+	height: 2.5em;
 }
 
 .searchbar > form,
@@ -373,6 +428,11 @@ table.fixedcopy {
 }
 
 
+.formbuttons button.btn:before {
+	font-size: 1em;
+}
+
+
 /* fixes border set by accordion widget */
 .propform.ui.accordion td.title {
 	border: none;

skins/elastic/templates/contact.html

@@ -20,9 +20,9 @@
 </div>
 
 <div class="formbuttons">
-	<roundcube:button command="edit" class="btn btn-primary icon edit" label="edit" condition="!ENV:readonly" />
+	<roundcube:button command="edit" class="btn btn-primary edit" label="edit" condition="!ENV:readonly" />
 	<roundcube:if condition="env:qrcode" />
-		<roundcube:button command="qrcode" class="btn icon qrcode" label="qrcode" />
+		<roundcube:button command="qrcode" class="btn qrcode" label="qrcode" />
 	<roundcube:endif />
 </div>
 

skins/elastic/templates/contactedit.html

@@ -33,7 +33,7 @@
 </form>
 
 <div class="formbuttons">
-	<roundcube:button command="save" class="btn btn-primary icon save" label="save" />
+	<roundcube:button command="save" class="btn btn-primary save" label="save" />
 	<roundcube:button command="show" class="btn cancel" label="cancel" condition="env:action == 'edit'" />
 </div>
 

skins/elastic/templates/folderedit.html

@@ -7,7 +7,7 @@
 </div>
 
 <div class="formbuttons">
-	<roundcube:button command="save" class="ui primary button icon save" label="save" />
+	<roundcube:button command="save" class="ui primary button save" label="save" />
 </div>
 
 <roundcube:include file="/includes/footer.html" />

skins/elastic/templates/identityedit.html

@@ -7,7 +7,7 @@
 </div>
 
 <div class="formbuttons">
-	<roundcube:button command="save" class="ui primary button icon save" label="save" condition="!env:readonly" />
+	<roundcube:button command="save" class="ui primary icon save" label="save" condition="!env:readonly" />
 </div>
 
 <roundcube:include file="/includes/footer.html" />

skins/elastic/templates/message.html

@@ -30,7 +30,7 @@
 	</div>
 </div>
 
-<!-- popu menus -->
+<!-- popup menus -->
 <div id="attachment-menu" class="ui popup">
 	<ul class="toolbarmenu listing" role="menu">
 		<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="icon" classAct="icon active" innerclass="icon extwin" />

skins/elastic/templates/responseedit.html

@@ -7,7 +7,7 @@
 </div>
 
 <div class="formbuttons">
-	<roundcube:button command="save" class="ui primary button icon save" label="save" condition="!env:readonly" />
+	<roundcube:button command="save" class="ui primary button save" label="save" condition="!env:readonly" />
 </div>
 
 <roundcube:include file="/includes/footer.html" />

skins/elastic/templates/settingsedit.html

@@ -7,7 +7,7 @@
 </div>
 
 <div class="formbuttons">
-	<roundcube:button command="save" class="ui primary button icon save" label="save" />
+	<roundcube:button command="save" class="ui primary button save" label="save" />
 </div>
 
 <roundcube:include file="/includes/footer.html" />

skins/elastic/ui.js

@@ -147,9 +147,10 @@ function rcube_elastic_ui()
         var button = target.clone();
 
         form_buttons.push(
-            button.attr({'onclick': '', disabled: false, id: button.attr('id') + '-clone'})
+            button.attr({'onclick': '', disabled: false, id: button.attr('id') + '-clone', title: target.text()})
                 .data('target', target)
                 .on('click', function(e) { target.click(); })
+                .text('')
         );
     });
 
@@ -452,7 +453,7 @@ function rcube_elastic_ui()
                     all_elements.hide();
                     $(bar).width('auto'); // fixes search button position in Chrome
                     button[is_search_pending() ? 'addClass' : 'removeClass']('active')
-                        .css('display', 'inline-block');
+                        .css('display', 'block');
                     if (focus) {
                         button.focus();
                     }