From bb386299b9100966ef6261f589417ad55da07af8 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Wed, 23 Apr 2014 19:40:46 +0200
Subject: [PATCH] [WO-334] Replace table for reply selection

---
 src/sass/views/_read.scss | 53 +++++++++++++++++++++------------------
 src/tpl/read.html         | 21 ++++------------
 2 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index 411334d..60a29c8 100644
--- a/src/sass/views/_read.scss
+++ b/src/sass/views/_read.scss
@@ -129,34 +129,39 @@
             padding: 0;
         }
 
-        table {
+        ul {
+            list-style: none;
+            margin: 0;
+        }
+
+        li {
+            border-bottom: 1px solid $color-grey-lighter;
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+
+        button {
+            display: block;
+            background: none;
+            width: 100%;
+            border: 0;
+            outline: 0;
+            padding: 0.5em 1em 0.5em 0.3em;
             color: $color-blue;
-            user-select: none;
+            transition: background-color 0.3s;
+            text-align: left;
 
-            tr {
-                &:hover,
-                &:focus {
-                    background-color: darken($color-white, 2%);
-                    cursor: pointer;
-                }
-
-                &.seperator {
-                    border-bottom: 1px solid $color-grey-lighter;
-                }
+            &:before {
+                display: inline-block;
+                width: 2.5em;
+                text-align: center;
+                vertical-align: middle;
             }
-
-            td {
-                padding: 7px 5px;
-
-                &.left {
-                    padding-left: 15px;
-                    padding-top: 10px;
-                }
-                &.right {
-                    padding-right: 15px;
-                }
+            &:hover,
+            &:focus {
+                background-color: darken($color-white, 2%);
             }
-
         }
     }
 }
\ No newline at end of file
diff --git a/src/tpl/read.html b/src/tpl/read.html
index db2ad5b..ced1afc 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -62,21 +62,10 @@
 
   <div class="reply-selection popover bottom">
     <div class="arrow"></div>
-    <div class="popover-content">
-      <table>
-        <tr class="seperator" ng-click="state.writer.write(state.mailList.selected)">
-          <td class="left" data-icon="&#xe014;"></td>
-          <td class="right">Reply</td>
-        </tr>
-        <tr class="seperator" ng-click="state.writer.write(state.mailList.selected, true)">
-          <td class="left" data-icon="&#xe013;"></td>
-          <td class="right">Reply All</td>
-        </tr>
-        <tr ng-click="state.writer.write(state.mailList.selected, null, true)">
-          <td class="left" data-icon="&#xe015;"></td>
-          <td class="right">Forward</td>
-        </tr>
-      </table>
-    </div>
+    <ul class="popover-content">
+      <li><button data-icon="&#xe014;" ng-click="state.writer.write(state.mailList.selected)">Reply</button></li>
+      <li><button data-icon="&#xe013;" ng-click="state.writer.write(state.mailList.selected, true)">Reply All</button></li>
+      <li><button data-icon="&#xe015;" ng-click="state.writer.write(state.mailList.selected, null, true)">Forward</button></li>
+    </ul>
   </div><!--/.reply-selection-->
 </div><!--/.view-read-->