Assign colours to new options by defaults and use consistent colour set across the board
This commit is contained in:
parent
fb160eef11
commit
948a6a078d
5 changed files with 18 additions and 30 deletions
|
@ -3,6 +3,7 @@
|
|||
import { dndzone } from "svelte-dnd-action"
|
||||
import { Icon, Popover } from "@budibase/bbui"
|
||||
import { onMount } from "svelte"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
|
||||
export let constraints
|
||||
export let optionColors = {}
|
||||
|
@ -13,14 +14,6 @@
|
|||
let colorPopovers = []
|
||||
let anchors = []
|
||||
|
||||
let colorsArray = [
|
||||
"hsla(0, 90%, 75%, 0.3)",
|
||||
"hsla(50, 80%, 75%, 0.3)",
|
||||
"hsla(120, 90%, 75%, 0.3)",
|
||||
"hsla(200, 90%, 75%, 0.3)",
|
||||
"hsla(240, 90%, 75%, 0.3)",
|
||||
"hsla(320, 90%, 75%, 0.3)",
|
||||
]
|
||||
const removeInput = idx => {
|
||||
delete optionColors[options[idx].name]
|
||||
constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
|
||||
|
@ -30,15 +23,10 @@
|
|||
}
|
||||
|
||||
const addNewInput = () => {
|
||||
options = [
|
||||
...options,
|
||||
{ name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() },
|
||||
]
|
||||
constraints.inclusion = [
|
||||
...constraints.inclusion,
|
||||
`Option ${constraints.inclusion.length + 1}`,
|
||||
]
|
||||
|
||||
const newOption = `Option ${constraints.inclusion.length + 1}`
|
||||
options = [...options, { name: newOption, id: Math.random() }]
|
||||
constraints.inclusion = [...constraints.inclusion, newOption]
|
||||
optionColors[newOption] = Constants.OptionColours[(options.length - 1) % 9]
|
||||
colorPopovers.push(undefined)
|
||||
anchors.push(undefined)
|
||||
}
|
||||
|
@ -124,7 +112,7 @@
|
|||
animate={false}
|
||||
>
|
||||
<div class="colors" data-ignore-click-outside="true">
|
||||
{#each colorsArray as color}
|
||||
{#each Constants.OptionColours as color}
|
||||
<div
|
||||
on:click={() => handleColorChange(option.name, color, idx)}
|
||||
style="--color:{color};"
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
import { getColor } from "../lib/utils"
|
||||
import { onMount } from "svelte"
|
||||
import GridPopover from "../overlays/GridPopover.svelte"
|
||||
import { OptionColours } from "../../../constants"
|
||||
|
||||
export let value
|
||||
export let schema
|
||||
|
@ -39,8 +39,11 @@
|
|||
}
|
||||
|
||||
const getOptionColor = value => {
|
||||
const index = value ? options.indexOf(value) : null
|
||||
return getColor(index)
|
||||
let idx = value ? options.indexOf(value) : null
|
||||
if (idx == null || idx === -1) {
|
||||
idx = 0
|
||||
}
|
||||
return OptionColours[idx % OptionColours.length]
|
||||
}
|
||||
|
||||
const toggleOption = option => {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import { getColor } from "../lib/utils"
|
||||
import { onMount, getContext } from "svelte"
|
||||
import { Icon, Input, ProgressCircle } from "@budibase/bbui"
|
||||
import { debounce } from "../../../utils/utils"
|
||||
import GridPopover from "../overlays/GridPopover.svelte"
|
||||
import { OptionColours } from "../../../constants"
|
||||
|
||||
const { API, cache } = getContext("grid")
|
||||
|
||||
|
@ -19,7 +19,7 @@
|
|||
export let primaryDisplay
|
||||
export let hideCounter = false
|
||||
|
||||
const color = getColor(0)
|
||||
const color = OptionColours[0]
|
||||
|
||||
let isOpen = false
|
||||
let searchResults
|
||||
|
|
|
@ -18,13 +18,6 @@ export const getCellID = (rowId, fieldName) => {
|
|||
return `${rowId}${JOINING_CHARACTER}${fieldName}`
|
||||
}
|
||||
|
||||
export const getColor = (idx, opacity = 0.3) => {
|
||||
if (idx == null || idx === -1) {
|
||||
idx = 0
|
||||
}
|
||||
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
|
||||
}
|
||||
|
||||
export const getColumnIcon = column => {
|
||||
if (column.schema.autocolumn) {
|
||||
return "MagicWand"
|
||||
|
|
|
@ -140,3 +140,7 @@ export const TypeIconMap = {
|
|||
[BBReferenceFieldSubType.USER]: "User",
|
||||
},
|
||||
}
|
||||
|
||||
export const OptionColours = [...new Array(9).keys()].map(idx => {
|
||||
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue