From fd85bb95d2a339ebffc12ff3394a38e45ca41167 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Fri, 22 Jul 2022 10:47:53 +0300
Subject: [PATCH] button rounding

---
 client/res/templates/header.tpl   |  6 ++-
 client/src/ui.js                  |  1 +
 client/src/views/main.js          | 60 ++++++++++++++++++++------
 client/src/views/modal.js         | 33 ++++++++++++++-
 client/src/views/record/detail.js | 70 ++++++++++++++++++++++++++++---
 5 files changed, 149 insertions(+), 21 deletions(-)

diff --git a/client/res/templates/header.tpl b/client/res/templates/header.tpl
index 181e6bfe76..16aa20df0e 100644
--- a/client/res/templates/header.tpl
+++ b/client/res/templates/header.tpl
@@ -40,7 +40,11 @@
 
             {{#if items.dropdown}}
                 <div class="btn-group dropdown-group{{#unless hasVisibleDropdownItems}} hidden{{/unless}}" role="group">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                <button
+                    type="button"
+                    class="btn btn-default dropdown-toggle{{#unless hasVisibleDropdownItems}} hidden{{/unless}}"
+                    data-toggle="dropdown"
+                >
                     <span class="fas fa-ellipsis-h"></span>
                 </button>
                 <ul class="dropdown-menu pull-right">
diff --git a/client/src/ui.js b/client/src/ui.js
index 44517b8842..1f98c55d7e 100644
--- a/client/src/ui.js
+++ b/client/src/ui.js
@@ -457,6 +457,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
                 $('<button>')
                     .attr('type', 'button')
                     .addClass('btn btn-default dropdown-toggle')
+                    .addClass(allDdItemsHidden ? 'hidden' : '')
                     .attr('data-toggle', 'dropdown')
                     .append(
                         $('<span>').addClass('fas fa-ellipsis-h')
diff --git a/client/src/views/main.js b/client/src/views/main.js
index aa3afc4bfb..d5f32dceaf 100644
--- a/client/src/views/main.js
+++ b/client/src/views/main.js
@@ -84,6 +84,12 @@ define('views/main', ['view'], function (Dep) {
          */
         menu: null,
 
+        /**
+         * @private
+         * @type {JQuery|null}
+         */
+        $headerActionsContainer: null,
+
         /**
          * @inheritDoc
          */
@@ -150,6 +156,12 @@ define('views/main', ['view'], function (Dep) {
             });
 
             this.updateLastUrl();
+
+            this.on('after:render-internal', () => {
+                this.$headerActionsContainer = this.$el.find('.page-header .header-buttons');
+            });
+
+            this.on('after:render', () => this.adjustButtons());
         },
 
         /**
@@ -393,7 +405,7 @@ define('views/main', ['view'], function (Dep) {
             }
 
             if (doNotReRender && this.isRendered()) {
-                this.$el.find('.header .header-buttons [data-name="'+name+'"]').remove();
+                this.$headerActionsContainer.find('[data-name="' + name + '"]').remove();
             }
         },
 
@@ -403,8 +415,8 @@ define('views/main', ['view'], function (Dep) {
          * @param {string} name A name.
          */
         disableMenuItem: function (name) {
-            this.$el
-                .find('.header .header-buttons [data-name="'+name+'"]')
+            this.$headerActionsContainer
+                .find('[data-name="' + name + '"]')
                 .addClass('disabled')
                 .attr('disabled');
         },
@@ -415,8 +427,8 @@ define('views/main', ['view'], function (Dep) {
          * @param {string} name A name.
          */
         enableMenuItem: function (name) {
-            this.$el
-                .find('.header .header-buttons [data-name="'+name+'"]')
+            this.$headerActionsContainer
+                .find('[data-name="' + name + '"]')
                 .removeClass('disabled')
                 .removeAttr('disabled');
         },
@@ -462,10 +474,11 @@ define('views/main', ['view'], function (Dep) {
                 return;
             }
 
-            this.$el.find('.page-header li > .action[data-name="'+name+'"]').parent().addClass('hidden');
-            this.$el.find('.page-header a.action[data-name="'+name+'"]').addClass('hidden');
+            this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().addClass('hidden');
+            this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').addClass('hidden');
 
             this.controlMenuDropdownVisibility();
+            this.adjustButtons();
         },
 
         /**
@@ -488,10 +501,11 @@ define('views/main', ['view'], function (Dep) {
                 return;
             }
 
-            this.$el.find('.page-header li > .action[data-name="'+name+'"]').parent().removeClass('hidden');
-            this.$el.find('.page-header a.action[data-name="'+name+'"]').removeClass('hidden');
+            this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().removeClass('hidden');
+            this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').removeClass('hidden');
 
             this.controlMenuDropdownVisibility();
+            this.adjustButtons();
         },
 
         /**
@@ -516,13 +530,17 @@ define('views/main', ['view'], function (Dep) {
          * @private
          */
         controlMenuDropdownVisibility: function () {
-            var $d = this.$el.find('.page-header .dropdown-group');
+            let $group = this.$headerActionsContainer.find('.dropdown-group');
 
             if (this.hasMenuVisibleDropdownItems()) {
-                $d.removeClass('hidden');
-            } else {
-                $d.addClass('hidden');
+                $group.removeClass('hidden');
+                $group.find('> button').removeClass('hidden');
+
+                return;
             }
+
+            $group.addClass('hidden');
+            $group.find('> button').addClass('hidden');
         },
 
         /**
@@ -532,5 +550,21 @@ define('views/main', ['view'], function (Dep) {
         getHeaderView: function () {
             return this.getView('header');
         },
+
+        /**
+         * @private
+         */
+        adjustButtons: function () {
+            let $buttons = this.$headerActionsContainer.find('.btn');
+
+            $buttons
+                .removeClass('radius-left')
+                .removeClass('radius-right');
+
+            let $buttonsVisible = $buttons.filter(':not(.hidden)');
+
+            $buttonsVisible.first().addClass('radius-left');
+            $buttonsVisible.last().addClass('radius-right');
+        },
     });
 });
diff --git a/client/src/views/modal.js b/client/src/views/modal.js
index 4fda346021..aebf094cea 100644
--- a/client/src/views/modal.js
+++ b/client/src/views/modal.js
@@ -347,6 +347,8 @@ define('views/modal', ['view'], function (Dep) {
                 if (this.fixedHeaderHeight && this.flexibleHeaderFontSize) {
                     this.adjustHeaderFontSize();
                 }
+
+                this.adjustButtons();
             });
 
             this.once('remove', () => {
@@ -718,6 +720,8 @@ define('views/modal', ['view'], function (Dep) {
             }
 
             this.$el.find('footer button[data-name="'+name+'"]').addClass('hidden');
+
+            this.adjustButtons();
         },
 
         /**
@@ -750,8 +754,13 @@ define('views/modal', ['view'], function (Dep) {
             this.$el.find('footer li > a[data-name="'+name+'"]').parent().removeClass('hidden');
 
             if (!this.isDropdownItemListEmpty()) {
-                this.$el.find('footer .main-btn-group > .btn-group').removeClass('hidden');
+                let $dropdownGroup = this.$el.find('footer .main-btn-group > .btn-group');
+
+                $dropdownGroup.removeClass('hidden');
+                $dropdownGroup.find('> button').removeClass('hidden');
             }
+
+            this.adjustButtons();
         },
 
         /**
@@ -767,6 +776,7 @@ define('views/modal', ['view'], function (Dep) {
 
                 d.hidden = true;
             });
+
             this.dropdownItemList.forEach(d => {
                 if (d.name !== name) {
                     return;
@@ -783,7 +793,10 @@ define('views/modal', ['view'], function (Dep) {
             this.$el.find('footer li > a[data-name="'+name+'"]').parent().addClass('hidden');
 
             if (this.isDropdownItemListEmpty()) {
-                this.$el.find('footer .main-btn-group > .btn-group').addClass('hidden');
+                let $dropdownGroup = this.$el.find('footer .main-btn-group > .btn-group');
+
+                $dropdownGroup.addClass('hidden');
+                $dropdownGroup.find('> button').addClass('hidden');
             }
         },
 
@@ -918,5 +931,21 @@ define('views/modal', ['view'], function (Dep) {
         beforeCollapse: function () {
             return new Promise(resolve => resolve());
         },
+
+        /**
+         * @private
+         */
+        adjustButtons: function () {
+            let $buttons = this.$el.find('footer.modal-footer > .main-btn-group button.btn');
+
+            $buttons
+                .removeClass('radius-left')
+                .removeClass('radius-right');
+
+            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
+
+            $buttonsVisible.first().addClass('radius-left');
+            $buttonsVisible.last().addClass('radius-right');
+        },
     });
 });
