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

Update picker to put colour indicators on the left side

This commit is contained in:
Andrew Kingston 2022-07-25 17:04:13 +01:00
parent d2d028ad9f
commit 501759134e
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -87,10 +87,15 @@
on:mousedown={onClick} on:mousedown={onClick}
> >
{#if fieldIcon} {#if fieldIcon}
<span class="option-icon"> <span class="option-extra">
<Icon name={fieldIcon} /> <Icon name={fieldIcon} />
</span> </span>
{/if} {/if}
{#if fieldColour}
<span class="option-extra">
<StatusLight square color={fieldColour} />
</span>
{/if}
<span <span
class="spectrum-Picker-label" class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder} class:is-placeholder={isPlaceholder}
@ -108,11 +113,6 @@
<use xlink:href="#spectrum-icon-18-Alert" /> <use xlink:href="#spectrum-icon-18-Alert" />
</svg> </svg>
{/if} {/if}
{#if fieldColour}
<span class="option-colour">
<StatusLight size="L" color={fieldColour} />
</span>
{/if}
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false" focusable="false"
@ -166,10 +166,15 @@
on:click={() => onSelectOption(getOptionValue(option, idx))} on:click={() => onSelectOption(getOptionValue(option, idx))}
> >
{#if getOptionIcon(option, idx)} {#if getOptionIcon(option, idx)}
<span class="option-icon"> <span class="option-extra">
<Icon name={getOptionIcon(option, idx)} /> <Icon name={getOptionIcon(option, idx)} />
</span> </span>
{/if} {/if}
{#if getOptionColour(option, idx)}
<span class="option-extra">
<StatusLight square color={getOptionColour(option, idx)} />
</span>
{/if}
<span class="spectrum-Menu-itemLabel"> <span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)} {getOptionLabel(option, idx)}
</span> </span>
@ -180,11 +185,6 @@
> >
<use xlink:href="#spectrum-css-icon-Checkmark100" /> <use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg> </svg>
{#if getOptionColour(option, idx)}
<span class="option-colour">
<StatusLight size="L" color={getOptionColour(option, idx)} />
</span>
{/if}
</li> </li>
{/each} {/each}
{/if} {/if}
@ -209,6 +209,9 @@
width: 100%; width: 100%;
box-shadow: none; box-shadow: none;
} }
.spectrum-Picker-label.auto-width {
margin-right: var(--spacing-xs);
}
.spectrum-Picker-label:not(.auto-width) { .spectrum-Picker-label:not(.auto-width) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -221,16 +224,16 @@
.spectrum-Picker-label.auto-width.is-placeholder { .spectrum-Picker-label.auto-width.is-placeholder {
padding-right: 2px; padding-right: 2px;
} }
.auto-width .spectrum-Menu-item {
padding-right: var(--spacing-xl);
}
/* Icon and colour alignment */ /* Icon and colour alignment */
.spectrum-Menu-checkmark { .spectrum-Menu-checkmark {
align-self: center; align-self: center;
margin-top: 0; margin-top: 0;
} }
.option-colour { .option-extra {
padding-left: 8px;
}
.option-icon {
padding-right: 8px; padding-right: 8px;
} }