CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-02 18:51:36 +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" : plugin.schema.schema.icon || "Beaker"
</script> </script>
<div class="row"> <div class="row" on:click={() => detailsModal.show()}>
<div class="title"> <div class="title">
<div class="name"> <div class="name">
<div> <div>
@ -42,9 +42,8 @@
<div class="desktop"> <div class="desktop">
{plugin.schema.type.charAt(0).toUpperCase() + plugin.schema.type.slice(1)} {plugin.schema.type.charAt(0).toUpperCase() + plugin.schema.type.slice(1)}
</div> </div>
<div> <div>
<Icon on:click={detailsModal.show()} hoverable name="ChevronRight" /> <Icon name="ChevronRight" />
</div> </div>
</div> </div>
@ -98,13 +97,19 @@
<style> <style>
.row { .row {
display: grid; display: grid;
grid-template-columns: 35% auto auto auto; grid-template-columns: 1fr 110px 140px 20px;
align-items: center; align-items: center;
background: var(--background); background: var(--background);
height: 50px; border-radius: 4px;
padding-left: 20px; padding: 0 16px;
padding-right: 20px; height: 56px;
justify-content: space-between; 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 { .name {

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

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