Merge pull request #6682 from Budibase/cheeks-fixes

Design polish + misc fixes
This commit is contained in:
Andrew Kingston 2022-07-13 13:09:30 +01:00 committed by GitHub
commit 75ddf9509b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 58 additions and 59 deletions

View File

@ -96,7 +96,7 @@
onSelect(block) onSelect(block)
}} }}
> >
<Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} /> <Icon hoverable name={blockComplete ? "ChevronUp" : "ChevronDown"} />
</div> </div>
</div> </div>
</div> </div>

View File

@ -67,27 +67,20 @@
{/if} {/if}
<div class="tabs"> <div class="tabs">
<Tabs quiet noPadding selected="Input"> <Tabs noHorizPadding selected="Input">
<Tab title="Input"> <Tab title="Input">
<div style="padding: 10px 10px 10px 10px;"> <TextArea
<TextArea minHeight="80px"
minHeight="80px" disabled
disabled value={textArea(filteredResults?.[idx]?.inputs, "No input")}
value={textArea(filteredResults?.[idx]?.inputs, "No input")} />
/> </Tab>
</div></Tab
>
<Tab title="Output"> <Tab title="Output">
<div style="padding: 10px 10px 10px 10px;"> <TextArea
<TextArea minHeight="100px"
minHeight="100px" disabled
disabled value={textArea(filteredResults?.[idx]?.outputs, "No output")}
value={textArea( />
filteredResults?.[idx]?.outputs,
"No output"
)}
/>
</div>
</Tab> </Tab>
</Tabs> </Tabs>
</div> </div>
@ -113,6 +106,7 @@
align-items: stretch; align-items: stretch;
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
} }
.block { .block {

View File

@ -23,7 +23,7 @@
<ActionButton noPadding size="S" icon="Close" quiet on:click={close} /> <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
</div> </div>
</div> </div>
<Layout paddingX="XL" gap="S"> <Layout paddingY="XL" paddingX="XL" gap="S">
<div class="icon"> <div class="icon">
<Icon name="Clock" /> <Icon name="Clock" />
<DateTimeRenderer value={history.createdAt} /> <DateTimeRenderer value={history.createdAt} />
@ -71,7 +71,6 @@
} }
.bottom { .bottom {
margin-top: var(--spacing-m);
border-top: var(--border-light); border-top: var(--border-light);
padding-top: calc(var(--spacing-xl) * 2); padding-top: calc(var(--spacing-xl) * 2);
padding-bottom: calc(var(--spacing-xl) * 2); padding-bottom: calc(var(--spacing-xl) * 2);

View File

@ -119,7 +119,7 @@
</script> </script>
<div class="root" class:panelOpen={showPanel}> <div class="root" class:panelOpen={showPanel}>
<Layout paddingX="XL" gap="S" alignContent="start"> <Layout noPadding gap="M" alignContent="start">
<div class="search"> <div class="search">
<div class="select"> <div class="select">
<Select <Select
@ -147,16 +147,28 @@
</div> </div>
</div> </div>
{#if runHistory} {#if runHistory}
<Table <div>
on:click={viewDetails} <Table
schema={runHistorySchema} on:click={viewDetails}
allowSelectRows={false} schema={runHistorySchema}
allowEditColumns={false} allowSelectRows={false}
allowEditRows={false} allowEditColumns={false}
data={runHistory} allowEditRows={false}
{customRenderers} data={runHistory}
placeholderText="No history found" {customRenderers}
/> placeholderText="No history found"
border={false}
/>
<div class="pagination">
<Pagination
page={$pageInfo.pageNumber}
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
goToPrevPage={pageInfo.prevPage}
goToNextPage={pageInfo.nextPage}
/>
</div>
</div>
{/if} {/if}
</Layout> </Layout>
<div class="panel" class:panelShow={showPanel}> <div class="panel" class:panelShow={showPanel}>
@ -169,26 +181,19 @@
/> />
</div> </div>
</div> </div>
<div class="pagination">
<Pagination
page={$pageInfo.pageNumber}
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
goToPrevPage={pageInfo.prevPage}
goToNextPage={pageInfo.nextPage}
/>
</div>
<style> <style>
.root { .root {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: 100%; height: 100%;
padding: var(--spectrum-alias-grid-gutter-medium)
var(--spectrum-alias-grid-gutter-large);
} }
.search { .search {
display: flex; display: flex;
gap: var(--spacing-l); gap: var(--spacing-xl);
width: 100%; width: 100%;
align-items: flex-end; align-items: flex-end;
} }
@ -198,15 +203,15 @@
} }
.pagination { .pagination {
position: absolute; display: flex;
bottom: 0; flex-direction: row;
margin-bottom: var(--spacing-xl); justify-content: flex-end;
margin-left: var(--spacing-l); margin-top: var(--spacing-xl);
} }
.panel { .panel {
display: none; display: none;
background-color: var(--background); margin-top: calc(-1 * var(--spectrum-alias-grid-gutter-medium));
} }
.panelShow { .panelShow {

View File

@ -207,11 +207,6 @@
<span class="overview-wrap"> <span class="overview-wrap">
<Page wide noPadding> <Page wide noPadding>
{#await promise} {#await promise}
<span class="page-header">
<ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
Back
</ActionButton>
</span>
<div class="loading"> <div class="loading">
<ProgressCircle size="XL" /> <ProgressCircle size="XL" />
</div> </div>
@ -400,7 +395,7 @@
line-height: 1em; line-height: 1em;
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
} }
.tab-wrap :global(.spectrum-Tabs) { .tab-wrap :global(> .spectrum-Tabs) {
padding-left: var(--spectrum-alias-grid-gutter-large); padding-left: var(--spectrum-alias-grid-gutter-large);
padding-right: var(--spectrum-alias-grid-gutter-large); padding-right: var(--spectrum-alias-grid-gutter-large);
} }

View File

@ -58,16 +58,16 @@
</Layout> </Layout>
</span> </span>
<span class="version-section"> <span class="version-section">
<Layout gap="XS" paddingY="XXL" paddingX=""> <Layout gap="XS" noPadding>
<Heading size="S">App version</Heading> <Heading size="S">App version</Heading>
<Divider /> <Divider />
<Body> <Body>
{#if updateAvailable} {#if updateAvailable}
<p class="version-status"> <Body>
The app is currently using version The app is currently using version
<strong>{$store.version}</strong> <strong>{$store.version}</strong>
but version <strong>{clientPackage.version}</strong> is available. but version <strong>{clientPackage.version}</strong> is available.
</p> </Body>
{:else} {:else}
<p class="version-status"> <p class="version-status">
The app is currently using version The app is currently using version

View File

@ -323,6 +323,9 @@
position: relative; position: relative;
padding: 32px; padding: 32px;
} }
.main.size--max {
padding: 0;
}
.layout--none .main { .layout--none .main {
padding: 0; padding: 0;
} }
@ -465,6 +468,9 @@
.mobile:not(.layout--none) .main { .mobile:not(.layout--none) .main {
padding: 16px; padding: 16px;
} }
.mobile .main.size--max {
padding: 0;
}
/* Transform links into drawer */ /* Transform links into drawer */
.mobile .links { .mobile .links {

View File

@ -98,7 +98,7 @@
}) })
} }
}) })
return enrichedColumns.slice(0, 3) return enrichedColumns.slice(0, 5)
} }
// Builds a full details page URL for the card title // Builds a full details page URL for the card title

View File

@ -89,7 +89,7 @@
}) })
} }
}) })
return enrichedColumns.slice(0, 3) return enrichedColumns.slice(0, 5)
} }
// Load the datasource schema so we can determine column types // Load the datasource schema so we can determine column types