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

Make OptionSelect styles in line with other components

This commit is contained in:
Andrew Kingston 2020-10-22 17:44:45 +01:00
parent 664aacd402
commit 79cca1956a
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/builder/src/components/userInterface/OptionSelect.svelte
View File

@ -6,13 +6,14 @@
export let options = [] export let options = []
export let value = "" export let value = ""
export let styleBindingProperty export let styleBindingProperty
export let onChange = value => {} export let onChange = (value) => {}
let open = null let open = null
let rotate = "" let rotate = ""
let select let select
let selectMenu let selectMenu
let icon let icon
let width = 0
let selectAnchor = null let selectAnchor = null
let dimensions = { top: 0, bottom: 0, left: 0 } let dimensions = { top: 0, bottom: 0, left: 0 }
@ -22,7 +23,7 @@
let scrollTop = 0 let scrollTop = 0
let containerEl = null let containerEl = null
const handleStyleBind = value => const handleStyleBind = (value) =>
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {} !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
onMount(() => { onMount(() => {
@ -91,12 +92,13 @@
"transform-origin": `center ${positionSide}`, "transform-origin": `center ${positionSide}`,
[positionSide]: `${dimensions[positionSide]}px`, [positionSide]: `${dimensions[positionSide]}px`,
left: `${dimensions.left.toFixed(0)}px`, left: `${dimensions.left.toFixed(0)}px`,
width: `${width}px`,
}) })
$: isOptionsObject = options.every(o => typeof o === "object") $: isOptionsObject = options.every((o) => typeof o === "object")
$: selectedOption = isOptionsObject $: selectedOption = isOptionsObject
? options.find(o => o.value === value) ? options.find((o) => o.value === value)
: {} : {}
$: if (open && selectMenu) { $: if (open && selectMenu) {
@ -108,6 +110,7 @@
</script> </script>
<div <div
bind:clientWidth={width}
tabindex="0" tabindex="0"
bind:this={select} bind:this={select}
class="bb-select-container" class="bb-select-container"
@ -164,19 +167,17 @@
.bb-select-container { .bb-select-container {
outline: none; outline: none;
height: 36px;
cursor: pointer; cursor: pointer;
font-size: 14px;
overflow: hidden; overflow: hidden;
flex: 1 1 auto;
} }
.bb-select-anchor { .bb-select-anchor {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
padding: 0px 12px; padding: var(--spacing-m);
height: 36px;
background-color: var(--grey-2); background-color: var(--grey-2);
border-radius: 5px; border-radius: var(--border-radius-m);
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
} }
@ -184,8 +185,11 @@
.bb-select-anchor > span { .bb-select-anchor > span {
color: var(--ink); color: var(--ink);
font-weight: 400; font-weight: 400;
width: 140px;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--font-size-xs);
flex: 1 1 auto;
} }
.bb-select-anchor > i { .bb-select-anchor > i {
@ -208,7 +212,6 @@
box-sizing: border-box; box-sizing: border-box;
flex-direction: column; flex-direction: column;
opacity: 0; opacity: 0;
width: 160px;
z-index: 2; z-index: 2;
color: var(--ink); color: var(--ink);
font-weight: 400; font-weight: 400;
@ -237,7 +240,7 @@
padding: 5px 0px; padding: 5px 0px;
cursor: pointer; cursor: pointer;
padding-left: 10px; padding-left: 10px;
font-size: var(--font-size-s); font-size: var(--font-size-xs);
} }
li:hover { li:hover {