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

Update app list to use a more compact style

Browse source
This commit is contained in:
Andrew Kingston 2023-01-11 08:10:56 +00:00
parent 0aa72e5147
commit a38d1ec583
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;
align-items: stretch;
flex: 1 1 auto;
overflow-x: hidden;
}
.main {
overflow: auto;

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

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

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

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

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

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

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

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