1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-12 08:54:00 +02:00
joplin/ElectronClient/app/gui/NoteList.jsx

204 lines
5.8 KiB
React
Raw Normal View History

2017-11-04 18:40:34 +02:00
const { ItemList } = require('./ItemList.min.js');
const React = require('react');
const { connect } = require('react-redux');
2017-11-10 22:11:48 +02:00
const { time } = require('lib/time-utils.js');
2017-11-08 19:51:55 +02:00
const { themeStyle } = require('../theme.js');
const { _ } = require('lib/locale.js');
const { bridge } = require('electron').remote.require('./bridge');
const Menu = bridge().Menu;
const MenuItem = bridge().MenuItem;
const eventManager = require('../eventManager');
2017-11-04 18:40:34 +02:00
class NoteListComponent extends React.Component {
2017-11-09 21:21:10 +02:00
style() {
const theme = themeStyle(this.props.theme);
const itemHeight = 34;
2017-11-09 21:21:10 +02:00
let style = {
root: {
backgroundColor: theme.backgroundColor,
},
listItem: {
height: itemHeight,
boxSizing: 'border-box',
display: 'flex',
2017-11-10 22:11:48 +02:00
alignItems: 'stretch',
2017-11-09 21:21:10 +02:00
backgroundColor: theme.backgroundColor,
borderBottom: '1px solid ' + theme.dividerColor,
},
listItemSelected: {
backgroundColor: theme.selectedColor,
},
2017-11-10 22:11:48 +02:00
listItemTitle: {
fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
textDecoration: 'none',
color: theme.color,
cursor: 'default',
whiteSpace: 'nowrap',
flex: 1,
display: 'flex',
alignItems: 'center',
overflow: 'hidden',
},
listItemTitleCompleted: {
opacity: 0.5,
textDecoration: 'line-through',
},
2017-11-09 21:21:10 +02:00
};
return style;
}
2017-11-08 19:51:55 +02:00
itemContextMenu(event) {
2017-11-22 20:35:31 +02:00
const noteIds = this.props.selectedNoteIds;
if (!noteIds.length) return;
2017-11-08 19:51:55 +02:00
const menu = new Menu()
2017-11-22 20:35:31 +02:00
menu.append(new MenuItem({label: _('Add or remove tags'), enabled: noteIds.length === 1, click: async () => {
2017-11-12 01:13:14 +02:00
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'setTags',
2017-11-22 20:35:31 +02:00
noteId: noteIds[0],
2017-11-12 01:13:14 +02:00
});
}}));
2017-11-22 20:35:31 +02:00
menu.append(new MenuItem({label: _('Switch between note and to-do type'), click: async () => {
for (let i = 0; i < noteIds.length; i++) {
const note = await Note.load(noteIds[i]);
await Note.save(Note.toggleIsTodo(note));
eventManager.emit('noteTypeToggle', { noteId: note.id });
2017-11-22 20:35:31 +02:00
}
2017-11-12 01:13:14 +02:00
}}));
menu.append(new MenuItem({label: _('Delete'), click: async () => {
2017-11-22 20:35:31 +02:00
const ok = bridge().showConfirmMessageBox(noteIds.length > 1 ? _('Delete notes?') : _('Delete note?'));
2017-11-12 01:13:14 +02:00
if (!ok) return;
2017-11-22 20:35:31 +02:00
await Note.batchDelete(noteIds);
2017-11-12 01:13:14 +02:00
}}));
2017-11-08 19:51:55 +02:00
menu.popup(bridge().window());
}
2017-11-10 22:11:48 +02:00
itemRenderer(item, theme, width) {
const onTitleClick = async (event, item) => {
2017-11-22 20:35:31 +02:00
if (event.ctrlKey) {
event.preventDefault();
2017-11-22 20:35:31 +02:00
this.props.dispatch({
type: 'NOTE_SELECT_TOGGLE',
id: item.id,
});
} else if (event.shiftKey) {
event.preventDefault();
2017-11-22 20:35:31 +02:00
this.props.dispatch({
type: 'NOTE_SELECT_EXTEND',
id: item.id,
});
} else {
this.props.dispatch({
type: 'NOTE_SELECT',
id: item.id,
});
}
2017-11-05 01:27:13 +02:00
}
const onDragStart = (event) => {
const noteIds = this.props.selectedNoteIds;
if (!noteIds.length) return;
event.dataTransfer.setDragImage(new Image(), 1, 1);
event.dataTransfer.clearData();
event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
}
2017-11-10 22:11:48 +02:00
const onCheckboxClick = async (event) => {
const checked = event.target.checked;
const newNote = {
id: item.id,
todo_completed: checked ? time.unixMs() : 0,
}
await Note.save(newNote);
eventManager.emit('todoToggle', { noteId: item.id });
2017-11-10 22:11:48 +02:00
}
2017-11-10 23:04:53 +02:00
const hPadding = 10;
2017-11-10 22:11:48 +02:00
let style = Object.assign({ width: width }, this.style().listItem);
2017-11-22 20:35:31 +02:00
if (this.props.selectedNoteIds.indexOf(item.id) >= 0) style = Object.assign(style, this.style().listItemSelected);
2017-11-08 19:51:55 +02:00
2017-11-10 22:11:48 +02:00
// Setting marginBottom = 1 because it makes the checkbox looks more centered, at least on Windows
// but don't know how it will look in other OSes.
const checkbox = item.is_todo ?
2017-11-10 23:04:53 +02:00
<div style={{display: 'flex', height: style.height, alignItems: 'center', paddingLeft: hPadding}}>
2017-11-10 22:11:48 +02:00
<input style={{margin:0, marginBottom:1}} type="checkbox" defaultChecked={!!item.todo_completed} onClick={(event) => { onCheckboxClick(event, item) }}/>
</div>
: null;
let listItemTitleStyle = Object.assign({}, this.style().listItemTitle);
2017-11-10 23:04:53 +02:00
listItemTitleStyle.paddingLeft = !checkbox ? hPadding : 4;
if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, this.style().listItemTitleCompleted);
2017-11-10 22:11:48 +02:00
2017-11-14 20:02:58 +02:00
// Need to include "todo_completed" in key so that checkbox is updated when
// item is changed via sync.
return <div key={item.id + '_' + item.todo_completed} style={style}>
2017-11-10 22:11:48 +02:00
{checkbox}
<a
className="list-item"
onContextMenu={(event) => this.itemContextMenu(event)}
href="#"
draggable={true}
2017-11-10 22:11:48 +02:00
style={listItemTitleStyle}
onClick={(event) => { onTitleClick(event, item) }}
onDragStart={(event) => onDragStart(event) }
2017-11-10 22:11:48 +02:00
>
{item.title}
</a>
</div>
2017-11-04 18:40:34 +02:00
}
render() {
2017-11-08 19:51:55 +02:00
const theme = themeStyle(this.props.theme);
2017-11-10 19:58:17 +02:00
const style = this.props.style;
if (!this.props.notes.length) {
const padding = 10;
const emptyDivStyle = Object.assign({
padding: padding + 'px',
fontSize: theme.fontSize,
color: theme.color,
backgroundColor: theme.backgroundColor,
fontFamily: theme.fontFamily,
}, style);
emptyDivStyle.width = emptyDivStyle.width - padding * 2;
emptyDivStyle.height = emptyDivStyle.height - padding * 2;
return <div style={emptyDivStyle}>{_('No notes in here. Create one by clicking on "New note".')}</div>
}
2017-11-08 19:51:55 +02:00
2017-11-04 18:40:34 +02:00
return (
<ItemList
2017-11-13 02:23:12 +02:00
itemHeight={this.style().listItem.height}
2017-11-10 19:58:17 +02:00
style={style}
className={"note-list"}
items={this.props.notes}
2017-11-10 22:11:48 +02:00
itemRenderer={ (item) => { return this.itemRenderer(item, theme, style.width) } }
2017-11-05 01:27:13 +02:00
></ItemList>
2017-11-04 18:40:34 +02:00
);
}
}
const mapStateToProps = (state) => {
return {
2017-11-05 01:27:13 +02:00
notes: state.notes,
2017-11-22 20:35:31 +02:00
selectedNoteIds: state.selectedNoteIds,
2017-11-08 19:51:55 +02:00
theme: state.settings.theme,
2017-11-12 02:44:26 +02:00
// uncompletedTodosOnTop: state.settings.uncompletedTodosOnTop,
2017-11-04 18:40:34 +02:00
};
};
const NoteList = connect(mapStateToProps)(NoteListComponent);
module.exports = { NoteList };