IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-2784 Channel Navigation Shortcuts (#2979)

Browse Source 
* Completed shortcuts

* Fixed up logic

* Removed shortcut conflicts

* Added code to limit channel navigation within group

* Made code conform to user display, fixed minor logic

* Completed shortcuts

* Fixed up logic

* Removed shortcut conflicts

* Added code to limit channel navigation within group

* Made code conform to user display, fixed minor logic
This commit is contained in:
David Lu
2016-05-16 19:08:59 -04:00
committed by Corey Hulen
parent 1b9deb4392
commit 2ccf5bbaa2
3 changed files with 83 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/components/create_comment.jsx
View File

@@ -205,7 +205,7 @@ class CreateComment extends React.Component {
return;
}
if (!e.ctrlKey && !e.metaKey && e.keyCode === KeyCodes.UP && this.state.messageText === '') {
if (!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && e.keyCode === KeyCodes.UP && this.state.messageText === '') {
e.preventDefault();
const lastPost = PostStore.getCurrentUsersLatestPost(this.props.channelId, this.props.rootId);
@@ -224,7 +224,7 @@ class CreateComment extends React.Component {
});
}
if ((e.ctrlKey || e.metaKey) && e.keyCode === KeyCodes.UP) {
if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.keyCode === KeyCodes.UP) {
const lastPost = PostStore.getCurrentUsersLatestPost(this.props.channelId, this.props.rootId);
if (!lastPost) {
return;

4
webapp/components/create_post.jsx
View File

@@ -351,7 +351,7 @@ class CreatePost extends React.Component {
return;
}
if (!e.ctrlKey && !e.metaKey && e.keyCode === KeyCodes.UP && this.state.messageText === '') {
if (!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && e.keyCode === KeyCodes.UP && this.state.messageText === '') {
e.preventDefault();
const channelId = ChannelStore.getCurrentId();
@@ -373,7 +373,7 @@ class CreatePost extends React.Component {
});
}
if ((e.ctrlKey || e.metaKey) && e.keyCode === KeyCodes.UP) {
if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.keyCode === KeyCodes.UP) {
const channelId = ChannelStore.getCurrentId();
const lastPost = PostStore.getCurrentUsersLatestPost(channelId);
if (!lastPost) {

79
webapp/components/navbar.jsx
View File

@@ -34,6 +34,8 @@ import {Link, browserHistory} from 'react-router';
import React from 'react';
import * as GlobalActions from 'action_creators/global_actions.jsx';
export default class Navbar extends React.Component {
constructor(props) {
super(props);
@@ -50,6 +52,12 @@ export default class Navbar extends React.Component {
this.createCollapseButtons = this.createCollapseButtons.bind(this);
this.createDropdown = this.createDropdown.bind(this);
this.navigateChannelShortcut = this.navigateChannelShortcut.bind(this);
this.navigateUnreadChannelShortcut = this.navigateUnreadChannelShortcut.bind(this);
this.getDisplayedChannels = this.getDisplayedChannels.bind(this);
this.compareByName = this.compareByName.bind(this);
this.compareByDmName = this.compareByDmName.bind(this);
const state = this.getStateFromStores();
state.showEditChannelPurposeModal = false;
state.showEditChannelHeaderModal = false;
@@ -72,10 +80,14 @@ export default class Navbar extends React.Component {
ChannelStore.addChangeListener(this.onChange);
ChannelStore.addExtraInfoChangeListener(this.onChange);
$('.inner-wrap').click(this.hideSidebars);
document.addEventListener('keydown', this.navigateChannelShortcut);
document.addEventListener('keydown', this.navigateUnreadChannelShortcut);
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onChange);
ChannelStore.removeExtraInfoChangeListener(this.onChange);
document.removeEventListener('keydown', this.navigateChannelShortcut);
document.removeEventListener('keydown', this.navigateUnreadChannelShortcut);
}
handleSubmit(e) {
e.preventDefault();
@@ -150,6 +162,73 @@ export default class Navbar extends React.Component {
showRenameChannelModal: false
});
}
navigateChannelShortcut(e) {
if (e.altKey && !e.shiftKey && (e.keyCode === Constants.KeyCodes.UP || e.keyCode === Constants.KeyCodes.DOWN)) {
e.preventDefault();
const allChannels = this.getDisplayedChannels();
const curChannel = ChannelStore.getCurrent();
const curIndex = allChannels.indexOf(curChannel);
let nextChannel = curChannel;
let nextIndex = curIndex;
if (e.keyCode === Constants.KeyCodes.DOWN) {
nextIndex = Math.min(curIndex + 1, allChannels.length - 1);
} else if (e.keyCode === Constants.KeyCodes.UP) {
nextIndex = Math.max(curIndex - 1, 0);
}
nextChannel = allChannels[nextIndex];
GlobalActions.emitChannelClickEvent(nextChannel);
}
}
navigateUnreadChannelShortcut(e) {
if (e.altKey && e.shiftKey && (e.keyCode === Constants.KeyCodes.UP || e.keyCode === Constants.KeyCodes.DOWN)) {
e.preventDefault();
const allChannels = this.getDisplayedChannels();
const curChannel = ChannelStore.getCurrent();
const curIndex = allChannels.indexOf(curChannel);
let nextChannel = curChannel;
let nextIndex = curIndex;
if (e.keyCode === Constants.KeyCodes.UP) {
while (nextIndex >= 0 && ChannelStore.getUnreadCount(allChannels[nextIndex].id).msgs === 0 && ChannelStore.getUnreadCount(allChannels[nextIndex].id).mentions === 0) {
nextIndex--;
}
} else if (e.keyCode === Constants.KeyCodes.DOWN) {
while (nextIndex <= allChannels.length - 1 && ChannelStore.getUnreadCount(allChannels[nextIndex].id).msgs === 0 && ChannelStore.getUnreadCount(allChannels[nextIndex].id).mentions === 0) {
nextIndex++;
}
}
if (nextIndex !== curIndex && ChannelStore.getUnreadCount(allChannels[nextIndex].id).msgs !== 0 || ChannelStore.getUnreadCount(allChannels[nextIndex].id).mentions !== 0) {
nextChannel = allChannels[nextIndex];
GlobalActions.emitChannelClickEvent(nextChannel);
}
}
}
getDisplayedChannels() {
const allChannels = ChannelStore.getAll();
const open = [];
const priv = [];
const dm = [];
for (let i = 0; i < allChannels.length; i++) {
if (allChannels[i].type === 'O') {
open.push(allChannels[i]);
} else if (allChannels[i].type === 'P') {
priv.push(allChannels[i]);
} else {
dm.push(allChannels[i]);
}
}
open.sort(this.compareByName);
priv.sort(this.compareByName);
dm.sort(this.compareByDmName);
return open.concat(priv).concat(dm);
}
compareByName(a, b) {
return a.name.toLowerCase() - b.name.toLowerCase();
}
compareByDmName(a, b) {
return UserStore.getProfile(a.name).username.toLowerCase() - UserStore.getProfile(b.name).username.toLowerCase();
}
createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent) {
if (channel) {
var viewInfoOption = (