wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-12 13:01:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

add a little keyboard shortcut widget

Browse Source
This commit is contained in:
Riley Davis
2017-04-21 13:26:32 -06:00
parent 35f01c2ecc
commit d1ab279f74
3 changed files with 122 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-admin/src/components/ModerationKeysModal.js
+70 -25
View File
@@ -4,6 +4,8 @@ import React from 'react';
import Modal from 'components/Modal';
import styles from './ModerationKeysModal.css';
const lang = new I18n(translations);
const shortcuts = [
{
title: 'modqueue.navigation',
@@ -23,29 +25,72 @@ const shortcuts = [
}
];
export default ({open, onClose}) => (
<Modal open={open} onClose={onClose}>
<h3>{lang.t('modqueue.shortcuts')}</h3>
<div className={styles.container}>
{shortcuts.map((shortcut, i) => (
<table className={styles.table} key={i}>
<thead>
<tr>
<th>{lang.t(shortcut.title)}</th>
</tr>
</thead>
<tbody>
{Object.keys(shortcut.shortcuts).map(key => (
<tr key={`${key }tr`}>
<td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
<td>{lang.t(shortcut.shortcuts[key])}</td>
</tr>
))}
</tbody>
</table>
))}
</div>
</Modal>
);
export default class ModerationKeysModal extends React.Component {
constructor (props) {
super(props);
try {
if (window.localStorage.getItem('coral:shortcutsNote') === null) {
window.localStorage.setItem('coral:shortcutsNote', 'show');
}
} catch (e) {
const lang = new I18n(translations);
// above will fail in Private Mode in some browsers.
}
this.state = {
shortcutsNote: window.localStorage.getItem('coral:shortcutsNote') || 'show'
};
}
closeCallToAction = () => {
try {
window.localStorage.setItem('coral:shortcutsNote', 'hide');
this.setState({foo: Math.random()}); // apparently this.forceUpdate() is bad, but we need a re-render
} catch (e) {
// when setItem fails in Safari Private mode
this.setState({shortcutsNote: 'hide'});
}
}
render () {
const {open, onClose} = this.props;
const hideShortcutsNote = window.localStorage.getItem('coral:shortcutsNote') === 'hide' ||
this.state.dashboardNote === 'hide'; // for Safari Incognito
return (
<div>
<div className={styles.callToAction} style={{display: hideShortcutsNote ? 'none' : 'block'}}>
<div onClick={this.closeCallToAction} className={styles.closeButton}>×</div>
<p className={styles.ctaHeader}>{lang.t('modqueue.mod-faster')}</p>
<p><strong>{lang.t('modqueue.try-these')}:</strong></p>
<ul>
<li><span>{lang.t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
<li><span>{lang.t('modqueue.reject')}</span> <span className={styles.smallKey}>r</span></li>
</ul>
<p><span>{lang.t('modqueue.view-more-shortcuts')}</span> <span className={styles.smallKey}>{lang.t('modqueue.shift-key')}</span> + <span className={styles.smallKey}>/</span></p>
</div>
<Modal open={open} onClose={onClose}>
<h3>{lang.t('modqueue.shortcuts')}</h3>
<div className={styles.container}>
{shortcuts.map((shortcut, i) => (
<table className={styles.table} key={i}>
<thead>
<tr>
<th>{lang.t(shortcut.title)}</th>
</tr>
</thead>
<tbody>
{Object.keys(shortcut.shortcuts).map(key => (
<tr key={`${key }tr`}>
<td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
<td>{lang.t(shortcut.shortcuts[key])}</td>
</tr>
))}
</tbody>
</table>
))}
</div>
</Modal>
</div>
);
}
}