luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Only allowing valid color classes (#665)

Browse source 
* Only allowing valid color classes

* Simplifying the menuColors map and addressing some PR review comments

* Fixing type problems

* Fixing color

* Fixing snapshots
This commit is contained in:
Jesús Espino 2021-07-06 19:53:54 +02:00 committed by GitHub
parent fde98f230e
commit 702b4b1061
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 46 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webapp/src/components/kanban/kanbanColumnHeader.tsx
View file

@ -129,12 +129,12 @@ export default function KanbanColumnHeader(props: Props): JSX.Element {
onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty!, group.option)}
/>
<Menu.Separator/>
{Constants.menuColors.map((color) => (
{Object.entries(Constants.menuColors).map(([key, color]) => (
<Menu.Color
key={color.id}
id={color.id}
name={color.name}
onClick={() => mutator.changePropertyOptionColor(boardTree.board, boardTree.groupByProperty!, group.option, color.id)}
key={key}
id={key}
name={color}
onClick={() => mutator.changePropertyOptionColor(boardTree.board, boardTree.groupByProperty!, group.option, key)}
/>
))}
</>}

4
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -148,7 +148,7 @@ exports[`components/table/Table should match snapshot 1`] = `
tabindex="0"
>
<span
class="Label color1 "
class="Label propColorBrown "
>
value 1
</span>
@ -488,7 +488,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
tabindex="0"
>
<span
class="Label color1 "
class="Label propColorBrown "
>
value 1
</span>

10
webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
View file

@ -25,7 +25,7 @@ exports[`should match snapshot on read only 1`] = `
</svg>
</div>
<span
class="Label color1 "
class="Label propColorBrown "
>
<input
class="Editable readonly undefined"
@ -72,7 +72,7 @@ exports[`should match snapshot with Group 1`] = `
</svg>
</div>
<span
class="Label color1 "
class="Label propColorBrown "
>
<input
class="Editable undefined"
@ -136,7 +136,7 @@ exports[`should match snapshot, add new 1`] = `
</svg>
</div>
<span
class="Label color1 "
class="Label propColorBrown "
>
<input
class="Editable undefined"
@ -200,7 +200,7 @@ exports[`should match snapshot, edit title 1`] = `
</svg>
</div>
<span
class="Label color1 "
class="Label propColorBrown "
>
<input
class="Editable undefined"
@ -264,7 +264,7 @@ exports[`should match snapshot, hide group 1`] = `
</svg>
</div>
<span
class="Label color1 "
class="Label propColorBrown "
>
<input
class="Editable undefined"

4
webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
View file

@ -134,7 +134,7 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
tabindex="0"
>
<span
class="Label color1 "
class="Label propColorBrown "
>
value 1
</span>
@ -292,7 +292,7 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
tabindex="0"
>
<span
class="Label color1 "
class="Label propColorBrown "
>
value 1
</span>

4
webapp/src/components/table/tableGroupHeaderRow.test.tsx
View file

@ -49,7 +49,7 @@ const boardTreeNoGroup = {
option: {
id: '',
value: '',
color: 'color1',
color: 'propColorBrown',
},
cards: [],
}
@ -58,7 +58,7 @@ const boardTreeGroup = {
option: {
id: 'value1',
value: 'value 1',
color: 'color1',
color: 'propColorBrown',
},
cards: [],
}

10
webapp/src/components/table/tableGroupHeaderRow.tsx
View file

@ -127,12 +127,12 @@ const TableGroupHeaderRow = React.memo((props: Props): JSX.Element => {
onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty!, group.option)}
/>
<Menu.Separator/>
{Constants.menuColors.map((color) => (
{Object.entries(Constants.menuColors).map(([key, color]) => (
<Menu.Color
key={color.id}
id={color.id}
name={color.name}
onClick={() => mutator.changePropertyOptionColor(boardTree.board, boardTree.groupByProperty!, group.option, color.id)}
key={key}
id={key}
name={color}
onClick={() => mutator.changePropertyOptionColor(boardTree.board, boardTree.groupByProperty!, group.option, key)}
/>
))}
</>}

24
webapp/src/constants.ts
View file

@ -2,18 +2,18 @@
// See LICENSE.txt for license information.
class Constants {
static readonly menuColors = [
{id: 'propColorDefault', name: 'Default', type: 'color'},
{id: 'propColorGray', name: 'Gray', type: 'color'},
{id: 'propColorBrown', name: 'Brown', type: 'color'},
{id: 'propColorOrange', name: 'Orange', type: 'color'},
{id: 'propColorYellow', name: 'Yellow', type: 'color'},
{id: 'propColorGreen', name: 'Green', type: 'color'},
{id: 'propColorBlue', name: 'Blue', type: 'color'},
{id: 'propColorPurple', name: 'Purple', type: 'color'},
{id: 'propColorPink', name: 'Pink', type: 'color'},
{id: 'propColorRed', name: 'Red', type: 'color'},
]
static readonly menuColors: {[key: string]: string} = {
propColorDefault: 'Default',
propColorGray: 'Gray',
propColorBrown: 'Brown',
propColorOrange: 'Orange',
propColorYellow: 'Yellow',
propColorGreen: 'Green',
propColorBlue: 'Blue',
propColorPurple: 'Purple',
propColorPink: 'Pink',
propColorRed: 'Red',
}
static readonly minColumnWidth = 100
static readonly defaultTitleColumnWidth = 280

2
webapp/src/test/testBlockFactory.ts
View file

@ -24,7 +24,7 @@ class TestBlockFactory {
const propertyOption: IPropertyOption = {
id: 'value1',
value: 'value 1',
color: 'color1',
color: 'propColorBrown',
}
const propertyTemplate: IPropertyTemplate = {
id: `property${i + 1}`,

8
webapp/src/widgets/label.tsx
View file

@ -2,6 +2,8 @@
// See LICENSE.txt for license information.
import React from 'react'
import {Constants} from '../constants'
import './label.scss'
type Props = {
@ -13,9 +15,13 @@ type Props = {
// Switch is an on-off style switch / checkbox
function Label(props: Props): JSX.Element {
let color = 'empty'
if (props.color && props.color in Constants.menuColors) {
color = props.color
}
return (
<span
className={`Label ${props.color || 'empty'} ${props.classNames ? props.classNames : ''}`}
className={`Label ${color} ${props.classNames ? props.classNames : ''}`}
title={props.title}
>
{props.children}

10
webapp/src/widgets/valueSelector.tsx
View file

@ -79,12 +79,12 @@ const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
onClick={() => props.onDeleteOption(option)}
/>
<Menu.Separator/>
{Constants.menuColors.map((color) => (
{Object.entries(Constants.menuColors).map(([key, color]: any) => (
<Menu.Color
key={color.id}
id={color.id}
name={color.name}
onClick={() => props.onChangeColor(option, color.id)}
key={key}
id={key}
name={color}
onClick={() => props.onChangeColor(option, key)}
/>
))}
</Menu>