@themarioga/grid-editor 3.2.1 → 4.1.0

package/src/less/grideditor.less

@@ -106,7 +106,24 @@
 }
 
 /* The button following the pointer must not be what the pointer is over */
+.ge-drag-helper {
+    opacity: .85;
+    pointer-events: none;
+
+    .ge-tools-drawer {
+        pointer-events: none;
+    }
+}
+
+/* A toolbar button that can be carried onto the canvas */
+.ge-palette-button {
+    cursor: move;
+    touch-action: none;
+}
+
 .ge-toolbar-helper {
+    position: absolute;
+    z-index: 1000;
     pointer-events: none;
     opacity: 0.85;
 }
@@ -131,10 +148,9 @@
     
     .ge-tools-drawer {
         /* Positioned, so a tool can hang a picker off itself. Deliberately
-           not stacked above anything the rest of the time: jQuery UI's resize
-           handle carries an inline z-index of 90 and runs down the column's
-           edge, and a drawer sitting over it would take the clicks meant for
-           the handle. */
+           not stacked above anything the rest of the time: the resize handle
+           runs down the column's edge, and a drawer sitting over it would take
+           the clicks meant for the handle. */
         position: relative;
         -webkit-touch-callout: none;
 
@@ -191,6 +207,83 @@
             input.ge-classes {
                 width: 200px;
             }
+
+            /* The utility plugins' fields, folded under one toggle */
+            .ge-utilities {
+                margin-top: 5px;
+                font-size: 11px;
+
+                > .ge-utilities-toggle {
+                    color: #333;
+                    cursor: pointer;
+                    text-decoration: none;
+
+                    &::before {
+                        content: '\25B8';
+                        display: inline-block;
+                        width: 1em;
+                    }
+                }
+                &.ge-open > .ge-utilities-toggle::before {
+                    content: '\25BE';
+                }
+
+                > .ge-utilities-body {
+                    display: none;
+                    flex-wrap: wrap;
+                    gap: 4px 10px;
+                    margin-top: 4px;
+                }
+                &.ge-open > .ge-utilities-body {
+                    display: flex;
+                }
+
+                .ge-utility {
+                    display: inline-flex;
+                    flex-direction: column;
+                    margin: 0;
+
+                    select {
+                        border: 1px solid #7F7F7F;
+                        border-radius: 4px;
+                        font-size: 11px;
+                        padding: 1px 2px;
+                    }
+                }
+                .ge-utility-note {
+                    color: #666;
+                    font-size: 10px;
+                    max-width: 160px;
+                }
+
+                /* The spacing plugin: a side and a value per group */
+                .ge-spacing {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 4px 10px;
+                }
+                .ge-spacing-group {
+                    display: inline-flex;
+                    flex-direction: column;
+
+                    > .ge-spacing-side {
+                        border: 1px solid #7F7F7F;
+                        border-radius: 4px;
+                        font-size: 11px;
+                        padding: 1px 2px;
+                        margin-bottom: 2px;
+                    }
+                    /* The group names the field once */
+                    .ge-utility > .ge-utility-label {
+                        display: none;
+                    }
+                }
+                .ge-spacing-gutter {
+                    flex-basis: 100%;
+                    color: #666;
+                    font-size: 10px;
+                }
+            }
         }
     }
     .row {
@@ -423,12 +516,18 @@
         }
     }
     
-    /* Sorting */
-    .ui-sortable-placeholder {
+    /* Sorting. The dragged node stays in the list and shows where it would
+       land - that is the placeholder - while a copy of it follows the
+       pointer. */
+    .ge-drag-placeholder {
         background: fadeout(yellow, 80%);
-        visibility: visible !important;
+        opacity: 1;
         min-height: 50px;
         max-height: 100px;
+
+        > * {
+            visibility: hidden;
+        }
     }
 
     /* A size change should read as a movement rather than a jump, but not
@@ -437,23 +536,26 @@
     .column {
         transition: width 120ms ease, margin-left 120ms ease;
     }
-    .column.ui-resizable-resizing {
+    .column.ge-resizing {
         transition: none;
         /* Follow the pointer in pixels: the layout mode's max-width is what
            the column will snap back into once the drag lands */
         max-width: none;
     }
 
