Improve permissions modal UI

www/teams/app-team.less

@@ -196,6 +196,10 @@
             table-layout: fixed;
             &.cp-teams-generic {
                 margin-bottom: 30px;
+                margin-top: 30px;
+            }
+            tr:nth-child(even) {
+                background-color: fade(@colortheme_modal-dim, 25%);
             }
         }
         p {

www/teams/inner.js

@@ -499,6 +499,73 @@ define([
         });
     };
 
+    var makePermissions = function () {
+        var $blockContainer = UIElements.createModal({
+            id: 'cp-teams-roster-dialog',
+        }).show();
+
+        var makeRow = function (arr, first) {
+            return arr.map(function (val) {
+                return h(first ? 'th' : 'td', val);
+            });
+        };
+        // Global rights
+        var rows = [];
+        var firstRow = [Messages.teams_table_role, Messages.share_linkView, Messages.share_linkEdit,
+                            Messages.teams_table_admins, Messages.teams_table_owners];
+        rows.push(h('tr', makeRow(firstRow, true)));
+        rows.push(h('tr', makeRow([
+            Messages.team_viewers, h('span.fa.fa-check'), h('span.fa.fa-times'), h('span.fa.fa-times'), h('span.fa.fa-times')
+        ])));
+        rows.push(h('tr', makeRow([
+            Messages.team_members, h('span.fa.fa-check'), h('span.fa.fa-check'), h('span.fa.fa-times'), h('span.fa.fa-times')
+        ])));
+        rows.push(h('tr', makeRow([
+            Messages.team_admins, h('span.fa.fa-check'), h('span.fa.fa-check'), h('span.fa.fa-check'), h('span.fa.fa-times')
+        ])));
+        rows.push(h('tr', makeRow([
+            Messages.team_owner, h('span.fa.fa-check'), h('span.fa.fa-check'), h('span.fa.fa-check'), h('span.fa.fa-check')
+        ])));
+        var t = h('table.cp-teams-generic', rows);
+
+        var content = [
+            h('h4', Messages.teams_table_generic),
+            h('p', [
+                Messages.teams_table_generic_view,
+                h('br'),
+                Messages.teams_table_generic_edit,
+                h('br'),
+                Messages.teams_table_generic_admin,
+                h('br'),
+                Messages.teams_table_generic_own,
+                h('br')
+            ]),
+            t
+        ];
+
+        APP.module.execCommand('GET_EDITABLE_FOLDERS', {
+            teamId: APP.team
+        }, function (arr) {
+            if (!Array.isArray(arr) || !arr.length) {
+                return void $blockContainer.find('.cp-modal').append(content);
+            }
+            content.push(h('h5', Messages.teams_table_specific));
+            content.push(h('p', Messages.teams_table_specificHint));
+            var paths = arr.map(function (obj) {
+                obj.path.push(obj.name);
+                return h('li', obj.path.join('/'));
+            });
+            content.push(h('ul', paths));
+            /*
+            var rows = [];
+            rows.push(h('tr', makeRow(firstRow, true)));
+            rows.push(h('tr', makeRow([Messages.team_viewers, , , '', ''])));
+            content.push(h('table', rows));
+            */
+            $blockContainer.find('.cp-modal').append(content);
+        });
+    };
+
     var ROLES = ['VIEWER', 'MEMBER', 'ADMIN', 'OWNER'];
     var describeUser = function (common, curvePublic, data, icon) {
         APP.module.execCommand('DESCRIBE_USER', {
@@ -730,62 +797,7 @@ define([
         var table = h('button.btn.btn-primary', Messages.teams_table);
         $(table).click(function (e) {
             e.stopPropagation();
-            var $blockContainer = UIElements.createModal({
+            makePermissions();
-                id: 'cp-teams-roster-dialog',
-            }).show();
-
-            var makeRow = function (arr, first) {
-                return arr.map(function (val) {
-                    return h(first ? 'th' : 'td', val);
-                });
-            };
-            // Global rights
-            var rows = [];
-            var firstRow = [Messages.teams_table_role, Messages.share_linkView, Messages.share_linkEdit,
-                                Messages.teams_table_admins, Messages.teams_table_owners];
-            rows.push(h('tr', makeRow(firstRow, true)));
-            rows.push(h('tr', makeRow([Messages.team_viewers, 'x', '', '', ''])));
-            rows.push(h('tr', makeRow([Messages.team_members, 'x', 'x', '', ''])));
-            rows.push(h('tr', makeRow([Messages.team_admins, 'x', 'x', 'x', ''])));
-            rows.push(h('tr', makeRow([Messages.team_owner, 'x', 'x', 'x', 'x'])));
-            var t = h('table.cp-teams-generic', rows);
-
-            var content = [
-                h('h4', Messages.teams_table_generic),
-                h('p', [
-                    Messages.teams_table_generic_view,
-                    h('br'),
-                    Messages.teams_table_generic_edit,
-                    h('br'),
-                    Messages.teams_table_generic_admin,
-                    h('br'),
-                    Messages.teams_table_generic_own,
-                    h('br')
-                ]),
-                t
-            ];
-
-            APP.module.execCommand('GET_EDITABLE_FOLDERS', {
-                teamId: APP.team
-            }, function (arr) {
-                if (!Array.isArray(arr) || !arr.length) {
-                    return void $blockContainer.find('.cp-modal').append(content);
-                }
-                content.push(h('h5', Messages.teams_table_specific));
-                content.push(h('p', Messages.teams_table_specificHint));
-                var paths = arr.map(function (obj) {
-                    obj.path.push(obj.name);
-                    return h('li', obj.path.join('/'));
-                });
-                content.push(h('ul', paths));
-                /*
-                var rows = [];
-                rows.push(h('tr', makeRow(firstRow, true)));
-                rows.push(h('tr', makeRow([Messages.team_viewers, 'x', 'x', '', ''])));
-                content.push(h('table', rows));
-                */
-                $blockContainer.find('.cp-modal').append(content);
-            });
         });
         $header.append(table);