viscous/espocrm
1
0
Fork 0
mirror of https://github.com/espocrm/espocrm.git synced 2026-06-27 22:46:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Buttons radius impr code

Browse Source
This commit is contained in:
Yurii
2026-05-13 14:15:09 +03:00
parent b432572e61
commit db10f4d1b2
6 changed files with 37 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
client/src/ui/dialog.ts
View File

@@ -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) {

40
client/src/views/main/header-buttons.ts
View File

@@ -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<HTMLElement>('.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');
}
}
}
}

56
client/src/views/modal.ts
View File

@@ -429,8 +429,6 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
this.adjustHeaderFontSize();
}
this.adjustButtons();
if (!this.noFullHeight) {
this.initBodyScrollListener();
}
@@ -850,8 +848,6 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
}
await this.reRenderFooter();
this.adjustButtons();
}
/**
@@ -873,8 +869,6 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
}
await this.reRenderFooter();
this.adjustButtons();
}
/**
@@ -904,8 +898,6 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
}
await this.reRenderFooter();
this.adjustButtons();
}
/**
@@ -958,8 +950,6 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
}
await this.reRenderFooter();
this.adjustButtons();
}
// noinspection JSUnusedGlobalSymbols
@@ -1109,52 +1099,6 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
*/
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');

2
client/src/views/modals/detail.js
View File

@@ -173,7 +173,7 @@ class DetailModalView extends ModalView {
html: '<span class="fas fa-chevron-left"></span>',
title: this.translate('Previous Entry'),
position: 'right',
className: 'btn-icon',
className: 'btn-icon margin-left',
style: 'text',
disabled: true,
});

18
client/src/views/record/detail/buttons.ts
View File

@@ -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<HTMLButtonElement>('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');
}
}

14
frontend/less/espo/elements/buttons.less
View File

@@ -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;