mirror of
https://github.com/moparisthebest/mail
synced 2024-12-22 23:38:48 -05:00
Tankred Hase
commit
64abd6ad63
@ -19,9 +19,6 @@
|
||||
@import "utilities/responsive";
|
||||
@import "utilities/others";
|
||||
|
||||
// Views (TODO: refactor to BEM)
|
||||
@import "views/contacts";
|
||||
|
||||
// Blocks
|
||||
// (BEM-like Naming, see http://cssguidelin.es/#bem-like-naming)
|
||||
|
||||
@ -46,3 +43,4 @@
|
||||
@import "blocks/views/read";
|
||||
@import "blocks/views/write";
|
||||
@import "blocks/views/account";
|
||||
@import "blocks/views/contacts";
|
||||
|
||||
@ -307,7 +307,7 @@
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: $font-size-base;
|
||||
font-size: $font-size-small;
|
||||
opacity: 0.5;
|
||||
outline: 0;
|
||||
|
||||
|
||||
@ -74,6 +74,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-input-with-button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
& > .input-text {
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
& > .btn {
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
|
||||
@include respond-to(md) {
|
||||
min-width: 8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form elements
|
||||
|
||||
|
||||
44
src/sass/blocks/views/_contacts.scss
Normal file
44
src/sass/blocks/views/_contacts.scss
Normal file
@ -0,0 +1,44 @@
|
||||
.contacts {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&__delete {
|
||||
float: right;
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
}
|
||||
&__title {
|
||||
font-size: $font-size-big;
|
||||
color: $color-main;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
&__short-description {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
&__long-description {
|
||||
display: none;
|
||||
margin: 0.5em 0 0;
|
||||
& > dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&__contact {
|
||||
& + .contacts__contact {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid $color-border-light;
|
||||
}
|
||||
|
||||
&--open {
|
||||
.contacts__short-description {
|
||||
display: none;
|
||||
}
|
||||
.contacts__long-description {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,27 @@
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
// Visibility
|
||||
|
||||
.u-hide-visually {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Text alignment
|
||||
|
||||
.u-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Whitespacing
|
||||
|
||||
.u-gap-top {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.u-gap-bottom {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
.view-contacts {
|
||||
|
||||
.key-controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 30px;
|
||||
|
||||
.key-controls-search {
|
||||
flex-grow: 1;
|
||||
input[type=text] {
|
||||
line-height: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.key-controls-import {
|
||||
display: block;
|
||||
width: 8em;
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.5em;
|
||||
input[type=file] {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include respond-to(md) {
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.key-list {
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
|
||||
.key-list-scroll {
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
table {
|
||||
th, td {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.remove {
|
||||
font-size: 0.75em;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
svg {
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
fill: $color-grey-input;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// pull tooltip upwards to keep popup inside lightbox
|
||||
.tooltip {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -5,47 +5,42 @@
|
||||
<svg><use xlink:href="#icon-close" /><title>Close</title></svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="lightbox__content">
|
||||
<div class="view-contacts">
|
||||
<input class="u-hide-visually" id="keyfile-input" type="file" multiple accept=".asc" keyfile-input>
|
||||
<div class="form-input-with-button u-gap-bottom">
|
||||
<input class="input-text" type="text" placeholder="Search..." ng-model="searchText">
|
||||
<button class="btn" ng-class="{'btn--invalid': sendBtnSecure === false}" keyfile-btn>Import keys</button>
|
||||
</div>
|
||||
|
||||
<div class="key-controls">
|
||||
<div class="key-controls-search">
|
||||
<input class="input-text" type="text" placeholder="Search..." ng-model="searchText">
|
||||
<p class="typo-paragraph u-text-center" ng-show="!keys.length">
|
||||
There are no contacts, yet.
|
||||
</p>
|
||||
|
||||
<ul class="contacts">
|
||||
<li class="contacts__contact" ng-repeat="key in keys | orderBy:'userId' | filter:searchText"
|
||||
ng-class="{ 'contacts__contact--open': key.open }">
|
||||
<div class="contacts__delete">
|
||||
<button class="btn-icon-very-light" wo-touch="removeKey(key)">
|
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="key-controls-import">
|
||||
<input id="keyfile-input" type="file" multiple accept=".asc" keyfile-input>
|
||||
<button class="btn" ng-class="{'btn--invalid': sendBtnSecure === false}" keyfile-btn>Import keys</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-list">
|
||||
<div class="key-list-scroll">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Key ID</th>
|
||||
<th>Email</th>
|
||||
<th>Created</th>
|
||||
<th>Size</th>
|
||||
</tr>
|
||||
<tr ng-repeat="key in keys | orderBy:'userId' | filter:searchText">
|
||||
<td class="hover" ng-mouseover="getFingerprint(key)" wo-tooltip="#fingerprint-contact">{{key._id.slice(8)}}</td>
|
||||
<td>{{key.userId}}</td>
|
||||
<td>{{key.created | date:'mediumDate'}}</td>
|
||||
<td>{{key.bitSize}} bit</td>
|
||||
<td><button class="remove" wo-touch="removeKey(key)"><svg><use xlink:href="#icon-close" /><title>Delete</title></svg></button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div><!--/.key-list-scroll-->
|
||||
<h3 class="contacts__title" wo-touch="key.open = !key.open">{{key.userId}}</h3>
|
||||
<p class="contacts__short-description">
|
||||
{{key._id.slice(8)}}
|
||||
</p>
|
||||
<dl class="contacts__long-description">
|
||||
<dt>Fingerprint</dt>
|
||||
<dd>{{key.fingerprint}}</dd>
|
||||
|
||||
<!-- tooltips -->
|
||||
<div id="fingerprint-contact" class="tooltip">
|
||||
<div class="tooltip__title">Fingerprint</div>
|
||||
<div class="tooltip__content">{{fingerprint}}</div>
|
||||
</div><!--/.tooltip-->
|
||||
</div><!--/.key-list-->
|
||||
<dt>Size</dt>
|
||||
<dd>{{key.bitSize}} bit</dd>
|
||||
|
||||
</div><!-- /.view-contacts -->
|
||||
<dt>Created</dt>
|
||||
<dd>{{key.created | date:'mediumDate'}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user