diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js index 75ec5fc09..b7117181e 100644 --- a/client/coral-admin/src/actions/moderation.js +++ b/client/coral-admin/src/actions/moderation.js @@ -6,3 +6,15 @@ export const singleView = () => ({type: actions.SINGLE_VIEW}); // Ban User Dialog export const showBanUserDialog = (user, commentId, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, showRejectedNote}); export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog}); + +// hide shortcuts note +export const hideShortcutsNote = () => { + try { + window.localStorage.setItem('coral:shortcutsNote', 'hide'); + } catch (e) { + + // above will fail in Safari private mode + } + + return {type: actions.HIDE_SHORTCUTS_NOTE}; +}; diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js index 3bd96abad..9365a76b6 100644 --- a/client/coral-admin/src/components/ActionButton.js +++ b/client/coral-admin/src/components/ActionButton.js @@ -1,17 +1,24 @@ -import React from 'react'; +import React, {PropTypes} from 'react'; import styles from './ModerationList.css'; import {Button} from 'coral-ui'; import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap'; -const ActionButton = ({type = '', ...props}) => { +const ActionButton = ({type = '', status, ...props}) => { + const typeName = type.toLowerCase(); + const active = ((type === 'REJECT' && status === 'REJECTED') || (type === 'APPROVE' && status === 'APPROVED')); + return ( ); }; +ActionButton.propTypes = { + status: PropTypes.string +}; + export default ActionButton; diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css index a030b6efa..73697d930 100644 --- a/client/coral-admin/src/components/ModerationKeysModal.css +++ b/client/coral-admin/src/components/ModerationKeysModal.css @@ -18,3 +18,47 @@ border-radius: 4px; border: 1px solid #999; } + +.callToAction { + position: fixed; + left: 10px; + bottom: 10px; + width: 280px; + height: 200px; + background: white; + padding: 15px; + box-sizing: border-box; + box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15); + + .ctaHeader { + font-size: 16px; + margin-bottom: 5px; + } + + ul { + padding-left: 0; + list-style: none; + margin: 0 0 10px 0; + } + + p, li { + font-size: 12px; + margin-bottom: 5px; + } + + li span:first-child, p:last-child span:first-child { + display: inline-block; + width: 120px; + } +} + +.closeButton { + float: right; + font-size: 20px; + cursor: pointer; +} + +.smallKey { + padding: 5px; + border: 1px solid #ccc; +} diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js index 5a951e588..3d43c621d 100644 --- a/client/coral-admin/src/components/ModerationKeysModal.js +++ b/client/coral-admin/src/components/ModerationKeysModal.js @@ -1,9 +1,11 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations.json'; -import React from 'react'; +import React, {PropTypes} 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,50 @@ const shortcuts = [ } ]; -export default ({open, onClose}) => ( - -

{lang.t('modqueue.shortcuts')}

