(core) Support reordering conditional styles

Summary: Conditional style rules can now be reordered by dragging and dropping them.

Test Plan: Browser test.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4251

app/client/lib/koForm.css

@@ -136,6 +136,15 @@ div:hover > .kf_tooltip {
 
 .kf_draggable {
   display: inline-block;
+}
+
+.kf_draggable--vertical {
+  display: block;
+}
+
+/* Style the handle as grabbable, or the draggable element itself (if there is no handle). */
+.ui-sortable-handle,
+.kf_draggable:not(:has(.ui-sortable-handle)) {
   cursor: grab;
 }
 
@@ -724,3 +733,7 @@ fieldset:disabled {
   width: 100%;
   position: relative;
 }
+
+.kf_drag_container.ui-sortable {
+  overflow: auto;
+}

app/client/lib/koForm.js

@@ -436,6 +436,8 @@ exports.collapsible = function(contentFunc, isMountedCollapsed) {
  *                                        function on click.
  * @param {String}   options.axis         Determines if the list is displayed vertically 'y' or
  *                                        horizontally 'x'.
+ * @param {String}   options.handle       The handle of the draggable. Defaults to the element
+ *                                        itself.
  * @param {Boolean|Function} drag_indicator Include the drag indicator. Defaults to true. Accepts
  *                                          also a function that returns a dom element. In which
  *                                          case, it will be used to create the drag indicator.
@@ -473,13 +475,13 @@ exports.draggableList = function(contentArray, itemCreateFunc, options) {
           // Fix for JQueryUI bug where mousedown on draggable elements fail to blur
           // active element. See: https://bugs.jqueryui.com/ticket/4261
           dom.on('mousedown', () => G.document.activeElement.blur()),
+          kd.toggleClass('kf_draggable--vertical', options.axis === 'y'),
           kd.cssClass(options.itemClass),
           (options.drag_indicator ?
            (typeof options.drag_indicator === 'boolean' ?
             dom('span.kf_drag_indicator.glyphicon.glyphicon-option-vertical') :
             options.drag_indicator()
            ) : null),
-          kd.style('display', options.axis === 'x' ? 'inline-block' : 'block'),
           kd.domData('model', item),
           kd.maybe(removeFunc !== undefined && options.removeButton, function() {
             return dom('span.drag_delete.glyphicon.glyphicon-remove',
@@ -502,7 +504,8 @@ exports.draggableList = function(contentArray, itemCreateFunc, options) {
     axis: options.axis,
     tolerance: "pointer",
     forcePlaceholderSize: true,
-    placeholder: 'kf_draggable__placeholder--' + (options.axis === 'x' ? 'horizontal' : 'vertical')
+    placeholder: 'kf_draggable__placeholder--' + (options.axis === 'x' ? 'horizontal' : 'vertical'),
+    handle: options.handle,
   });
   if (reorderFunc === undefined) {
     G.$(list).sortable("option", {disabled: true});