mirror of
https://github.com/moparisthebest/mail
synced 2024-12-24 08:18:48 -05:00
Refactored icons in mail list view and bugfix in search input
This commit is contained in:
parent
746c4f3b2d
commit
4a78d228c3
@ -20,7 +20,7 @@ $color-white: #fff;
|
|||||||
$color-grey: #666;
|
$color-grey: #666;
|
||||||
$color-grey-input: #949494;
|
$color-grey-input: #949494;
|
||||||
$color-grey-dark: #333;
|
$color-grey-dark: #333;
|
||||||
$color-grey-medium: #aaa;
|
$color-grey-medium: #999;
|
||||||
$color-grey-light: #ccc;
|
$color-grey-light: #ccc;
|
||||||
$color-grey-lighter: #ddd;
|
$color-grey-lighter: #ddd;
|
||||||
$color-grey-lighterer: #f0eff5;
|
$color-grey-lighterer: #f0eff5;
|
||||||
|
@ -20,7 +20,11 @@
|
|||||||
font-size: em(13);
|
font-size: em(13);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-search {
|
// need to be more specific than normalize.css
|
||||||
width: 93%;
|
.input-search,
|
||||||
|
input[type="search"].input-search {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
-webkit-appearance: searchfield;
|
-webkit-appearance: searchfield;
|
||||||
}
|
}
|
@ -6,11 +6,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:last-child {
|
& > li {
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 7px;
|
margin-bottom: 7px;
|
||||||
@ -19,6 +15,10 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color $time-li-fade, color $time-li-fade;
|
transition: background-color $time-li-fade, color $time-li-fade;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&.ng-animate {
|
&.ng-animate {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
@ -67,16 +67,31 @@
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
line-height: 1.5em * ($font-size-small / $font-size-smaller);
|
line-height: 1.5em * ($font-size-small / $font-size-smaller);
|
||||||
}
|
}
|
||||||
.flag {
|
}
|
||||||
width: 1em;
|
.flags {
|
||||||
height: 1em;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: inset 1px 1px 1px $color-grey-light;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-top: 0.2em;
|
list-style: none;
|
||||||
margin-left: -1.3em;
|
margin: 0.8em 0 0;
|
||||||
|
padding: 0;
|
||||||
|
color: $color-grey-medium;
|
||||||
|
width: 30px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
& > li {
|
||||||
|
font-size: 90%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
&:after {
|
||||||
|
display: inline-block;
|
||||||
|
content: '';
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $color-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,7 +25,14 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
float: right;
|
||||||
|
margin-top: -0.05em; // for perfect vertical alignment with headline
|
||||||
|
|
||||||
|
@include respond-to(desktop) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
@ -38,11 +45,11 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 $padding-horizontal;
|
padding: 0 $padding-horizontal;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
.mail-list {
|
||||||
padding-bottom: 126px;
|
padding-bottom: 126px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
<!-- nav controll and section headline -->
|
<!-- nav controll and section headline -->
|
||||||
<header data-icon="" ng-click="state.nav.toggle(true); $event.stopPropagation()">
|
<header data-icon="" ng-click="state.nav.toggle(true); $event.stopPropagation()">
|
||||||
<h2>{{state.nav.currentFolder.type}}</h2>
|
<h2>{{state.nav.currentFolder.type}}</h2>
|
||||||
|
<button ng-click="state.writer.write()" class="btn-icon" title="New mail"></button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="search">
|
<div class="search">
|
||||||
@ -10,15 +11,19 @@
|
|||||||
|
|
||||||
<div class="list-wrapper" ng-iscroll="filteredMessages">
|
<div class="list-wrapper" ng-iscroll="filteredMessages">
|
||||||
<ul class="mail-list">
|
<ul class="mail-list">
|
||||||
<li ng-class="{'mail-list-active': email === state.mailList.selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': !email.unread && email.answered}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))">
|
<li ng-class="{'mail-list-active': email === state.mailList.selected}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))">
|
||||||
<h3>{{email.from[0].name || email.from[0].address}}</h3>
|
<h3>{{email.from[0].name || email.from[0].address}}</h3>
|
||||||
<div class="encrypted" data-icon="{{email.encrypted && email.decrypted ? '' : email.encrypted ? '' : ''}}"></div>
|
<div class="encrypted" data-icon="{{email.encrypted && email.decrypted ? '' : email.encrypted ? '' : ''}}"></div>
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="flag" data-icon="{{(!email.unread && email.answered) ? '' : ''}}" ng-click="toggleUnread(email); $event.stopPropagation()"></div>
|
|
||||||
<p class="subject">{{email.subject || 'No subject'}}</p>
|
<p class="subject">{{email.subject || 'No subject'}}</p>
|
||||||
<time>{{email.sentDate | date:'mediumDate'}}</time>
|
<time>{{email.sentDate | date:'mediumDate'}}</time>
|
||||||
</div>
|
</div>
|
||||||
<p class="body">{{email.body}}</p>
|
<p class="body">{{email.body}}</p>
|
||||||
|
<ul class="flags">
|
||||||
|
<li ng-show="email.unread"></li>
|
||||||
|
<li data-icon="" ng-show="!email.unread && email.answered"></li>
|
||||||
|
<li data-icon="" ng-show="email.attachments !== undefined && email.attachments.length > 0"></li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul><!--/.mail-list-->
|
</ul><!--/.mail-list-->
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user