Update plugins UI styles
This commit is contained in:
parent
0415a67ef0
commit
b31cc043ed
2 changed files with 32 additions and 29 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue