MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix spacing and make consistent in all portal pages

This commit is contained in:
Andrew Kingston 2021-05-19 11:07:14 +01:00
parent 2cc37e196d
commit 664ee94433
12 changed files with 151 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/components/login/LoginForm.svelte
View File

@ -40,8 +40,8 @@
<Heading>Sign in to Budibase</Heading> <Heading>Sign in to Budibase</Heading>
</Layout> </Layout>
<GoogleButton /> <GoogleButton />
<Layout gap="XS" noPadding>
<Divider noGrid /> <Divider noGrid />
<Layout gap="XS" noPadding>
<Body size="S" textAlign="center">Sign in with email</Body> <Body size="S" textAlign="center">Sign in with email</Body>
<Input label="Email" bind:value={username} /> <Input label="Email" bind:value={username} />
<Input <Input
@ -51,7 +51,7 @@
bind:value={password} bind:value={password}
/> />
</Layout> </Layout>
<Layout gap="S" noPadding> <Layout gap="XS" noPadding>
<Button cta on:click={login}>Sign in to Budibase</Button> <Button cta on:click={login}>Sign in to Budibase</Button>
<ActionButton quiet on:click={() => $goto("./forgot")}> <ActionButton quiet on:click={() => $goto("./forgot")}>
Forgot password? Forgot password?

2
packages/builder/src/components/start/AppCard.svelte
View File

@ -48,7 +48,7 @@
</ActionMenu> </ActionMenu>
</div> </div>
<div class="status"> <div class="status">
<Body noPadding size="S"> <Body size="S">
Edited {Math.floor(1 + Math.random() * 10)} months ago Edited {Math.floor(1 + Math.random() * 10)} months ago
</Body> </Body>
{#if app.lockedBy} {#if app.lockedBy}

2
packages/builder/src/pages/builder/admin/index.svelte
View File

@ -36,7 +36,7 @@
<img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} /> <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
<Layout gap="XS" justifyItems="center" noPadding> <Layout gap="XS" justifyItems="center" noPadding>
<Heading size="M">Create an admin user</Heading> <Heading size="M">Create an admin user</Heading>
<Body size="M" textAlign="center" noPadding> <Body size="M" textAlign="center">
The admin user has access to everything in Budibase. The admin user has access to everything in Budibase.
</Body> </Body>
</Layout> </Layout>

2
packages/builder/src/pages/builder/invite/index.svelte
View File

@ -27,7 +27,7 @@
<img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} /> <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
<Layout gap="XS" justifyItems="center" noPadding> <Layout gap="XS" justifyItems="center" noPadding>
<Heading size="M">Accept Invitation</Heading> <Heading size="M">Accept Invitation</Heading>
<Body textAlign="center" size="M" noPadding> <Body textAlign="center" size="M">
Please enter a password to set up your user. Please enter a password to set up your user.
</Body> </Body>
</Layout> </Layout>

32
packages/builder/src/pages/builder/portal/manage/auth/index.svelte
View File

@ -59,44 +59,42 @@
}) })
</script> </script>
<Page> <Layout>
<Layout noPadding> <Layout gap="XS" noPadding>
<div>
<Heading size="M">OAuth</Heading> <Heading size="M">OAuth</Heading>
<Body> <Body>
Every budibase app comes with basic authentication (email/password) Every budibase app comes with basic authentication (email/password)
included. You can add additional authentication methods from the options included. You can add additional authentication methods from the options
below. below.
</Body> </Body>
</div> </Layout>
<Divider />
{#if google} {#if google}
<div> <Divider />
<Layout gap="XS" noPadding>
<Heading size="S"> <Heading size="S">
<span> <span>
<GoogleLogo /> <GoogleLogo />
Google Google
</span> </span>
</Heading> </Heading>
<Body> <Body size="S">
To allow users to authenticate using their Google accounts, fill out To allow users to authenticate using their Google accounts, fill out the
the fields below. fields below.
</Body> </Body>
</div> </Layout>
<Layout gap="XS" noPadding>
{#each ConfigFields.Google as field} {#each ConfigFields.Google as field}
<div class="form-row"> <div class="form-row">
<Label size="L">{field}</Label> <Label size="L">{field}</Label>
<Input bind:value={google.config[field]} /> <Input bind:value={google.config[field]} />
</div> </div>
{/each} {/each}
<div>
<Button primary on:click={() => save(google)}>Save</Button>
</div>
<Divider />
{/if}
</Layout> </Layout>
</Page> <div>
<Button cta on:click={() => save(google)}>Save</Button>
</div>
{/if}
</Layout>
<style> <style>
.form-row { .form-row {

2
packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte
View File

@ -16,7 +16,7 @@
{#each bindings as binding} {#each bindings as binding}
<MenuItem on:click={() => onBindingClick(binding)}> <MenuItem on:click={() => onBindingClick(binding)}>
<Detail size="M">{binding.name}</Detail> <Detail size="M">{binding.name}</Detail>
<Body size="XS" noPadding>{binding.description}</Body> <Body size="XS">{binding.description}</Body>
</MenuItem> </MenuItem>
{/each} {/each}
</Menu> </Menu>

50
packages/builder/src/pages/builder/portal/manage/email/index.svelte
View File

@ -102,59 +102,57 @@
}) })
</script> </script>
<Page> <Layout>
<header> <Layout noPadding gap="XS">
<Heading size="M">Email</Heading> <Heading size="M">Email</Heading>
<Body size="S"> <Body>
Sending email is not required, but highly recommended for processes such Sending email is not required, but highly recommended for processes such
as password recovery. To setup automated auth emails, simply add the as password recovery. To setup automated auth emails, simply add the
values below and click activate. values below and click activate.
</Body> </Body>
</header> </Layout>
<Divider /> <Divider />
{#if smtpConfig} {#if smtpConfig}
<div class="config-form"> <Layout gap="XS" noPadding>
<Heading size="S">SMTP</Heading> <Heading size="S">SMTP</Heading>
<Body size="S"> <Body size="S">
To allow your app to benefit from automated auth emails, add your SMTP To allow your app to benefit from automated auth emails, add your SMTP
details below. details below.
</Body> </Body>
<Layout gap="S"> </Layout>
<Heading size="S"> <Layout gap="XS" noPadding>
<span />
</Heading>
<div class="form-row"> <div class="form-row">
<Label>Host</Label> <Label size="L">Host</Label>
<Input bind:value={smtpConfig.config.host} /> <Input bind:value={smtpConfig.config.host} />
</div> </div>
<div class="form-row"> <div class="form-row">
<Label>Port</Label> <Label size="L">Port</Label>
<Input type="number" bind:value={smtpConfig.config.port} /> <Input type="number" bind:value={smtpConfig.config.port} />
</div> </div>
<div class="form-row"> <div class="form-row">
<Label>User</Label> <Label size="L">User</Label>
<Input bind:value={smtpConfig.config.auth.user} /> <Input bind:value={smtpConfig.config.auth.user} />
</div> </div>
<div class="form-row"> <div class="form-row">
<Label>Password</Label> <Label size="L">Password</Label>
<Input type="password" bind:value={smtpConfig.config.auth.pass} /> <Input type="password" bind:value={smtpConfig.config.auth.pass} />
</div> </div>
<div class="form-row"> <div class="form-row">
<Label>From email address</Label> <Label size="L">From email address</Label>
<Input type="email" bind:value={smtpConfig.config.from} /> <Input type="email" bind:value={smtpConfig.config.from} />
</div> </div>
</Layout> </Layout>
<div>
<Button cta on:click={saveSmtp}>Save</Button> <Button cta on:click={saveSmtp}>Save</Button>
</div> </div>
<Divider /> <Divider />
<Layout gap="XS" noPadding>
<div class="config-form">
<Heading size="S">Templates</Heading> <Heading size="S">Templates</Heading>
<Body size="S"> <Body size="S">
Budibase comes out of the box with ready-made email templates to help Budibase comes out of the box with ready-made email templates to help
with user onboarding. Please refrain from changing the links. with user onboarding. Please refrain from changing the links.
</Body> </Body>
</div> </Layout>
<Table <Table
{customRenderers} {customRenderers}
data={$email.templates} data={$email.templates}
@ -165,27 +163,13 @@
allowEditColumns={false} allowEditColumns={false}
/> />
{/if} {/if}
</Page> </Layout>
<style> <style>
.config-form {
margin-top: 42px;
margin-bottom: 42px;
}
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 20% 1fr; grid-template-columns: 25% 1fr;
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
}
span {
display: flex;
align-items: center; align-items: center;
gap: var(--spacing-s);
}
header {
margin-bottom: 42px;
} }
</style> </style>

