[IMP] settings: Improve general UX (back2basics)

TaskID: 2043133

closes odoo/odoo#35382

Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

3 files changed, 54 insertions, 181 deletions

diff --git a/addons/base_setup/static/src/js/res_config_invite_users.js b/addons/base_setup/static/src/js/res_config_invite_users.js
index 653a130868c..97b5739026c 100644
--- a/addons/base_setup/static/src/js/res_config_invite_users.js
+++ b/addons/base_setup/static/src/js/res_config_invite_users.js
@@ -4,9 +4,7 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
     var Widget = require('web.Widget');
     var widget_registry = require('web.widget_registry');
     var core = require('web.core');
-    var framework = require('web.framework');
 
-    var QWeb = core.qweb;
     var _t = core._t;
 
     var ResConfigInviteUsers = Widget.extend({
@@ -14,10 +12,8 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
 
         events: {
             'click .o_web_settings_invite': '_onClickInvite',
-            'click .o_web_settings_access_rights': '_onClickAccessRights',
             'click .o_web_settings_user': '_onClickUser',
             'click .o_web_settings_more': '_onClickMore',
-            'click .o_badge_remove': '_onClickBadgeRemove',
             'keydown .o_user_emails': '_onKeydownUserEmails',
         },
 
@@ -55,12 +51,26 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
         //--------------------------------------------------------------------------
 
         /**
-         * Creates and appends badges for valid and unique email addresses
+         * @private
+         * @param {string} email
+         * @returns {boolean} true if the given email address is valid
+         */
+        _validateEmail: function (email) {
+            var re = /^([a-z0-9][-a-z0-9_\+\.]*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,63}(?:\.[a-z]{2})?)$/i;
+            return re.test(email);
+        },
+
+        /**
+         * Send invitation for valid and unique email addresses
          *
          * @private
          */
-        _createBadges: function () {
+        _invite: function () {
+            var self = this;
+
             var $userEmails = this.$('.o_user_emails');
+            $userEmails.prop('disabled', true);
+            this.$('.o_web_settings_invite').prop('disabled', true);
             var value = $userEmails.val().trim();
             if (value) {
                 // filter out duplicates
@@ -85,34 +95,25 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
                     emails = _.difference(emails, existingEmails);
                 }
 
-                // add valid email addresses, if any
                 if (emails.length) {
-                    this.emails = this.emails.concat(emails);
-                    this.$('.o_web_settings_invitation_form').append(QWeb.render('EmailBadge', {emails: emails}));
                     $userEmails.val('');
+                    this._rpc({
+                        model: 'res.users',
+                        method: 'web_create_users',
+                        args: [emails],
+                    }).then(function () {
+                        return self.load().then(function () {
+                            self.renderElement();
+                            self.$('.o_user_emails').focus();
+                        });
+                    });
+                } else {
+                    $userEmails.prop('disabled', false);
+                    this.$('.o_web_settings_invite').prop('disabled', false);
+                    self.$('.o_user_emails').focus();
                 }
             }
         },
-        /**
-         * Removes a given badge from the DOM, and its associated email address
-         *
-         * @private
-         * @param {jQueryElement} $badge
-         */
-        _removeBadge: function ($badge) {
-            var email = $badge.text().trim();
-            this.emails = _.without(this.emails, email);
-            $badge.remove();
-        },
-        /**
-         * @private
-         * @param {string} email
-         * @returns {boolean} true if the given email address is valid
-         */
-        _validateEmail: function (email) {
-            var re = /^([a-z0-9][-a-z0-9_\+\.]*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,63}(?:\.[a-z]{2})?)$/i;
-            return re.test(email);
-        },
 
         //--------------------------------------------------------------------------
         // Handlers
@@ -122,47 +123,18 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
          * @private
          * @param {MouseEvent} ev
          */
