[WO-334] Replace table for reply selection

This commit is contained in:
Tankred Hase 2014-04-23 19:40:46 +02:00
parent ba22ee4674
commit bb386299b9
2 changed files with 34 additions and 40 deletions

View File

@ -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%);
}
}
}
}

View File

@ -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-->