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

Update app list to use a more compact style

This commit is contained in:
Andrew Kingston 2023-01-11 08:10:56 +00:00
parent efd6f4fefb
commit fcde5fb3e9
5 changed files with 58 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bbui/src/Layout/Page.svelte
View File

@ -42,6 +42,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
flex: 1 1 auto; flex: 1 1 auto;
overflow-x: hidden;
} }
.main { .main {
overflow: auto; overflow: auto;

3
packages/builder/src/components/common/AppLockModal.svelte
View File

@ -63,7 +63,8 @@
name="LockClosed" name="LockClosed"
hoverable hoverable
size={buttonSize} size={buttonSize}
on:click={() => { on:click={e => {
e.stopPropagation()
appLockModal.show() appLockModal.show()
}} }}
/> />

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

@ -8,41 +8,39 @@
export let appOverview export let appOverview
</script> </script>
<div class="app-row"> <div class="app-row" on:click={() => editApp(app)}>
<div class="header"> <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}
/>
</div>
<div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
<Heading size="S">
{app.name}
</Heading>
</div>
</div> </div>
<div class="name" data-cy="app-name-link">
<Heading size="S">
{app.name}
</Heading>
</div>
</div>
<div class="updated"> <div class="updated">
{#if app.updatedAt} {#if app.updatedAt}
{processStringSync("Updated {{ duration time 'millisecond' }} ago", { {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
time: new Date().getTime() - new Date(app.updatedAt).getTime(), time: new Date().getTime() - new Date(app.updatedAt).getTime(),
})} })}
{:else} {:else}
Never updated Never updated
{/if} {/if}
</div>
</div> </div>
<div class="title app-status" class:deployed={app.deployed}> <div class="title app-status" class:deployed={app.deployed}>
<Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} /> <Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
<Body size="S">{`${window.origin}/app${app.url}`}</Body> <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
</div> </div>
<div data-cy={`row_actions_${app.appId}`}> <div data-cy={`row_actions_${app.appId}`}>
<div class="app-row-actions"> <div class="app-row-actions">
<AppLockModal {app} buttonSize="M" />
<Button size="S" secondary on:click={() => appOverview(app)}>
Manage
</Button>
<Button <Button
size="S" size="S"
primary primary
@ -51,10 +49,6 @@
> >
Edit Edit
</Button> </Button>
<Button size="S" secondary on:click={() => appOverview(app)}>
Manage
</Button>
<AppLockModal {app} buttonSize="M" />
</div> </div>
</div> </div>
</div> </div>
@ -64,24 +58,26 @@
background: var(--background); background: var(--background);
padding: 24px 32px; padding: 24px 32px;
border-radius: 8px; border-radius: 8px;
display: flex; display: grid;
flex-direction: column; grid-template-columns: 35% 25% 15% auto;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-m);
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center; align-items: center;
gap: var(--spacing-m);
transition: border 130ms ease-out;
border: 1px solid transparent;
}
.app-row:hover {
cursor: pointer;
border-color: var(--spectrum-global-color-gray-300);
} }
.updated { .updated {
color: var(--spectrum-global-color-gray-700); color: var(--spectrum-global-color-gray-700);
} }
.title,
.name {
flex: 1 1 auto;
}
.title, .title,
.app-status { .app-status {
display: flex; display: flex;
@ -106,9 +102,8 @@
gap: var(--spacing-m); gap: var(--spacing-m);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-end;
align-items: center; align-items: center;
margin-top: var(--spacing-m);
} }
.name { .name {
@ -120,11 +115,6 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.title :global(h1:hover) {
color: var(--spectrum-global-color-blue-600);
cursor: pointer;
transition: color 130ms ease;
}
@media (max-width: 640px) { @media (max-width: 640px) {
.desktop { .desktop {

33
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -134,12 +134,6 @@
<div class="mobile-toggle"> <div class="mobile-toggle">
<Icon hoverable name="ShowMenu" on:click={showMobileMenu} /> <Icon hoverable name="ShowMenu" on:click={showMobileMenu} />
</div> </div>
<div class="mobile-logo">
<img
src={$organisation?.logoUrl || Logo}
alt={$organisation?.company || "Budibase"}
/>
</div>
{#if $adminStore.cloud && $auth?.user?.accountPortalAccess} {#if $adminStore.cloud && $auth?.user?.accountPortalAccess}
<Button <Button
cta cta
@ -236,11 +230,16 @@
border-bottom: var(--border-light); border-bottom: var(--border-light);
padding: 0 20px; padding: 0 20px;
gap: 24px; gap: 24px;
position: relative;
} }
.nav :global(.spectrum-Tabs) { .nav :global(.spectrum-Tabs) {
margin-bottom: -2px; margin-bottom: -2px;
padding: 7px 0; padding: 7px 0;
} }
.nav :global(.spectrum-Tabs-content) {
display: none;
}
.nav :global(.spectrum-Tabs-itemLabel) { .nav :global(.spectrum-Tabs-itemLabel) {
font-weight: 600; font-weight: 600;
} }
@ -291,8 +290,6 @@
@media (max-width: 640px) { @media (max-width: 640px) {
.toolbar { .toolbar {
background: var(--background);
border-bottom: var(--border-light);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -300,20 +297,20 @@
padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5); padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5);
} }
.nav { .branding {
position: absolute; position: absolute;
left: -250px; left: 50%;
height: 100%; top: 50%;
transition: left ease-in-out 230ms; transform: translateY(-50%) translateX(-50%);
z-index: 100;
} }
.nav.visible { .nav :global(.spectrum-Tabs) {
left: 0; display: none !important;
box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.3); }
.toolbar :global(.spectrum-Button) {
display: none;
} }
.mobile-toggle, .mobile-toggle {
.mobile-logo {
display: block; display: block;
} }

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

@ -49,8 +49,6 @@
) )
: true) : true)
) )
$: lockedApps = filteredApps.filter(app => app?.lockedYou || app?.lockedOther)
$: unlocked = lockedApps?.length === 0
$: automationErrors = getAutomationErrors(enrichedApps) $: automationErrors = getAutomationErrors(enrichedApps)
const enrichApps = (apps, user, sortBy) => { const enrichApps = (apps, user, sortBy) => {
@ -309,7 +307,7 @@
{/if} {/if}
</div> </div>
<div class="appTable" class:unlocked> <div class="app-table">
{#each filteredApps as app (app.appId)} {#each filteredApps as app (app.appId)}
<AppRow {app} {editApp} {appOverview} /> <AppRow {app} {editApp} {appOverview} />
{/each} {/each}
@ -369,19 +367,14 @@
gap: var(--spacing-xl); gap: var(--spacing-xl);
} }
.appTable { .app-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: 24px; gap: var(--spacing-xl);
} }
@media (max-width: 640px) {
.appTable {
grid-template-columns: 1fr auto !important;
}
}
.empty-wrapper { .empty-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
height: 100%; height: 100%;