Merge pull request #183 from whiteout-io/dev/WO-706

Dev/wo 706

src/sass/all.scss

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

src/sass/blocks/basics/_buttons.scss

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

src/sass/blocks/basics/_form.scss

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

src/sass/blocks/views/_contacts.scss

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

src/sass/utilities/_others.scss

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

src/sass/views/_contacts.scss

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

src/tpl/contacts.html

@@ -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">
+    <p class="typo-paragraph u-text-center" ng-show="!keys.length">
-        <div class="key-controls-search">
+      There are no contacts, yet.
-          <input class="input-text" type="text" placeholder="Search..." ng-model="searchText">
+    </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">
+        <h3 class="contacts__title" wo-touch="key.open = !key.open">{{key.userId}}</h3>
-        <div class="key-list-scroll">
+        <p class="contacts__short-description">
-          <table>
+          {{key._id.slice(8)}}
-            <tr>
+        </p>
-              <th>Key ID</th>
+        <dl class="contacts__long-description">
-              <th>Email</th>
+          <dt>Fingerprint</dt>
-              <th>Created</th>
+          <dd>{{key.fingerprint}}</dd>
-              <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-->
 
-        <!-- tooltips -->
+          <dt>Size</dt>
-        <div id="fingerprint-contact" class="tooltip">
+          <dd>{{key.bitSize}} bit</dd>
-          <div class="tooltip__title">Fingerprint</div>
-          <div class="tooltip__content">{{fingerprint}}</div>
-        </div><!--/.tooltip-->
-      </div><!--/.key-list-->
 
-    </div><!-- /.view-contacts -->
+          <dt>Created</dt>
+          <dd>{{key.created | date:'mediumDate'}}</dd>
+        </dl>
+      </li>
+    </ul>
   </div>
 
 </div>