move settings to a subpath

5 years ago · ed2fd4ca95
3 changed files with 87 additions and 5 deletions
--- a/packages/builder/src/pages/portal/_layout.svelte
+++ b/packages/builder/src/pages/portal/_layout.svelte
@ -1,5 +1,5 @@
 <script>
-  import { isActive } from "@roxi/routify"
+  import { isActive, url } from "@roxi/routify"
  import { onMount } from "svelte"
  import {
    Icon,
@ -26,13 +26,13 @@
  onMount(getInfo)

  let menu = [
-    { title: "Apps", href: "/portal" },
+    { title: "Apps", href: "/portal/" },
    { title: "Drafts", href: "/portal/drafts" },
    { title: "Users", href: "/portal/users", heading: "Manage" },
    { title: "Groups", href: "/portal/groups" },
    { title: "Auth", href: "/portal/auth" },
    { title: "Email", href: "/portal/email" },
-    { title: "General", href: "/portal/general", heading: "Settings" },
+    { title: "General", href: "/portal/settings/general", heading: "Settings" },
    { title: "Theming", href: "/portal/theming" },
    { title: "Account", href: "/portal/account" },
  ]
@ -53,7 +53,9 @@
      <div class="menu">
        <Navigation>
          {#each menu as { title, href, heading }}
-            <Item selected={$isActive(href)} {href} {heading}>{title}</Item>
+            <Item selected={$isActive($url(href))} {href} {heading}
+              >{title}</Item
+            >
          {/each}
        </Navigation>
      </div>
@ -98,7 +100,11 @@
    align-items: center;
  }
  .content {
-    padding: var(--spacing-m);
+    display: grid;
+    padding: calc(var(--spacing-xl) * 2) var(--spacing-m) var(--spacing-m)
+      var(--spacing-m);
+    max-width: 80ch;
+    margin: 0 auto;
  }
  .avatar {
    display: grid;
--- a/packages/builder/src/pages/portal/settings/general.svelte
+++ b/packages/builder/src/pages/portal/settings/general.svelte
@ -0,0 +1,72 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    Body,
+    Divider,
+    Label,
+    Input,
+    Toggle,
+    Dropzone,
+  } from "@budibase/bbui"
+</script>
+
+<div class="container">
+  <Layout noPadding>
+    <div class="intro">
+      <Heading size="M">General</Heading>
+      <Body
+        >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero, aut
+        culpa provident sunt ratione! Voluptas doloremque, dicta nisi velit
+        perspiciatis, ratione vel blanditiis totam, nam voluptate repellat
+        aperiam fuga!</Body
+      >
+    </div>
+    <Divider size="S" />
+    <div class="information">
+      <Heading size="S">Information</Heading>
+      <Body>Here you can update your logo and organization name.</Body>
+      <div class="fields">
+        <div class="field">
+          <Label>Organization name</Label>
+          <Input />
+        </div>
+        <div class="field">
+          <Label>Logo</Label>
+          <div class="file">
+            <Dropzone />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Divider size="S" />
+    <div class="analytics">
+      <Heading size="S">Analytics</Heading>
+      <Body
+        >If you would like to send analytics that help us make Budibase better,
+        please let us know below.</Body
+      >
+      <div class="field">
+        <Label>Send Analytics to Budibase</Label>
+        <Toggle text="" />
+      </div>
+    </div>
+  </Layout>
+</div>
+
+<style>
+  .fields {
+    display: grid;
+    grid-gap: var(--spacing-m);
+  }
+  .field {
+    display: grid;
+    grid-template-columns: 30% 1fr;
+  }
+  .file {
+    max-width: 30ch;
+  }
+  .intro {
+    display: grid;
+  }
+</style>
--- a/packages/builder/src/pages/portal/settings/index.svelte
+++ b/packages/builder/src/pages/portal/settings/index.svelte
@ -0,0 +1,4 @@
+<script>
+  import { goto } from "@roxi/routify"
+  $goto("./general")
+</script>