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 { dndzone } from "svelte-dnd-action"
|
||||||
import { Icon, Popover } from "@budibase/bbui"
|
import { Icon, Popover } from "@budibase/bbui"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
import { Constants } from "@budibase/frontend-core"
|
||||||
|
|
||||||
export let constraints
|
export let constraints
|
||||||
export let optionColors = {}
|
export let optionColors = {}
|
||||||
|
@ -13,14 +14,6 @@
|
||||||
let colorPopovers = []
|
let colorPopovers = []
|
||||||
let anchors = []
|
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 => {
|
const removeInput = idx => {
|
||||||
delete optionColors[options[idx].name]
|
delete optionColors[options[idx].name]
|
||||||
constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
|
constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
|
||||||
|
@ -30,15 +23,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const addNewInput = () => {
|
const addNewInput = () => {
|
||||||
options = [
|
const newOption = `Option ${constraints.inclusion.length + 1}`
|
||||||
...options,
|
options = [...options, { name: newOption, id: Math.random() }]
|
||||||
{ name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() },
|
constraints.inclusion = [...constraints.inclusion, newOption]
|
||||||
]
|
optionColors[newOption] = Constants.OptionColours[(options.length - 1) % 9]
|
||||||
constraints.inclusion = [
|
|
||||||
...constraints.inclusion,
|
|
||||||
`Option ${constraints.inclusion.length + 1}`,
|
|
||||||
]
|
|
||||||
|
|
||||||
colorPopovers.push(undefined)
|
colorPopovers.push(undefined)
|
||||||
anchors.push(undefined)
|
anchors.push(undefined)
|
||||||
}
|
}
|
||||||
|
@ -124,7 +112,7 @@
|
||||||
animate={false}
|
animate={false}
|
||||||
>
|
>
|
||||||
<div class="colors" data-ignore-click-outside="true">
|
<div class="colors" data-ignore-click-outside="true">
|
||||||
{#each colorsArray as color}
|
{#each Constants.OptionColours as color}
|
||||||
<div
|
<div
|
||||||
on:click={() => handleColorChange(option.name, color, idx)}
|
on:click={() => handleColorChange(option.name, color, idx)}
|
||||||
style="--color:{color};"
|
style="--color:{color};"
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { Icon } from "@budibase/bbui"
|
import { Icon } from "@budibase/bbui"
|
||||||
import { getColor } from "../lib/utils"
|
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import GridPopover from "../overlays/GridPopover.svelte"
|
import GridPopover from "../overlays/GridPopover.svelte"
|
||||||
|
import { OptionColours } from "../../../constants"
|
||||||
|
|
||||||
export let value
|
export let value
|
||||||
export let schema
|
export let schema
|
||||||
|
@ -39,8 +39,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const getOptionColor = value => {
|
const getOptionColor = value => {
|
||||||
const index = value ? options.indexOf(value) : null
|
let idx = value ? options.indexOf(value) : null
|
||||||
return getColor(index)
|
if (idx == null || idx === -1) {
|
||||||
|
idx = 0
|
||||||
|
}
|
||||||
|
return OptionColours[idx % OptionColours.length]
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleOption = option => {
|
const toggleOption = option => {
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { getColor } from "../lib/utils"
|
|
||||||
import { onMount, getContext } from "svelte"
|
import { onMount, getContext } from "svelte"
|
||||||
import { Icon, Input, ProgressCircle } from "@budibase/bbui"
|
import { Icon, Input, ProgressCircle } from "@budibase/bbui"
|
||||||
import { debounce } from "../../../utils/utils"
|
import { debounce } from "../../../utils/utils"
|
||||||
import GridPopover from "../overlays/GridPopover.svelte"
|
import GridPopover from "../overlays/GridPopover.svelte"
|
||||||
|
import { OptionColours } from "../../../constants"
|
||||||
|
|
||||||
const { API, cache } = getContext("grid")
|
const { API, cache } = getContext("grid")
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
export let primaryDisplay
|
export let primaryDisplay
|
||||||
export let hideCounter = false
|
export let hideCounter = false
|
||||||
|
|
||||||
const color = getColor(0)
|
const color = OptionColours[0]
|
||||||
|
|
||||||
let isOpen = false
|
let isOpen = false
|
||||||
let searchResults
|
let searchResults
|
||||||
|
|
|
@ -18,13 +18,6 @@ export const getCellID = (rowId, fieldName) => {
|
||||||
return `${rowId}${JOINING_CHARACTER}${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 => {
|
export const getColumnIcon = column => {
|
||||||
if (column.schema.autocolumn) {
|
if (column.schema.autocolumn) {
|
||||||
return "MagicWand"
|
return "MagicWand"
|
||||||
|
|
|
@ -140,3 +140,7 @@ export const TypeIconMap = {
|
||||||
[BBReferenceFieldSubType.USER]: "User",
|
[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