Merge branch 'design_dialogs_usergrid' into design_dialogs_passwords

customize.dist/src/less2/include/avatar.less

@@ -1,9 +1,12 @@
 @import (reference) "./tools.less";
+@import (reference) "./colortheme-all.less";
 .avatar_vars(
     @width: 30px
 ) {
     @avatar-width: @width;
     @avatar-font-size: @width / 1.2;
+    @avatar-default-bg: #D9D8D8;
+    @avatar-default-fg: darken(@avatar-default-bg, 40%);
 }
 .avatar_main(@width: 30px) {
     --LessLoader_require: LessLoader_currentFile();
@@ -30,16 +33,16 @@
 
             justify-content: center;
             align-items: center;
-            border-radius: 4px;
             overflow: hidden;
             box-sizing: content-box;
         }
         .cp-avatar-default {
             .tools_unselectable();
-            background: white;
+            background: @avatar-default-bg;
-            color: black;
+            color: @avatar-default-fg;
             font-size: @avatar-font-size;
             font-size: var(--avatar-font-size);
+            text-transform: capitalize;
         }
         media-tag {
             min-height: @avatar-width;

customize.dist/src/less2/include/usergrid.less

@@ -10,12 +10,12 @@
         .cp-usergrid-grid {
             display: flex;
             flex-wrap: wrap;
-            margin-bottom: 6px;
-        }
-        &:not(.large) {
-            .cp-usergrid-grid {
             margin: -3px;
             margin-bottom: 6px;
+            max-height: 130px;
+            overflow-y: auto;
+            @media screen and (max-height: 515px) {
+                max-height: unset; // remove double scrollbar
             }
         }
         &.cp-usergrid-empty {
@@ -29,16 +29,21 @@
                 flex: 1;
                 min-width: 0;
                 margin-bottom: 0 !important;
+                height: 38px;
+                margin: 6px 0px;
                 &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                     color: @cryptpad_color_grey;
                     opacity: 1; /* Firefox */
                 }
             }
-            margin-bottom: 15px;
+            margin-bottom: 10px;
             &:empty {
                 margin: 0;
                 display: none;
             }
+            button:last-child {
+                margin-right: 0px !important;
+            }
         }
         .cp-usergrid-user {
             width: 70px;
@@ -48,7 +53,6 @@
             justify-content: center;
             align-items: center;
             padding: 5px;
-            margin: 3px;
             cursor: default;
             transition: order 0.5s, background-color 0.5s;
             margin-top: 1px;
@@ -58,33 +62,52 @@
                 background-color: @colortheme_alertify-primary;
                 color: @colortheme_alertify-primary-text;
                 order: -1 !important;
+                .cp-usergrid-avatar {
+                    media-tag, .cp-avatar-default {
+                        opacity: 0.7;
+                    }
+                }
             }
             .cp-usergrid-user-avatar {
                 min-height: 40px;
             }
+            &:not(.large) {
+                .cp-usergrid-user-name {
+                    display: none;
+                }
+            }
+
             .cp-usergrid-user-name {
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 width: 100%;
                 text-align: center;
-                line-height: 18px;
+                line-height: 20px;
+                flex: 1;
             }
-            border: 1px solid @colortheme_alertify-primary;
 
             &:not(.large) {
-                .avatar_main(40px);
+                .avatar_main(60px);
             }
             &.large {
                 .avatar_main(25px);
-                width: 140px;
+                width: 145px;
                 height: 35px;
                 flex-flow: row;
-                margin: 0;
+                margin: 3px;
-                margin-right: 15px;
+                flex-basis: calc(33.3333333% - 6px);
-                margin-bottom: 1px;
+                flex-shrink: 1;
-                &:nth-child(3n) {
+                min-width: 0;
-                    margin-right: 0;
+                .cp-usergrid-user-name {
+                    margin-left: 5px;
+                    text-align: left;
+                    color: @cryptpad_text_col;
+                }
+            }
+            &.cp-selected {
+                .cp-usergrid-user-name {
+                    color: @colortheme_alertify-primary-text;
                 }
             }
         }

www/common/common-ui-elements.js

@@ -147,6 +147,7 @@ define([
                         : Messages.owner_removeText;
             var removeCol = UIElements.getUserGrid(msg, {
                 common: common,
+                large: true,
                 data: _owners,
                 noFilter: true
             }, function () {
@@ -238,6 +239,7 @@ define([
             });
             var addCol = UIElements.getUserGrid(Messages.owner_addText, {
                 common: common,
+                large: true,
                 data: _friends
             }, function () {
                 //console.log(arguments);
@@ -254,6 +256,7 @@ define([
             });
             var teamsList = UIElements.getUserGrid(Messages.owner_addTeamText, {
                 common: common,
+                large: true,
                 noFilter: true,
                 data: teamsData
             }, function () {});
@@ -737,12 +740,22 @@ define([
     UIElements.getProperties = function (common, data, cb) {
         var c1;
         var c2;
+        var button = [{
+            className: 'primary',
+            name: Messages.okButton,
+            onClick: function () {},
+            keys: [13]
+        }];
         NThen(function (waitFor) {
             getPadProperties(common, data, waitFor(function (e, c) {
-                c1 = c[0];
+                c1 = UI.dialog.customModal(c[0], {
+                    buttons: button
+                });
             }));
             getRightsProperties(common, data, waitFor(function (e, c) {
-                c2 = c[0];
+                c2 = UI.dialog.customModal(c[0], {
+                    buttons: button
+                });
             }));
         }).nThen(function () {
             var tabs = UI.dialog.tabs([{
@@ -791,9 +804,7 @@ define([
         var div = h('div.cp-usergrid-container' + noOthers + (config.large?'.large':''), [
             label ? h('label', label) : undefined,
             h('div.cp-usergrid-filter', (config.noFilter || config.noSelect) ? undefined : [
-                inputFilter,
+                inputFilter
-                buttonSelect,
-                buttonDeselect
             ]),
         ]);
         var $div = $(div);
@@ -883,7 +894,8 @@ define([
         var friendsList = UIElements.getUserGrid(null, {
             common: common,
             data: friends,
-            noFilter: false
+            noFilter: false,
+            large: true
         }, refreshButtons);
         var friendDiv = friendsList.div;
         $div.append(friendDiv);
@@ -909,6 +921,7 @@ define([
         var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, {
             common: common,
             noFilter: true,
+            large: true,
             data: teams
         }, refreshButtons);
         $div.append(teamsList.div);
@@ -1769,7 +1782,7 @@ define([
                             if (e) { return void console.error(e); }
                             UIElements.getProperties(common, data, function (e, $prop) {
                                 if (e) { return void console.error(e); }
-                                UI.alert($prop[0], undefined, true);
+                                UI.openCustomModal($prop[0]);
                             });
                         });
                     });

www/common/drive-ui.js

@@ -4187,7 +4187,7 @@ define([
                 }
                 getProperties(el, function (e, $prop) {
                     if (e) { return void logError(e); }
-                    UI.alert($prop[0], undefined, true);
+                    UI.openCustomModal($prop[0]);
                 });
             }
             else if ($this.hasClass("cp-app-drive-context-hashtag")) {