From db10f4d1b2bce693e316b5c9df7590b9cc0ccdb2 Mon Sep 17 00:00:00 2001 From: Yurii Date: Wed, 13 May 2026 14:15:09 +0300 Subject: [PATCH] Buttons radius impr code --- client/src/ui/dialog.ts | 62 ++++++++--------------- client/src/views/main/header-buttons.ts | 40 +-------------- client/src/views/modal.ts | 56 -------------------- client/src/views/modals/detail.js | 2 +- client/src/views/record/detail/buttons.ts | 18 ------- frontend/less/espo/elements/buttons.less | 14 +++++ 6 files changed, 37 insertions(+), 155 deletions(-) diff --git a/client/src/ui/dialog.ts b/client/src/ui/dialog.ts index 5384c73bc3..c71713ab8a 100644 --- a/client/src/ui/dialog.ts +++ b/client/src/ui/dialog.ts @@ -247,12 +247,6 @@ class Dialog { this.$el = $('#' + this.id); this.el = this.$el.get(0) as HTMLElement; - /*this.$el.find('header a.close').on('click', () => { - //this.close(); - });*/ - - //this.initButtonEvents(); - if (this.draggable) { this.$el.find('header').css('cursor', 'pointer'); @@ -375,6 +369,7 @@ class Dialog { element.textContent = text; } + private callOnClose() { if (this.onClose) { this.onClose() @@ -405,37 +400,6 @@ class Dialog { this.dropdownItemList = dropdownItemList; } - /** - * Init button events. - */ - initButtonEvents() { - /*this.buttonList.forEach(item => { - if (typeof item.onClick !== 'function') { - return; - } - - const $button = $(`#${this.id} .modal-footer button[data-name="${item.name}"]`); - - $button.off('click'); - $button.on('click', e => item.onClick?.(this, e.originalEvent as MouseEvent, e.currentTarget)); - }); - - this.dropdownItemList.forEach(item => { - if (item === false) { - return; - } - - if (!item.onClick) { - return; - } - - const $button = $(`#${this.id} .modal-footer a[data-name="${item.name}"]`); - - $button.off('click'); - $button.on('click', e => item.onClick?.(this, e.originalEvent as MouseEvent, e.currentTarget)); - });*/ - } - private getHeader(): JQuery | null { if (!this.header) { return null; @@ -814,8 +778,17 @@ class FooterComponent { const right: any[] = []; const lis: any[] = []; + const leftButtonList: DialogButton[] = []; + const rightButtonList: DialogButton[] = []; + data.buttonList.forEach(it => { - const button = new ButtonComponent({ + it.pullLeft || it.position === 'right' ? + rightButtonList.push(it) : + leftButtonList.push(it); + }); + + const prepareButton = (it: DialogButton) => { + return new ButtonComponent({ name: it.name, className: it.className ?? 'btn-xs-wide', style: it.style, @@ -830,11 +803,16 @@ class FooterComponent { } }, }).node(); + }; - it.pullLeft || it.position === 'right' ? - right.push(button) : - left.push(button); - }); + const prepareButtons = (buttonList: DialogButton[], output: any[]) => { + buttonList.forEach((it) => { + output.push(prepareButton(it)); + }); + } + + prepareButtons(leftButtonList, left); + prepareButtons(rightButtonList, right); data.dropdownItemList.forEach(it => { if (it === false) { diff --git a/client/src/views/main/header-buttons.ts b/client/src/views/main/header-buttons.ts index add2f315da..f44189d8fd 100644 --- a/client/src/views/main/header-buttons.ts +++ b/client/src/views/main/header-buttons.ts @@ -53,6 +53,7 @@ export default class HeaderButtonsView extends View<{ protected content(): VNode { const data = this.options.dataProvider(); + const buttons = data.buttons.filter(it => !it.hidden); const actions = data.actions.filter(it => !it.hidden); const dropdown = data.dropdown @@ -71,7 +72,7 @@ export default class HeaderButtonsView extends View<{ const elements: any[] = []; - data.buttons.forEach(it => { + buttons.forEach(it => { const className = ('btn-xs-wide main-header-manu-action ' + (it.className ?? '')).trim(); elements.push( @@ -199,41 +200,4 @@ export default class HeaderButtonsView extends View<{ }, }, elements) } - - protected afterRender() { - this.adjustButtons(); - } - - /** - * @todo Move to data. - */ - private adjustButtons() { - const nodes = this.element.querySelectorAll('.btn'); - - if (!nodes) { - return; - } - - let buttons = [...nodes]; - - if (!buttons.length) { - return; - } - - for (const it of buttons) { - it.classList.remove('radius-left', 'radius-right'); - } - - buttons = buttons.filter(it => !it.classList.contains('hidden')); - - for (const [i, it] of buttons.entries()) { - if (i === 0 || buttons[i - 1].classList.contains('btn-text')) { - it.classList.add('radius-left'); - } - - if (i === buttons.length - 1 || buttons[i + 1].classList.contains('btn-text')) { - it.classList.add('radius-right'); - } - } - } } diff --git a/client/src/views/modal.ts b/client/src/views/modal.ts index 62334a0975..5761d45b51 100644 --- a/client/src/views/modal.ts +++ b/client/src/views/modal.ts @@ -429,8 +429,6 @@ class ModalView extends View { this.adjustHeaderFontSize(); } - this.adjustButtons(); - if (!this.noFullHeight) { this.initBodyScrollListener(); } @@ -850,8 +848,6 @@ class ModalView extends View { } await this.reRenderFooter(); - - this.adjustButtons(); } /** @@ -873,8 +869,6 @@ class ModalView extends View { } await this.reRenderFooter(); - - this.adjustButtons(); } /** @@ -904,8 +898,6 @@ class ModalView extends View { } await this.reRenderFooter(); - - this.adjustButtons(); } /** @@ -958,8 +950,6 @@ class ModalView extends View { } await this.reRenderFooter(); - - this.adjustButtons(); } // noinspection JSUnusedGlobalSymbols @@ -1109,52 +1099,6 @@ class ModalView extends View { */ protected afterExpand() {} - private adjustButtons() { - this.adjustLeftButtons(); - this.adjustRightButtons(); - } - - private adjustLeftButtons() { - if (!this.containerElement) { - return; - } - - const $buttons = $(this.containerElement) - .find('footer.modal-footer > .main-btn-group button.btn'); - - $buttons - .removeClass('radius-left') - .removeClass('radius-right'); - - const $buttonsVisible = $buttons.filter('button:not(.hidden)'); - - $buttonsVisible.first().addClass('radius-left'); - $buttonsVisible.last().addClass('radius-right'); - } - - private adjustRightButtons() { - if (!this.containerElement) { - return; - } - - const $buttons = $(this.containerElement) - .find('footer.modal-footer > .additional-btn-group button.btn:not(.btn-text)'); - - $buttons - .removeClass('radius-left') - .removeClass('radius-right') - .removeClass('margin-right'); - - const $buttonsVisible = $buttons.filter('button:not(.hidden)'); - - $buttonsVisible.first().addClass('radius-left'); - $buttonsVisible.last().addClass('radius-right'); - - if ($buttonsVisible.last().next().hasClass('btn-text')) { - $buttonsVisible.last().addClass('margin-right'); - } - } - private initBodyScrollListener() { const $body = $(this.containerElement).find('> .dialog > .modal-dialog > .modal-content > .modal-body'); const $footer = $body.parent().find('> .modal-footer'); diff --git a/client/src/views/modals/detail.js b/client/src/views/modals/detail.js index 330c2a5775..298938efc4 100644 --- a/client/src/views/modals/detail.js +++ b/client/src/views/modals/detail.js @@ -173,7 +173,7 @@ class DetailModalView extends ModalView { html: '', title: this.translate('Previous Entry'), position: 'right', - className: 'btn-icon', + className: 'btn-icon margin-left', style: 'text', disabled: true, }); diff --git a/client/src/views/record/detail/buttons.ts b/client/src/views/record/detail/buttons.ts index e2ee76a273..4c727cc94a 100644 --- a/client/src/views/record/detail/buttons.ts +++ b/client/src/views/record/detail/buttons.ts @@ -153,22 +153,4 @@ export default class DetailRecordButtonsView extends View<{ allDisabled: data.allDisabled, }; } - - protected afterRender() { - this.adjust(); - } - - /** - * @todo Revise the need. - */ - private adjust() { - const buttons = this.element.querySelectorAll('button.btn'); - - buttons.forEach(element => element.classList.remove('radius-left', 'radius-right')); - - const visibleButtons = Array.from(buttons).filter(element => !element.classList.contains('hidden')); - - visibleButtons[0]?.classList.add('radius-left'); - visibleButtons[visibleButtons.length - 1]?.classList.add('radius-right'); - } } diff --git a/frontend/less/espo/elements/buttons.less b/frontend/less/espo/elements/buttons.less index 72c49d76de..8d26d29923 100644 --- a/frontend/less/espo/elements/buttons.less +++ b/frontend/less/espo/elements/buttons.less @@ -20,6 +20,20 @@ } } +.btn-text { + + .btn { + border-top-left-radius: var(--border-radius) !important; + border-bottom-left-radius: var(--border-radius) !important; + } +} + +.btn { + &:has(+ .btn-text) { + border-top-right-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + } +} + .btn { height: var(--input-height-base); font-weight: 500;