Improve Orchard.Layouts UX (#8721)

src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/LayoutEditor/Directives/Toolbox.js

@@ -145,6 +145,8 @@
                                 connectWith: _(parentClasses).map(function (e) { return "#" + editorId + " " + e + ":not(.layout-container-sealed) > .layout-element-wrapper > .layout-children"; }).join(", "),
                                 placeholder: placeholderClasses,
                                 "ui-floating": floating,
+                                helper: "clone", // We clone the element and we append it to the body because the container overflow is set to auto (see: Assets\Less\LayoutEditor\Toolbox.less) and otherwise it could not be moved with drag&drop
+                                appendTo: "body",
                                 create: function (e, ui) {
                                     e.target.isToolbox = true; // Will indicate to connected sortables that dropped items were sent from toolbox.
                                 },

src/Orchard.Web/Modules/Orchard.Layouts/Assets/Less/LayoutEditor/Toolbox.less

@@ -1,11 +1,54 @@
 @import "Variables.less";
 
+body {
+    .layout-toolbox-item {
+        border: 1px solid @gray-border;
+        background-color: #fff;
+        padding: (@container-padding - 3) @container-padding;
+        cursor: default;
+        list-style-type: none;
+
+        i {
+            display: inline-block;
+            width: 16px;
+            font: normal normal normal 14px/1 FontAwesome;
+        }
+
+        + .layout-toolbox-item {
+            margin-top: @container-padding / 3;
+        }
+    }
+}
+
 .layout-editor {
     > .layout-toolbox-wrapper {
-        position: relative;
         margin-left: @container-padding;
-        width: 220px;
+        width: 218px;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
         flex-shrink: 0;
+        /* forcing the toolbox height to be smaller than the viewport height
+            so it is always visible and scrollable*/
+        max-height: calc(100vh - 80px);
+        overflow-x: clip;
+        overflow-y: auto;
+        /* forcing the toolbox to stay sticked at the the top of its container */
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+
+        &::-webkit-scrollbar {
+            width: 2px;
+        }
+
+        &::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 6px rgb(0, 0, 0, .3);
+            border-radius: 1px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(0,0,0,0.3);
+        }
 
         > .layout-toolbox {
             border: 1px solid @gray-border;
@@ -33,7 +76,7 @@
                     display: block;
                     margin-bottom: @container-padding / 3;
                     text-decoration: none;
-                
+
                     &:before {
                         display: inline-block;
                         width: 10px;
@@ -43,7 +86,7 @@
                         content: "\f0d7";
                     }
                 }
-            
+
                 &.collapsed {
                     .layout-toolbox-group-heading:before {
                         content: "\f0da";

src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.js

@@ -880,6 +880,8 @@ angular
                                 connectWith: _(parentClasses).map(function (e) { return "#" + editorId + " " + e + ":not(.layout-container-sealed) > .layout-element-wrapper > .layout-children"; }).join(", "),
                                 placeholder: placeholderClasses,
                                 "ui-floating": floating,
+                                helper: "clone",
+                                appendTo: "body",
                                 create: function (e, ui) {
                                     e.target.isToolbox = true; // Will indicate to connected sortables that dropped items were sent from toolbox.
                                 },