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

force sticky bar param

Browse Source
This commit is contained in:
Yuri Kuznetsov
2024-07-08 11:58:20 +03:00
parent d3fd314e35
commit 81f1374f55
9 changed files with 186 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/res/templates/record/list-expanded.tpl
+75 -76
View File
@@ -1,86 +1,85 @@
{{#if collection.models.length}}
{{#if topBar}}
<div class="list-buttons-container clearfix">
{{#if checkboxes}}
{{#if massActionDataList}}
<div class="btn-group actions">
<button
type="button"
class="btn btn-default dropdown-toggle actions-button"
data-toggle="dropdown"
disabled
>{{translate 'Actions'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
{{#each massActionDataList}}
<li {{#if hidden}}class="hidden"{{/if}}>
<a
role="button"
tabindex="0"
data-action="{{name}}"
class="mass-action"
>{{translate name category="massActions" scope=../scope}}</a>
</li>
{{#hasStickyBar}}
<div class="list-sticky-bar sticked-bar hidden">
{{#if hasPagination}}
{{{paginationSticky}}}
{{/if}}
</div>
{{/hasStickyBar}}
{{#if topBar}}
<div class="list-buttons-container clearfix">
{{#if checkboxes}}{{#if massActionDataList}}
<div class="btn-group actions">
<button
type="button"
class="btn btn-default dropdown-toggle actions-button"
data-toggle="dropdown"
disabled
>{{translate 'Actions'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
{{#each massActionDataList}}
<li {{#if hidden}}class="hidden"{{/if}}>
<a
role="button"
tabindex="0"
data-action="{{name}}"
class="mass-action"
>{{translate name category="massActions" scope=../scope}}</a>
</li>
{{/each}}
</ul>
</div>
{{/if}}{{/if}}
{{#each buttonList}}
{{button
name
scope=../scope
label=label
style=style
class='list-action-item'
}}
{{/each}}
{{#if hasPagination}}
{{{pagination}}}
{{/if}}
</div>
{{/if}}
<div class="list list-expanded">
<ul class="list-group">
{{#each rowList}}
<li data-id="{{./this}}" class="list-group-item list-row">
{{{var this ../this}}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{/if}}
{{#each buttonList}}
{{button
name
scope=../scope
label=label
style=style
class='list-action-item'
}}
{{/each}}
<div class="sticked-bar hidden">
{{#if hasPagination}}
{{{paginationSticky}}}
{{#if showMoreEnabled}}
{{#if showMoreActive}}
<div class="show-more{{#unless showMoreActive}} hidden{{/unless}}">
<a
type="button"
role="button"
tabindex="0"
class="btn btn-default btn-block"
data-action="showMore"
{{#if showCount}}title="{{translate 'Total'}}: {{totalCountFormatted}}"{{/if}}
>
{{#if showCount}}
<div class="pull-right text-muted more-count">{{moreCountFormatted}}</div>
{{/if}}
<span>{{translate 'Show more'}}</span>
</a>
</div>
{{/if}}
{{/if}}
</div>
{{#if hasPagination}}
{{{pagination}}}
{{/if}}
</div>
{{/if}}
<div class="list list-expanded">
<ul class="list-group">
{{#each rowList}}
<li data-id="{{./this}}" class="list-group-item list-row">
{{{var this ../this}}}
</li>
{{/each}}
</ul>
{{#if showMoreEnabled}}
{{#if showMoreActive}}
<div class="show-more{{#unless showMoreActive}} hidden{{/unless}}">
<a
type="button"
role="button"
tabindex="0"
class="btn btn-default btn-block"
data-action="showMore"
{{#if showCount}}title="{{translate 'Total'}}: {{totalCountFormatted}}"{{/if}}
>
{{#if showCount}}
<div class="pull-right text-muted more-count">{{moreCountFormatted}}</div>
{{/if}}
<span>{{translate 'Show more'}}</span>
</a>
</div>
{{/if}}
{{/if}}
</div>
{{else}}
{{#unless noDataDisabled}}
<div class="no-data">{{translate 'No Data'}}</div>
<div class="no-data">{{translate 'No Data'}}</div>
{{/unless}}
{{/if}}
client/res/templates/record/list.tpl
+41 -35
View File
@@ -1,3 +1,42 @@
{{#if hasStickyBar}}
<div class="sticked-bar list-sticky-bar hidden">
{{#if displayActionsButtonGroup}}
<div class="btn-group">
<button
type="button"
class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
data-toggle="dropdown"
>{{translate 'Actions'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu actions-menu">
{{#each massActionDataList}}
{{#if this}}
<li {{#if hidden}}class="hidden"{{/if}}>
<a
role="button"
tabindex="0"
data-action="{{name}}"
class="mass-action"
>{{translate name category="massActions" scope=../scope}}</a>
</li>
{{else}}
{{#unless @first}}
{{#unless @last}}
<li class="divider"></li>
{{/unless}}
{{/unless}}
{{/if}}
{{/each}}
</ul>
</div>
{{/if}}
{{#if hasPagination}}
{{{paginationSticky}}}
{{/if}}
</div>
{{/if}}
{{#if topBar}}
<div class="list-buttons-container clearfix">
{{#if displayActionsButtonGroup}}
@@ -74,41 +113,6 @@
</ul>
{{/if}}
</div>
<div class="sticked-bar hidden">
<div class="btn-group">
<button
type="button"
class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
data-toggle="dropdown"
>{{translate 'Actions'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu actions-menu">
{{#each massActionDataList}}
{{#if this}}
<li {{#if hidden}}class="hidden"{{/if}}>
<a
role="button"
tabindex="0"
data-action="{{name}}"
class="mass-action"
>{{translate name category="massActions" scope=../scope}}</a>
</li>
{{else}}
{{#unless @first}}
{{#unless @last}}
<li class="divider"></li>
{{/unless}}
{{/unless}}
{{/if}}
{{/each}}
</ul>
</div>
{{#if hasPagination}}
{{{paginationSticky}}}
{{/if}}
</div>
{{/if}}
{{#if hasPagination}}
@@ -130,6 +134,8 @@
</div>
{{/if}}
{{#if collectionLength}}
<div
class="list{{#if tableMinWidth}} scrollable{{/if}}{{#if showMoreActive}} has-show-more{{/if}}"
client/src/helpers/list/misc/sticky-bar.js
+30 -16
View File
@@ -51,12 +51,16 @@ class StickyBarHelper {
/**
* @param {import('views/record/list').default} view
* @param {{force?: boolean}} options
*/
constructor(view) {
constructor(view, options = {}) {
this.view = view;
this.themeManager = this.view.getThemeManager();
this.$el = view.$el;
/** @private */
this.force = options.force || false;
this.init();
}
@@ -81,11 +85,13 @@ class StickyBarHelper {
this.$navbarRight = this.$scrollable.parent().find('.modal-footer');
}
this.$scrollable.off(`scroll.list-${this.view.cid}`);
this.$scrollable.on(`scroll.list-${this.view.cid}`, () => 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');
}
client/src/views/record/list.js
+25 -4
View File
@@ -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']);
frontend/less/espo-rtl/layout-side.less
+2 -2
View File
@@ -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;
}
frontend/less/espo/custom.less
+3 -2
View File
@@ -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;
frontend/less/espo/elements/modal.less
+1 -1
View File
@@ -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;
frontend/less/espo/layout-side.less
+6 -5
View File
@@ -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;
frontend/less/espo/layout-top.less
+3 -3
View File
@@ -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;