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

Update multiple pages to be responsive and improve loading experience

This commit is contained in:
Andrew Kingston 2023-01-11 11:58:27 +00:00
parent e9d20a885b
commit 5cf6ba89cf
7 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bbui/src/Table/Table.svelte
View File

@ -280,6 +280,9 @@
styles[field] += styles[field] +=
"border-right: 1px solid var(--spectrum-global-color-gray-200);" "border-right: 1px solid var(--spectrum-global-color-gray-200);"
} }
if (schema[field].minWidth) {
styles[field] += `min-width: ${schema[field].minWidth};`
}
}) })
return styles return styles
} }
@ -450,6 +453,7 @@
--table-bg: var(--spectrum-global-color-gray-50); --table-bg: var(--spectrum-global-color-gray-50);
--table-border: 1px solid var(--spectrum-alias-border-color-mid); --table-border: 1px solid var(--spectrum-alias-border-color-mid);
--cell-padding: var(--spectrum-global-dimension-size-250); --cell-padding: var(--spectrum-global-dimension-size-250);
overflow: auto;
} }
.wrapper--quiet { .wrapper--quiet {
--table-bg: var(--spectrum-alias-background-color-transparent); --table-bg: var(--spectrum-alias-background-color-transparent);

53
packages/builder/src/components/start/AppRow.svelte
View File

@ -1,14 +1,35 @@
<script> <script>
import { Heading, Body, Button, Icon } from "@budibase/bbui" import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
import AppLockModal from "../common/AppLockModal.svelte" import AppLockModal from "../common/AppLockModal.svelte"
import { processStringSync } from "@budibase/string-templates" import { processStringSync } from "@budibase/string-templates"
import { goto } from "@roxi/routify"
export let app export let app
export let editApp
export let appOverview const handleDefaultClick = () => {
if (window.innerWidth < 640) {
goToOverview()
} else {
goToBuilder()
}
}
const goToBuilder = () => {
if (app.lockedOther) {
notifications.error(
`App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
)
return
}
$goto(`../../app/${app.devId}`)
}
const goToOverview = () => {
$goto(`../overview/${app.devId}`)
}
</script> </script>
<div class="app-row" on:click={() => editApp(app)}> <div class="app-row" on:click={handleDefaultClick}>
<div class="title" data-cy={`${app.devId}`}> <div class="title" data-cy={`${app.devId}`}>
<div class="app-icon"> <div class="app-icon">
<Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} /> <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
@ -35,21 +56,12 @@
<Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body> <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
</div> </div>
<div data-cy={`row_actions_${app.appId}`}> <div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
<div class="app-row-actions"> <AppLockModal {app} buttonSize="M" />
<AppLockModal {app} buttonSize="M" /> <Button size="S" secondary on:click={goToOverview}>Manage</Button>
<Button size="S" secondary on:click={() => appOverview(app)}> <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
Manage Edit
</Button> </Button>
<Button
size="S"
primary
disabled={app.lockedOther}
on:click={() => editApp(app)}
>
Edit
</Button>
</div>
</div> </div>
</div> </div>
@ -139,5 +151,8 @@
.app-row { .app-row {
padding: 20px; padding: 20px;
} }
.app-row-actions {
display: none;
}
} }
</style> </style>

3
packages/builder/src/pages/builder/portal/apps/_layout.svelte
View File

@ -4,7 +4,8 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
let loaded = false // Don't block loading if we've already hydrated state
let loaded = $apps.length > 0
onMount(async () => { onMount(async () => {
try { try {

16
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -178,20 +178,6 @@
creatingApp = false creatingApp = false
} }
const appOverview = app => {
$goto(`../overview/${app.devId}`)
}
const editApp = app => {
if (app.lockedOther) {
notifications.error(
`App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
)
return
}
$goto(`../../app/${app.devId}`)
}
function createAppFromTemplateUrl(templateKey) { function createAppFromTemplateUrl(templateKey) {
// validate the template key just to make sure // validate the template key just to make sure
const templateParts = templateKey.split("/") const templateParts = templateKey.split("/")
@ -309,7 +295,7 @@
<div class="app-table"> <div class="app-table">
{#each filteredApps as app (app.appId)} {#each filteredApps as app (app.appId)}
<AppRow {app} {editApp} {appOverview} /> <AppRow {app} />
{/each} {/each}
</div> </div>
</Layout> </Layout>

13
packages/builder/src/pages/builder/portal/plugins/index.svelte
View File

@ -20,6 +20,7 @@
const schema = { const schema = {
name: { name: {
width: "2fr", width: "2fr",
minWidth: "200px",
}, },
version: { version: {
width: "1fr", width: "1fr",
@ -28,6 +29,7 @@
width: "1fr", width: "1fr",
displayName: "Type", displayName: "Type",
capitalise: true, capitalise: true,
minWidth: "120px",
}, },
edit: { edit: {
width: "auto", width: "auto",
@ -119,8 +121,19 @@
display: flex; display: flex;
gap: var(--spacing-xl); gap: var(--spacing-xl);
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.controls :global(.spectrum-Search) { .controls :global(.spectrum-Search) {
width: 200px; width: 200px;
} }
@media (max-width: 640px) {
.filters {
display: grid;
grid-template-columns: 1fr 1fr;
}
.controls :global(.spectrum-Search) {
width: auto;
}
}
</style> </style>

2
packages/builder/src/pages/builder/portal/users/groups/index.svelte
View File

@ -40,7 +40,7 @@
] ]
$: schema = { $: schema = {
name: { displayName: "Group", width: "2fr" }, name: { displayName: "Group", width: "2fr", minWidth: "200px" },
users: { sortable: false, width: "1fr" }, users: { sortable: false, width: "1fr" },
roles: { sortable: false, displayName: "Apps", width: "1fr" }, roles: { sortable: false, displayName: "Apps", width: "1fr" },
} }

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

@ -57,6 +57,7 @@
email: { email: {
sortable: false, sortable: false,
width: "2fr", width: "2fr",
minWidth: "200px",
}, },
role: { role: {
sortable: false, sortable: false,
@ -296,6 +297,8 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: var(--spacing-xl);
} }
.controls-right { .controls-right {