Added support for grid editor layout (#62)

Phil-B · web-flow · commit f7e3c17a083e · 2023-07-03T10:50:54.000+02:00
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-headline.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-headline.cshtml
@@ -0,0 +1,2 @@
+@model string
+<h1>@Model</h1>
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-image.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-image.cshtml
@@ -0,0 +1,10 @@
+@using Newtonsoft.Json.Linq;
+@using Newtonsoft.Json;
+@using Umbraco.Headless.Client.Net.Delivery.Models;
+@model JObject
+@{
+    string url = Model.Property("url").Value.ToString();
+    string altText = Model.Property("altText").Value.ToString();
+}
+
+<img src="@url" alt="@altText">
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-quote.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-quote.cshtml
@@ -0,0 +1,2 @@
+@model string
+<blockquote>@Model</blockquote>
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-rte.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Content/_my-rte.cshtml
@@ -0,0 +1,2 @@
+@model string
+@Html.Raw(Model)
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Area.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Area.cshtml
@@ -0,0 +1,7 @@
+@model Umbraco.Headless.Client.Net.Delivery.Models.GridArea
+<div class="grid-area" style="--span-columns: @(Model.Grid)">
+    @foreach (var control in Model.Controls)
+    {
+        <partial name="Content/_@control.Editor.Alias" model="@(control.Value)" />
+    }
+</div>
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Grid.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Grid.cshtml
@@ -0,0 +1,6 @@
+@model Umbraco.Headless.Client.Net.Delivery.Models.Grid
+<div class="grid">
+@foreach (var section in Model.Sections) {
+    <partial name="Grid/_Section" model="@(section)" />
+}
+</div>
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Row.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Row.cshtml
@@ -0,0 +1,7 @@
+@model Umbraco.Headless.Client.Net.Delivery.Models.GridRow
+<div class="grid-row">
+    @foreach (var area in Model.Areas)
+    {
+        <partial name="Grid/_Area" model="@(area)" />
+    }
+</div>
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Section.cshtml b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/Views/Shared/Grid/_Section.cshtml
@@ -0,0 +1,6 @@
+@model Umbraco.Headless.Client.Net.Delivery.Models.GridSection
+<div style="--span-columns: @(Model.Grid)" class="grid-section">
+    @foreach (var row in Model.Rows) {
+        <partial name="Grid/_Row" model="@(row)" />
+    }
+</div>
diff --git a/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/wwwroot/css/site.css b/samples/Umbraco.Headless.Client.Samples.Web/Umbraco.Headless.Client.Samples.Web/wwwroot/css/site.css
@@ -269,6 +269,17 @@ a:hover {
   grid-column: 1;
 }
 
+/* Grid */
+.grid, .grid-row {
+  display: grid;
+  grid-template-columns: repeat(12,minmax(0,1fr));
+  column-gap: 20px;
+}
+
+.grid-section, .grid-area { 
+  grid-column-end: span var(--span-columns);
+}
+
 @media (min-width: 992px) {
   .text-and-image {
     margin: 40px;
diff --git a/src/Umbraco.Headless.Client.Net/Delivery/Models/Grid.cs b/src/Umbraco.Headless.Client.Net/Delivery/Models/Grid.cs
@@ -0,0 +1,9 @@
+﻿using System.Collections.Generic;
+
+namespace Umbraco.Headless.Client.Net.Delivery.Models
+{
+    public class Grid
+    {
+        public IEnumerable<GridSection> Sections { get; set; }
+    }
+}
diff --git a/src/Umbraco.Headless.Client.Net/Delivery/Models/GridArea.cs b/src/Umbraco.Headless.Client.Net/Delivery/Models/GridArea.cs
@@ -0,0 +1,10 @@
+﻿using System.Collections.Generic;
+
+namespace Umbraco.Headless.Client.Net.Delivery.Models
+{
+    public class GridArea
+    {
+        public int Grid { get; set; }
+        public IEnumerable<GridControl> Controls { get; set; }
+    }
+}
diff --git a/src/Umbraco.Headless.Client.Net/Delivery/Models/GridControl.cs b/src/Umbraco.Headless.Client.Net/Delivery/Models/GridControl.cs
@@ -0,0 +1,8 @@
+﻿namespace Umbraco.Headless.Client.Net.Delivery.Models
+{
+    public class GridControl
+    {
+        public object Value { get; set; }
+        public GridEditor Editor { get; set; }
+    }
+}
diff --git a/src/Umbraco.Headless.Client.Net/Delivery/Models/GridEditor.cs b/src/Umbraco.Headless.Client.Net/Delivery/Models/GridEditor.cs
@@ -0,0 +1,8 @@
+﻿namespace Umbraco.Headless.Client.Net.Delivery.Models
+{
+    public class GridEditor
+    {
+        public string Name { get; set; }
+        public string Alias { get; set; }
+    }
+}
diff --git a/src/Umbraco.Headless.Client.Net/Delivery/Models/GridRow.cs b/src/Umbraco.Headless.Client.Net/Delivery/Models/GridRow.cs
@@ -0,0 +1,11 @@
+﻿using System.Collections.Generic;
+
+namespace Umbraco.Headless.Client.Net.Delivery.Models
+{
+    public class GridRow
+    {
+        public string Id { get; set; }
+        public string Name { get; set; }
+        public IEnumerable<GridArea> Areas { get; set; }
+    }
+}
diff --git a/src/Umbraco.Headless.Client.Net/Delivery/Models/GridSection.cs b/src/Umbraco.Headless.Client.Net/Delivery/Models/GridSection.cs
@@ -0,0 +1,10 @@
+﻿using System.Collections.Generic;
+
+namespace Umbraco.Headless.Client.Net.Delivery.Models
+{
+    public class GridSection
+    {
+        public int Grid { get; set; }
+        public IEnumerable<GridRow> Rows { get; set; }
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@model string`
	`2`	`+<blockquote>@Model</blockquote>`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +@model Umbraco.Headless.Client.Net.Delivery.Models.GridArea
 +<div class="grid-area" style="--span-columns: @(Model.Grid)">
 +    @foreach (var control in Model.Controls)
 +    {
 +        <partial name="Content/[email protected]" model="@(control.Value)" />
 +    }
 +</div>