self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-07-12 23:50:27 +02:00
Code Issues Releases Activity

Add clear button to value selectors (#823)

Browse Source 
* Add clear button to value selectors

* Only show the clear button on not-readonly cases

* Updating the test snapshots

Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
This commit is contained in:
Jesús Espino
2021-08-02 21:33:07 +02:00
committed by GitHub
parent 3c41630af5
commit e481ba7170
7 changed files with 256 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
View File

@ -30,9 +30,21 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
> >
<span <span
class="Label propColorDefault " class="Label propColorDefault "
>
<span
class="Label-text"
> >
Jean-Luc Picard Jean-Luc Picard
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div

17
webapp/src/components/propertyValueElement.tsx
View File

@ -18,6 +18,8 @@ import Label from '../widgets/label'
import EditableDayPicker from '../widgets/editableDayPicker' import EditableDayPicker from '../widgets/editableDayPicker'
import Switch from '../widgets/switch' import Switch from '../widgets/switch'
import IconButton from '../widgets/buttons/iconButton'
import CloseIcon from '../widgets/icons/close'
import UserProperty from './properties/user/user' import UserProperty from './properties/user/user'
import MultiSelectProperty from './properties/multiSelect' import MultiSelectProperty from './properties/multiSelect'
@ -74,6 +76,8 @@ const PropertyValueElement = (props:Props): JSX.Element => {
} }
}, []) }, [])
const onDeleteValue = useCallback(() => mutator.changePropertyValue(card, propertyTemplate.id, ''), [card, propertyTemplate.id])
const validateProp = (propType: string, val: string): boolean => { const validateProp = (propType: string, val: string): boolean => {
if (val === '') { if (val === '') {
return true return true
@ -139,7 +143,17 @@ const PropertyValueElement = (props:Props): JSX.Element => {
tabIndex={0} tabIndex={0}
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
> >
<Label color={displayValue ? propertyColorCssClassName : 'empty'}>{finalDisplayValue}</Label> <Label color={displayValue ? propertyColorCssClassName : 'empty'}>
<span className='Label-text'>{finalDisplayValue}</span>
{displayValue && !props.readOnly &&
<IconButton
onClick={onDeleteValue}
onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
icon={<CloseIcon/>}
title='Clear'
className='margin-left delete-value'
/>}
</Label>
</div> </div>
) )
} }
@ -168,6 +182,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
mutator.changePropertyValue(card, propertyTemplate.id, option.id) mutator.changePropertyValue(card, propertyTemplate.id, option.id)
} }
} }
onDeleteValue={onDeleteValue}
/> />
) )
} else if (propertyTemplate.type === 'person') { } else if (propertyTemplate.type === 'person') {

152
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View File

@ -173,9 +173,21 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -188,7 +200,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -251,9 +267,21 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -266,7 +294,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -467,9 +499,21 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -482,7 +526,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -545,9 +593,21 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -560,7 +620,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -761,9 +825,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -776,7 +852,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -839,9 +919,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -854,7 +946,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -1055,9 +1151,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -1070,7 +1178,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -1133,9 +1245,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -1148,7 +1272,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
<div <div
@ -1327,9 +1455,21 @@ exports[`components/table/Table should match snapshot 1`] = `
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -1342,7 +1482,11 @@ exports[`components/table/Table should match snapshot 1`] = `
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
</div> </div>
@ -1671,9 +1815,13 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
</span>
</div> </div>
</div> </div>
<div <div
@ -1686,7 +1834,11 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
</div> </div>

32
webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
View File

@ -141,9 +141,21 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -156,7 +168,11 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
</div> </div>
@ -305,9 +321,21 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
> >
<span <span
class="Label propColorBrown " class="Label propColorBrown "
>
<span
class="Label-text"
> >
value 1 value 1
</span> </span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div> </div>
</div> </div>
<div <div
@ -320,7 +348,11 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
> >
<span <span
class="Label empty " class="Label empty "
>
<span
class="Label-text"
/> />
</span>
</div> </div>
</div> </div>
</div> </div>

8
webapp/src/styles/main.scss
View File

@ -164,6 +164,14 @@ html {
&.empty { &.empty {
color: rgba(var(--body-color), 0.4); color: rgba(var(--body-color), 0.4);
} }
.IconButton.delete-value {
width: 16px;
min-width: 16px;
height: 16px;
i {
font-size: 16px;
}
}
} }
/*-- Editable --*/ /*-- Editable --*/

9
webapp/src/widgets/valueSelector.scss
View File

@ -19,6 +19,15 @@
overflow: hidden; overflow: hidden;
border-radius: var(--default-rad); border-radius: var(--default-rad);
max-width: 100%; max-width: 100%;
.IconButton.delete-value {
width: 16px;
min-width: 16px;
height: 16px;
i {
font-size: 16px;
}
}
} }
.Label-no-padding { .Label-no-padding {

4
webapp/src/widgets/valueSelector.tsx
View File

@ -57,8 +57,8 @@ const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
onClick={() => onDeleteValue(option)} onClick={() => onDeleteValue(option)}
onMouseDown={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}
icon={<CloseIcon/>} icon={<CloseIcon/>}
title='Close' title='Clear'
className='margin-left' className='margin-left delete-value'
/> />
} }
</Label> </Label>