self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 256 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,19 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
<span
class="Label propColorDefault "
>
Jean-Luc Picard
<span
class="Label-text"
>
Jean-Luc Picard
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</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 Switch from '../widgets/switch'
import IconButton from '../widgets/buttons/iconButton'
import CloseIcon from '../widgets/icons/close'
import UserProperty from './properties/user/user'
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 => {
if (val === '') {
return true
@ -139,7 +143,17 @@ const PropertyValueElement = (props:Props): JSX.Element => {
tabIndex={0}
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>
)
}
@ -168,6 +182,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
mutator.changePropertyValue(card, propertyTemplate.id, option.id)
}
}
onDeleteValue={onDeleteValue}
/>
)
} else if (propertyTemplate.type === 'person') {

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

@ -174,7 +174,19 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -188,7 +200,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -252,7 +268,19 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -266,7 +294,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -468,7 +500,19 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -482,7 +526,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -546,7 +594,19 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -560,7 +620,11 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -762,7 +826,19 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -776,7 +852,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -840,7 +920,19 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -854,7 +946,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -1056,7 +1152,19 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -1070,7 +1178,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -1134,7 +1246,19 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -1148,7 +1272,11 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
<div
@ -1328,7 +1456,19 @@ exports[`components/table/Table should match snapshot 1`] = `
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
<div
class="Button IconButton margin-left delete-value"
title="Clear"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</span>
</div>
</div>
@ -1342,7 +1482,11 @@ exports[`components/table/Table should match snapshot 1`] = `
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
</div>
@ -1672,7 +1816,11 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
<span
class="Label propColorBrown "
>
value 1
<span
class="Label-text"
>
value 1
</span>
</span>
</div>
</div>
@ -1686,7 +1834,11 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
>
<span
class="Label empty "
/>
>
<span
class="Label-text"
/>
</span>
</div>
</div>
</div>

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

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

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

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

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

@ -19,6 +19,15 @@
overflow: hidden;
border-radius: var(--default-rad);
max-width: 100%;
.IconButton.delete-value {
width: 16px;
min-width: 16px;
height: 16px;
i {
font-size: 16px;
}
}
}
.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)}
onMouseDown={(e) => e.stopPropagation()}
icon={<CloseIcon/>}
title='Close'
className='margin-left'
title='Clear'
className='margin-left delete-value'
/>
}
</Label>