MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Standardise binding icon styles

This commit is contained in:
Andrew Kingston 2020-10-30 13:46:16 +00:00
parent 1f5b1cfd10
commit 290bfd0f91
3 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/builder/src/components/userInterface/BindableInput.svelte
View File

@ -18,9 +18,9 @@
<div class="container" bind:this={anchor}> <div class="container" bind:this={anchor}>
<Input {...inputProps} bind:value /> <Input {...inputProps} bind:value />
<button on:click={popover.show}> <div class="icon" on:click={popover.show}>
<Icon name="edit" /> <Icon name="edit" />
</button> </div>
</div> </div>
<GenericBindingPopover <GenericBindingPopover
{anchor} {anchor}
@ -34,25 +34,18 @@
position: relative; position: relative;
} }
button { .icon {
right: 2px;
top: 2px;
bottom: 2px;
position: absolute; position: absolute;
background: none; align-items: center;
border: none; display: flex;
border-radius: 50%; box-sizing: border-box;
height: 24px; padding-left: var(--spacing-xs);
width: 24px; border-left: 1px solid var(--grey-4);
background: var(--grey-4); background-color: var(--grey-2);
right: var(--spacing-s); border-top-right-radius: var(--border-radius-m);
bottom: 5px; border-bottom-right-radius: var(--border-radius-m);
}
button:hover {
background: var(--grey-5);
cursor: pointer;
}
button :global(svg) {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) !important;
} }
</style> </style>

2
packages/builder/src/components/userInterface/BindingDropdown.svelte
View File

@ -86,7 +86,7 @@
.controls { .controls {
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
display: grid; display: grid;
align-items: baseline; align-items: center;
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }

32
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -95,9 +95,12 @@
name={key} /> name={key} />
</div> </div>
{#if bindable && control === Input && !key.startsWith('_')} {#if bindable && control === Input && !key.startsWith('_')}
<button data-cy={`${key}-binding-button`} on:click={dropdown.show}> <div
class="icon"
data-cy={`${key}-binding-button`}
on:click={dropdown.show}>
<Icon name="edit" /> <Icon name="edit" />
</button> </div>
{/if} {/if}
</div> </div>
{#if control == Input} {#if control == Input}
@ -139,18 +142,19 @@
padding-left: 2px; padding-left: 2px;
overflow: hidden; overflow: hidden;
} }
button {
.icon {
right: 2px;
top: 2px;
bottom: 2px;
position: absolute; position: absolute;
cursor: pointer; align-items: center;
background: none; display: flex;
border: none; box-sizing: border-box;
height: 90%; padding-left: var(--spacing-xs);
width: 2rem; border-left: 1px solid var(--grey-4);
background: var(--grey-2); background-color: var(--grey-2);
right: 4px; border-top-right-radius: var(--border-radius-m);
--spacing-s: 0; border-bottom-right-radius: var(--border-radius-m);
border-left: 0.5px solid var(--grey-3);
outline-color: var(--blue);
color: var(--ink);
} }
</style> </style>