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

Fix all styles in settings modal

This commit is contained in:
Andrew Kingston 2020-09-30 10:24:16 +01:00
parent dd4162dedf
commit 049426b399
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"
// Handle create app modal
const { open } = getContext("simple-modal")
const { open, close } = getContext("simple-modal")
const showSettingsModal = () => {
open(
@ -15,7 +15,6 @@
description: "This is a hardcoded description that needs to change",
},
{
closeButton: false,
closeOnEsc: true,
styleContent: { padding: 0 },
closeOnOuterClick: true,

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

@ -6,7 +6,6 @@
import { getContext } from "svelte"
import { post } from "builderStore/api"
const { open, close } = getContext("simple-modal")
export let name = ""
export let description = ""
const tabs = [
@ -36,64 +35,40 @@
</script>
<div class="container">
<div class="body">
<div class="heading">
<span class="icon">
<SettingsIcon />
</span>
<i class="ri-settings-2-fill" />
<h3>Settings</h3>
</div>
<Switcher headings={tabs} bind:value>
<svelte:component this={selectedTab} />
</Switcher>
</div>
<div class="close-button" on:click={close}>
<CloseIcon />
</div>
</div>
<style>
.container {
position: relative;
height: 36rem;
padding: var(--spacing-xl);
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 {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
h3 {
.heading h3 {
font-size: var(--font-size-xl);
color: var(--ink);
font-weight: 600;
margin: 0;
font-size: 24px;
font-weight: bold;
}
.icon {
display: grid;
border-radius: 3px;
align-content: center;
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;
.heading i {
margin-right: var(--spacing-m);
font-size: 28px;
color: var(--grey-6);
}
</style>

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

@ -14,7 +14,7 @@
bind:value={user.username}
name="Name"
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="POWER_USER">Power User</option>
</Select>
@ -36,19 +36,7 @@
.inputs {
display: grid;
justify-items: stretch;
grid-gap: 18px;
grid-template-columns: 1fr 1fr 1fr;
}
.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;
grid-gap: var(--spacing-m);
grid-template-columns: 1fr 1fr 140px;
}
</style>

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

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

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

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

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

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

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

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