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

502 lines
13 KiB
React
Raw Normal View History

const React = require("react");
const { connect } = require("react-redux");
const shared = require("lib/components/shared/side-menu-shared.js");
const { Synchronizer } = require("lib/synchronizer.js");
const BaseModel = require("lib/BaseModel.js");
const Folder = require("lib/models/Folder.js");
const Note = require("lib/models/Note.js");
const Tag = require("lib/models/Tag.js");
const { _ } = require("lib/locale.js");
const { themeStyle } = require("../theme.js");
const { bridge } = require("electron").remote.require("./bridge");
2017-11-08 23:22:24 +02:00
const Menu = bridge().Menu;
const MenuItem = bridge().MenuItem;
const InteropServiceHelper = require("../InteropServiceHelper.js");
2017-11-06 01:55:01 +02:00
class SideBarComponent extends React.Component {
constructor() {
super();
this.onFolderDragStart_ = (event) => {
const folderId = event.currentTarget.getAttribute('folderid');
if (!folderId) return;
event.dataTransfer.setDragImage(new Image(), 1, 1);
event.dataTransfer.clearData();
event.dataTransfer.setData('text/x-jop-folder-ids', JSON.stringify([folderId]));
};
this.onFolderDragOver_ = (event) => {
if (event.dataTransfer.types.indexOf("text/x-jop-note-ids") >= 0) event.preventDefault();
if (event.dataTransfer.types.indexOf("text/x-jop-folder-ids") >= 0) event.preventDefault();
};
this.onFolderDrop_ = async (event) => {
const folderId = event.currentTarget.getAttribute('folderid');
const dt = event.dataTransfer;
if (!dt) return;
if (dt.types.indexOf("text/x-jop-note-ids") >= 0) {
event.preventDefault();
const noteIds = JSON.parse(dt.getData("text/x-jop-note-ids"));
for (let i = 0; i < noteIds.length; i++) {
await Note.moveToFolder(noteIds[i], folderId);
}
} else if (dt.types.indexOf("text/x-jop-folder-ids") >= 0) {
event.preventDefault();
const folderIds = JSON.parse(dt.getData("text/x-jop-folder-ids"));
for (let i = 0; i < folderIds.length; i++) {
await Folder.moveToFolder(folderIds[i], folderId);
}
}
};
this.onFolderToggleClick_ = async (event) => {
const folderId = event.currentTarget.getAttribute('folderid');
this.props.dispatch({
type: 'FOLDER_TOGGLE',
id: folderId,
});
};
}
2017-11-08 19:51:55 +02:00
style() {
const theme = themeStyle(this.props.theme);
2017-11-09 00:48:19 +02:00
const itemHeight = 25;
2017-11-08 19:51:55 +02:00
let style = {
2017-11-09 00:48:19 +02:00
root: {
backgroundColor: theme.backgroundColor2,
},
listItemContainer: {
boxSizing: "border-box",
2017-11-08 19:51:55 +02:00
height: itemHeight,
// paddingLeft: 14,
display: "flex",
alignItems: "stretch",
},
listItem: {
2017-11-09 00:48:19 +02:00
fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
textDecoration: "none",
2017-11-09 00:48:19 +02:00
color: theme.color2,
cursor: "default",
2017-11-12 02:44:26 +02:00
opacity: 0.8,
whiteSpace: "nowrap",
display: "flex",
flex: 1,
alignItems: 'center',
2017-11-09 00:48:19 +02:00
},
listItemSelected: {
backgroundColor: theme.selectedColor2,
},
listItemExpandIcon: {
color: theme.color2,
cursor: "default",
opacity: 0.8,
// fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
textDecoration: "none",
paddingRight: 5,
display: "flex",
alignItems: 'center',
},
conflictFolder: {
color: theme.colorError2,
fontWeight: "bold",
},
2017-11-09 00:48:19 +02:00
header: {
height: itemHeight * 1.8,
fontFamily: theme.fontFamily,
fontSize: theme.fontSize * 1.3,
textDecoration: "none",
boxSizing: "border-box",
2017-11-09 00:48:19 +02:00
color: theme.color2,
paddingLeft: 8,
display: "flex",
alignItems: "center",
2017-11-08 19:51:55 +02:00
},
2017-11-09 21:21:10 +02:00
button: {
padding: 6,
fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
textDecoration: "none",
boxSizing: "border-box",
2017-11-09 21:21:10 +02:00
color: theme.color2,
display: "flex",
alignItems: "center",
justifyContent: "center",
2017-11-09 21:21:10 +02:00
border: "1px solid rgba(255,255,255,0.2)",
marginTop: 10,
marginLeft: 5,
marginRight: 5,
cursor: "default",
2017-11-09 21:21:10 +02:00
},
syncReport: {
fontFamily: theme.fontFamily,
fontSize: Math.round(theme.fontSize * 0.9),
color: theme.color2,
opacity: 0.5,
display: "flex",
alignItems: "left",
justifyContent: "top",
flexDirection: "column",
marginTop: 10,
marginLeft: 5,
marginRight: 5,
2017-11-12 01:13:14 +02:00
minHeight: 70,
wordWrap: "break-word",
//width: "100%",
},
2017-11-08 19:51:55 +02:00
};
2018-05-09 16:31:42 +02:00
style.tagItem = Object.assign({}, style.listItem);
style.tagItem.paddingLeft = 23;
style.tagItem.height = itemHeight;
2017-11-08 19:51:55 +02:00
return style;
}
2017-11-08 23:22:24 +02:00
itemContextMenu(event) {
const itemId = event.target.getAttribute("data-id");
2017-11-12 20:59:54 +02:00
if (itemId === Folder.conflictFolderId()) return;
2017-11-08 23:22:24 +02:00
const itemType = Number(event.target.getAttribute("data-type"));
if (!itemId || !itemType) throw new Error("No data on element");
let deleteMessage = "";
2017-11-08 23:22:24 +02:00
if (itemType === BaseModel.TYPE_FOLDER) {
deleteMessage = _("Delete notebook? All notes and sub-notebooks within this notebook will also be deleted.");
2017-11-08 23:22:24 +02:00
} else if (itemType === BaseModel.TYPE_TAG) {
deleteMessage = _("Remove this tag from all the notes?");
2017-11-17 20:57:27 +02:00
} else if (itemType === BaseModel.TYPE_SEARCH) {
deleteMessage = _("Remove this search from the sidebar?");
2017-11-08 23:22:24 +02:00
}
const menu = new Menu();
let item = null;
if (itemType === BaseModel.TYPE_FOLDER) {
item = BaseModel.byId(this.props.folders, itemId);
}
menu.append(
new MenuItem({
label: _("Delete"),
click: async () => {
const ok = bridge().showConfirmMessageBox(deleteMessage);
if (!ok) return;
if (itemType === BaseModel.TYPE_FOLDER) {
await Folder.delete(itemId);
} else if (itemType === BaseModel.TYPE_TAG) {
await Tag.untagAll(itemId);
} else if (itemType === BaseModel.TYPE_SEARCH) {
this.props.dispatch({
type: "SEARCH_DELETE",
id: itemId,
});
}
},
})
);
2017-11-08 23:22:24 +02:00
if (itemType === BaseModel.TYPE_FOLDER && !item.encryption_applied) {
menu.append(
new MenuItem({
label: _("Rename"),
click: async () => {
this.props.dispatch({
type: "WINDOW_COMMAND",
name: "renameFolder",
id: itemId,
});
},
})
);
// menu.append(
// new MenuItem({
// label: _("Move"),
// click: async () => {
// this.props.dispatch({
// type: "WINDOW_COMMAND",
// name: "renameFolder",
// id: itemId,
// });
// },
// })
// );
menu.append(new MenuItem({ type: "separator" }));
const InteropService = require("lib/services/InteropService.js");
const exportMenu = new Menu();
const ioService = new InteropService();
const ioModules = ioService.modules();
for (let i = 0; i < ioModules.length; i++) {
const module = ioModules[i];
if (module.type !== 'exporter') continue;
exportMenu.append(new MenuItem({ label: module.fullLabel() , click: async () => {
await InteropServiceHelper.export(this.props.dispatch.bind(this), module, { sourceFolderIds: [itemId] });
}}));
}
menu.append(
new MenuItem({
label: _("Export"),
submenu: exportMenu,
})
);
2017-11-17 20:57:27 +02:00
}
if (itemType === BaseModel.TYPE_TAG) {
menu.append(
new MenuItem({
label: _('Rename'),
click: async () => {
this.props.dispatch({
type: "WINDOW_COMMAND",
name: "renameTag",
id: itemId
});
},
})
);
}
2017-11-08 23:22:24 +02:00
menu.popup(bridge().window());
}
2017-11-06 01:55:01 +02:00
folderItem_click(folder) {
this.props.dispatch({
type: "FOLDER_SELECT",
2017-11-06 01:55:01 +02:00
id: folder ? folder.id : null,
});
}
tagItem_click(tag) {
this.props.dispatch({
type: "TAG_SELECT",
2017-11-06 01:55:01 +02:00
id: tag ? tag.id : null,
});
}
2017-11-17 20:57:27 +02:00
searchItem_click(search) {
this.props.dispatch({
type: "SEARCH_SELECT",
2017-11-17 20:57:27 +02:00
id: search ? search.id : null,
});
}
2017-11-06 23:11:15 +02:00
async sync_click() {
await shared.synchronize_press(this);
}
folderItem(folder, selected, hasChildren, depth) {
2017-11-09 00:48:19 +02:00
let style = Object.assign({}, this.style().listItem);
if (folder.id === Folder.conflictFolderId()) style = Object.assign(style, this.style().conflictFolder);
const itemTitle = Folder.displayTitle(folder);
let containerStyle = Object.assign({}, this.style().listItemContainer);
// containerStyle.paddingLeft = containerStyle.paddingLeft + depth * 10;
if (selected) containerStyle = Object.assign(containerStyle, this.style().listItemSelected);
let expandLinkStyle = Object.assign({}, this.style().listItemExpandIcon);
let expandIconStyle = {
visibility: hasChildren ? 'visible' : 'hidden',
paddingLeft: 8 + depth * 10,
}
const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-plus-square' : 'fa-minus-square';
const expandIcon = <i style={expandIconStyle} className={"fa " + iconName}></i>
const expandLink = hasChildren ? <a style={expandLinkStyle} href="#" folderid={folder.id} onClick={this.onFolderToggleClick_}>{expandIcon}</a> : <span style={expandLinkStyle}>{expandIcon}</span>
return (
<div className="list-item-container" style={containerStyle} key={folder.id} onDragStart={this.onFolderDragStart_} onDragOver={this.onFolderDragOver_} onDrop={this.onFolderDrop_} draggable={true} folderid={folder.id}>
{ expandLink }
<a
className="list-item"
href="#"
data-id={folder.id}
data-type={BaseModel.TYPE_FOLDER}
onContextMenu={event => this.itemContextMenu(event)}
style={style}
folderid={folder.id}
onClick={() => {
this.folderItem_click(folder);
}}
onDoubleClick={this.onFolderToggleClick_}
>
{itemTitle}
</a>
</div>
);
2017-11-06 01:55:01 +02:00
}
tagItem(tag, selected) {
2018-05-09 16:31:42 +02:00
let style = Object.assign({}, this.style().tagItem);
2017-11-09 00:48:19 +02:00
if (selected) style = Object.assign(style, this.style().listItemSelected);
return (
<a
className="list-item"
href="#"
data-id={tag.id}
data-type={BaseModel.TYPE_TAG}
onContextMenu={event => this.itemContextMenu(event)}
key={tag.id}
style={style}
onClick={() => {
this.tagItem_click(tag);
}}
>
{Tag.displayTitle(tag)}
</a>
);
2017-11-06 01:55:01 +02:00
}
2017-11-17 20:57:27 +02:00
searchItem(search, selected) {
let style = Object.assign({}, this.style().listItem);
if (selected) style = Object.assign(style, this.style().listItemSelected);
return (
<a
className="list-item"
href="#"
data-id={search.id}
data-type={BaseModel.TYPE_SEARCH}
onContextMenu={event => this.itemContextMenu(event)}
key={search.id}
style={style}
onClick={() => {
this.searchItem_click(search);
}}
>
{search.title}
</a>
);
2017-11-17 20:57:27 +02:00
}
2017-11-06 01:55:01 +02:00
makeDivider(key) {
return <div style={{ height: 2, backgroundColor: "blue" }} key={key} />;
2017-11-06 01:55:01 +02:00
}
makeHeader(key, label, iconName, extraProps = {}) {
2017-11-09 00:48:19 +02:00
const style = this.style().header;
const icon = <i style={{ fontSize: style.fontSize * 1.2, marginRight: 5 }} className={"fa " + iconName} />;
return (
<div style={style} key={key} {...extraProps}>
{icon}
{label}
</div>
);
2017-11-09 00:48:19 +02:00
}
2017-11-20 20:44:56 +02:00
synchronizeButton(type) {
2017-11-09 21:21:10 +02:00
const style = this.style().button;
const iconName = type === "sync" ? "fa-refresh" : "fa-times";
const label = type === "sync" ? _("Synchronise") : _("Cancel");
const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={"fa " + iconName} />;
return (
<a
className="synchronize-button"
style={style}
href="#"
key="sync_button"
onClick={() => {
this.sync_click();
}}
>
{icon}
{label}
</a>
);
2017-11-06 01:55:01 +02:00
}
render() {
2017-11-08 19:51:55 +02:00
const theme = themeStyle(this.props.theme);
2017-11-12 01:13:14 +02:00
const style = Object.assign({}, this.style().root, this.props.style, {
overflowX: "hidden",
overflowY: "auto",
2017-11-12 01:13:14 +02:00
});
2017-11-08 19:51:55 +02:00
2017-11-06 01:55:01 +02:00
let items = [];
items.push(this.makeHeader("folderHeader", _("Notebooks"), "fa-folder-o", {
onDrop: this.onFolderDrop_,
folderid: '',
}));
2017-11-09 00:48:19 +02:00
2017-11-06 01:55:01 +02:00
if (this.props.folders.length) {
const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
items = items.concat(folderItems);
}
items.push(this.makeHeader("tagHeader", _("Tags"), "fa-tags"));
2017-11-09 00:48:19 +02:00
2017-11-06 01:55:01 +02:00
if (this.props.tags.length) {
const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
items.push(
<div className="tags" key="tag_items">
{tagItems}
</div>
);
2017-11-06 01:55:01 +02:00
}
let lines = Synchronizer.reportToLines(this.props.syncReport);
2017-11-12 19:53:26 +02:00
const syncReportText = [];
for (let i = 0; i < lines.length; i++) {
syncReportText.push(
<div key={i} style={{ wordWrap: "break-word", width: "100%" }}>
{lines[i]}
</div>
);
2017-11-12 19:53:26 +02:00
}
2017-11-06 01:55:01 +02:00
items.push(this.synchronizeButton(this.props.syncStarted ? "cancel" : "sync"));
2017-11-06 01:55:01 +02:00
items.push(
<div style={this.style().syncReport} key="sync_report">
{syncReportText}
</div>
);
2017-11-06 01:55:01 +02:00
return (
2017-11-08 19:51:55 +02:00
<div className="side-bar" style={style}>
2017-11-06 01:55:01 +02:00
{items}
</div>
);
}
}
const mapStateToProps = state => {
2017-11-06 01:55:01 +02:00
return {
folders: state.folders,
tags: state.tags,
2017-11-17 20:57:27 +02:00
searches: state.searches,
2017-11-06 01:55:01 +02:00
syncStarted: state.syncStarted,
syncReport: state.syncReport,
selectedFolderId: state.selectedFolderId,
selectedTagId: state.selectedTagId,
2017-11-17 20:57:27 +02:00
selectedSearchId: state.selectedSearchId,
2017-11-06 01:55:01 +02:00
notesParentType: state.notesParentType,
locale: state.settings.locale,
theme: state.settings.theme,
collapsedFolderIds: state.collapsedFolderIds,
2017-11-06 01:55:01 +02:00
};
};
const SideBar = connect(mapStateToProps)(SideBarComponent);
module.exports = { SideBar };