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"
|
||||
</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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue