Remove team selection from the PCS

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

@@ -2,6 +2,7 @@
 @import (reference) "./colortheme-all.less";
 @import (reference) "./tools.less";
 @import (reference) './icon-colors.less';
+@import (reference) "./avatar.less";
 
 .creation_vars(
     @color: @colortheme_default-color,
@@ -62,7 +63,7 @@
         outline: none;
         width: 700px;
         max-width: 90vw;
-        height: 500px;
+        height: 550px;
         max-height: calc(~"100vh - 20px");
         margin: 50px;
         flex-shrink: 0;
@@ -175,15 +176,47 @@
                 color: @colortheme_form-color;
             }
 
-            .cp-creation-team {
-                .cp-dropdown-container {
+            .cp-creation-teams {
+                display: none !important;
+                .cp-creation-teams-grid {
+                    display: flex;
+                    flex-wrap: wrap;
+                    padding: 0 2px;
                     flex: 1;
-                    min-width: 0;
-                    margin-left: 10px;
-                    margin-right: 10px;
-                    button, .cp-dropdown-content {
+                }
+                .cp-creation-team {
+                    .avatar_main(25px);
+                    width: 140px;
+                    height: 35px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 5px;
+                    cursor: default;
+                    font: @colortheme_app-font;
+                    color: @colortheme_modal-fg;
+                    margin: 0 1px;
+
+                    .tools_unselectable();
+
+                    &.cp-selected {
+                        background-color: @colortheme_alertify-primary;
+                        color: @colortheme_alertify-primary-text;
+                    }
+                    .cp-creation-team-avatar {
+                        .fa {
+                            font-size: 25px;
+                        }
+                    }
+                    .cp-creation-team-name {
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                         width: 100%;
+                        text-align: center;
+                        line-height: 18px;
                     }
+                    border: 1px solid @colortheme_alertify-primary;
                 }
             }
 

www/common/common-ui-elements.js

@@ -2881,57 +2881,49 @@ define([
         // Team pad
         var team;
         var teamExists = privateData.teams && Object.keys(privateData.teams).length;
-        var $teamBlock;
+        var teamValue;
         // storeInTeam can be
         // * a team ID ==> store in the team drive, and the team will be the owner
         // * -1 ==> store in the user drive, and the user will be the owner
         // * undefined ==> ask
         if (teamExists && privateData.enableTeams) {
-            var teamOptions = Object.keys(privateData.teams).map(function (teamId) {
-                var t = privateData.teams[teamId];
-                return {
-                    tag: 'a',
-                    attributes: {
-                        'data-value': teamId,
-                        'href': '#'
-                    },
-                    content: Util.fixHTML(t.name)
-                };
-            });
-            teamOptions.unshift({
-                tag: 'a',
-                attributes: {
-                    'data-value': '-1',
-                    'href': '#'
-                },
-                content: Messages.settings_cat_drive
-            });
-            teamOptions.unshift({
-                tag: 'a',
-                attributes: {
-                    'data-value': '',
-                    'href': '#'
-                },
-                content: ' '
-            });
-            var teamDropdownConfig = {
-                text: " ", // Button initial text
-                options: teamOptions, // Entries displayed in the menu
-                isSelect: true,
-                common: common
-            };
-            $teamBlock = UIElements.createDropdown(teamDropdownConfig);
-            $teamBlock.find('a').click(function () {
-                var id = $(this).attr('data-value');
-                $teamBlock.setValue(id);
-            });
-            team = h('div.cp-creation-team', [
+            var teams = Object.keys(privateData.teams).map(function (id) {
+                var data = privateData.teams[id];
+                var avatar = h('span.cp-creation-team-avatar.cp-avatar');
+                UIElements.displayAvatar(common, $(avatar), data.avatar, data.name);
+                return h('div.cp-creation-team', {
+                    'data-id': id,
+                    title: data.name,
+                },[
+                    avatar,
+                    h('span.cp-creation-team-name', data.name)
+                ]);
+            });
+            teams.unshift(h('div.cp-creation-team', {
+                'data-id': '-1',
+                title: Messages.settings_cat_drive
+            }, [
+                h('span.cp-creation-team-avatar.fa.fa-hdd-o'),
+                h('span.cp-creation-team-name', Messages.settings_cat_drive)
+            ]));
+            team = h('div.cp-creation-teams', [
                 Messages.team_pcsSelectLabel,
-                $teamBlock[0],
+                h('div.cp-creation-teams-grid', teams),
                 createHelper('#', Messages.team_pcsSelectHelp)
             ]);
+            var $team = $(team);
+            $team.find('.cp-creation-team').click(function () {
+                if ($(this).hasClass('cp-selected')) {
+                    teamValue = undefined;
+                    return void $(this).removeClass('cp-selected');
+                }
+                $team.find('.cp-creation-team').removeClass('cp-selected');
+                $(this).addClass('cp-selected');
+                teamValue = $(this).attr('data-id');
+            });
             if (privateData.storeInTeam) {
-                $teamBlock.setValue(privateData.storeInTeam);
+                $team.find('[data-id="'+privateData.storeInTeam+'"]').addClass('cp-selected');
+                teamValue = privateData.storeInTeam;
             }
         }
 
@@ -3208,9 +3200,9 @@ define([
             var templateId = $template.data('id') || undefined;
             // Team
             var team;
-            if ($teamBlock && $teamBlock.getValue()) {
-                team = privateData.teams[$teamBlock.getValue()] || {};
-                team.id = Number($teamBlock.getValue());
+            if (teamValue) {
+                team = privateData.teams[teamValue] || {};
+                team.id = Number(teamValue);
             }
 
             return {