Implement UI to share a pad with a friend

www/share/app-share.less

@@ -2,6 +2,7 @@
 @import (reference) '../../customize/src/less2/include/modal.less';
 @import (reference) '../../customize/src/less2/include/alertify.less';
 @import (reference) '../../customize/src/less2/include/tippy.less';
+@import (reference) '../../customize/src/less2/include/avatar.less';
 @import (reference) '../../customize/src/less2/include/checkmark.less';
 @import (reference) '../../customize/src/less2/include/password-input.less';
 
@@ -11,4 +12,74 @@
     .checkmark_main(20px);
     .password_main();
     .modal_main();
+
+    .cp-share-columns {
+        display: flex;
+        flex-flow: row;
+
+        .cp-share-column {
+            width: 50%;
+            padding: 0 10px;
+        }
+    }
+    .cp-share-grid, .cp-share-list {
+        .avatar_main(50px);
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    .cp-share-list {
+        margin-bottom: 15px;
+    }
+    .cp-share-grid {
+        height: 228px;
+        max-height: 228px;
+        overflow-x: auto;
+    }
+    .cp-recent-only {
+        .cp-share-grid, .cp-share-grid-filter {
+            display: none;
+        }
+    }
+    .cp-share-grid-filter {
+        display: flex;
+        input {
+            flex: 1;
+            margin-bottom: 0 !important;
+            &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+                color: @colortheme_alertify-primary-text;
+                opacity: 1; /* Firefox */
+            }
+        }
+        margin-bottom: 15px;
+    }
+    .cp-share-friend {
+        width: 70px;
+        height: 70px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin-bottom: 6px;
+        cursor: default;
+        transition: order 0.5s, background-color 0.5s;
+
+        &.cp-selected {
+            background-color: @colortheme_alertify-primary;
+            color: @colortheme_alertify-primary-text;
+            order: -1 !important;
+        }
+        .cp-share-friend-name {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            width: 100%;
+            text-align: center;
+        }
+        border: 1px solid @colortheme_alertify-primary;
+        &.cp-fake-friend {
+            visibility: hidden;
+        }
+    }
 }

www/share/inner.js

@@ -53,7 +53,9 @@ define([
                     password: priv.password
                 }
             });
-            UI.openCustomModal(UI.dialog.tabs(modal));
+            UI.openCustomModal(UI.dialog.tabs(modal), {
+                wide: true
+            });
         };
         sframeChan.on('EV_SHARE_REFRESH', function (data) {
             createShareDialog(data);

www/share/main.js

@@ -7,6 +7,8 @@ define([
 ], function (nThen, ApiConfig, $, RequireConfig) {
     var requireConfig = RequireConfig();
 
+    var ready = false;
+
     var create = function (config) {
         // Loaded in load #2
         var sframeChan;
@@ -89,7 +91,7 @@ define([
                             feedbackAllowed: Utils.Feedback.state,
                             hashes: config.data.hashes,
                             password: config.data.password,
-                            file: config.data.file
+                            file: config.data.file,
                         };
                         for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
 
@@ -116,11 +118,25 @@ define([
                 sframeChan.on('EV_SHARE_ACTION', function (data) {
                     config.onShareAction(data);
                 });
+
+                sframeChan.onReady(function () {
+                    if (ready === true) { return; }
+                    if (typeof ready === "function") {
+                        ready();
+                    }
+                    ready = true;
+                });
             });
         });
-        var refresh = function (data) {
-            if (!sframeChan) { return; }
+        var refresh = function (data, cb) {
+            if (!ready) {
+                ready = function () {
+                    refresh(data, cb);
+                };
+                return;
+            }
             sframeChan.event('EV_SHARE_REFRESH', data);
+            cb();
         };
         return {
             refresh: refresh