Rework index layout

- Make unified control bar that should be used for any types of
  actions related to mail list, new mail, mail details
- Move new mail button to another interface layer

web/css/controls.css

@@ -549,3 +549,10 @@
     border-color: transparent;
     background-color: currentColor;
 }
+
+
+/* spacer */
+.spacer {
+    display: block;
+    flex: 1 1 auto
+}

web/css/index.css

@@ -161,12 +161,34 @@ html, body {
     justify-content: flex-end;
 }
 
+#mailControls {
+    margin-top: 24px;
+    margin-right: 15px;
+    display: flex;
+    flex-direction: row;
+    margin-left: 15px;
+}
+
+#mailNewButton {
+    width: 160px;
+    max-width: 160px;
+    min-width: 160px;
+    flex: 1 1 auto;
+}
+
 #multiActions {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    margin-left: 18px;
+}
+
+#multiActionsControls {
     display: none;
     flex-direction: row;
-    margin-right: 30px;
 }
 
+
 .verticalPaddingBox {
     display: block;
     flex: 1 1 auto;

web/js/index.js

@@ -541,9 +541,9 @@ function selectMail(id, checkbox) {
     }
 
     if(selectionList.length > 0) {
-        $('#multiActions').css('display', 'flex');
+        $('#multiActionsControls').css('display', 'flex');
     } else {
-        $('#multiActions').css('display', 'none');
+        $('#multiActionsControls').css('display', 'none');
     }
 }
 

web/templates/index.html

@@ -16,25 +16,36 @@
         <div id="main">
             <div id="headerBox">
                 <div id="statusLine"></div>
-                <div id="multiActions" class="noselect">
-                    <img class="iconBtn" style="width: 30px; height: 30px; margin: auto auto auto 10px;" onclick="settings(); event.stopPropagation(); return false;" src="/assets/unread.svg"/>
-                    <img class="iconBtn" style="display: none; width: 30px; height: 30px; margin: auto auto auto 10px;" onclick="settings(); event.stopPropagation(); return false;" src="/assets/restore.svg"/>
-                    <img class="iconBtn" style="width: 30px; height: 30px; margin: auto auto auto 10px;" onclick="settings(); event.stopPropagation(); return false;" src="/assets/remove.svg"/>
-                </div>
-                <div id="pager" class="noselect">
-                    <img style="width: 20px;" src="/assets/prev.svg" onclick="prevPage()">
-                    <div style="width: 60px;display: flex;">
-                        <span id="currentPageIndex" style="margin:auto" class="noselect"></span>
-                        <span style="margin:auto" class="noselect">/</span>
-                        <span id="totalPageCount" style="margin:auto" class="noselect"></span>
+            </div>
+            <div id="mailControls">
+                <div id="mailNewButton" class="btn materialLevel1" style="margin-left: 15px; margin-right: 15px;">New email</div>
+                <div id="multiActions" class="materialLevel1 noselect">
+                    <div style="display: block; margin: auto 10px auto 22px;">
+                        <label class="cbox" onclick="event.stopPropagation();">
+                            <input type="checkbox">
+                            <span></span>
+                        </label>
+                    </div>
+                    <div id="multiActionsControls">
+                        <img class="iconBtn" style="width: 24px; height: 24px; margin: auto 10px auto 0; flex: 0 1 auto;" onclick="event.stopPropagation(); return false;" src="/assets/unread.svg"/>
+                        <img class="iconBtn" style="display: none; width: 24px; margin: auto 10px auto 0; height: 24px; flex: 0 1 auto;" onclick="event.stopPropagation(); return false;" src="/assets/restore.svg"/>
+                        <img class="iconBtn" style="width: 24px; height: 24px; margin: auto 10px auto 0; flex: 0 1 auto;" onclick="event.stopPropagation(); return false;" src="/assets/remove.svg"/>
+                    </div>
+                    <div class="spacer"></div>
+                    <div id="pager" class="noselect">
+                        <img class="iconBtn" style="width: 20px;" src="/assets/prev.svg" onclick="prevPage()">
+                        <div style="width: 60px;display: flex;">
+                            <span id="currentPageIndex" style="margin:auto" class="noselect"></span>
+                            <span style="margin:auto" class="noselect">/</span>
+                            <span id="totalPageCount" style="margin:auto" class="noselect"></span>
+                        </div>
+                        <img class="iconBtn" style="width: 20px;" src="/assets/next.svg" onclick="nextPage()">
                     </div>
-                    <img style="width: 20px;" src="/assets/next.svg" onclick="nextPage()">
                 </div>
             </div>
             <div class="horizontalPaddingBox">
                 <div class="contentBox">
                     <div class="leftPanel">
-                        <div id="mailNewButton" class="btn materialLevel1" style="margin-bottom: 15px;">New email</div>
                         <div id="folders"></div>
                     </div>
                     <div class="verticalPaddingBox">

web/templates/maillist.html

@@ -2,7 +2,7 @@
 {{range .}}
 <div id="mail{{.Id}}" class="mailHeaderContainer {{if .Read}}read{{else}}unread{{end}}" style="position: relative;" onmouseover="$('#mailControlPanel{{.Id}}').show()" onmouseout="$('#mailControlPanel{{.Id}}').hide()">
     <div class="mailHeader noselect" onclick="mailOpen('{{.Id}}');">
-        <div style="display: block; margin: 10px 10px;">
+        <div style="display: block; margin: 10px 12px;">
             <label class="cbox" onclick="event.stopPropagation();">
                 <input type="checkbox" onclick="selectMail('{{.Id}}', event.target); event.stopPropagation(); return true;">
                 <span></span>