self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Use arrow to move between items, and added shortcuts to focus different elements

Browse Source
This commit is contained in:
Laurent Cozic 2019-01-26 18:04:32 +00:00
parent f62bbfe286
commit 9c1219b188
7 changed files with 340 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ElectronClient/app/app.js
View File

@ -225,6 +225,14 @@ class Application extends BaseApplication {
this.updateMenu(screen);
}
focusElement_(target) {
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: target,
});
}
updateMenu(screen) {
if (this.lastMenuScreen_ === screen) return;
@ -244,6 +252,32 @@ class Application extends BaseApplication {
});
}
const focusItems = [];
focusItems.push({
label: _('Sidebar'),
click: () => { this.focusElement_('sideBar') },
accelerator: 'CommandOrControl+Shift+S',
});
focusItems.push({
label: _('Note list'),
click: () => { this.focusElement_('noteList') },
accelerator: 'CommandOrControl+Shift+L',
});
focusItems.push({
label: _('Note title'),
click: () => { this.focusElement_('noteTitle') },
accelerator: 'CommandOrControl+Shift+N',
});
focusItems.push({
label: _('Note body'),
click: () => { this.focusElement_('noteBody') },
accelerator: 'CommandOrControl+Shift+B',
});
const importItems = [];
const exportItems = [];
const ioService = new InteropService();
@ -532,6 +566,13 @@ class Application extends BaseApplication {
click: () => {
Setting.setValue('showCompletedTodos', !Setting.value('showCompletedTodos'));
},
}, {
type: 'separator',
screens: ['Main'],
}, {
label: _('Focus'),
screens: ['Main'],
submenu: focusItems,
}],
}, {
label: _('Tools'),

8
ElectronClient/app/gui/MainScreen.jsx
View File

@ -295,7 +295,7 @@ class MainScreenComponent extends React.Component {
height: rowHeight,
display: 'inline-block',
verticalAlign: 'top',
};
};
if (isSidebarVisible === false) {
this.styles_.sideBar.width = 0;
@ -338,9 +338,9 @@ class MainScreenComponent extends React.Component {
render() {
const theme = themeStyle(this.props.theme);
const style = Object.assign({
color: theme.color,
backgroundColor: theme.backgroundColor,
}, this.props.style);
color: theme.color,
backgroundColor: theme.backgroundColor,
}, this.props.style);
const promptOptions = this.state.promptOptions;
const folders = this.props.folders;
const notes = this.props.notes;

47
ElectronClient/app/gui/NoteList.jsx
View File

@ -342,6 +342,34 @@ class NoteListComponent extends React.Component {
return null;
}
doCommand(command) {
if (!command) return;
let commandProcessed = true;
if (command.name === 'focusElement' && command.target === 'noteList') {
if (this.props.selectedNoteIds.length) {
const ref = this.itemAnchorRef(this.props.selectedNoteIds[0]);
if (ref) ref.focus();
}
} else {
commandProcessed = false;
}
if (commandProcessed) {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: null,
});
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.windowCommand !== this.props.windowCommand) {
this.doCommand(this.props.windowCommand);
}
}
async onKeyDown(event) {
const keyCode = event.keyCode;
const noteIds = this.props.selectedNoteIds;
@ -389,6 +417,24 @@ class NoteListComponent extends React.Component {
this.focusNoteId_(todos[0].id);
}
if (keyCode === 9) { // TAB
event.preventDefault();
if (event.shiftKey) {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'sideBar',
});
} else {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteTitle',
});
}
}
}
focusNoteId_(noteId) {
@ -461,6 +507,7 @@ const mapStateToProps = (state) => {
searches: state.searches,
selectedSearchId: state.selectedSearchId,
watchedNoteFiles: state.watchedNoteFiles,
windowCommand: state.windowCommand,
};
};

41
ElectronClient/app/gui/NoteText.jsx
View File

