Update server generated layouts and improve layout styles

packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte

@@ -16,12 +16,18 @@
 
   const flipDurationMs = 150
 
+  $: links.forEach(link => {
+    if (!link.id) {
+      link.id = generate()
+    }
+  })
+
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
     .filter(x => x != null)
 
   const addLink = () => {
-    links = [...links, { id: generate() }]
+    links = [...links, {}]
   }
 
   const removeLink = id => {

packages/server/src/constants/layouts.js

@@ -22,9 +22,7 @@ const EMPTY_LAYOUT = {
             "flex-direction": "column",
             "justify-content": "flex-start",
             "align-items": "stretch",
-            "max-width": "100%",
-            width: "1400px",
-            padding: "20px",
+            padding: "32px",
           },
           hover: {},
           active: {},
@@ -37,15 +35,17 @@ const EMPTY_LAYOUT = {
       active: {},
       hover: {},
       normal: {
-        "min-height": "100%",
         "background-image": "#f5f5f5",
       },
       selected: {},
     },
-    direction: "column",
-    hAlign: "center",
-    vAlign: "top",
-    size: "grow",
+    navigation: "Top",
+    links: [
+      {
+        text: "Home",
+        url: "/",
+      },
+    ],
   },
 }
 
@@ -56,83 +56,11 @@ const BASE_LAYOUTS = [
     title: "{{ name }}",
     favicon: "./_shared/favicon.png",
     stylesheets: [],
-    name: "Top Navigation Layout",
+    name: "Navigation Layout",
     props: {
       _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
-      _component: "@budibase/standard-components/container",
+      _component: "@budibase/standard-components/layout",
       _children: [
-        {
-          _id: "c74f07266980c4b6eafc33e2a6caa783d",
-          _component: "@budibase/standard-components/container",
-          _styles: {
-            normal: {
-              background: "#fff",
-              width: "100%",
-              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-            },
-            hover: {},
-            active: {},
-            selected: {},
-          },
-          _instanceName: "Header",
-          _children: [
-            {
-              _id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
-              _component: "@budibase/standard-components/navigation",
-              _styles: {
-                normal: {
-                  "max-width": "1400px",
-                  padding: "20px",
-                  "font-weight": "400",
-                  "font-size": "16px",
-                  flex: "1 1 auto",
-                },
-                hover: {},
-                active: {},
-                selected: {},
-              },
-              title: "",
-              backgroundColor: "",
-              color: "",
-              borderWidth: "",
-              borderColor: "",
-              borderStyle: "",
-              _instanceName: "Navigation",
-              _children: [
-                {
-                  _id: "48b35328-4c91-4343-a6a3-1a1fd77b3386",
-                  _component: "@budibase/standard-components/link",
-                  _styles: {
-                    normal: {
-                      "font-weight": "600",
-                      "text-decoration-line": "none",
-                      "font-size": "16px",
-                    },
-                    hover: {
-                      color: "#4285f4",
-                    },
-                    active: {},
-                    selected: {},
-                  },
-                  url: "/",
-                  openInNewTab: false,
-                  text: "Home",
-                  color: "",
-                  hoverColor: "",
-                  underline: false,
-                  fontSize: "",
-                  fontFamily: "initial",
-                  _instanceName: "Home Link",
-                  _children: [],
-                },
-              ],
-            },
-          ],
-          direction: "row",
-          hAlign: "center",
-          vAlign: "middle",
-          size: "shrink",
-        },
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
           _component: "@budibase/standard-components/screenslot",
@@ -143,9 +71,7 @@ const BASE_LAYOUTS = [
               "flex-direction": "column",
               "justify-content": "flex-start",
               "align-items": "stretch",
-              "max-width": "100%",
-              width: "1400px",
-              padding: "20px",
+              padding: "32px",
             },
             hover: {},
             active: {},
@@ -158,15 +84,17 @@ const BASE_LAYOUTS = [
         active: {},
         hover: {},
         normal: {
-          "min-height": "100%",
           background: "#f5f5f5",
         },
         selected: {},
       },
-      direction: "column",
-      hAlign: "center",
-      vAlign: "top",
-      size: "grow",
+      navigation: "Top",
+      links: [
+        {
+          text: "Home",
+          url: "/",
+        },
+      ],
     },
   },
   {
@@ -178,7 +106,7 @@ const BASE_LAYOUTS = [
     name: "Empty Layout",
     props: {
       _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
-      _component: "@budibase/standard-components/container",
+      _component: "@budibase/standard-components/layout",
       _children: [
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
@@ -190,9 +118,7 @@ const BASE_LAYOUTS = [
               "flex-direction": "column",
               "justify-content": "flex-start",
               "align-items": "stretch",
-              "max-width": "100%",
-              width: "1400px",
-              padding: "20px",
+              padding: "32px",
             },
             hover: {},
             active: {},
@@ -205,15 +131,17 @@ const BASE_LAYOUTS = [
         active: {},
         hover: {},
         normal: {
-          "min-height": "100%",
           background: "#f5f5f5",
         },
         selected: {},
       },
-      direction: "column",
-      hAlign: "center",
-      vAlign: "top",
-      size: "grow",
+      navigation: "Top",
+      links: [
+        {
+          text: "Home",
+          url: "/",
+        },
+      ],
     },
   },
 ]

packages/standard-components/manifest.json

@@ -37,6 +37,12 @@
         "options": ["Top", "Left", "None"],
         "defaultValue": "Top"
       },
+      {
+        "type": "boolean",
+        "label": "Sticky header",
+        "key": "sticky",
+        "defaultValue": false
+      },
       {
         "type": "navigation",
         "label": "Links",

packages/standard-components/src/Layout.svelte

@@ -1,16 +1,16 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Heading, Icon } from "@budibase/bbui"
+  import { Heading, Icon } from "@budibase/bbui"
 
   const { styleable, linkable } = getContext("sdk")
   const component = getContext("component")
 
-  export let title = ""
+  export let title
   export let hideTitle = false
   export let logoUrl = "https://i.imgur.com/Xhdt1YP.png"
   export let hideLogo = false
   export let navigation = "Top"
-  export let sticky = true
+  export let sticky = false
   export let links
 
   $: validLinks = links?.filter(link => link.text && link.url) || []
@@ -54,7 +54,7 @@
             {#if !hideLogo}
               <img src={logoUrl} alt={title} />
             {/if}
-            {#if !hideTitle}
+            {#if navigation === "Top" && !hideTitle && title}
               <Heading>{title}</Heading>
             {/if}
           </div>
@@ -134,7 +134,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    padding: var(--spacing-xl);
+    padding: var(--spacing-xl) 32px;
     width: 1400px;
     max-width: 100%;
   }
@@ -160,6 +160,7 @@
     width: 1400px;
     max-width: 100%;
     position: relative;
+    padding: 32px;
   }
 
   /*  Nav components */
@@ -189,12 +190,12 @@
   }
   .link {
     color: var(--spectrum-alias-text-color);
-    font-size: var(--spectrum-alias-font-size-default);
+    font-size: var(--spectrum-global-dimension-font-size-200);
     font-weight: 600;
     transition: color 130ms ease-out;
   }
   .link:hover {
-    color: var(--spectrum-alias-text-color-hover);
+    color: var(--spectrum-global-color-blue-600);
   }
   .close {
     display: none;
@@ -222,33 +223,21 @@
     }
     .nav--left {
       width: 250px;
-      gap: var(--spacing-m);
+      gap: var(--spacing-xl);
+      padding: var(--spacing-xl);
     }
 
-    .nav--top .links {
-      margin-top: var(--spacing-l);
-    }
-    .nav--left .logo {
-      gap: var(--spacing-m);
-    }
     .nav--left .logo img {
-      height: 28px;
-    }
-    .nav--left .logo :global(h1) {
-      font-size: var(--spectrum-global-dimension-font-size-100);
-      font-weight: 600;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 0;
-      flex: 1 1 auto;
+      height: 36px;
     }
     .nav--left .links {
-      margin-top: var(--spacing-l);
       flex-direction: column;
       justify-content: flex-start;
       align-items: stretch;
     }
+    .nav--left .link {
+      font-size: var(--spectrum-global-dimension-font-size-150);
+    }
   }
 
   /* Mobile nav overrides */
