CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 14:01:27 +12:00
Code Issues Projects Releases Wiki Activity

Update picker to put colour indicators on the left side

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