From 81f1374f55d9cf71a4f3f8d4ebda8517f7765dc5 Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Mon, 8 Jul 2024 11:58:20 +0300 Subject: [PATCH] force sticky bar param --- client/res/templates/record/list-expanded.tpl | 151 +++++++++--------- client/res/templates/record/list.tpl | 76 +++++---- client/src/helpers/list/misc/sticky-bar.js | 46 ++++-- client/src/views/record/list.js | 29 +++- frontend/less/espo-rtl/layout-side.less | 4 +- frontend/less/espo/custom.less | 5 +- frontend/less/espo/elements/modal.less | 2 +- frontend/less/espo/layout-side.less | 11 +- frontend/less/espo/layout-top.less | 6 +- 9 files changed, 186 insertions(+), 144 deletions(-) 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 checkboxes}} - {{#if massActionDataList}} -
- -
    - {{#each massActionDataList}} -
  • - {{translate name category="massActions" scope=../scope}} -
    • + {{#hasStickyBar}} + + {{/hasStickyBar}} + + {{#if topBar}} +
    + {{#if checkboxes}}{{#if massActionDataList}} +
    + + +
    + {{/if}}{{/if}} + + {{#each buttonList}} + {{button + name + scope=../scope + label=label + style=style + class='list-action-item' + }} {{/each}} + + {{#if hasPagination}} + {{{pagination}}} + {{/if}} +
    + {{/if}} + +
    +
      + {{#each rowList}} +
    • + {{{var this ../this}}} +
      • + {{/each}}
    -
    - {{/if}} - {{/if}} - {{#each buttonList}} - {{button - name - scope=../scope - label=label - style=style - class='list-action-item' - }} - {{/each}} - - - - {{#if hasPagination}} - {{{pagination}}} - {{/if}} -
-{{/if}} - -
-
    - {{#each rowList}} -
  • - {{{var this ../this}}} -
    • - {{/each}} -
- - {{#if showMoreEnabled}} - {{#if showMoreActive}} -
- - {{#if showCount}} -
{{moreCountFormatted}}
- {{/if}} - {{translate 'Show more'}} - -
- {{/if}} - {{/if}} -
- {{else}} {{#unless noDataDisabled}} -
{{translate 'No Data'}}
+
{{translate 'No Data'}}
{{/unless}} {{/if}} diff --git a/client/res/templates/record/list.tpl b/client/res/templates/record/list.tpl index a310fd90fe..7652070c4d 100644 --- a/client/res/templates/record/list.tpl +++ b/client/res/templates/record/list.tpl @@ -1,3 +1,42 @@ +{{#if hasStickyBar}} + +{{/if}} + {{#if topBar}}
{{#if displayActionsButtonGroup}} @@ -74,41 +113,6 @@ {{/if}}
- - {{/if}} {{#if hasPagination}} @@ -130,6 +134,8 @@
{{/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;