@@ -267,7 +256,7 @@
 
     /* Force standard top bar */
     .nav {
-      padding: var(--spacing-m) var(--spacing-xl);
+      padding: var(--spacing-m) 16px;
     }
     .burger {
       display: grid;
@@ -280,6 +269,11 @@
       display: none;
     }
 
+    /* Reduce padding */
+    .main {
+      padding: 16px;
+    }
+
     /* Transform links into drawer */
     .links {
       position: fixed;

packages/standard-components/src/ScreenSlot.svelte

@@ -7,7 +7,7 @@
   const component = getContext("component")
 </script>
 
-<div use:styleable={$component.styles}>
+<div use:styleable={{ ...$component.styles, empty: true }}>
   <h1>Screen Slot</h1>
   <span>
     The screens that you create will be displayed inside this box.
@@ -20,13 +20,16 @@
   div {
     display: flex !important;
     flex-direction: column !important;
-    align-items: center !important;
     justify-content: center !important;
-    padding: 20px !important;
+    align-items: center !important;
+    padding: 32px !important;
     text-align: center !important;
-    border-style: dashed !important;
-    border-width: 1px !important;
-    color: #000000 !important;
-    background-color: rgba(0, 0, 0, 0.05) !important;
+  }
+  h1 {
+    color: var(--spectrum-alias-text-color);
+  }
+  span {
+    font-size: var(--font-size-s);
+    color: var(--grey-6);
   }
 </style>