From 4881787cf0648570ece8a5f689de79fd720567ac Mon Sep 17 00:00:00 2001 From: yuri Date: Fri, 9 Nov 2018 17:08:09 +0200 Subject: [PATCH] stick list view actions --- client/res/templates/record/list.tpl | 63 ++++++++++-- client/src/ui.js | 8 +- client/src/views/email/record/list.js | 5 +- client/src/views/modal.js | 2 +- client/src/views/modals/related-list.js | 2 + client/src/views/record/list.js | 130 +++++++++++++++++++++--- frontend/less/espo-vertical/layout.less | 22 ++++ frontend/less/espo/custom.less | 37 ++++++- frontend/less/espo/layout.less | 16 +++ 9 files changed, 253 insertions(+), 32 deletions(-) diff --git a/client/res/templates/record/list.tpl b/client/res/templates/record/list.tpl index 9b185bf0c6..c8645ffaff 100644 --- a/client/res/templates/record/list.tpl +++ b/client/res/templates/record/list.tpl @@ -8,14 +8,41 @@ {{/if}} - {{#if checkboxes}} - {{#if massActionList}} + {{#if displayActionsButtonGroup}}
- -
+ + - {{/if}} {{/if}} {{#if displayTotalCount}} @@ -37,10 +86,6 @@ {{translate 'Total'}}: {{collection.total}} {{/if}} - - {{#each buttonList}} - {{button name scope=../../scope label=label style=style}} - {{/each}} {{/if}} diff --git a/client/src/ui.js b/client/src/ui.js index c2a08b4ef5..055730ef97 100644 --- a/client/src/ui.js +++ b/client/src/ui.js @@ -72,9 +72,13 @@ Espo.define('ui', [], function () { this.contents = ''; if (this.header) { - this.contents += '
' + + var headerClassName = ''; + if (this.options.fixedHeaderHeight) { + headerClassName = ' fixed-height'; + } + this.contents += '
' + ((this.closeButton) ? '' : '') + - '

' + this.header + '

' + + '

' + this.header + '

' + '
'; } diff --git a/client/src/views/email/record/list.js b/client/src/views/email/record/list.js index b159979f32..09f96e88a9 100644 --- a/client/src/views/email/record/list.js +++ b/client/src/views/email/record/list.js @@ -34,11 +34,10 @@ Espo.define('views/email/record/list', 'views/record/list', function (Dep) { massActionList: ['remove', 'massUpdate'], - buttonList: [ + dropdownItemList: [ { name: 'markAllAsRead', - label: 'Mark all as read', - style: 'default' + label: 'Mark all as read' } ], diff --git a/client/src/views/modal.js b/client/src/views/modal.js index 1502e3c18a..385fd7ae6e 100644 --- a/client/src/views/modal.js +++ b/client/src/views/modal.js @@ -151,6 +151,7 @@ Espo.define('views/modal', 'view', function (Dep) { footerAtTheTop: this.getThemeManager().getParam('modalFooterAtTheTop'), fullHeight: this.getThemeManager().getParam('modalFullHeight'), screenWidthXs: this.getThemeManager().getParam('screenWidthXs'), + fixedHeaderHeight: this.fixedHeaderHeight, onRemove: function () { this.onDialogClose(); }.bind(this) @@ -265,4 +266,3 @@ Espo.define('views/modal', 'view', function (Dep) { }, }); }); - diff --git a/client/src/views/modals/related-list.js b/client/src/views/modals/related-list.js index 9708adc854..a4ea9ba3d8 100644 --- a/client/src/views/modals/related-list.js +++ b/client/src/views/modals/related-list.js @@ -42,6 +42,8 @@ Espo.define('views/modals/related-list', ['views/modal', 'search-manager'], func backdrop: true, + fixedHeaderHeight: true, + events: { 'click button[data-action="createRelated"]': function () { this.actionCreateRelated(); diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js index 392b7e62aa..ff3c178bbf 100644 --- a/client/src/views/record/list.js +++ b/client/src/views/record/list.js @@ -73,6 +73,8 @@ Espo.define('views/record/list', 'view', function (Dep) { portalLayoutDisabled: false, + dropdownItemList: [], + events: { 'click a.link': function (e) { e.stopPropagation(); @@ -147,7 +149,7 @@ Espo.define('views/record/list', 'view', function (Dep) { 'click .checkbox-dropdown [data-action="selectAllResult"]': function (e) { this.selectAllResult(); }, - 'click .actions a.mass-action': function (e) { + 'click .actions-menu a.mass-action': function (e) { $el = $(e.currentTarget); var action = $el.data('action'); @@ -181,14 +183,111 @@ Espo.define('views/record/list', 'view', function (Dep) { this.deactivate(); }, + initStickedBar: function () { + var $stickedBar = this.$stickedBar = this.$el.find('.sticked-bar'); + var $middle = this.$el.find('> .list'); + var $window = $(window); + var $scrollable = $window; + + this.on('render', function () { + this.$stickedBar = null; + }, this); + + var screenWidthXs = this.getThemeManager().getParam('screenWidthXs'); + + function getOffsetTop (element) { + var offsetTop = 0; + do { + if (element.classList.contains('modal-body')) break; + if (!isNaN(element.offsetTop)) { + offsetTop += element.offsetTop; + } + } while (element = element.offsetParent); + return offsetTop; + } + + var top; + + + if (this.$el.closest('.modal-body').size()) { + $scrollable = this.$el.closest('.modal-body'); + top = 0; + } else { + top = getOffsetTop(this.getParentView().$el.get(0)); + if ($(window.document).width() < screenWidthXs) { + top = 0; + } + } + + top += this.$el.find('.actions-button').height(); + + var topBarHeight = this.getThemeManager().getParam('navbarHeight') || 30; + + $scrollable.off('scroll.list-' + this.cid); + $scrollable.on('scroll.list-' + this.cid, function (e) { + cotrolSticking(); + }.bind(this)); + + $window.off('resize.list-' + this.cid); + $window.on('resize.list-' + this.cid, function (e) { + cotrolSticking(); + }.bind(this)); + + this.on('check', function () { + if (this.checkedList.length === 0) return; + cotrolSticking(); + }, this); + + this.once('remove', function () { + $scrollable.off('scroll.list-' + this.cid); + $window.off('resize.list-' + this.cid); + }); + + var cotrolSticking = function () { + if (this.checkedList.length === 0) return; + + var middleTop = getOffsetTop($middle.get(0)); + + var stickTop = middleTop - top; + var edge = middleTop + $middle.outerHeight(true); + var scrollTop = $scrollable.scrollTop(); + + if (scrollTop < edge) { + if (scrollTop > stickTop) { + $stickedBar.removeClass('hidden'); + } else { + $stickedBar.addClass('hidden'); + } + } else { + $stickedBar.removeClass('hidden'); + } + }.bind(this); + }, + + showActions: function () { + this.$el.find('.actions-button').removeClass('hidden'); + + if (!this.options.stickedBarDisabled && !this.stickedBarDisabled && this.massActionList.length) { + if (!this.$stickedBar) { + this.initStickedBar(); + } + } + }, + + hideActions: function () { + this.$el.find('.actions-button').addClass('hidden'); + + if (this.$stickedBar) { + this.$stickedBar.addClass('hidden'); + } + }, + selectAllHandler: function (isChecked) { this.checkedList = []; - var $actionsButton = this.$el.find('.actions-button'); - if (isChecked) { this.$el.find('input.record-checkbox').prop('checked', true); - $actionsButton.removeAttr('disabled'); + this.showActions(); this.collection.models.forEach(function (model) { this.checkedList.push(model.id); }, this); @@ -198,7 +297,7 @@ Espo.define('views/record/list', 'view', function (Dep) { this.unselectAllResult(); } this.$el.find('input.record-checkbox').prop('checked', false); - $actionsButton.attr('disabled', true); + this.hideActions(); this.$el.find('.list > table tbody tr').removeClass('active'); } @@ -242,11 +341,12 @@ Espo.define('views/record/list', 'view', function (Dep) { allResultIsChecked: false, data: function () { - var paginationTop = this.pagination === 'both' || this.pagination === true || this.pagination === 'top'; var paginationBottom = this.pagination === 'both' || this.pagination === true || this.pagination === 'bottom'; + return { scope: this.scope, + entityType: this.entityType, header: this.header, headerDefs: this._getHeaderDefs(), paginationEnabled: this.pagination, @@ -259,11 +359,13 @@ Espo.define('views/record/list', 'view', function (Dep) { checkboxes: this.checkboxes, massActionList: this.massActionList, rowList: this.rowList, - topBar: paginationTop || this.checkboxes || (this.buttonList.length && !this.buttonsDisabled), + topBar: paginationTop || this.checkboxes || (this.buttonList.length && !this.buttonsDisabled) || (this.dropdownItemList.length && !this.buttonsDisabled), bottomBar: paginationBottom, checkAllResultDisabled: this.checkAllResultDisabled, buttonList: this.buttonList, - displayTotalCount: this.displayTotalCount && this.collection.total > 0 + dropdownItemList: this.dropdownItemList, + displayTotalCount: this.displayTotalCount && this.collection.total > 0, + displayActionsButtonGroup: this.checkboxes || this.massActionList || this.buttonList.length || this.dropdownItemList.length, }; }, @@ -294,6 +396,8 @@ Espo.define('views/record/list', 'view', function (Dep) { this.rowActionsDisabled = this.options.rowActionsDisabled || this.rowActionsDisabled; + this.dropdownItemList = Espo.Utils.cloneDeep(this.options.dropdownItemList || this.dropdownItemList); + if ('buttonsDisabled' in this.options) { this.buttonsDisabled = this.options.buttonsDisabled; } @@ -315,12 +419,12 @@ Espo.define('views/record/list', 'view', function (Dep) { this.massActionList.forEach(function(item) { if (!~this.checkAllResultMassActionList.indexOf(item)) { - this.$el.find('div.list-buttons-container .actions li a.mass-action[data-action="'+item+'"]').parent().addClass('hidden'); + this.$el.find('div.list-buttons-container .actions-menu li a.mass-action[data-action="'+item+'"]').parent().addClass('hidden'); } }, this); if (this.checkAllResultMassActionList.length) { - this.$el.find('.actions-button').removeAttr('disabled'); + this.showActions(); } this.$el.find('.list > table tbody tr').removeClass('active'); @@ -337,7 +441,7 @@ Espo.define('views/record/list', 'view', function (Dep) { this.massActionList.forEach(function(item) { if (!~this.checkAllResultMassActionList.indexOf(item)) { - this.$el.find('div.list-buttons-container .actions li a.mass-action[data-action="'+item+'"]').parent().removeClass('hidden'); + this.$el.find('div.list-buttons-container .actions-menu li a.mass-action[data-action="'+item+'"]').parent().removeClass('hidden'); } }, this); }, @@ -1106,9 +1210,9 @@ Espo.define('views/record/list', 'view', function (Dep) { handleAfterCheck: function (isSilent) { if (this.checkedList.length) { - this.$el.find('.actions-button').removeAttr('disabled'); + this.showActions(); } else { - this.$el.find('.actions-button').attr('disabled', true); + this.hideActions(); } if (this.checkedList.length == this.collection.models.length) { diff --git a/frontend/less/espo-vertical/layout.less b/frontend/less/espo-vertical/layout.less index 2cca2580b3..c74829d2ed 100644 --- a/frontend/less/espo-vertical/layout.less +++ b/frontend/less/espo-vertical/layout.less @@ -389,3 +389,25 @@ body .stick-sub.button-container { body.minimized .stick-sub.button-container { width: calc(~"100% - "@navbar-minimized-width); } + + +body .list-buttons-container .sticked-bar { + width: calc(~"100% - "@navbar-width); + left: @navbar-width; + top: @tob-bar-height; + padding-left: @container-padding; +} + +body.minimized .list-buttons-container .sticked-bar { + width: calc(~"100% - "@navbar-minimized-width); + left: @navbar-minimized-width; +} + +@media screen and (max-width: (@screen-sm-min - 1px)) { + body .list-buttons-container .sticked-bar, + body.minimized .list-buttons-container .sticked-bar { + width: 100%; + top: 0; + left: 0; + } +} diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less index c4ba4fd90c..57fb568f4a 100644 --- a/frontend/less/espo/custom.less +++ b/frontend/less/espo/custom.less @@ -538,19 +538,48 @@ ul.dropdown-menu > li.checkbox:last-child { padding: 0 6px; } +.modal-header.fixed-height { + height: 40px; + max-height: 40px; + overflow: hidden; + + .modal-title { + width: ~"calc(100% - 20px)"; + > .modal-title-text { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + } + } +} + .modal-header a { color: @text-color; } -.list-buttons-container > div { - float: left; - margin-right: @panel-padding; +.list-buttons-container .sticked-bar { + position: fixed; + background-color: @body-bg; + z-index: 1000; +} + +.modal-dialog .modal-body .list-buttons-container .sticked-bar { + top: 94px !important; + width: 100% !important; + right: 0 !important; + left: unset; +} + +.list-buttons-container > .actions { + min-height: 33px; } .list-buttons-container > div.total-count { margin-right: 0px; float: right; - padding: 6px 0; + padding: 7px 0; } .list-container .pagination { diff --git a/frontend/less/espo/layout.less b/frontend/less/espo/layout.less index aea771739b..5af9d0a71e 100644 --- a/frontend/less/espo/layout.less +++ b/frontend/less/espo/layout.less @@ -135,3 +135,19 @@ body > footer { max-width: @container-max-width; } } + +body .list-buttons-container .sticked-bar { + width: 100%; + left: 0; + top: @navbar-height; + padding-left: @container-padding; +} + +@media screen and (max-width: (@screen-sm-min - 1px)) { + body .list-buttons-container .sticked-bar, + body.minimized .list-buttons-container .sticked-bar { + width: 100%; + top: 0; + left: 0; + } +} \ No newline at end of file