diff --git a/client/res/templates/record/list-expanded.tpl b/client/res/templates/record/list-expanded.tpl
index 7a49e2418a..d3401a0ffa 100644
--- a/client/res/templates/record/list-expanded.tpl
+++ b/client/res/templates/record/list-expanded.tpl
@@ -1,86 +1,85 @@
{{#if collection.models.length}}
-{{#if topBar}}
-
{{/if}}
+
+
{{#if collectionLength}}
this._controlSticking());
+ if (!this.force) {
+ this.$scrollable.off(`scroll.list-${this.view.cid}`);
+ this.$scrollable.on(`scroll.list-${this.view.cid}`, () => this._controlSticking());
- this.$window.off(`resize.list-${this.view.cid}`);
- this.$window.on(`resize.list-${this.view.cid}`, () => this._controlSticking());
+ this.$window.off(`resize.list-${this.view.cid}`);
+ this.$window.on(`resize.list-${this.view.cid}`, () => this._controlSticking());
+ }
this.listenTo(this.view, 'check', () => {
if (this.view.getCheckedIds().length === 0 && !this.view.isAllResultChecked()) {
@@ -126,30 +132,37 @@ class StickyBarHelper {
return;
}
- const scrollTop = this.$scrollable.scrollTop();
- const stickTop = this._getButtonsTop();
- const edge = this._getMiddleTop() + this.$middle.outerHeight(true);
-
if (this.isSmallWindow && $('#navbar .navbar-body').hasClass('in')) {
return;
}
- if (scrollTop >= edge) {
+ const scrollTop = this.$scrollable.scrollTop();
+ const stickTop = !this.force ? this._getButtonsTop() : 0;
+ const edge = this._getMiddleTop() + this.$middle.outerHeight(true);
+
+ const hide = () => {
this.$bar.addClass('hidden');
this.$navbarRight.removeClass('has-sticked-bar');
+ };
- return;
- }
-
- if (scrollTop > stickTop) {
+ const show = () => {
this.$bar.removeClass('hidden');
this.$navbarRight.addClass('has-sticked-bar');
+ };
+
+ if (scrollTop >= edge) {
+ hide();
return;
}
- this.$bar.addClass('hidden');
- this.$navbarRight.removeClass('has-sticked-bar');
+ if (scrollTop > stickTop || this.force) {
+ show();
+
+ return;
+ }
+
+ hide();
}
/**
@@ -187,6 +200,7 @@ class StickyBarHelper {
}
hide() {
+ console.log(1);
this.$bar.addClass('hidden');
}
diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js
index 2eb23ae1da..f9743c2b50 100644
--- a/client/src/views/record/list.js
+++ b/client/src/views/record/list.js
@@ -77,6 +77,7 @@ class ListRecordView extends View {
* @property {boolean} [showMore] The show-more button.
* @property {boolean} [keepCurrentRootUrl] Keep a current root URL.
* @property {boolean} [stickyBarDisabled] Disable the sticky bar.
+ * @property {boolean} [forceStickyBar] To make bar sticky regardless of scrolling.
* @property {boolean} [massActionsDisabled] Disable mass actions.
* @property {module:views/record/list~dropdownItem[]} [dropdownItemList] Dropdown items.
* @property {string[]} [mandatorySelectAttributeList] Mandatory select attributes. Attributes to be selected
@@ -465,6 +466,13 @@ class ListRecordView extends View {
*/
stickyBarDisabled = false
+ /**
+ * To show sticky bar regardless of scrolling.
+ *
+ * @protected
+ */
+ forceStickyBar = false
+
/**
* Disable the follow/unfollow mass action.
*
@@ -880,7 +888,9 @@ class ListRecordView extends View {
/** @private */
initStickyBar() {
- this._stickyBarHelper = new StickyBarHelper(this);
+ this._stickyBarHelper = new StickyBarHelper(this, {
+ force: this.forceStickyBar,
+ });
}
/** @protected */
@@ -902,7 +912,7 @@ class ListRecordView extends View {
hideActions() {
this.$el.find('.actions-button').addClass('hidden');
- if (this._stickyBarHelper && !this.pagination) {
+ if (this._stickyBarHelper && (!this.pagination || this.forceStickyBar)) {
this._stickyBarHelper.hide();
}
}
@@ -961,6 +971,15 @@ class ListRecordView extends View {
topBar = true;
}
+ if (this.forceStickyBar) {
+ topBar = false;
+ }
+
+ const displayActionsButtonGroup = this.checkboxes || this.massActionList || this.buttonList.length ||
+ this.dropdownItemList.length;
+
+ const hasStickyBar = this.forceStickyBar || displayActionsButtonGroup;
+
const noDataDisabled = this.noDataDisabled || this._renderEmpty;
return {
@@ -982,12 +1001,12 @@ class ListRecordView extends View {
buttonList: this.buttonList,
dropdownItemList: this.dropdownItemList,
displayTotalCount: displayTotalCount,
- displayActionsButtonGroup: this.checkboxes ||
- this.massActionList || this.buttonList.length || this.dropdownItemList.length,
+ displayActionsButtonGroup: displayActionsButtonGroup,
totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
moreCountFormatted: this.getNumberUtil().formatInt(moreCount),
checkboxColumnWidth: this.checkboxColumnWidth + 'px',
noDataDisabled: noDataDisabled,
+ hasStickyBar: hasStickyBar,
};
}
@@ -1942,6 +1961,8 @@ class ListRecordView extends View {
this.options.mandatorySelectAttributeList || this.mandatorySelectAttributeList || []
);
+ this.forceStickyBar = this.options.forceStickyBar || this.forceStickyBar;
+
this.editDisabled = this.options.editDisabled || this.editDisabled ||
this.getMetadata().get(['clientDefs', this.scope, 'editDisabled']);
diff --git a/frontend/less/espo-rtl/layout-side.less b/frontend/less/espo-rtl/layout-side.less
index 08bbabd0d6..68d4f5f124 100644
--- a/frontend/less/espo-rtl/layout-side.less
+++ b/frontend/less/espo-rtl/layout-side.less
@@ -199,12 +199,12 @@ body[data-navbar="side"] {
}
}
- .list-buttons-container .sticked-bar {
+ .list-sticky-bar {
left: auto;
right: @navbar-width;
}
- &.minimized .list-buttons-container .sticked-bar {
+ &.minimized .list-sticky-bar {
left: auto;
right: @navbar-minimized-width;
}
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 90ef9e38ca..a6396944b5 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -480,7 +480,8 @@ input.global-search-input {
.stick-sub,
.sticky-head,
-.sticked-bar {
+.sticked-bar,
+.list-sticky-bar {
box-shadow: var(--top-bar-box-shadow);
}
@@ -497,7 +498,7 @@ input.global-search-input {
min-height: 35px;
}
-.list-buttons-container .sticked-bar {
+.list-sticky-bar {
position: fixed;
background-color: var(--navbar-bg);
z-index: 1000;
diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less
index ca3de0bdbc..cdf1de2380 100644
--- a/frontend/less/espo/elements/modal.less
+++ b/frontend/less/espo/elements/modal.less
@@ -173,7 +173,7 @@
}
}
-.modal-dialog .modal-body .list-buttons-container .sticked-bar {
+.modal-dialog .modal-body .list-sticky-bar {
top: 94px !important;
width: 100% !important;
right: 0 !important;
diff --git a/frontend/less/espo/layout-side.less b/frontend/less/espo/layout-side.less
index 8f691936eb..b56a81579b 100644
--- a/frontend/less/espo/layout-side.less
+++ b/frontend/less/espo/layout-side.less
@@ -409,7 +409,8 @@ body[data-navbar="side"] {
}
.stick-sub,
- .sticked-bar {
+ .sticked-bar,
+ .list-sticky-bar {
visibility: hidden;
}
}
@@ -706,14 +707,14 @@ body[data-navbar="side"] {
left: @navbar-minimized-width;
}
- .list-buttons-container .sticked-bar {
+ .list-sticky-bar {
width: calc(~"100% - " @navbar-width);
left: @navbar-width;
top: @tob-bar-height;
padding-left: @container-padding;
}
- &.minimized .list-buttons-container .sticked-bar {
+ &.minimized .list-sticky-bar {
width: calc(~"100% - " @navbar-minimized-width);
left: @navbar-minimized-width;
}
@@ -724,8 +725,8 @@ body[data-navbar="side"] {
left: 0;
}
- .list-buttons-container .sticked-bar,
- &.minimized .list-buttons-container .sticked-bar {
+ .list-sticky-bar,
+ &.minimized .list-sticky-bar {
width: 100%;
top: 0;
left: 0;
diff --git a/frontend/less/espo/layout-top.less b/frontend/less/espo/layout-top.less
index 2bea18a7d4..08c42daf65 100644
--- a/frontend/less/espo/layout-top.less
+++ b/frontend/less/espo/layout-top.less
@@ -335,7 +335,7 @@ body:not([data-navbar="side"]) {
left: 0;
}
- .list-buttons-container .sticked-bar {
+ .list-sticky-bar {
width: 100%;
left: 0;
top: @navbar-height;
@@ -343,8 +343,8 @@ body:not([data-navbar="side"]) {
}
@media screen and (max-width: (@screen-sm-min - 1px)) {
- .list-buttons-container .sticked-bar,
- &.minimized .list-buttons-container .sticked-bar {
+ .list-sticky-bar,
+ &.minimized .list-sticky-bar {
width: 100%;
top: 0;
left: 0;