Elastic: small improvements to compose screen

- Move attachments panel to the right
- Use pen icon for floating compose button

skins/elastic/styles/layout.less

@@ -127,6 +127,12 @@ body {
     min-width: 220px;
     border-right: 1px solid @color-layout-border;
     background-color: @color-layout-sidebar-background;
+
+    &.sidebar-right {
+        order: 2;
+        border-right: 0;
+        border-left: 1px solid @color-layout-border;
+    }
 }
 
 #layout-list {

skins/elastic/styles/widgets/buttons.less

@@ -195,6 +195,12 @@ html.touch {
             line-height: @floating-action-button-size;
         }
 
+        &.compose {
+            &:before {
+                content: @fa-var-pen;
+            }
+        }
+
         .inner {
             display: none;
         }

skins/elastic/templates/compose.html

@@ -10,7 +10,7 @@
 <h1 class="voice"><roundcube:label name="compose" /></h1>
 
 <!-- compose options and attachments list -->
-<div id="layout-sidebar" class="listbox">
+<div id="layout-sidebar" class="listbox sidebar-right">
 	<div class="header">
 		<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title all-sizes"><roundcube:label name="optionsandattachments" /></span>