viscous/espocrm
1
0
Fork 0
mirror of https://github.com/espocrm/espocrm.git synced 2026-07-01 08:26:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

button rounding

Browse Source
This commit is contained in:
Yuri Kuznetsov
2022-07-22 10:47:53 +03:00
parent b48660118b
commit fd85bb95d2
5 changed files with 149 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/res/templates/header.tpl
View File

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

1
client/src/ui.js
View File

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

60
client/src/views/main.js
View File

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

33
client/src/views/modal.js
View File

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

70
client/src/views/record/detail.js
View File

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