Fix #25133 Adding background grid guide (#25150)

* adding background grid guide, missing cleanup * cleanup * add unit test, use constants for gap * solved conflicts * extended grid to cover all the grid stack * using constant for columns padding * reduce margin between columns * reduce margin between columns * remove unnecessary variable
dotCMS · Jun 6, 2023 · 92be5d2 · 92be5d2
1 parent 7f1160a
commit 92be5d2
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 28 deletions.
diff --git a/...ts/template-builder-background-columns/template-builder-background-columns.component.html b/...ts/template-builder-background-columns/template-builder-background-columns.component.html
@@ -0,0 +1,3 @@
+<div class="background-columns" [ngStyle]="{ gap: gridStackGap }">
+    <div class="column" *ngFor="let _ of columnList" data-testClass="column"></div>
+</div>
diff --git a/...ts/template-builder-background-columns/template-builder-background-columns.component.scss b/...ts/template-builder-background-columns/template-builder-background-columns.component.scss
@@ -0,0 +1,17 @@
+@use "variables" as *;
+
+$columns-padding: 3.2rem;
+
+.background-columns {
+    height: 100%;
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    display: grid;
+    padding: 0 $columns-padding 0 $columns-padding;
+    position: absolute;
+}
+
+.column {
+    height: 100%;
+    background-color: $color-palette-gray-200;
+}
diff --git a/...template-builder-background-columns/template-builder-background-columns.component.spec.ts b/...template-builder-background-columns/template-builder-background-columns.component.spec.ts
@@ -0,0 +1,30 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+
+import { NgFor, NgStyle } from '@angular/common';
+import { By } from '@angular/platform-browser';
+
+import { TemplateBuilderBackgroundColumnsComponent } from './template-builder-background-columns.component';
+
+describe('TemplateBuilderBackgroundColumnsComponent', () => {
+    let spectator: SpectatorHost<TemplateBuilderBackgroundColumnsComponent>;
+
+    const createHost = createHostFactory({
+        component: TemplateBuilderBackgroundColumnsComponent,
+        imports: [NgFor, NgStyle]
+    });
+
+    beforeEach(() => {
+        spectator = createHost(
+            `<dotcms-template-builder-background-columns></dotcms-template-builder-background-columns>`
+        );
+    });
+
+    it('should create the component', () => {
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should have 12 columns', () => {
+        const columns = spectator.debugElement.queryAll(By.css('[data-testclass="column"]'));
+        expect(columns.length).toEqual(12);
+    });
+});
diff --git a/...ents/template-builder-background-columns/template-builder-background-columns.component.ts b/...ents/template-builder-background-columns/template-builder-background-columns.component.ts
@@ -0,0 +1,17 @@
+import { NgFor, NgStyle } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { GRID_STACK_MARGIN, GRID_STACK_UNIT } from '../../utils/gridstack-options';
+
+@Component({
+    selector: 'dotcms-template-builder-background-columns',
+    templateUrl: './template-builder-background-columns.component.html',
+    styleUrls: ['./template-builder-background-columns.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgFor, NgStyle]
+})
+export class TemplateBuilderBackgroundColumnsComponent {
+    readonly columnList = [].constructor(12);
+    readonly gridStackGap = `${GRID_STACK_MARGIN * 2}${GRID_STACK_UNIT}`;
+}
diff --git a/...libs/template-builder/src/lib/components/template-builder/template-builder.component.html b/...libs/template-builder/src/lib/components/template-builder/template-builder.component.html
@@ -15,7 +15,8 @@
     ></dotcms-add-widget>
 </div>
 <div class="grid-stack">
-    <div
+    <dotcms-template-builder-background-columns></dotcms-template-builder-background-columns>
+    <dotcms-template-builder-row
         class="grid-stack-item"
         #rows
         *ngFor="let row of items$ | async; trackBy: identify"
@@ -24,28 +25,28 @@
         [attr.gs-y]="row.y"
         [attr.gs-w]="row.w"
         [attr.gs-h]="row.h"
+        [ngStyle]="{ height: rowDisplayHeight }"
+        (deleteRow)="deleteRow(row.id)"
     >
-        <dotcms-template-builder-row (deleteRow)="deleteRow(row.id)">
-            <div class="grid-stack-item-content grid-stack">
-                <div
-                    class="grid-stack-item sub"
-                    #boxes
-                    *ngFor="let box of row.subGridOpts?.children; trackBy: identify"
-                    [attr.gs-id]="box.id"
-                    [attr.gs-auto]="true"
-                    [attr.gs-x]="box.x"
-                    [attr.gs-y]="box.y"
-                    [attr.gs-w]="box.w"
-                    [attr.gs-h]="box.h"
-                >
-                    <div class="grid-stack-item-content">
-                        styleClass: {{ box.styleClass?.join(' ') }}
-                        <p *ngFor="let container of box.containers">
-                            identifier: {{ container.identifier }}
-                        </p>
-                    </div>
+        <div class="grid-stack-item-content grid-stack">
+            <div
+                class="grid-stack-item sub"
+                #boxes
+                *ngFor="let box of row.subGridOpts?.children; trackBy: identify"
+                [attr.gs-id]="box.id"
+                [attr.gs-auto]="true"
+                [attr.gs-x]="box.x"
+                [attr.gs-y]="box.y"
+                [attr.gs-w]="box.w"
+                [attr.gs-h]="box.h"
+            >
+                <div class="grid-stack-item-content">
+                    styleClass: {{ box.styleClass?.join(' ') }}
+                    <p *ngFor="let container of box.containers">
+                        identifier: {{ container.identifier }}
+                    </p>
                 </div>
             </div>
-        </dotcms-template-builder-row>
-    </div>
+        </div>
+    </dotcms-template-builder-row>
 </div>
diff --git a/...emplate-builder/src/lib/components/template-builder/template-builder.component.stories.ts b/...emplate-builder/src/lib/components/template-builder/template-builder.component.stories.ts
@@ -5,6 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AddWidgetComponent } from './components/add-widget/add-widget.component';
 import { RemoveConfirmDialogComponent } from './components/remove-confirm-dialog/remove-confirm-dialog.component';
