CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-28 08:21:41 +12:00
Code Issues Projects Releases Wiki Activity

Fix all styles in settings modal

Browse source
This commit is contained in:
Andrew Kingston 2020-09-30 10:24:16 +01:00
parent 49ccf8ebc8
commit a440f1a8e5
7 changed files with 67 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/builder/src/components/settings/Link.svelte
View file

@ -5,7 +5,7 @@
import { isActive, goto, layout } from "@sveltech/routify" import { isActive, goto, layout } from "@sveltech/routify"
// Handle create app modal // Handle create app modal
const { open } = getContext("simple-modal") const { open, close } = getContext("simple-modal")
const showSettingsModal = () => { const showSettingsModal = () => {
open( open(
@ -15,7 +15,6 @@
description: "This is a hardcoded description that needs to change", description: "This is a hardcoded description that needs to change",
}, },
{ {
closeButton: false,
closeOnEsc: true, closeOnEsc: true,
styleContent: { padding: 0 }, styleContent: { padding: 0 },
closeOnOuterClick: true, closeOnOuterClick: true,

57
packages/builder/src/components/settings/Modal.svelte
View file

@ -6,7 +6,6 @@
import { getContext } from "svelte" import { getContext } from "svelte"
import { post } from "builderStore/api" import { post } from "builderStore/api"
const { open, close } = getContext("simple-modal")
export let name = "" export let name = ""
export let description = "" export let description = ""
const tabs = [ const tabs = [
@ -36,64 +35,40 @@
</script> </script>
<div class="container"> <div class="container">
<div class="body">
<div class="heading"> <div class="heading">
<span class="icon"> <i class="ri-settings-2-fill" />
<SettingsIcon />
</span>
<h3>Settings</h3> <h3>Settings</h3>
</div> </div>
<Switcher headings={tabs} bind:value> <Switcher headings={tabs} bind:value>
<svelte:component this={selectedTab} /> <svelte:component this={selectedTab} />
</Switcher> </Switcher>
</div>
<div class="close-button" on:click={close}>
<CloseIcon />
</div>
</div> </div>
<style> <style>
.container { .container {
position: relative; padding: var(--spacing-xl);
height: 36rem; display: grid;
grid-gap: var(--spacing-xl);
}
.container :global(section > header) {
/* Fix margin defined in BBUI as L rather than XL */
margin-bottom: var(--spacing-xl);
} }
.close-button {
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
}
.close-button :global(svg) {
width: 24px;
height: 24px;
}
.heading { .heading {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 20px;
} }
h3 { .heading h3 {
font-size: var(--font-size-xl);
color: var(--ink);
font-weight: 600;
margin: 0; margin: 0;
font-size: 24px;
font-weight: bold;
} }
.icon { .heading i {
display: grid; margin-right: var(--spacing-m);
border-radius: 3px; font-size: 28px;
align-content: center; color: var(--grey-6);
justify-content: center;
margin-right: 12px;
height: 20px;
width: 20px;
padding: 10px;
background-color: var(--blue-light);
color: var(--grey-7);
}
.body {
padding: 40px 40px 40px 40px;
display: grid;
grid-gap: 20px;
} }
</style> </style>

18
packages/builder/src/components/settings/UserRow.svelte
View file

@ -14,7 +14,7 @@
bind:value={user.username} bind:value={user.username}
name="Name" name="Name"
placeholder="Username" /> placeholder="Username" />
<Select disabled={!editMode} bind:value={user.accessLevelId} thin> <Select disabled={!editMode} bind:value={user.accessLevelId} thin secondary>
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
</Select> </Select>
@ -36,19 +36,7 @@
.inputs { .inputs {
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
grid-gap: 18px; grid-gap: var(--spacing-m);
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 140px;
}
.inputs :global(input) {
padding: 10px 12px;
border-radius: var(--rounded-small);
}
.inputs :global(select) {
padding: 9px 12px;
border-radius: var(--rounded-small);
}
.inputs :global(button) {
border-radius: var(--rounded-small);
height: initial;
} }
</style> </style>

14
packages/builder/src/components/settings/tabs/APIKeys.svelte
View file

@ -24,31 +24,23 @@
</script> </script>
<div class="container"> <div class="container">
<div class="background">
<Input <Input
on:save={e => updateKey(['budibase', e.detail])} on:save={e => updateKey(['budibase', e.detail])}
thin thin
edit edit
value={keys.budibase} value={keys.budibase}
label="Budibase" /> label="Budibase API Key" />
</div>
<div class="background">
<Input <Input
on:save={e => updateKey(['sendgrid', e.detail])} on:save={e => updateKey(['sendgrid', e.detail])}
thin thin
edit edit
value={keys.sendgrid} value={keys.sendgrid}
label="Sendgrid" /> label="Sendgrid API Key" />
</div>
</div> </div>
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: var(--space); grid-gap: var(--spacing-xl);
}
.background {
border-radius: 5px;
padding: 12px 0px;
} }
</style> </style>

20
packages/builder/src/components/settings/tabs/DangerZone.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import { params, goto } from "@sveltech/routify" import { params, goto } from "@sveltech/routify"
import { Input, TextArea, Button } from "@budibase/bbui" import { Input, TextArea, Button, Body } from "@budibase/bbui"
import { del } from "builderStore/api" import { del } from "builderStore/api"
let value = "" let value = ""
@ -23,17 +23,18 @@
</script> </script>
<div class="background"> <div class="background">
<p> <Body>
Type DELETE into the textbox, then click the following button to delete your Type
web app: <b>DELETE</b>
</p> into the textbox, then click the following button to delete your entire web
app.
</Body>
<Input <Input
on:change={e => (value = e.target.value)} on:change={e => (value = e.target.value)}
on:input={e => (value = e.target.value)} on:input={e => (value = e.target.value)}
thin thin
disabled={loading} disabled={loading}
placeholder="" /> placeholder="" />
<Button <Button
disabled={value !== 'DELETE' || loading} disabled={value !== 'DELETE' || loading}
red red
@ -46,11 +47,10 @@
<style> <style>
.background { .background {
display: grid; display: grid;
grid-gap: 16px; grid-gap: var(--spacing-xl);
border-radius: 5px;
padding: 12px 0px;
} }
p { .background :global(p) {
line-height: 1.2;
margin: 0; margin: 0;
} }
.background :global(button) { .background :global(button) {

7
packages/builder/src/components/settings/tabs/General.svelte
View file

@ -22,19 +22,18 @@
thin thin
edit edit
value={$store.name} value={$store.name}
label="Name" /> label="App Name" />
<TextArea <TextArea
on:save={e => updateApplication({ description: e.detail })} on:save={e => updateApplication({ description: e.detail })}
thin thin
edit edit
value={$store.description} value={$store.description}
label="Description" /> label="App Description" />
</div> </div>
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: 32px; grid-gap: var(--spacing-xl);
margin-top: 32px;
} }
</style> </style>

70
packages/builder/src/components/settings/tabs/Users.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Input, Select, Button } from "@budibase/bbui" import { Input, Select, Button, Label } from "@budibase/bbui"
import UserRow from "../UserRow.svelte" import UserRow from "../UserRow.svelte"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
@ -8,7 +8,7 @@
let username = "" let username = ""
let password = "" let password = ""
let accessLevelId let accessLevelId = "ADMIN"
$: valid = username && password && accessLevelId $: valid = username && password && accessLevelId
$: appId = $store.appId $: appId = $store.appId
@ -52,8 +52,8 @@
</script> </script>
<div class="container"> <div class="container">
<div class="background"> <div>
<div class="title">Create new user</div> <Label extraSmall grey>Create New User</Label>
<div class="inputs"> <div class="inputs">
<Input thin bind:value={username} name="Name" placeholder="Username" /> <Input thin bind:value={username} name="Name" placeholder="Username" />
<Input <Input
@ -61,19 +61,17 @@
bind:value={password} bind:value={password}
name="Password" name="Password"
placeholder="Password" /> placeholder="Password" />
<Select bind:value={accessLevelId} thin> <Select secondary bind:value={accessLevelId} thin>
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
</Select> </Select>
</div> <Button on:click={createUser} primary>Create</Button>
<div class="create-button">
<Button on:click={createUser} small primary>Create</Button>
</div> </div>
</div> </div>
<div class="background-users"> <div>
<div class="title">Current Users</div> <Label extraSmall grey>Current Users</Label>
{#await fetchUsersPromise} {#await fetchUsersPromise}
Loading state! Loading...
{:then users} {:then users}
<ul> <ul>
{#each users as user} {#each users as user}
@ -94,57 +92,21 @@
<style> <style>
.container { .container {
display: grid; display: grid;
grid-gap: 32px; grid-gap: var(--spacing-xl);
margin-top: 32px;
}
.background {
position: relative;
display: grid;
grid-gap: 12px;
border-radius: 5px;
} }
.background-users {
position: relative;
display: grid;
grid-gap: 12px;
border-radius: 5px;
}
.create-button {
position: absolute;
top: 0px;
right: 0px;
}
.create-button :global(button) {
font-size: var(--font-size-sm);
min-width: 100px;
border-radius: var(--rounded-small);
}
.title {
font-size: 14px;
font-weight: 500;
}
.inputs { .inputs {
display: grid; display: grid;
margin-top: 12px; justify-items: stretch;
grid-gap: 18px; grid-gap: var(--spacing-m);
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 140px;
}
.inputs :global(input) {
padding: 10px 12px;
border-radius: var(--rounded-small);
}
.inputs :global(select) {
padding: 10px 12px;
border-radius: var(--rounded-small);
background-color: var(--grey-2);
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: grid; display: grid;
grid-gap: 8px; grid-gap: var(--spacing-m);
margin-top: 0; margin: 0;
} }
</style> </style>