Updating custom datasource SVG - splitting out in UI.
This commit is contained in:
mike12345567
parent
2aaff7576b
commit
ee4f72126a
3 changed files with 122 additions and 53 deletions
|
|
@ -0,0 +1,73 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { Heading, Detail } from "@budibase/bbui"
|
||||
import ICONS from "../icons"
|
||||
|
||||
export let integration
|
||||
export let integrationType
|
||||
export let schema
|
||||
|
||||
let dispatcher = createEventDispatcher()
|
||||
|
||||
function getIcon(integrationType, schema) {
|
||||
if (schema.custom) {
|
||||
return ICONS.CUSTOM
|
||||
} else {
|
||||
return ICONS[integrationType]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:selected={integration.type === integrationType}
|
||||
on:click={() => dispatcher("selected", integrationType)}
|
||||
class="item hoverable"
|
||||
>
|
||||
<div class="item-body" class:with-type={!!schema.type}>
|
||||
<svelte:component
|
||||
this={getIcon(integrationType, schema)}
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
<div class="text">
|
||||
<Heading size="XXS">{schema.friendlyName}</Heading>
|
||||
{#if schema.type}
|
||||
<Detail size="S">{schema.type || ""}</Detail>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
||||
padding: var(--spectrum-alias-item-padding-s)
|
||||
var(--spectrum-alias-item-padding-m);
|
||||
background: var(--spectrum-alias-background-color-secondary);
|
||||
transition: background 0.13s ease-out;
|
||||
border: solid var(--spectrum-alias-border-color);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
border-width: 2px;
|
||||
}
|
||||
.item:hover,
|
||||
.item.selected {
|
||||
background: var(--spectrum-alias-background-color-tertiary);
|
||||
}
|
||||
|
||||
.item-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.item-body.with-type {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.item-body.with-type :global(svg) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
<script>
|
||||
export let width = "100"
|
||||
export let height = "100"
|
||||
let color =
|
||||
"var(--spectrum-heading-xxs-text-color, var(--spectrum-alias-heading-text-color))"
|
||||
</script>
|
||||
|
||||
<svg
|
||||
|
|
@ -11,29 +9,38 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 230.795 230.795"
|
||||
style="enable-background:new 0 0 230.795 230.795;"
|
||||
viewBox="0 0 18.43 17.62"
|
||||
style="enable-background:new 0 0 18.43 17.62;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M60.357,63.289c-2.929-2.929-7.678-2.93-10.606-0.001L2.197,110.836C0.79,112.243,0,114.151,0,116.14
|
||||
c0,1.989,0.79,3.896,2.196,5.303l47.348,47.35c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196
|
||||
c2.93-2.929,2.93-7.678,0.001-10.606L18.107,116.14l42.25-42.245C63.286,70.966,63.286,66.217,60.357,63.289z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M228.598,110.639l-47.355-47.352c-2.928-2.928-7.677-2.929-10.606,0.001c-2.929,2.929-2.929,7.678,0.001,10.607
|
||||
l42.051,42.048l-42.249,42.243c-2.93,2.929-2.93,7.678-0.001,10.606c1.465,1.465,3.384,2.197,5.304,2.197
|
||||
c1.919,0,3.839-0.732,5.303-2.196l47.554-47.547c1.407-1.406,2.197-3.314,2.197-5.304
|
||||
C230.795,113.954,230.005,112.046,228.598,110.639z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M155.889,61.302c-3.314-2.484-8.017-1.806-10.498,1.51l-71.994,96.184c-2.482,3.316-1.807,8.017,1.51,10.498
|
||||
c1.348,1.01,2.925,1.496,4.488,1.496c2.282,0,4.537-1.038,6.01-3.006L157.398,71.8C159.881,68.484,159.205,63.784,155.889,61.302z"
|
||||
fill={color}
|
||||
/>
|
||||
</g>
|
||||
<g />
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: var(
|
||||
--spectrum-heading-xxs-text-color,
|
||||
var(--spectrum-alias-heading-text-color)
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<ellipse id="Ellipse_9514" class="st0" cx="9.14" cy="2.88" rx="8" ry="2.5" />
|
||||
<path
|
||||
id="Path_8355"
|
||||
class="st0"
|
||||
d="M7.64,12.88c0-0.48,0.06-0.95,0.17-1.41c-2.53-0.16-5.92-0.76-6.67-1.95v4.36
|
||||
c0,1.34,3.39,2.43,7.63,2.49C8.03,15.36,7.63,14.13,7.64,12.88z"
|
||||
/>
|
||||
<path
|
||||
id="Path_8356"
|
||||
class="st0"
|
||||
d="M13.64,6.88c1.25,0,2.47,0.39,3.48,1.12c0.01-0.04,0.02-0.08,0.02-0.12V4.51
|
||||
c-1.22,1.55-5.53,2-8,2s-7.11-0.58-8-2v3.36c0,1.28,3.09,2.33,7.06,2.48C9.18,8.24,11.3,6.88,13.64,6.88z"
|
||||
/>
|
||||
<path
|
||||
id="Path_8353"
|
||||
class="st0"
|
||||
d="M10.32,14.42c-0.56-0.56-0.56-1.47,0-2.03l1.24-1.24l-0.01-0.01c-0.25-0.25-0.25-0.65,0-0.9l0,0
|
||||
L12,9.79c0.25-0.25,0.65-0.25,0.9,0c0,0,0,0,0,0l0,0l0.45,0.45l1.53-1.53c0.09-0.09,0.24-0.09,0.34,0l0.34,0.34
|
||||
c0.09,0.09,0.09,0.24,0,0.34l-1.53,1.53l1.35,1.35l1.53-1.53c0.09-0.09,0.24-0.09,0.34,0l0.34,0.34c0.09,0.09,0.09,0.24,0,0.34
|
||||
l-1.53,1.53l0.45,0.45c0.25,0.25,0.25,0.65,0,0.9l0,0l-0.45,0.45c-0.25,0.25-0.65,0.25-0.9,0l0,0l-0.01-0.01l-1.24,1.24
|
||||
c-0.56,0.56-1.47,0.56-2.03,0l0,0L10.32,14.42z"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
import { createRestDatasource } from "builderStore/datasource"
|
||||
import { goto } from "@roxi/routify"
|
||||
import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
|
||||
import DatasourceCard from "../_components/DatasourceCard.svelte"
|
||||
|
||||
export let modal
|
||||
let integrations = {}
|
||||
|
|
@ -95,14 +96,6 @@
|
|||
}
|
||||
integrations = newIntegrations
|
||||
}
|
||||
|
||||
function getIcon(integrationType, schema) {
|
||||
if (schema.custom) {
|
||||
return ICONS.CUSTOM
|
||||
} else {
|
||||
return ICONS[integrationType]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:this={internalTableModal}>
|
||||
|
|
@ -161,28 +154,24 @@
|
|||
<Layout noPadding gap="XS">
|
||||
<Body size="S">Connect to an external data source</Body>
|
||||
<div class="item-list">
|
||||
{#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
|
||||
<div
|
||||
class:selected={integration.type === integrationType}
|
||||
on:click={() => selectIntegration(integrationType)}
|
||||
class="item hoverable"
|
||||
>
|
||||
<div class="item-body" class:with-type={!!schema.type}>
|
||||
<svelte:component
|
||||
this={getIcon(integrationType, schema)}
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
<div class="text">
|
||||
<Heading size="XXS">{schema.friendlyName}</Heading>
|
||||
{#if schema.type}
|
||||
<Detail size="S">{schema.type || ""}</Detail>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#each Object.entries(integrations).filter(([key, val]) => key !== IntegrationTypes.INTERNAL && !val.custom) as [integrationType, schema]}
|
||||
<DatasourceCard
|
||||
on:selected={evt => selectIntegration(evt.detail)}
|
||||
{schema}
|
||||
bind:integrationType
|
||||
{integration}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<Body size="S">Custom data source</Body>
|
||||
{#each Object.entries(integrations).filter(entry => entry[1].custom) as [integrationType, schema]}
|
||||
<DatasourceCard
|
||||
on:selected={evt => selectIntegration(evt.detail)}
|
||||
{schema}
|
||||
bind:integrationType
|
||||
{integration}
|
||||
/>
|
||||
{/each}
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Reference in a new issue