10
packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
View File

@ -30,18 +30,18 @@
<ModalContent <ModalContent
onConfirm={createUserFlow} onConfirm={createUserFlow}
size="M" size="M"
title="Add new user options" title="Add new user"
confirmText="Add user" confirmText="Add user"
confirmDisabled={disabled} confirmDisabled={disabled}
cancelText="Cancel" cancelText="Cancel"
disabled={$error} disabled={$error}
showCloseIcon={false} showCloseIcon={false}
> >
<Body noPadding <Body size="S">
>If you have SMTP configured and an email for the new user, you can use the If you have SMTP configured and an email for the new user, you can use the
automated email onboarding flow. Otherwise, use our basic onboarding process automated email onboarding flow. Otherwise, use our basic onboarding process
with autogenerated passwords.</Body with autogenerated passwords.
> </Body>
<Select <Select
placeholder={null} placeholder={null}
bind:value={selected} bind:value={selected}

8
packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
View File

@ -26,10 +26,10 @@
error={$touched && $error} error={$touched && $error}
showCloseIcon={false} showCloseIcon={false}
> >
<Body noPadding <Body size="S">
>Below you will find the user’s username and password. The password will not Below you will find the user’s username and password. The password will not
be accessible from this point. Please download the credentials.</Body be accessible from this point. Please save the credentials.
> </Body>
<Input <Input
type="email" type="email"
label="Username" label="Username"

2
packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
View File

@ -37,7 +37,7 @@
size="M" size="M"
showCloseIcon={false} showCloseIcon={false}
> >
<Body noPadding> <Body>
Update {user.email}'s role for <strong>{app.name}</strong>. Update {user.email}'s role for <strong>{app.name}</strong>.
</Body> </Body>
<Select <Select

46
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View File

@ -44,28 +44,27 @@
</script> </script>
<Layout> <Layout>
<div class="heading"> <Layout gap="XS" noPadding>
<Heading>Users</Heading> <Heading>Users</Heading>
<Body <Body>
>Users are the common denominator in Budibase. Each user is assigned to a Users are the common denominator in Budibase. Each user is assigned to a
group that contains apps and permissions. In this section, you can add group that contains apps and permissions. In this section, you can add
users, or edit and delete an existing user.</Body users, or edit and delete an existing user.
> </Body>
</div> </Layout>
<Divider size="S" /> <Divider size="S" />
<Layout gap="S" noPadding>
<div class="users"> <div class="users-heading">
<Heading size="S">Users</Heading> <Heading size="S">Users</Heading>
<div class="field">
<Label size="L">Search / filter</Label>
<Search bind:value={search} placeholder="" />
</div>
<div class="buttons">
<ButtonGroup> <ButtonGroup>
<Button disabled secondary>Import users</Button> <Button disabled secondary>Import users</Button>
<Button primary on:click={createUserModal.show}>Add user</Button> <Button primary on:click={createUserModal.show}>Add user</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
<div class="field">
<Label size="L">Search / filter</Label>
<Search bind:value={search} placeholder="" />
</div>
<Table <Table
on:click={({ detail }) => $goto(`./${detail._id}`)} on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema} {schema}
@ -75,31 +74,28 @@
allowSelectRows={false} allowSelectRows={false}
customRenderers={[{ column: "group", component: TagsRenderer }]} customRenderers={[{ column: "group", component: TagsRenderer }]}
/> />
</div> </Layout>
</Layout> </Layout>
<Modal bind:this={createUserModal} <Modal bind:this={createUserModal}>
><AddUserModal on:change={openBasicOnoboardingModal} /></Modal <AddUserModal on:change={openBasicOnoboardingModal} />
> </Modal>
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal> <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
<style> <style>
.users {
position: relative;
}
.field { .field {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
margin: var(--spacing-xl) 0;
} }
.field > :global(*) + :global(*) { .field > :global(*) + :global(*) {
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
} }
.buttons { .users-heading {
position: absolute; display: flex;
top: 0; flex-direction: row;
right: 0; justify-content: space-between;
align-items: center;
} }
</style> </style>

