stick list view actions

client/res/templates/record/list.tpl

@@ -8,14 +8,41 @@
     </div>
     {{/if}}
 
-    {{#if checkboxes}}
-    {{#if massActionList}}
+    {{#if displayActionsButtonGroup}}
     <div class="btn-group actions">
-        <button type="button" class="btn btn-default dropdown-toggle actions-button" data-toggle="dropdown" disabled>
+        {{#if massActionList}}
+        <button type="button" class="btn btn-default dropdown-toggle actions-button hidden" data-toggle="dropdown">
         {{translate 'Actions'}}
         <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu">
+        {{/if}}
+        {{#if buttonList.length}}
+        {{#each buttonList}}
+            {{button name scope=../../scope label=label style=style hidden=hidden}}
+        {{/each}}
+        {{/if}}
+        <div class="btn-group">
+            {{#if dropdownItemList.length}}
+            <button type="button" class="btn btn-default dropdown-toggle dropdown-item-list-button" data-toggle="dropdown">
+                <span class="fas fa-ellipsis-h"></span>
+            </button>
+            <ul class="dropdown-menu pull-left">
+                {{#each dropdownItemList}}
+                {{#if this}}
+                <li class="{{#if hidden}}hidden{{/if}}"><a href="javascript:" class="action" data-action="{{name}}">{{#if html}}{{{html}}}{{else}}{{translate label scope=../../../entityType}}{{/if}}</a></li>
+                {{else}}
+                    {{#unless @first}}
+                    {{#unless @last}}
+                    <li class="divider"></li>
+                    {{/unless}}
+                    {{/unless}}
+                {{/if}}
+                {{/each}}
+            </ul>
+            {{/if}}
+        </div>
+        {{#if massActionList}}
+        <ul class="dropdown-menu actions-menu">
             {{#each massActionList}}
             {{#if this}}
             <li><a href="javascript:" data-action="{{./this}}" class='mass-action'>{{translate this category="massActions" scope=../../scope}}</a></li>
@@ -28,8 +55,30 @@
             {{/if}}
             {{/each}}
         </ul>
+        {{/if}}
+    </div>
+
+    <div class="sticked-bar hidden">
+        <div class="btn-group">
+            <button type="button" class="btn btn-default dropdown-toggle actions-button hidden" data-toggle="dropdown">
+            {{translate 'Actions'}}
+            <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu actions-menu">
+                {{#each massActionList}}
+                {{#if this}}
+                <li><a href="javascript:" data-action="{{./this}}" class='mass-action'>{{translate this category="massActions" scope=../../scope}}</a></li>
+                {{else}}
+                {{#unless @first}}
+                {{#unless @last}}
+                <li class="divider"></li>
+                {{/unless}}
+                {{/unless}}
+                {{/if}}
+                {{/each}}
+            </ul>
+        </div>
     </div>
-    {{/if}}
     {{/if}}
 
     {{#if displayTotalCount}}
@@ -37,10 +86,6 @@
         {{translate 'Total'}}: <span class="total-count-span">{{collection.total}}</span>
         </div>
     {{/if}}
-
-    {{#each buttonList}}
-        {{button name scope=../../scope label=label style=style}}
-    {{/each}}
 </div>
 {{/if}}
 

client/src/ui.js

@@ -72,9 +72,13 @@ Espo.define('ui', [], function () {
 
         this.contents = '';
         if (this.header) {
-            this.contents += '<header class="modal-header">' +
+            var headerClassName = '';
+            if (this.options.fixedHeaderHeight) {
+                headerClassName = ' fixed-height';
+            }
+            this.contents += '<header class="modal-header'+headerClassName+'">' +
                              ((this.closeButton) ? '<a href="javascript:" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></a>' : '') +
-                             '<h4 class="modal-title">' + this.header + '</h4>' +
+                             '<h4 class="modal-title"><span class="modal-title-text">' + this.header + '</span></h4>' +
                              '</header>';
         }
 

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'
             }
         ],
 

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) {
         },
     });
 });
-

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();

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) {

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;
+    }
+}

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 {

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;
+    }
+}