@ -257,6 +257,8 @@ class NoteTextComponent extends React.Component {
showLocalSearch: false,
});
}
this.titleField_keyDown = this.titleField_keyDown.bind(this);
}
// Note:
@ -908,6 +910,28 @@ class NoteTextComponent extends React.Component {
this.setState({ bodyHtml: bodyHtml });
}
titleField_keyDown(event) {
const keyCode = event.keyCode;
if (keyCode === 9) { // TAB
event.preventDefault();
if (event.shiftKey) {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteList',
});
} else {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteBody',
});
}
}
}
async doCommand(command) {
if (!command) return;
@ -924,7 +948,7 @@ class NoteTextComponent extends React.Component {
fn = this.commandTextBold;
} else if (command.name === 'textItalic') {
fn = this.commandTextItalic;
} else if (command.name === 'insertDateTime' ) {
} else if (command.name === 'insertDateTime') {
fn = this.commandDateTime;
} else if (command.name === 'commandStartExternalEditing') {
fn = this.commandStartExternalEditing;
@ -933,6 +957,20 @@ class NoteTextComponent extends React.Component {
}
}
if (command.name === 'focusElement' && command.target === 'noteTitle') {
fn = () => {
if (!this.titleField_) return;
this.titleField_.focus();
}
}
if (command.name === 'focusElement' && command.target === 'noteBody') {
fn = () => {
if (!this.editor_) return;
this.editor_.editor.focus();
}
}
if (!fn) return;
this.props.dispatch({
@ -1623,6 +1661,7 @@ class NoteTextComponent extends React.Component {
style={titleEditorStyle}
value={note && note.title ? note.title : ''}
onChange={(event) => { this.title_changeText(event); }}
onKeyDown={this.titleField_keyDown}
placeholder={ this.props.newNote ? _('Creating new %s...', isTodo ? _('to-do') : _('note')) : '' }
/>

204
ElectronClient/app/gui/SideBar.jsx
View File

@ -81,6 +81,15 @@ class SideBarComponent extends React.Component {
});
};
this.folderItemsOrder_ = [];
this.tagItemsOrder_ = [];
this.onKeyDown = this.onKeyDown.bind(this);
this.rootRef = React.createRef();
this.anchorItemRefs = {};
this.state = {
tagHeaderIsExpanded: Setting.value('tagHeaderIsExpanded'),
folderHeaderIsExpanded: Setting.value('folderHeaderIsExpanded')
@ -192,6 +201,31 @@ class SideBarComponent extends React.Component {
}
}
doCommand(command) {
if (!command) return;
let commandProcessed = true;
if (command.name === 'focusElement' && command.target === 'sideBar') {
if (this.props.sidebarVisibility) {
const item = this.selectedItem();
if (item) {
const anchorRef = this.anchorItemRefs[item.type][item.id];
if (anchorRef) anchorRef.current.focus();
}
}
} else {
commandProcessed = false;
}
if (commandProcessed) {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: null,
});
}
}
componentDidUpdate(prevProps) {
if (shim.isLinux()) {
// For some reason, the UI seems to sleep in some Linux distro during
@ -214,6 +248,12 @@ class SideBarComponent extends React.Component {
this.clearForceUpdateDuringSync();
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.windowCommand !== this.props.windowCommand) {
this.doCommand(this.props.windowCommand);
}
}
itemContextMenu(event) {
const itemId = event.target.getAttribute("data-id");
if (itemId === Folder.conflictFolderId()) return;
@ -341,17 +381,26 @@ class SideBarComponent extends React.Component {
});
}
searchItem_click(search) {
this.props.dispatch({
type: "SEARCH_SELECT",
id: search ? search.id : null,
});
}
// searchItem_click(search) {
// this.props.dispatch({
// type: "SEARCH_SELECT",
// id: search ? search.id : null,
// });
// }
async sync_click() {
await shared.synchronize_press(this);
}
anchorItemRef(type, id) {
let refs = null;
if (!this.anchorItemRefs[type]) this.anchorItemRefs[type] = {};
if (this.anchorItemRefs[type][id]) return this.anchorItemRefs[type][id];
this.anchorItemRefs[type][id] = React.createRef();
return this.anchorItemRefs[type][id];
}
folderItem(folder, selected, hasChildren, depth) {
let style = Object.assign({}, this.style().listItem);
if (folder.id === Folder.conflictFolderId()) style = Object.assign(style, this.style().conflictFolder);
@ -359,8 +408,6 @@ class SideBarComponent extends React.Component {
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);
@ -373,10 +420,13 @@ class SideBarComponent extends React.Component {
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>
const anchorRef = this.anchorItemRef('folder', folder.id);
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
ref={anchorRef}
className="list-item"
href="#"
data-id={folder.id}
@ -398,10 +448,14 @@ class SideBarComponent extends React.Component {
tagItem(tag, selected) {
let style = Object.assign({}, this.style().tagItem);
if (selected) style = Object.assign(style, this.style().listItemSelected);
const anchorRef = this.anchorItemRef('tag', tag.id);
return (
<a
className="list-item"
href="#"
ref={anchorRef}
data-id={tag.id}
data-type={BaseModel.TYPE_TAG}
onContextMenu={event => this.itemContextMenu(event)}
@ -418,26 +472,26 @@ class SideBarComponent extends React.Component {
);
}
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>
);
}
// 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>
// );
// }
makeDivider(key) {
return <div style={{ height: 2, backgroundColor: "blue" }} key={key} />;
@ -462,8 +516,11 @@ class SideBarComponent extends React.Component {
toggleIcon = <i className={`fa ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-left'}`} style={{ fontSize: style.fontSize * 0.75,
marginRight: 12, marginLeft: 5, marginTop: style.fontSize * 0.125}}></i>;
}
const ref = this.anchorItemRef('headers', key);
return (
<div style={style} key={key} {...extraProps} onClick={(event) => {
<div ref={ref} style={style} key={key} {...extraProps} onClick={(event) => {
// if a custom click event is attached, trigger that.
if (headerClick) {
headerClick(key, event);
@ -477,6 +534,83 @@ class SideBarComponent extends React.Component {
);
}
selectedItem() {
if (this.props.notesParentType === 'Folder' && this.props.selectedFolderId) {
return { type: 'folder', id: this.props.selectedFolderId };
} else if (this.props.notesParentType === 'Tag' && this.props.selectedTagId) {
return { type: 'tag', id: this.props.selectedTagId };
} else if (this.props.notesParentType === 'Search' && this.props.selectedSearchId) {
return { type: 'search', id: this.props.selectedSearchId };
}
return null;
}
onKeyDown(event) {
const keyCode = event.keyCode;
if (keyCode === 40 || keyCode === 38) { // DOWN / UP
event.preventDefault();
const focusItems = [];
for (let i = 0; i < this.folderItemsOrder_.length; i++) {
const id = this.folderItemsOrder_[i];
focusItems.push({ id: id, ref: this.anchorItemRefs['folder'][id], type: 'folder' });
}
for (let i = 0; i < this.tagItemsOrder_.length; i++) {
const id = this.tagItemsOrder_[i];
focusItems.push({ id: id, ref: this.anchorItemRefs['tag'][id], type: 'tag' });
}
const selectedItem = this.selectedItem();
let currentIndex = 0;
for (let i = 0; i < focusItems.length; i++) {
if (!selectedItem || focusItems[i].id === selectedItem.id) {
currentIndex = i;
break;
}
}
const inc = keyCode === 38 ? -1 : +1;
let newIndex = currentIndex + inc;
if (newIndex < 0) newIndex = 0;
if (newIndex > focusItems.length - 1) newIndex = focusItems.length - 1;
const focusItem = focusItems[newIndex];
let actionName = focusItem.type.toUpperCase() + '_SELECT';
this.props.dispatch({
type: actionName,
id: focusItem.id,
});
focusItem.ref.current.focus();
}
if (keyCode === 9) { // TAB
event.preventDefault();
if (event.shiftKey) {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteBody',
});
} else {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteList',
});
}
}
}
onHeaderClick_(key, event) {
const currentHeader = event.currentTarget;
const toggleBlock = +currentHeader.getAttribute('toggleblock');
@ -524,7 +658,9 @@ class SideBarComponent extends React.Component {
}));
if (this.props.folders.length) {
const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
const result = shared.renderFolders(this.props, this.folderItem.bind(this));
const folderItems = result.items;
this.folderItemsOrder_ = result.order;
items.push(<div className="folders" key="folder_items" style={{display: this.state.folderHeaderIsExpanded ? 'block': 'none'}}>
{folderItems}</div>);
}
@ -534,7 +670,9 @@ class SideBarComponent extends React.Component {
}));
if (this.props.tags.length) {
const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
const result = shared.renderTags(this.props, this.tagItem.bind(this));
const tagItems = result.items;
this.tagItemsOrder_ = result.order;
items.push(
<div className="tags" key="tag_items" style={{display: this.state.tagHeaderIsExpanded ? 'block': 'none'}}>
@ -574,7 +712,7 @@ class SideBarComponent extends React.Component {
);
return (
<div className="side-bar" style={style}>
<div ref={this.rootRef} onKeyDown={this.onKeyDown} className="side-bar" style={style}>
{items}
</div>
);
@ -597,6 +735,8 @@ const mapStateToProps = state => {
collapsedFolderIds: state.collapsedFolderIds,
decryptionWorker: state.decryptionWorker,
resourceFetcher: state.resourceFetcher,
windowCommand: state.windowCommand,
sidebarVisibility: state.sidebarVisibility,
};
};

46
ReactNativeClient/lib/components/shared/side-menu-shared.js
View File

@ -26,43 +26,61 @@ function folderIsVisible(folders, folderId, collapsedFolderIds) {
return true;
}
function renderFoldersRecursive_(props, renderItem, items, parentId, depth) {
function renderFoldersRecursive_(props, renderItem, items, parentId, depth, order) {
const folders = props.folders;
for (let i = 0; i < folders.length; i++) {
let folder = folders[i];
if (!Folder.idsEqual(folder.parent_id, parentId)) continue;
if (!folderIsVisible(props.folders, folder.id, props.collapsedFolderIds)) continue;
const hasChildren = folderHasChildren_(folders, folder.id);
order.push(folder.id);
items.push(renderItem(folder, props.selectedFolderId == folder.id && props.notesParentType == 'Folder', hasChildren, depth));
if (hasChildren) items = renderFoldersRecursive_(props, renderItem, items, folder.id, depth + 1);
if (hasChildren) {
const result = renderFoldersRecursive_(props, renderItem, items, folder.id, depth + 1, order);
items = result.items;
order = result.order;
}
}
return items;
return {
items: items,
order: order,
};
}
shared.renderFolders = function(props, renderItem) {
return renderFoldersRecursive_(props, renderItem, [], '', 0);
return renderFoldersRecursive_(props, renderItem, [], '', 0, []);
}
shared.renderTags = function(props, renderItem) {
let tags = props.tags.slice();
tags.sort((a, b) => { return a.title < b.title ? -1 : +1; });
let tagItems = [];
const order = [];
for (let i = 0; i < tags.length; i++) {
const tag = tags[i];
order.push(tag.id);
tagItems.push(renderItem(tag, props.selectedTagId == tag.id && props.notesParentType == 'Tag'));
}
return tagItems;
return {
items: tagItems,
order: order,
};
}
shared.renderSearches = function(props, renderItem) {
let searches = props.searches.slice();
let searchItems = [];
for (let i = 0; i < searches.length; i++) {
const search = searches[i];
searchItems.push(renderItem(search, props.selectedSearchId == search.id && props.notesParentType == 'Search'));
}
return searchItems;
}
// shared.renderSearches = function(props, renderItem) {
// let searches = props.searches.slice();
// let searchItems = [];
// const order = [];
// for (let i = 0; i < searches.length; i++) {
// const search = searches[i];
// order.push(search.id);
// searchItems.push(renderItem(search, props.selectedSearchId == search.id && props.notesParentType == 'Search'));
// }
// return {
// items: searchItems,
// order: order,
// };
// }
shared.synchronize_press = async function(comp) {
const Setting = require('lib/models/Setting.js');

6
ReactNativeClient/lib/components/side-menu-content.js
View File

@ -200,13 +200,15 @@ class SideMenuContentComponent extends Component {
items.push(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>);
if (this.props.folders.length) {
const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
const result = shared.renderFolders(this.props, this.folderItem.bind(this));
folderItems = result.items;
items = items.concat(folderItems);
if (items.length) items.push(this.makeDivider('divider_1'));
}
if (this.props.tags.length) {
const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
const result = shared.renderTags(this.props, this.tagItem.bind(this));
const tagItems = result.items;
items.push(
<View style={this.styles().tagItemList} key="tag_items">