CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-19 13:15:49 +12:00
Code Issues Projects Releases Wiki Activity

Update plugins UI styles

Browse source
This commit is contained in:
Andrew Kingston 2022-09-12 16:35:42 +01:00
parent 0415a67ef0
commit b31cc043ed
2 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
View file

@ -21,7 +21,7 @@
: plugin.schema.schema.icon || "Beaker"
</script>
<div class="row">
<div class="row" on:click={() => detailsModal.show()}>
<div class="title">
<div class="name">
<div>
@ -42,9 +42,8 @@
<div class="desktop">
{plugin.schema.type.charAt(0).toUpperCase() + plugin.schema.type.slice(1)}
</div>
<div>
<Icon on:click={detailsModal.show()} hoverable name="ChevronRight" />
<Icon name="ChevronRight" />
</div>
</div>
@ -98,13 +97,19 @@
<style>
.row {
display: grid;
grid-template-columns: 35% auto auto auto;
grid-template-columns: 1fr 110px 140px 20px;
align-items: center;
background: var(--background);
height: 50px;
padding-left: 20px;
padding-right: 20px;
justify-content: space-between;
border-radius: 4px;
padding: 0 16px;
height: 56px;
background: var(--spectrum-global-color-gray-50);
border: 1px solid var(--spectrum-global-color-gray-300);
transition: background 130ms ease-out;
}
.row:hover {
cursor: pointer;
background: var(--spectrum-global-color-gray-75);
}
.name {

40
packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
View file

@ -41,18 +41,16 @@
<Layout noPadding>
<Layout gap="XS" noPadding>
<div style="display: flex;">
<Heading size="M">Plugins</Heading>
</div>
<Heading size="M">Plugins</Heading>
<Body>Add your own custom datasources and components</Body>
<Divider />
</Layout>
<Divider size="S" />
<Layout noPadding>
<div class="align-buttons">
<div class="controls">
<div>
<Button on:click={modal.show} newStyles cta icon={"Add"}
>Add plugin</Button
>
<Button on:click={modal.show} newStyles cta icon={"Add"}>
Add plugin
</Button>
</div>
<div class="filters">
<div class="select">
@ -60,17 +58,19 @@
bind:value={filter}
placeholder={null}
options={filterOptions}
autoWidth
quiet
/>
</div>
<Search bind:value={searchTerm} />
<Search bind:value={searchTerm} placeholder="Search plugins" />
</div>
</div>
{#if $plugins}
{#each filteredPlugins as plugin}
<PluginRow {plugin} />
{/each}
{#if filteredPlugins?.length}
<Layout noPadding gap="S">
{#each filteredPlugins as plugin}
<PluginRow {plugin} />
{/each}
</Layout>
{/if}
</Layout>
</Layout>
@ -84,14 +84,12 @@
display: flex;
gap: var(--spacing-xl);
}
.align-buttons {
margin-top: -10px;
.controls {
display: flex;
column-gap: var(--spacing-xl);
gap: var(--spacing-xl);
justify-content: space-between;
}
.select {
flex-basis: 180px;
.controls :global(.spectrum-Search) {
width: 200px;
}
</style>