-    /* Resizing. jQuery UI's own stylesheet is not a dependency, so the handle
-       is styled here: a grip on the column's edge, clear of the drawer, which
-       is what keeps the resize gesture and the sort gesture apart */
-    .column > .ui-resizable-handle {
+    /* Resizing: a grip on the column's edge, clear of the drawer, which is
+       what keeps the resize gesture and the sort gesture apart */
+    .column > .ge-resize-handle {
         position: absolute;
         display: block;
         z-index: 10;
+
+        /* The gesture is the editor's, not the page's: without this a touch
+           drag on the handle scrolls instead of resizing */
+        touch-action: none;
     }
-    .column > .ui-resizable-e,
-    .column > .ui-resizable-w {
+    .column > .ge-resize-e,
+    .column > .ge-resize-w {
         top: 0;
         bottom: 0;
         width: 8px;
@@ -464,10 +566,10 @@
             background: @colColor;
         }
     }
-    .column > .ui-resizable-e {
+    .column > .ge-resize-e {
         right: -1px;
     }
-    .column > .ui-resizable-w {
+    .column > .ge-resize-w {
         left: -1px;
     }
 
@@ -479,13 +581,13 @@
         font-size: 11px;
         color: @colTextColor;
     }
-    .column.ui-resizable-resizing > .ge-tools-drawer > .ge-resize-size {
+    .column.ge-resizing > .ge-tools-drawer > .ge-resize-size {
         display: block;
     }
 }
 
 /* The handle belongs to editing, and never to the output */
-.ge-canvas:not(.ge-editing) .ui-resizable-handle {
+.ge-canvas:not(.ge-editing) .ge-resize-handle {
     display: none;
 }
 
@@ -592,3 +694,93 @@
 }
 
 .ge-layout-modes();
+
+/*
+ * The visibility plugin. A node Bootstrap would hide is kept on the canvas -
+ * there would be nothing left to click to show it again - and shown the way
+ * the view sees it instead. The selectors outweigh Bootstrap's d-* classes,
+ * which are !important too.
+ */
+.ge-canvas.ge-editing {
+    .ge-visibility {
+        display: block !important;
+    }
+    .row.ge-visibility {
+        display: flex !important;
+    }
+
+    .ge-hidden-in-view {
+        opacity: .45;
+        background-image: repeating-linear-gradient(
+            -45deg, transparent 0, transparent 6px, rgba(0, 0, 0, .07) 6px, rgba(0, 0, 0, .07) 12px
+        );
+    }
+
+    /* The all view: hidden at some breakpoints, said in a corner */
+    [data-ge-hidden-in] {
+        position: relative;
+
+        &::after {
+            content: attr(data-ge-hidden-in);
+            position: absolute;
+            right: 2px;
+            bottom: 2px;
+            z-index: 1;
+            padding: 0 4px;
+            border-radius: 3px;
+            background: rgba(0, 0, 0, .6);
+            color: #fff;
+            font-size: 10px;
+            line-height: 16px;
+            pointer-events: none;
+        }
+    }
+}
+
+/* The order plugin: a column ordered by class in this view says where */
+.ge-canvas.ge-editing .column[data-ge-order]::before {
+    content: attr(data-ge-order);
+    position: absolute;
+    left: 2px;
+    bottom: 2px;
+    z-index: 1;
+    padding: 0 4px;
+    border-radius: 3px;
+    background: fade(@colTextColor, 85%);
+    color: #fff;
+    font-size: 10px;
+    line-height: 16px;
+    pointer-events: none;
+}
+
+/*
+ * The gutters plugin. A row with gutter classes is drawn with its real
+ * gutters rather than the editor's frame: each column padded by half the
+ * horizontal gutter, and the vertical gutter above each column. Bootstrap
+ * takes the first line's back with a negative top margin on the row, which
+ * here would pull it over the row above, so the row's drawer takes it back
+ * instead and the gap shows between lines of columns only.
+ */
+.ge-canvas.ge-editing .row.ge-gutters {
+    margin-top: 0;
+
+    > .ge-tools-drawer {
+        margin-top: 0;
+        margin-bottom: calc(@editGutter - var(--bs-gutter-y));
+        /* Bootstrap pads every child of a row by half its gutter, the drawer
+           too; it keeps the padding a row with no gutter class gives it */
+        padding-left: .75rem;
+        padding-right: .75rem;
+    }
+
+    > .column {
+        padding-left: calc(var(--bs-gutter-x) * .5);
+        padding-right: calc(var(--bs-gutter-x) * .5);
+
+        > .ge-tools-drawer {
+            margin-left: calc(var(--bs-gutter-x) * -.5);
+            margin-right: calc(var(--bs-gutter-x) * -.5);
+            width: calc(100% + var(--bs-gutter-x));
+        }
+    }
+}