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>