-
- {shortcuts.map((shortcut, i) => ( - - - - - - - - {Object.keys(shortcut.shortcuts).map(key => ( - - - - - ))} - -
{lang.t(shortcut.title)}
{key}{lang.t(shortcut.shortcuts[key])}
- ))} -
-
-); +export default class ModerationKeysModal extends React.Component { -const lang = new I18n(translations); + static propTypes = { + hideShortcutsNote: PropTypes.func.isRequired, + shortcutsNoteVisible: PropTypes.string.isRequired + } + + render () { + const {open, onClose, hideShortcutsNote, shortcutsNoteVisible} = this.props; + return ( +
+
+
×
+

{lang.t('modqueue.mod-faster')}

+

{lang.t('modqueue.try-these')}:

+ +

{lang.t('modqueue.view-more-shortcuts')} {lang.t('modqueue.shift-key')} + /

+
+ +

{lang.t('modqueue.shortcuts')}

+
+ {shortcuts.map((shortcut, i) => ( + + + + + + + + {Object.keys(shortcut.shortcuts).map(key => ( + + + + + ))} + +
{lang.t(shortcut.title)}
{key}{lang.t(shortcut.shortcuts[key])}
+ ))} +
+
+
+ ); + } +} diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css index fc2ba9931..1e871f97c 100644 --- a/client/coral-admin/src/components/ModerationList.css +++ b/client/coral-admin/src/components/ModerationList.css @@ -188,3 +188,15 @@ margin: 0; width: 140px; } + +.approve__active { + box-shadow: none; + color: white; + background-color: #519954; +} + +.reject__active, .rejected__active { + color: white; + background-color: #D03235; + box-shadow: none; +} diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js index f50cbb439..14672146e 100644 --- a/client/coral-admin/src/constants/moderation.js +++ b/client/coral-admin/src/constants/moderation.js @@ -2,3 +2,4 @@ export const TOGGLE_MODAL = 'TOGGLE_MODAL'; export const SINGLE_VIEW = 'SINGLE_VIEW'; export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG'; export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG'; +export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE'; diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 43a9c513b..dffa4de26 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -10,7 +10,7 @@ import {banUser, setCommentStatus} from '../../graphql/mutations'; import {fetchSettings} from 'actions/settings'; import {updateAssets} from 'actions/assets'; -import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog} from 'actions/moderation'; +import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog, hideShortcutsNote} from 'actions/moderation'; import {Spinner} from 'coral-ui'; import BanUserDialog from '../../components/BanUserDialog'; @@ -187,6 +187,8 @@ class ModerationContainer extends Component { rejectComment={props.rejectComment} /> @@ -208,6 +210,7 @@ const mapDispatchToProps = dispatch => ({ fetchSettings: () => dispatch(fetchSettings()), showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)), hideBanUserDialog: () => dispatch(hideBanUserDialog(false)), + hideShortcutsNote: () => dispatch(hideShortcutsNote()), }); export default compose( diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index b18f239e4..6a06a6ca0 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js @@ -64,6 +64,7 @@ const Comment = ({actions = [], comment, ...props}) => { props.acceptComment({commentId: comment.id})} rejectComment={() => props.rejectComment({commentId: comment.id})} /> diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js index cf270543c..a40ac865f 100644 --- a/client/coral-admin/src/reducers/moderation.js +++ b/client/coral-admin/src/reducers/moderation.js @@ -6,7 +6,8 @@ const initialState = Map({ modalOpen: false, user: Map({}), commentId: null, - banDialog: false + banDialog: false, + shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show' }); export default function moderation (state = initialState, action) { @@ -31,6 +32,9 @@ export default function moderation (state = initialState, action) { case actions.SINGLE_VIEW: return state .set('singleView', !state.get('singleView')); + case actions.HIDE_SHORTCUTS_NOTE: + return state + .set('shortcutsNoteVisible', 'hide'); default : return state; } diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index f317b71a7..9e167232e 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -44,6 +44,10 @@ "close": "Close", "actions": "Actions", "navigation": "Navigation", + "mod-faster": "Moderate faster with keyboard shortcuts", + "try-these": "Try these", + "view-more-shortcuts": "View more shortcuts", + "shift-key": "⇧", "approve": "Approve comment", "reject": "Reject comment", "nextcomment": "Go to the next comment", @@ -226,6 +230,10 @@ "rejected": "rechazado", "flagged": "marcado", "shortcuts": "Atajos de teclado", + "mod-faster": "Moderar más rápido con atajos del teclado", + "try-these": "Intenta estos", + "view-more-shortcuts": "Ver más atajos", + "shift-key": "⇧", "close": "Cerrar", "emptyqueue": "No se encontro ningún usuario. Están escondidos.", "showshortcuts": "Mostrar atajos", diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css index 14ed64aa2..219b70a65 100644 --- a/client/coral-ui/components/Button.css +++ b/client/coral-ui/components/Button.css @@ -149,7 +149,7 @@ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09); width: 128px; -&:hover { + &:hover { color: white; background-color: #D03235; box-shadow: none;