self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-24 08:22:29 +02:00
Code Issues Releases Activity

Simplified new editor widget

Browse Source
This commit is contained in:
Jesús Espino 2020-10-26 20:30:32 +01:00
parent 28f466696a
commit 8174a147de
7 changed files with 44 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
webapp/src/components/cardDetail.tsx
View File

@ -155,19 +155,8 @@ class CardDetail extends React.Component<Props, State> {
value={this.state.title}
placeholderText='Untitled'
onChange={(title: string) => this.setState({title})}
onBlur={() => mutator.changeTitle(card, this.state.title)}
onFocus={() => this.titleRef.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({title: this.state.cardTree.card.title})
setTimeout(() => this.titleRef.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changeTitle(card, this.state.title)
this.titleRef.current.blur()
}
}}
onSave={() => mutator.changeTitle(card, this.state.title)}
onCancel={() => this.setState({title: this.state.cardTree.card.title})}
/>
{/* Property list */}

8
webapp/src/components/commentsList.scss
View File

@ -20,6 +20,14 @@
color: rgba(55, 53, 47, 0.8);
flex-grow: 1;
margin-left: 5px;
.octo-button {
display: none;
}
&:focus {
.octo-button {
display: block;
}
}
}
}

10
webapp/src/components/commentsList.tsx
View File

@ -78,16 +78,12 @@ class CommentsList extends React.Component<Props, State> {
placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
onChange={(value: string) => this.setState({newComment: value})}
value={this.state.newComment}
onFocus={() => this.setState({inputFocused: true})}
onBlur={() => this.setState({inputFocused: false})}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
this.sendComment()
}
onSave={() => {
this.sendComment()
}}
/>
{this.state.newComment && this.state.inputFocused &&
{this.state.newComment &&
<div
className='octo-button filled'
onClick={() => {

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

@ -94,19 +94,8 @@ export default class PropertyValueElement extends React.Component<Props, State>
placeholderText='Empty'
value={this.state.value}
onChange={(value) => this.setState({value})}
onBlur={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
onFocus={() => this.valueEditor.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({value: propertyValue})
setTimeout(() => this.valueEditor.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)
this.valueEditor.current.blur()
}
}}
onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
onCancel={() => this.setState({value: propertyValue})}
/>
)
}

16
webapp/src/components/tableRow.tsx
View File

@ -75,20 +75,8 @@ class TableRow extends React.Component<Props, State> {
value={this.state.title}
placeholderText='Untitled'
onChange={(title: string) => this.setState({title})}
onBlur={() => mutator.changeTitle(card, this.state.title)}
onFocus={() => this.titleRef.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({title: card.title})
setTimeout(() => this.titleRef.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changeTitle(card, this.state.title)
this.titleRef.current.blur()
}
onKeyDown(e)
}}
onSave={() => mutator.changeTitle(card, this.state.title)}
onCancel={() => this.setState({title: card.title})}
/>
</div>

15
webapp/src/components/viewTitle.tsx
View File

@ -84,19 +84,8 @@ class ViewTitle extends React.Component<Props, State> {
value={this.state.title}
placeholderText={intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled Board'})}
onChange={(title) => this.setState({title})}
onBlur={() => mutator.changeTitle(board, this.state.title)}
onFocus={() => this.titleEditor.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({title: this.props.board.title})
setTimeout(() => this.titleEditor.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changeTitle(board, this.state.title)
this.titleEditor.current.blur()
}
}}
onSave={() => mutator.changeTitle(board, this.state.title)}
onCancel={() => this.setState({title: this.props.board.title})}
/>
</div>
</>

35
webapp/src/widgets/editable.tsx
View File

@ -10,13 +10,13 @@ type Props = {
placeholderText?: string
className?: string
onFocus?: () => void
onBlur?: () => void
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
onCancel?: () => void
onSave?: () => void
}
export default class Editable extends React.Component<Props> {
private elementRef = React.createRef<HTMLInputElement>()
private saveOnBlur = true
shouldComponentUpdate(): boolean {
return true
@ -26,16 +26,18 @@ export default class Editable extends React.Component<Props> {
this.elementRef.current.focus()
// Put cursor at end
// document.execCommand('selectAll', false, null)
// document.getSelection().collapseToEnd()
document.execCommand('selectAll', false, null)
document.getSelection().collapseToEnd()
}
public blur(): void {
public blur = (): void => {
this.saveOnBlur = false
this.elementRef.current.blur()
this.saveOnBlur = true
}
public render(): JSX.Element {
const {value, onChange, className, placeholderText, onFocus, onBlur, onKeyDown} = this.props
const {value, onChange, className, placeholderText} = this.props
return (
<input
@ -46,9 +48,22 @@ export default class Editable extends React.Component<Props> {
onChange(e.target.value)
}}
value={value}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
onBlur={() => this.saveOnBlur && this.props.onSave && this.props.onSave()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
if (this.props.onCancel) {
this.props.onCancel()
}
this.blur()
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
if (this.props.onSave) {
this.props.onSave()
}
this.blur()
}
}}
/>
)
}