+import { TemplateBuilderBackgroundColumnsComponent } from './components/template-builder-background-columns/template-builder-background-columns.component';
 import { TemplateBuilderRowComponent } from './components/template-builder-row/template-builder-row.component';
 import { DotTemplateBuilderStore } from './store/template-builder.store';
 import { TemplateBuilderComponent } from './template-builder.component';
@@ -21,7 +22,8 @@ export default {
                 TemplateBuilderRowComponent,
                 AddWidgetComponent,
                 RemoveConfirmDialogComponent,
-                BrowserAnimationsModule
+                BrowserAnimationsModule,
+                TemplateBuilderBackgroundColumnsComponent
             ],
             providers: [DotTemplateBuilderStore]
         })

diff --git a/...b/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts b/...b/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
@@ -24,7 +24,12 @@ import { DotLayout } from '@dotcms/dotcms-models';
 import { colIcon, rowIcon } from './assets/icons';
 import { DotGridStackWidget } from './models/models';
 import { DotTemplateBuilderStore } from './store/template-builder.store';
-import { gridOptions, subGridOptions } from './utils/gridstack-options';
+import {
+    GRID_STACK_ROW_HEIGHT,
+    GRID_STACK_UNIT,
+    gridOptions,
+    subGridOptions
+} from './utils/gridstack-options';
 import { parseFromDotObjectToGridStack } from './utils/gridstack-utils';
 
 @Component({
@@ -53,6 +58,7 @@ export class TemplateBuilderComponent implements OnInit, AfterViewInit, OnDestro
 
     public readonly rowIcon = rowIcon;
     public readonly colIcon = colIcon;
+    public readonly rowDisplayHeight = `${GRID_STACK_ROW_HEIGHT - 1}${GRID_STACK_UNIT}`; // setting a lower height to have space between rows
 
     constructor(private store: DotTemplateBuilderStore) {
         this.items$ = this.store.items$;

diff --git a/...-web/libs/template-builder/src/lib/components/template-builder/utils/gridstack-options.ts b/...-web/libs/template-builder/src/lib/components/template-builder/utils/gridstack-options.ts
@@ -2,6 +2,12 @@ import { GridStackOptions } from 'gridstack';
 
 export const WIDGET_TYPE_ATTRIBUTE = 'data-widget-type';
 
+export const GRID_STACK_MARGIN = 0.5;
+
+export const GRID_STACK_UNIT = 'rem';
+
+export const GRID_STACK_ROW_HEIGHT = 16.5;
+
 export enum widgetType {
     ROW = 'row',
     COLUMN = 'col'
@@ -32,7 +38,7 @@ function isARowWidget(el: Element): boolean {
 export const subGridOptions: GridStackOptions = {
     cellHeight: 224,
     column: 'auto',
-    margin: 16,
+    margin: `${GRID_STACK_MARGIN}${GRID_STACK_UNIT}`,
     minRow: 1,
     maxRow: 1,
     acceptWidgets: isAColumnWidget
@@ -41,7 +47,7 @@ export const subGridOptions: GridStackOptions = {
 export const gridOptions: GridStackOptions = {
     disableResize: true,
     cellHeight: 264, // 8px more so it overflows and we can see the 8px of space between rows
-    margin: 8,
+    margin: `${GRID_STACK_ROW_HEIGHT}${GRID_STACK_UNIT}`,
     minRow: 1,
     acceptWidgets: isARowWidget,
     draggable: {

diff --git a/core-web/libs/template-builder/src/lib/template-builder.module.ts b/core-web/libs/template-builder/src/lib/template-builder.module.ts
@@ -1,8 +1,9 @@
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe, NgFor, NgStyle } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { AddWidgetComponent } from './components/template-builder/components/add-widget/add-widget.component';
 import { RemoveConfirmDialogComponent } from './components/template-builder/components/remove-confirm-dialog/remove-confirm-dialog.component';
+import { TemplateBuilderBackgroundColumnsComponent } from './components/template-builder/components/template-builder-background-columns/template-builder-background-columns.component';
 import { TemplateBuilderBoxComponent } from './components/template-builder/components/template-builder-box/template-builder-box.component';
 import { TemplateBuilderRowComponent } from './components/template-builder/components/template-builder-row/template-builder-row.component';
 import { DotTemplateBuilderStore } from './components/template-builder/store/template-builder.store';
@@ -15,7 +16,9 @@ import { TemplateBuilderComponent } from './components/template-builder/template
         RemoveConfirmDialogComponent,
         TemplateBuilderRowComponent,
         AddWidgetComponent,
-        TemplateBuilderBoxComponent
+        TemplateBuilderBoxComponent,
+        TemplateBuilderBackgroundColumnsComponent,
+        NgStyle
     ],
     declarations: [TemplateBuilderComponent],
     providers: [DotTemplateBuilderStore],