prepared new contact structure

This commit is contained in:
Mario Volke 2014-11-06 16:24:30 +01:00 committed by Tankred Hase
parent 42c1bbc638
commit 2bc96a5fb1
6 changed files with 95 additions and 115 deletions

View File

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

View File

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

View File

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

View 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;
}
}
}
}

View File

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

View File

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