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 550ea1a70d
commit 5c8c663935
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 />
<Divider noGrid />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Divider noGrid />
<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>

60
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> </Layout>
</div> {#if google}
<Divider /> <Divider />
{#if google} <Layout gap="XS" noPadding>
<div> <Heading size="S">
<Heading size="S"> <span>
<span> <GoogleLogo />
<GoogleLogo /> Google
Google </span>
</span> </Heading>
</Heading> <Body size="S">
<Body> To allow users to authenticate using their Google accounts, fill out the
To allow users to authenticate using their Google accounts, fill out fields below.
the fields below. </Body>
</Body> </Layout>
</div> <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> </Layout>
<Button primary on:click={() => save(google)}>Save</Button> <div>
</div> <Button cta on:click={() => save(google)}>Save</Button>
<Divider /> </div>
{/if} {/if}
</Layout> </Layout>
</Page>
<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>

82
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 /> <div class="form-row">
</Heading> <Label size="L">Host</Label>
<div class="form-row"> <Input bind:value={smtpConfig.config.host} />
<Label>Host</Label> </div>
<Input bind:value={smtpConfig.config.host} /> <div class="form-row">
</div> <Label size="L">Port</Label>
<div class="form-row"> <Input type="number" bind:value={smtpConfig.config.port} />
<Label>Port</Label> </div>
<Input type="number" bind:value={smtpConfig.config.port} /> <div class="form-row">
</div> <Label size="L">User</Label>
<div class="form-row"> <Input bind:value={smtpConfig.config.auth.user} />
<Label>User</Label> </div>
<Input bind:value={smtpConfig.config.auth.user} /> <div class="form-row">
</div> <Label size="L">Password</Label>
<div class="form-row"> <Input type="password" bind:value={smtpConfig.config.auth.pass} />
<Label>Password</Label> </div>
<Input type="password" bind:value={smtpConfig.config.auth.pass} /> <div class="form-row">
</div> <Label size="L">From email address</Label>
<div class="form-row"> <Input type="email" bind:value={smtpConfig.config.from} />
<Label>From email address</Label> </div>
<Input type="email" bind:value={smtpConfig.config.from} /> </Layout>
</div> <div>
</Layout>
<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

48
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>

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

@ -57,78 +57,76 @@
} }
</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 can
General is the place where you edit your organisation name, logo. You also configure your platform URL as well as turn on or off analytics.
can also configure your platform URL as well as turn on or off </Body>
analytics. </Layout>
</Body> <Divider size="S" />
<Layout gap="XS" noPadding>
<Heading size="S">Information</Heading>
<Body size="S">Here you can update your logo and organization name.</Body>
</Layout>
<div class="fields">
<div class="field">
<Label size="L">Organization name</Label>
<Input thin bind:value={$organisation.company} />
</div> </div>
<Divider size="S" /> <div class="field logo">
<div class="information"> <Label size="L">Logo</Label>
<Heading size="S">Information</Heading> <div class="file">
<Body>Here you can update your logo and organization name.</Body> <Dropzone
<div class="fields"> value={[file]}
<div class="field"> on:change={e => {
<Label size="L">Organization name</Label> file = e.detail?.[0]
<Input thin bind:value={$organisation.company} /> }}
</div> />
<div class="field logo">
<Label size="L">Logo</Label>
<div class="file">
<Dropzone
value={[file]}
on:change={e => {
file = e.detail?.[0]
}}
/>
</div>
</div>
</div> </div>
</div> </div>
<Divider size="S" /> </div>
<div class="analytics"> <Divider size="S" />
<Heading size="S">Platform</Heading> <Layout gap="XS" noPadding>
<Body>Here you can set up general platform settings.</Body> <Heading size="S">Platform</Heading>
<div class="fields"> <Body size="S">Here you can set up general platform settings.</Body>
<div class="field"> </Layout>
<Label size="L">Platform URL</Label> <div class="fields">
<Input thin bind:value={$organisation.platformUrl} /> <div class="field">
</div> <Label size="L">Platform URL</Label>
</div> <Input thin bind:value={$organisation.platformUrl} />
</div> </div>
<Divider size="S" /> </div>
<div class="analytics"> <Divider size="S" />
<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>
<div class="fields"> </Layout>
<div class="field"> <div class="fields">
<Label size="L">Send Analytics to Budibase</Label> <div class="field">
<Toggle text="" value={!analyticsDisabled} /> <Label size="L">Send Analytics to Budibase</Label>
</div> <Toggle text="" value={!analyticsDisabled} />
</div> </div>
</div> </div>
<div class="save">
<Button disabled={loading} on:click={saveConfig} cta>Save</Button>
</div>
</Layout> </Layout>
</div> <div>
<Button disabled={loading} on:click={saveConfig} cta>Save</Button>
</div>
</Layout>
<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>