diff --git a/client/src/views/record/detail.js b/client/src/views/record/detail.js
index ca9051cd96..ad484d7cb9 100644
--- a/client/src/views/record/detail.js
+++ b/client/src/views/record/detail.js
@@ -396,6 +396,12 @@ function (Dep, ViewRecordHelper, ActionItemSetup) {
          */
         $bottom: null,
 
+        /**
+         * @private
+         * @type {JQuery|null}
+         */
+        $detailButtonContainer: null,
+
         /**
          * @inheritDoc
          */
@@ -761,6 +767,8 @@ function (Dep, ViewRecordHelper, ActionItemSetup) {
                 if (this.isDropdownEditItemListEmpty()) {
                     this.$dropdownEditItemListButton.addClass('hidden');
                 }
+
+                this.adjustButtons();
             }
         },
 
@@ -819,6 +827,8 @@ function (Dep, ViewRecordHelper, ActionItemSetup) {
                 if (!this.isDropdownEditItemListEmpty()) {
                     this.$dropdownItemListButton.removeClass('hidden');
                 }
+
+                this.adjustButtons();
             }
         },
 
@@ -993,7 +1003,10 @@ function (Dep, ViewRecordHelper, ActionItemSetup) {
                 this.$bottom = this.$el.find('.bottom');
             }
 