46
packages/builder/src/pages/builder/portal/settings/general.svelte
View File

@ -57,20 +57,19 @@
} }
</script> </script>
<div class="container"> <Layout>
<Layout noPadding> <Layout gap="XS" noPadding>
<div class="intro">
<Heading size="M">General</Heading> <Heading size="M">General</Heading>
<Body> <Body>
General is the place where you edit your organisation name, logo. You General is the place where you edit your organisation name, logo. You can
can also configure your platform URL as well as turn on or off also configure your platform URL as well as turn on or off analytics.
analytics.
</Body> </Body>
</div> </Layout>
<Divider size="S" /> <Divider size="S" />
<div class="information"> <Layout gap="XS" noPadding>
<Heading size="S">Information</Heading> <Heading size="S">Information</Heading>
<Body>Here you can update your logo and organization name.</Body> <Body size="S">Here you can update your logo and organization name.</Body>
</Layout>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label size="L">Organization name</Label> <Label size="L">Organization name</Label>
@ -88,47 +87,46 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<Divider size="S" /> <Divider size="S" />
<div class="analytics"> <Layout gap="XS" noPadding>
<Heading size="S">Platform</Heading> <Heading size="S">Platform</Heading>
<Body>Here you can set up general platform settings.</Body> <Body size="S">Here you can set up general platform settings.</Body>
</Layout>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label size="L">Platform URL</Label> <Label size="L">Platform URL</Label>
<Input thin bind:value={$organisation.platformUrl} /> <Input thin bind:value={$organisation.platformUrl} />
</div> </div>
</div> </div>
</div>
<Divider size="S" /> <Divider size="S" />
<div class="analytics"> <Layout gap="S" noPadding>
<Layout gap="XS" noPadding>
<Heading size="S">Analytics</Heading> <Heading size="S">Analytics</Heading>
<Body> <Body size="S">
If you would like to send analytics that help us make Budibase better, If you would like to send analytics that help us make Budibase better,
please let us know below. please let us know below.
</Body> </Body>
</Layout>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label size="L">Send Analytics to Budibase</Label> <Label size="L">Send Analytics to Budibase</Label>
<Toggle text="" value={!analyticsDisabled} /> <Toggle text="" value={!analyticsDisabled} />
</div> </div>
</div> </div>
</div> </Layout>
<div class="save"> <div>
<Button disabled={loading} on:click={saveConfig} cta>Save</Button> <Button disabled={loading} on:click={saveConfig} cta>Save</Button>
</div> </div>
</Layout> </Layout>
</div>
<style> <style>
.fields { .fields {
display: grid; display: grid;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
margin-top: var(--spacing-xl);
} }
.field { .field {
display: grid; display: grid;
grid-template-columns: 32% 1fr; grid-template-columns: 33% 1fr;
align-items: center; align-items: center;
} }
.file { .file {
@ -137,10 +135,4 @@
.logo { .logo {
align-items: start; align-items: start;
} }
.intro {
display: grid;
}
.save {
margin-left: auto;
}
</style> </style>