espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

button modal right position impr

Browse Source
This commit is contained in:
Yuri Kuznetsov
2022-09-02 18:40:36 +03:00
parent 5f1cb260ae
commit 5e4e0b8d3c
6 changed files with 91 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/ui.js
+5 -4
View File
@@ -62,7 +62,8 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
* @typedef {Object} module:ui.Dialog~Button
*
* @property {string} name A name.
* @property {boolean} [pullLeft=false] To put the button to the other side.
* @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
* @property {'left'|'right'} [position='left'] A position.
* @property {string} [html] HTML.
* @property {string} [text] A text.
* @property {boolean} [disabled=false] Disabled.
@@ -452,7 +453,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
$button.html(o.html);
}
if (o.pullLeft) {
if (o.pullLeft || o.position === 'right') {
$additional.append($button);
return;
@@ -784,7 +785,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
dialog.close();
},
style: confirmStyle,
pullLeft: true,
position: 'right',
},
{
text: cancelText,
@@ -796,7 +797,7 @@ function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
dialog.close();
processCancel();
},
pullRight: true,
position: 'left',
}
],
onClose: () => {
client/src/views/email/modals/detail.js
+6 -5
View File
@@ -33,12 +33,13 @@ define('views/email/modals/detail', ['views/modals/detail', 'views/email/detail'
setup: function () {
Dep.prototype.setup.call(this);
this.buttonList.unshift({
'name': 'reply',
'label': 'Reply',
'hidden': this.model && this.model.get('status') === 'Draft',
this.addButton({
name: 'reply',
label: 'Reply',
hidden: this.model && this.model.get('status') === 'Draft',
style: 'danger',
});
position: 'right',
}, true)
if (this.model) {
this.listenToOnce(this.model, 'sync', () => {
client/src/views/modal.js
+33 -3
View File
@@ -59,7 +59,8 @@ define('views/modal', ['view'], function (Dep) {
* (with a scope defined in the `scope` class property).
* @property {string} [text] A text (not translated).
* @property {string} [html] HTML.
* @property {boolean} [pullLeft=false] To put the button to the other side.
* @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
* @property {'left'|'right'} [position='left'] A position.
* @property {'default'|'danger'|'success'|'warning'} [style='default'] A style.
* @property {boolean} [hidden=false] Is hidden.
* @property {boolean} [disabled=false] Disabled.
@@ -592,7 +593,7 @@ define('views/modal', ['view'], function (Dep) {
/**
* Add a button.
*
* @param {module:ui.Dialog~Button} o Button definitions.
* @param {module:views/modal.Class~Button} o Button definitions.
* @param {boolean|string} [position=false] True prepends, false appends. If a string,
* then will be added after a button with a corresponding name.
* @param {boolean} [doNotReRender=false] Do not re-render.
@@ -640,7 +641,7 @@ define('views/modal', ['view'], function (Dep) {
/**
* Add a dropdown item.
*
* @param {module:ui.Dialog~Button} o Button definitions.
* @param {module:views/modal.Class~Button} o Button definitions.
* @param {boolean} [toBeginning=false] To prepend.
* @param {boolean} [doNotReRender=false] Do not re-render.
*/
@@ -1002,6 +1003,14 @@ define('views/modal', ['view'], function (Dep) {
* @private
*/
adjustButtons: function () {
this.adjustLeftButtons();
this.adjustRightButtons();
},
/**
* @private
*/
adjustLeftButtons: function () {
let $buttons = this.$el.find('footer.modal-footer > .main-btn-group button.btn');
$buttons
@@ -1014,6 +1023,27 @@ define('views/modal', ['view'], function (Dep) {
$buttonsVisible.last().addClass('radius-right');
},
/**
* @private
*/
adjustRightButtons: function () {
let $buttons = this.$el.find('footer.modal-footer > .additional-btn-group button.btn:not(.btn-text)');
$buttons
.removeClass('radius-left')
.removeClass('radius-right')
.removeClass('margin-right');
let $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');
}
},
/**
* @protected
*/
client/src/views/modals/detail.js
+2 -2
View File
@@ -149,7 +149,7 @@ define('views/modals/detail', ['views/modal', 'helpers/action-item-setup'], func
name: 'previous',
html: '<span class="fas fa-chevron-left"></span>',
title: this.translate('Previous Entry'),
pullLeft: true,
position: 'right',
className: 'btn-icon',
style: 'text',
disabled: true,
@@ -159,7 +159,7 @@ define('views/modals/detail', ['views/modal', 'helpers/action-item-setup'], func
name: 'next',
html: '<span class="fas fa-chevron-right"></span>',
title: this.translate('Next Entry'),
pullLeft: true,
position: 'right',
className: 'btn-icon',
style: 'text',
disabled: true,
frontend/less/espo-rtl/custom.less
+37 -27
View File
@@ -357,40 +357,50 @@ table.table-admin-panel tr > td:first-child > div > a {
}
.btn {
&.radius-right {
border-top-left-radius: var(--border-radius) !important;
border-bottom-left-radius: var(--border-radius) !important;
}
&.radius-right {
border-top-left-radius: var(--border-radius) !important;
border-bottom-left-radius: var(--border-radius) !important;
}
&.radius-left {
border-top-right-radius: var(--border-radius) !important;
border-bottom-right-radius: var(--border-radius) !important;
}
&.radius-left {
border-top-right-radius: var(--border-radius) !important;
border-bottom-right-radius: var(--border-radius) !important;
}
&.margin-right {
margin-left: @padding-base-horizontal;
margin-right: 0;
}
&.margin-left {
margin-right: @padding-base-horizontal;
margin-left: 0;
}
}
.table {
> thead,
> tbody {
> tr {
> th:first-child,
> td:first-child {
padding-right: @padding-base-horizontal;
> thead,
> tbody {
> tr {
> th:first-child,
> td:first-child {
padding-right: @padding-base-horizontal;
@media screen and (max-width: (@screen-sm-min - 1px)) {
padding-right: @table-cell-padding;
}
}
@media screen and (max-width: (@screen-sm-min - 1px)) {
padding-right: @table-cell-padding;
}
}
> th:last-child,
> td:last-child {
padding-left: @padding-base-horizontal;
> th:last-child,
> td:last-child {
padding-left: @padding-base-horizontal;
@media screen and (max-width: (@screen-sm-min - 1px)) {
padding-left: @table-cell-padding;
}
}
}
}
@media screen and (max-width: (@screen-sm-min - 1px)) {
padding-left: @table-cell-padding;
}
}
}
}
}
@media screen and (min-width: @screen-sm-min) {
frontend/less/espo/elements/buttons.less
+8
View File
@@ -10,6 +10,14 @@
border-top-left-radius: var(--border-radius) !important;
border-bottom-left-radius: var(--border-radius) !important;
}
&.margin-right {
margin-right: @padding-base-horizontal;
}
&.margin-left {
margin-left: @padding-base-horizontal;
}
}
.btn {