+            this.initElementReferences();
+
             this.adjustMiddlePanels();
+            this.adjustButtons();
 
             this.initStickableButtonsContainer();
             this.initFieldsControlBehaviour();
@@ -1572,11 +1585,7 @@ function (Dep, ViewRecordHelper, ActionItemSetup) {
             this.setupBeforeFinal();
 
             this.on('after:render', () => {
-                this.$detailButtonContainer = this.$el.find('.detail-button-container');
-                this.$dropdownItemListButton = this.$detailButtonContainer
-                    .find('.dropdown-item-list-button');
-                this.$dropdownEditItemListButton = this.$detailButtonContainer
-                    .find('.dropdown-edit-item-list-button');
+                this.initElementReferences();
             });
 
             if (
@@ -3228,5 +3237,56 @@ function (Dep, ViewRecordHelper, ActionItemSetup) {
                 }
             });
         },
+
+        /**
+         * @private
+         */
+        adjustButtons: function () {
+            let $buttons = this.$detailButtonContainer.filter('.record-buttons').find('button.btn');
+
+            $buttons
+                .removeClass('radius-left')
+                .removeClass('radius-right');
+
+            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
+
+            $buttonsVisible.first().addClass('radius-left');
+            $buttonsVisible.last().addClass('radius-right');
+
+            this.adjustEditButtons();
+        },
+
+        /**
+         * @private
+         */
+        adjustEditButtons: function () {
+            let $buttons = this.$detailButtonContainer.filter('.edit-buttons').find('button.btn');
+
+            $buttons
+                .removeClass('radius-left')
+                .removeClass('radius-right');
+
+            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
+
+            $buttonsVisible.first().addClass('radius-left');
+            $buttonsVisible.last().addClass('radius-right');
+        },
+
+        /**
+         * @private
+         */
+        initElementReferences() {
+            if (this.$detailButtonContainer && this.$detailButtonContainer.length) {
+                return;
+            }
+
+            this.$detailButtonContainer = this.$el.find('.detail-button-container');
+
+            this.$dropdownItemListButton = this.$detailButtonContainer
+                .find('.dropdown-item-list-button');
+
+            this.$dropdownEditItemListButton = this.$detailButtonContainer
+                .find('.dropdown-edit-item-list-button');
+        },
     });
 });