-        _onClickAccessRights: function (e) {
-            e.preventDefault();
-            this.do_action('base.action_res_users');
-        },
-        /**
-         * @private
-         * @param {MouseEvent} ev
-         */
-        _onClickBadgeRemove: function (ev) {
-            var $badge = $(ev.target).closest('.badge');
-            this._removeBadge($badge);
-        },
-        /**
-         * @private
-         * @param {MouseEvent} ev
-         */
         _onClickInvite: function (ev) {
-            var self = this;
-            this._createBadges();
-            if (this.emails.length) {
+            if (this.$('.o_user_emails').val().length) {
                 var $button = $(ev.target);
                 $button.button('loading');
-                this._rpc({
-                    model: 'res.users',
-                    method: 'web_create_users',
-                    args: [this.emails],
-                }).then(function () {
-                    return self.load().then(function () {
-                        self.renderElement();
-                    });
-                }).guardedCatch(function () {
-                    // NOTE Not sure that this is needed
-                    $button.button('reset');
-                });
+                return this._invite();
             }
         },
         /**
          * @private
          * @param {MouseEvent} ev
          */
-        _onClickMore: function(ev) {
+        _onClickMore: function (ev) {
             ev.preventDefault();
             this.do_action({
                 name: _t('Users'),
@@ -182,7 +154,7 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
          */
         _onClickUser: function (ev) {
             ev.preventDefault();
-            var user_id = $(e.currentTarget).data('user-id');
+            var user_id = $(ev.currentTarget).data('user-id');
             this.do_action({
                 type: 'ir.actions.act_window',
                 res_model: 'res.users',
@@ -196,15 +168,10 @@ odoo.define('base_setup.ResConfigInviteUsers', function (require) {
          * @param {KeyboardEvent} ev
          */
         _onKeydownUserEmails: function (ev) {
-            var $userEmails = this.$('.o_user_emails');
-            var keyCodes = [$.ui.keyCode.TAB, $.ui.keyCode.COMMA, $.ui.keyCode.ENTER, $.ui.keyCode.SPACE];
+            var keyCodes = [$.ui.keyCode.TAB, $.ui.keyCode.COMMA, $.ui.keyCode.ENTER];
             if (_.contains(keyCodes, ev.which)) {
                 ev.preventDefault();
-                this._createBadges();
-            }
-            // remove last badge on backspace
-            if (ev.which === $.ui.keyCode.BACKSPACE && this.emails.length && !$userEmails.val()) {
-                this._removeBadge(this.$('.o_web_settings_invitation_form .badge:last'));
+                this._invite();
             }
         },
     });
diff --git a/addons/base_setup/static/src/scss/settings.scss b/addons/base_setup/static/src/scss/settings.scss
index 2f385a3ad10..5e94045dff3 100644
--- a/addons/base_setup/static/src/scss/settings.scss
+++ b/addons/base_setup/static/src/scss/settings.scss
@@ -1,67 +1,6 @@
-.o_web_settings {
-
-    $bg-dashboard-col: #FFF;
-
-    @mixin o-web-settings-card-card {
-        box-shadow: 0 1px 2px 0 rgba(0,0,0,.14);
-        background: $bg-dashboard-col;
-        border-radius: 2px;
-    }
-
-    background: #F7F7F7;
-    height: 100%;
-
-    .o_web_settings_col {
-        > div > hr {
-            margin: 12px -18px 15px -18px;
-            border-color: #CBCBCB;
-        }
-
-        > div {
-            @include o-web-settings-card-card;
-            padding: 25px 18px 18px 18px;
-
-            .o_web_settings_header {
-                font-size: 22px;
-                margin-bottom: 8px;
-            }
-        }
-        .btn.o_browse_apps, .btn.o_web_settings_invitations {
-            margin-top: 12px;
-        }
-        .o_web_settings_compact_subtitle {
-            line-height: 12px;
-            display: block;
-        }
-        .o_web_settings_invitations {
-            .o_web_settings_invitation_form {
-                text-align: left;
-                > textarea {
-                    resize: vertical;
-                    width: 100%;
-                }
-            }
-        }
-        .o_web_settings_planner {
-            .progress {
-                height: 10px;
-                background-color: darken($bg-dashboard-col, 15%);
-                cursor: pointer;
-                margin-bottom: 30px;
-            }
-            .o_web_settings_planner_progress_text {
-                font-size: 18px;
-                padding-right: 0px;
-                padding-top: 3px;
-            }
-            .o_web_settings_planner_progress_bar {
-                padding-left: 10px;
-            }
-            .o_web_settings_progress_title {
-                font-weight: bold;
-                cursor: pointer;
-                color: $o-brand-primary;
-            }
-        }
+.o_setting_container {
+    .o_web_settings_user {
+        font-size: 95%;
+        font-weight: 500;
     }
 }
diff --git a/addons/base_setup/static/src/xml/res_config_invite_users.xml b/addons/base_setup/static/src/xml/res_config_invite_users.xml
index ba9bd5fbc7e..cfb67afdbfa 100644
--- a/addons/base_setup/static/src/xml/res_config_invite_users.xml
+++ b/addons/base_setup/static/src/xml/res_config_invite_users.xml
@@ -1,54 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
     <div t-name='res_config_invite_users'>
-        <div class="row mt16 o_settings_container">
-            <div class='col-12 col-lg-6 o_setting_box'>
-                <div class='o_setting_right_pane'>
-                    <t t-if="widget.active_users">
-                        <div class='o_form_label'>
-                            <t t-esc="widget.active_users"></t>
-                            <t t-if="widget.active_users &lt;= 1"> Active User</t>
-                            <t t-if="widget.active_users &gt; 1">Active Users</t>
-                        </div>
-                    </t>
-                    <br/>
-                    <a href="#" class="o_web_settings_access_rights d-flex">
-                        <i class='fa fa-fw o_button_icon fa-arrow-right'></i>
-                        Manage Users
-                    </a>
-                </div>
-            </div>
-            <div class="col-12 col-lg-6 o_setting_box">
-                <div class="o_setting_right_pane">
-                    <t t-if="widget.pending_users.length">
-                        <p class="o_form_label">Pending Invitations:</p>
-                        <span t-foreach="widget.pending_users" t-as="pending">
-                            <a href="#" class="badge badge-pill o_web_settings_user" t-att-data-user-id="pending[0]"> <t t-esc="pending[1]"/> </a>
-                        </span>
-                        <t t-if="widget.pending_users.length &lt; widget.pending_count">
-                            <br/>
-                            <a href="#" class="o_web_settings_more"><t t-esc="widget.pending_count - widget.pending_users.length"/> more </a>
-                        </t>
-                    </t>
-                </div>
-            </div>
-            <div class='col-12 col-lg-6 o_setting_box'>
-                <div class='o_setting_right_pane'>
-                    <span class="o_form_label">Invite New Users:</span>
-                    <span class="o_web_settings_invitation_form"/>
-                    <input class="o_user_emails o_input mt8" type="text" placeholder="Enter e-mail addresses"/>
-                    <button class="btn btn-primary btn-block o_web_settings_invite mt16" data-loading-text="Inviting..."><strong>Invite</strong></button>
-                </div>
-            </div>
+        <p class="o_form_label">Invite New Users</p>
+        <div class="d-flex">
+            <input class="o_user_emails o_input mt8" type="text" placeholder="Enter e-mail address"/>
+            <button class="btn btn-primary o_web_settings_invite" data-loading-text="Inviting..."><strong>Invite</strong></button>
         </div>
-    </div>
 
-    <t t-name="EmailBadge">
-        <span t-foreach="emails" t-as="email" class="badge badge-pill">
-            <span class="o_badge_text">
-                <t t-esc='email'/>
+        <t t-if="widget.pending_users.length">
+            <p class="o_form_label pt-3">Pending Invitations:</p>
+            <span t-foreach="widget.pending_users" t-as="pending">
+                <a href="#" class="badge badge-pill o_web_settings_user" t-att-data-user-id="pending[0]"> <t t-esc="pending[1]"/> </a>
             </span>
-            <a href="#" class="fa fa-times o_badge_remove" title="Remove Email" aria-label="Remove Email" role="button"/>
-        </span>
-    </t>
+            <t t-if="widget.pending_users.length &lt; widget.pending_count">
+                <br/>
+                <a href="#" class="o_web_settings_more"><t t-esc="widget.pending_count - widget.pending_users.length"/> more </a>
+            </t>
+        </t>
+    </div>
 </templates>