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

Merge branch 'main' of github.com:mattermost/mattermost-octo-tasks into main

Browse Source
This commit is contained in:
Chen-I Lim 2020-10-26 13:05:02 -07:00
commit e82e9dba89
10 changed files with 58 additions and 83 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={() => {

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

@ -24,7 +24,6 @@ type State = {
}
export default class PropertyValueElement extends React.Component<Props, State> {
private valueEditor = React.createRef<Editable>()
constructor(props: Props) {
super(props)
@ -89,24 +88,12 @@ export default class PropertyValueElement extends React.Component<Props, State>
if (!readOnly) {
return (
<Editable
ref={this.valueEditor}
className='octo-propertyvalue'
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})}
/>
)
}

11
webapp/src/components/tableComponent.tsx
View File

@ -174,13 +174,12 @@ class TableComponent extends React.Component<Props, State> {
boardTree={boardTree}
card={card}
focusOnMount={focusOnMount}
onKeyDown={(e) => {
if (e.keyCode === 13) {
// Enter: Insert new card if on last row
if (cards.length > 0 && cards[cards.length - 1] === card) {
this.addCard(false)
}
onSaveWithEnter={() => {
console.log("WORKING")
if (cards.length > 0 && cards[cards.length - 1] === card) {
this.addCard(false)
}
console.log("STILL WORKING")
}}
/>)

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

@ -16,12 +16,12 @@ type Props = {
boardTree: BoardTree
card: Card
focusOnMount: boolean
onKeyDown: (e: React.KeyboardEvent) => void
onSaveWithEnter: () => void
}
type State = {
showCard: boolean
title: string
title: string
}
class TableRow extends React.Component<Props, State> {
@ -40,12 +40,12 @@ class TableRow extends React.Component<Props, State> {
componentDidMount(): void {
if (this.props.focusOnMount) {
this.titleRef.current.focus()
setTimeout(() => this.titleRef.current.focus(), 10)
}
}
render(): JSX.Element {
const {boardTree, card, onKeyDown} = this.props
const {boardTree, card, onSaveWithEnter} = this.props
const {board, activeView} = boardTree
const openButonRef = React.createRef<HTMLDivElement>()
@ -75,20 +75,13 @@ 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()
onSave={(saveType) => {
mutator.changeTitle(card, this.state.title)
if (saveType === 'onEnter') {
onSaveWithEnter()
}
onKeyDown(e)
}}
onCancel={() => this.setState({title: card.title})}
/>
</div>

4
webapp/src/components/viewHeader.tsx
View File

@ -65,7 +65,7 @@ class ViewHeader extends React.Component<Props, State> {
private onSearchKeyDown = (e: React.KeyboardEvent) => {
if (e.keyCode === 27) { // ESC: Clear search
this.searchFieldRef.current.text = ''
this.setState({...this.state, isSearching: false})
this.setState({isSearching: false})
this.props.setSearchText(undefined)
e.preventDefault()
}
@ -280,7 +280,7 @@ class ViewHeader extends React.Component<Props, State> {
<div
className='octo-button'
onClick={() => {
this.setState({...this.state, isSearching: true})
this.setState({isSearching: true})
}}
>
<FormattedMessage

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>
</>

1
webapp/src/pages/boardPage.tsx
View File

@ -168,7 +168,6 @@ export default class BoardPage extends React.Component<Props, State> {
// TODO: Handle error (viewId not found)
this.setState({
...this.state,
boardTree,
boardId,
viewId: boardTree.activeView.id,

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?: (saveType: 'onEnter'|'onBlur') => 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('onBlur')}
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('onEnter')
}
this.blur()
}
}}
/>
)
}