Skip to content

Add button clear all checkboxes #2503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rokt33r merged 2 commits into from
Oct 23, 2018
Merged

Add button clear all checkboxes #2503

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e67880
Add button clear all checkboxes
makibishi0212 Oct 17, 2018
d64dafc
change prop name in TodoListPercentage
makibishi0212 Oct 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions browser/components/MarkdownEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ class MarkdownEditor extends React.Component {
})
}

setValue (value) {
this.refs.code.setValue(value)
}

handleChange (e) {
this.value = this.refs.code.value
this.props.onChange(e)
Expand Down
4 changes: 4 additions & 0 deletions browser/components/MarkdownSplitEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ class MarkdownSplitEditor extends React.Component {
}
}

setValue (value) {
this.refs.code.setValue(value)
}

handleOnChange () {
this.value = this.refs.code.value
this.props.onChange()
Expand Down
8 changes: 6 additions & 2 deletions browser/components/TodoListPercentage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,23 @@ import styles from './TodoListPercentage.styl'
*/

const TodoListPercentage = ({
percentageOfTodo
percentageOfTodo, onClick
}) => (
<div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
<div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
<div styleName='progressBarInner'>
<p styleName='percentageText'>{percentageOfTodo}%</p>
</div>
</div>
<div styleName='todoClear'>
<p styleName='todoClearText' onClick={(e) => onClick(e)}>clear</p>
</div>
</div>
)

TodoListPercentage.propTypes = {
percentageOfTodo: PropTypes.number.isRequired
percentageOfTodo: PropTypes.number.isRequired,
onClick: PropTypes.func.isRequired
Copy link
Member

@ZeroX-DG ZeroX-DG Oct 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think onClick is a good name, I think you should rename it to something like onClearCheckboxClick?

Copy link
Contributor Author

@makibishi0212 makibishi0212 Oct 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your review.
I fix it.

}

export default CSSModules(TodoListPercentage, styles)
24 changes: 24 additions & 0 deletions browser/components/TodoListPercentage.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.percentageBar
display: flex
position absolute
top 72px
right 0px
Expand Down Expand Up @@ -30,6 +31,20 @@
color #f4f4f4
font-weight 600

.todoClear
display flex
justify-content: flex-end
position absolute
z-index 120
width 100%
height 100%
padding 2px 10px

.todoClearText
color #f4f4f4
cursor pointer
font-weight 500

body[data-theme="dark"]
.percentageBar
background-color #444444
Expand All @@ -39,6 +54,9 @@ body[data-theme="dark"]

.percentageText
color $ui-dark-text-color

.todoClearText
color $ui-dark-text-color

body[data-theme="solarized-dark"]
.percentageBar
Expand All @@ -50,6 +68,9 @@ body[data-theme="solarized-dark"]
.percentageText
color #fdf6e3

.todoClearText
color #fdf6e3

body[data-theme="monokai"]
.percentageBar
background-color: $ui-monokai-borderColor
Expand All @@ -69,3 +90,6 @@ body[data-theme="dracula"]

.percentageText
color $ui-dracula-text-color

.percentageText
color $ui-dracula-text-color
22 changes: 21 additions & 1 deletion browser/main/Detail/MarkdownNoteDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,9 +293,29 @@ class MarkdownNoteDetail extends React.Component {
})
}

handleClearTodo () {
const { note } = this.state
const splitted = note.content.split('\n')

const clearTodoContent = splitted.map((line) => {
const trimmedLine = line.trim()
if (trimmedLine.match(/\[x\]/i)) {
return line.replace(/\[x\]/i, '[ ]')
} else {
return line
}
}).join('\n')

note.content = clearTodoContent
this.refs.content.setValue(note.content)

this.updateNote(note)
}

renderEditor () {
const { config, ignorePreviewPointerEvents } = this.props
const { note } = this.state

if (this.state.editorType === 'EDITOR_PREVIEW') {
return <MarkdownEditor
ref='content'
Expand Down Expand Up @@ -375,7 +395,7 @@ class MarkdownNoteDetail extends React.Component {
data={data}
onChange={this.handleUpdateTag.bind(this)}
/>
<TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
<TodoListPercentage onClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
</div>
<div styleName='info-right'>
<ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
Expand Down