Remove empty trash button from toolbar and move it next to the content

customize.dist/src/less2/include/drive.less

@@ -4,6 +4,7 @@
 @import (reference) "./limit-bar.less";
 @import (reference) "./tokenfield.less";
 @import (reference) "./dropdown.less";
+@import (reference) "./buttons.less";
 
 .drive_main() {
     --LessLoader_require: LessLoader_currentFile();
@@ -471,6 +472,7 @@
             margin-top: 10px;
         }
         .cp-app-drive-content-info-box {
+            order: 10;
             line-height: 2em;
             padding: 0.25em 0.75em;
             margin: 1em;
@@ -493,6 +495,7 @@
             }
         }
         #cp-app-drive-content-folder {
+            order: 20;
             li {
                 &.cp-app-drive-search-result {
                     display: flex;
@@ -754,6 +757,7 @@
         }
 
         & > .cp-app-drive-path {
+            order: 1;
             width: 100%;
             height: @variables_bar-height;
             line-height: @variables_bar-height;
@@ -927,5 +931,12 @@
         text-transform: uppercase;
         cursor: default;
     }
+
+    .cp-app-drive-button {
+        order: 15;
+        margin: 0 1em;
+        .buttons_main();
+    }
+
 }
 

www/common/drive-ui.js

@@ -114,7 +114,6 @@ define([
     var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
     //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o cp-app-drive-icon-expcol"});
     var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o cp-app-drive-icon-expcol"});
-    var $emptyTrashIcon = $('<button>', {"class": "fa fa-ban"});
     var $listIcon = $('<button>', {"class": "fa fa-list"});
     var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
     var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
@@ -2379,17 +2378,18 @@ define([
             $gridButton.attr('title', Messages.fm_viewGridButton);
             $container.append($listButton).append($gridButton);
         };
-        var createEmptyTrashButton = function ($container) {
+        var createEmptyTrashButton = function () {
-            var $button = $emptyTrashIcon.clone();
+            var button = h('button.btn.btn-danger', [
-            $button.addClass('cp-app-drive-toolbar-emptytrash');
+                h('i.fa.'+faTrash),
-            $button.attr('title', Messages.fc_empty);
+                h('span', Messages.fc_empty)
-            $button.click(function () {
+            ]);
+            $(button).click(function () {
                 UI.confirm(Messages.fm_emptyTrashDialog, function(res) {
                     if (!res) { return; }
                     manager.emptyTrash(refresh);
                 });
             });
-            $container.append($button);
+            return $(h('div.cp-app-drive-button', button));
         };
 
         // Get the upload options
@@ -3118,6 +3118,8 @@ define([
         var displayTrashRoot = function ($list, $folderHeader, $fileHeader) {
             var filesList = [];
             var root = files[TRASH];
+            var isEmpty = true;
+
             // Elements in the trash are JS arrays (several elements can have the same name)
             Object.keys(root).forEach(function (key) {
                 if (!Array.isArray(root[key])) {
@@ -3133,7 +3135,14 @@ define([
                         name: key
                     });
                 });
+                isEmpty = false;
             });
+
+            if (!isEmpty) {
+                var $empty = createEmptyTrashButton();
+                $content.append($empty);
+            }
+
             var sortedFolders = sortTrashElements(true, filesList, null, !getSortFolderDesc());
             var sortedFiles = sortTrashElements(false, filesList, APP.store[SORT_FILE_BY], !getSortFileDesc());
             if (manager.hasSubfolder(root, true)) { $list.append($folderHeader); }
@@ -3518,9 +3527,6 @@ define([
                 }
                 createViewModeButton(APP.toolbar.$bottomR);
             }
-            if (inTrash) {
-                createEmptyTrashButton(APP.toolbar.$bottomR);
-            }
 
             var $list = $('<ul>').appendTo($dirContent);
 
@@ -3536,7 +3542,6 @@ define([
             }
             $content.data('readOnlyFolder', readOnlyFolder);
 
-            // NewButton can be undefined if we're in read only mode
             if (!readOnlyFolder) {
                 createNewButton(isInRoot, APP.toolbar.$bottomL);
             }
@@ -3548,6 +3553,7 @@ define([
             }
             */
 
+
             if (APP.mobile()) {
                 var $context = $('<button>', {
                     id: 'cp-app-drive-toolbar-context-mobile'