Merge pull request #6682 from Budibase/cheeks-fixes
Design polish + misc fixes
This commit is contained in:
commit
75ddf9509b
|
@ -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>
|
||||||
|
|
|
@ -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")}
|
||||||
/>
|
/>
|
||||||
</div></Tab
|
</Tab>
|
||||||
>
|
|
||||||
<Tab title="Output">
|
<Tab title="Output">
|
||||||
<div style="padding: 10px 10px 10px 10px;">
|
|
||||||
<TextArea
|
<TextArea
|
||||||
minHeight="100px"
|
minHeight="100px"
|
||||||
disabled
|
disabled
|
||||||
value={textArea(
|
value={textArea(filteredResults?.[idx]?.outputs, "No output")}
|
||||||
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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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,6 +147,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if runHistory}
|
{#if runHistory}
|
||||||
|
<div>
|
||||||
<Table
|
<Table
|
||||||
on:click={viewDetails}
|
on:click={viewDetails}
|
||||||
schema={runHistorySchema}
|
schema={runHistorySchema}
|
||||||
|
@ -156,7 +157,18 @@
|
||||||
data={runHistory}
|
data={runHistory}
|
||||||
{customRenderers}
|
{customRenderers}
|
||||||
placeholderText="No history found"
|
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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue