self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-07-15 23:54:29 +02:00
Code Issues Releases 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
10 changed files with 46 additions and 40 deletions
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)} onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty!, group.option)}
/> />
<Menu.Separator/> <Menu.Separator/>
{Constants.menuColors.map((color) => ( {Object.entries(Constants.menuColors).map(([key, color]) => (
<Menu.Color <Menu.Color
key={color.id} key={key}
id={color.id} id={key}
name={color.name} name={color}
onClick={() => mutator.changePropertyOptionColor(boardTree.board, boardTree.groupByProperty!, group.option, color.id)} 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" tabindex="0"
> >
<span <span
class="Label color1 " class="Label propColorBrown "
> >
value 1 value 1
</span> </span>
@ -488,7 +488,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
tabindex="0" tabindex="0"
> >
<span <span
class="Label color1 " class="Label propColorBrown "
> >
value 1 value 1
</span> </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> </svg>
</div> </div>
<span <span
class="Label color1 " class="Label propColorBrown "
> >
<input <input
class="Editable readonly undefined" class="Editable readonly undefined"
@ -72,7 +72,7 @@ exports[`should match snapshot with Group 1`] = `
</svg> </svg>
</div> </div>
<span <span
class="Label color1 " class="Label propColorBrown "
> >
<input <input
class="Editable undefined" class="Editable undefined"
@ -136,7 +136,7 @@ exports[`should match snapshot, add new 1`] = `
</svg> </svg>
</div> </div>
<span <span
class="Label color1 " class="Label propColorBrown "
> >
<input <input
class="Editable undefined" class="Editable undefined"
@ -200,7 +200,7 @@ exports[`should match snapshot, edit title 1`] = `
</svg> </svg>
</div> </div>
<span <span
class="Label color1 " class="Label propColorBrown "
> >
<input <input
class="Editable undefined" class="Editable undefined"
@ -264,7 +264,7 @@ exports[`should match snapshot, hide group 1`] = `
</svg> </svg>
</div> </div>
<span <span
class="Label color1 " class="Label propColorBrown "
> >
<input <input
class="Editable undefined" 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" tabindex="0"
> >
<span <span
class="Label color1 " class="Label propColorBrown "
> >
value 1 value 1
</span> </span>
@ -292,7 +292,7 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
tabindex="0" tabindex="0"
> >
<span <span
class="Label color1 " class="Label propColorBrown "
> >
value 1 value 1
</span> </span>

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

@ -49,7 +49,7 @@ const boardTreeNoGroup = {
option: { option: {
id: '', id: '',
value: '', value: '',
color: 'color1', color: 'propColorBrown',
}, },
cards: [], cards: [],
} }
@ -58,7 +58,7 @@ const boardTreeGroup = {
option: { option: {
id: 'value1', id: 'value1',
value: 'value 1', value: 'value 1',
color: 'color1', color: 'propColorBrown',
}, },
cards: [], 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)} onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty!, group.option)}
/> />
<Menu.Separator/> <Menu.Separator/>
{Constants.menuColors.map((color) => ( {Object.entries(Constants.menuColors).map(([key, color]) => (
<Menu.Color <Menu.Color
key={color.id} key={key}
id={color.id} id={key}
name={color.name} name={color}
onClick={() => mutator.changePropertyOptionColor(boardTree.board, boardTree.groupByProperty!, group.option, color.id)} 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. // See LICENSE.txt for license information.
class Constants { class Constants {
static readonly menuColors = [ static readonly menuColors: {[key: string]: string} = {
{id: 'propColorDefault', name: 'Default', type: 'color'}, propColorDefault: 'Default',
{id: 'propColorGray', name: 'Gray', type: 'color'}, propColorGray: 'Gray',
{id: 'propColorBrown', name: 'Brown', type: 'color'}, propColorBrown: 'Brown',
{id: 'propColorOrange', name: 'Orange', type: 'color'}, propColorOrange: 'Orange',
{id: 'propColorYellow', name: 'Yellow', type: 'color'}, propColorYellow: 'Yellow',
{id: 'propColorGreen', name: 'Green', type: 'color'}, propColorGreen: 'Green',
{id: 'propColorBlue', name: 'Blue', type: 'color'}, propColorBlue: 'Blue',
{id: 'propColorPurple', name: 'Purple', type: 'color'}, propColorPurple: 'Purple',
{id: 'propColorPink', name: 'Pink', type: 'color'}, propColorPink: 'Pink',
{id: 'propColorRed', name: 'Red', type: 'color'}, propColorRed: 'Red',
] }
static readonly minColumnWidth = 100 static readonly minColumnWidth = 100
static readonly defaultTitleColumnWidth = 280 static readonly defaultTitleColumnWidth = 280

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

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

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

@ -2,6 +2,8 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react' import React from 'react'
import {Constants} from '../constants'
import './label.scss' import './label.scss'
type Props = { type Props = {
@ -13,9 +15,13 @@ type Props = {
// Switch is an on-off style switch / checkbox // Switch is an on-off style switch / checkbox
function Label(props: Props): JSX.Element { function Label(props: Props): JSX.Element {
let color = 'empty'
if (props.color && props.color in Constants.menuColors) {
color = props.color
}
return ( return (
<span <span
className={`Label ${props.color || 'empty'} ${props.classNames ? props.classNames : ''}`} className={`Label ${color} ${props.classNames ? props.classNames : ''}`}
title={props.title} title={props.title}
> >
{props.children} {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)} onClick={() => props.onDeleteOption(option)}
/> />
<Menu.Separator/> <Menu.Separator/>
{Constants.menuColors.map((color) => ( {Object.entries(Constants.menuColors).map(([key, color]: any) => (
<Menu.Color <Menu.Color
key={color.id} key={key}
id={color.id} id={key}
name={color.name} name={color}
onClick={() => props.onChangeColor(option, color.id)} onClick={() => props.onChangeColor(option, key)}
/> />
))} ))}
</Menu> </Menu>