[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; 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; color: $color-blue;
user-select: none; transition: background-color 0.3s;
text-align: left;
tr { &:before {
&:hover, display: inline-block;
&:focus { width: 2.5em;
background-color: darken($color-white, 2%); text-align: center;
cursor: pointer; vertical-align: middle;
}
&.seperator {
border-bottom: 1px solid $color-grey-lighter;
}
} }
&:hover,
td { &:focus {
padding: 7px 5px; background-color: darken($color-white, 2%);
&.left {
padding-left: 15px;
padding-top: 10px;
}
&.right {
padding-right: 15px;
}
} }
} }
} }
} }

View File

@ -62,21 +62,10 @@
<div class="reply-selection popover bottom"> <div class="reply-selection popover bottom">
<div class="arrow"></div> <div class="arrow"></div>
<div class="popover-content"> <ul class="popover-content">
<table> <li><button data-icon="&#xe014;" ng-click="state.writer.write(state.mailList.selected)">Reply</button></li>
<tr class="seperator" ng-click="state.writer.write(state.mailList.selected)"> <li><button data-icon="&#xe013;" ng-click="state.writer.write(state.mailList.selected, true)">Reply All</button></li>
<td class="left" data-icon="&#xe014;"></td> <li><button data-icon="&#xe015;" ng-click="state.writer.write(state.mailList.selected, null, true)">Forward</button></li>
<td class="right">Reply</td> </ul>
</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>
</div><!--/.reply-selection--> </div><!--/.reply-selection-->
</div><!--/.view-read--> </div><!--/.view-read-->