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

Improve the property selector to allow modify colors and delete the properties right there

Browse source
This commit is contained in:
Jesús Espino 2020-10-30 20:33:01 +01:00
parent 0d177980ea
commit 57ac32b33a
4 changed files with 77 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
webapp/src/components/cardDetail.scss
View file

@ -26,6 +26,7 @@
.octo-propertylist {
display: flex;
flex-direction: column;
width: 100%;
}
.octo-propertyrow {

8
webapp/src/components/propertyValueElement.tsx
View file

@ -40,7 +40,7 @@ export default class PropertyValueElement extends React.Component<Props, State>
}
render(): JSX.Element {
const {card, propertyTemplate, readOnly, emptyDisplayValue} = this.props
const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = this.props
const propertyValue = card.properties[propertyTemplate.id]
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
const finalDisplayValue = displayValue || emptyDisplayValue
@ -76,6 +76,12 @@ export default class PropertyValueElement extends React.Component<Props, State>
onChange={(value) => {
mutator.changePropertyValue(card, propertyTemplate.id, value)
}}
onChangeColor={(option: IPropertyOption, colorId: string): void => {
mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
}}
onDeleteOption={(option: IPropertyOption): void => {
mutator.deletePropertyOption(boardTree, propertyTemplate, option)
}}
onCreate={
async (value) => {
const option: IPropertyOption = {

12
webapp/src/widgets/valueSelector.scss
View file

@ -5,4 +5,16 @@
&:hover {
background-color: rgba(var(--main-fg), 0.1),
}
.value-menu-option {
display: flex;
width: 100%;
.octo-label-container {
flex-grow: 1;
}
.MenuWrapper {
display: flex;
align-self: flex-end;
}
}
}

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

@ -1,10 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {CSSProperties} from 'react'
import {ActionMeta, ValueType} from 'react-select'
import CreatableSelect from 'react-select/creatable';
import boardCard from 'src/components/boardCard';
import {injectIntl, IntlShape} from 'react-intl'
import {ActionMeta, ValueType, FormatOptionLabelMeta} from 'react-select'
import CreatableSelect from 'react-select/creatable'
import {IPropertyOption} from '../blocks/board'
import {Constants} from '../constants'
import Menu from './menu'
import MenuWrapper from './menuWrapper'
import Button from './buttons/button'
import OptionsIcon from './icons/options'
import DeleteIcon from './icons/delete'
import './valueSelector.scss'
@ -13,13 +21,49 @@ type Props = {
value: IPropertyOption;
onCreate?: (value: string) => void
onChange?: (value: string) => void
onChangeColor?: (option: IPropertyOption, color: string) => void
onDeleteOption?: (option: IPropertyOption) => void
intl: IntlShape
}
export default class ValueSelector extends React.Component<Props> {
class ValueSelector extends React.Component<Props> {
public shouldComponentUpdate(): boolean {
return true
}
renderLabel = (option: IPropertyOption, meta: FormatOptionLabelMeta<IPropertyOption>): React.ReactNode => {
if (meta.context === 'value') {
return <span className={`octo-label ${option.color}`} >{option.value}</span>
}
return (
<div className='value-menu-option'>
<div className='octo-label-container'>
<div className={`octo-label ${option.color}`}>{option.value}</div>
</div>
<MenuWrapper stopPropagationOnToggle={true}>
<Button><OptionsIcon/></Button>
<Menu position='left'>
<Menu.Text
id='delete'
icon={<DeleteIcon/>}
name={this.props.intl.formatMessage({id: 'BoardComponent.delete', defaultMessage: 'Delete'})}
onClick={() => this.props.onDeleteOption(option)}
/>
<Menu.Separator/>
{Constants.menuColors.map((color) => (
<Menu.Color
key={color.id}
id={color.id}
name={color.name}
onClick={() => this.props.onChangeColor(option, color.id)}
/>
))}
</Menu>
</MenuWrapper>
</div>
)
}
public render(): JSX.Element {
return (
<CreatableSelect
@ -34,8 +78,8 @@ export default class ValueSelector extends React.Component<Props> {
}),
option: (provided: CSSProperties, state: {isFocused: boolean}): CSSProperties => ({
...provided,
background: state.isFocused ? 'rgb(var(--button-bg))' : 'rgb(var(--main-bg))',
color: state.isFocused ? 'rgb(var(--button-fg))' : 'rgb(var(--main-fg))',
background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))',
color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))',
padding: '2px 8px',
}),
control: (): CSSProperties => ({
@ -56,9 +100,13 @@ export default class ValueSelector extends React.Component<Props> {
marginBottom: 0,
marginTop: 0,
}),
menuList: (provided: CSSProperties): CSSProperties => ({
...provided,
overflowY: 'unset',
}),
}}
formatOptionLabel={this.renderLabel}
className='ValueSelector'
hideSelectedOptions={true}
options={this.props.options}
getOptionLabel={(o: IPropertyOption) => o.value}
getOptionValue={(o: IPropertyOption) => o.id}
@ -75,3 +123,5 @@ export default class ValueSelector extends React.Component<Props> {
)
}
}
export default injectIntl(ValueSelector)