Skip to content

help-box-spike: moved ToolTip next to settings icon #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pietrop wants to merge 1 commit into from
Closed

help-box-spike: moved ToolTip next to settings icon #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 0 additions & 22 deletions src/lib/TranscriptEditor/TimedTextEditor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import Tooltip from 'react-simple-tooltip';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle, faMousePointer, faICursor, faUserEdit, faKeyboard, faSave } from '@fortawesome/free-solid-svg-icons';

import {
Editor,
Expand Down Expand Up @@ -405,13 +401,6 @@ class TimedTextEditor extends React.Component {
}

render() {
const helpMessage = <div className={ style.helpMessage }>
<span><FontAwesomeIcon className={ style.icon } icon={ faMousePointer } />Double click on a word or timestamp to jump to that point in the video.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faICursor } />Start typing to edit text.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faUserEdit } />You can add and change names of speakers in your transcript.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faKeyboard } />Use keyboard shortcuts for quick control.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faSave } />Save & export to get a copy to your desktop.</span>
</div>;

const currentWord = this.getCurrentWord();
const highlightColour = '#69e3c2';
Expand Down Expand Up @@ -447,17 +436,6 @@ class TimedTextEditor extends React.Component {

return (
<section>
<Tooltip
className={ style.help }
content={ helpMessage }
fadeDuration={ 250 }
fadeEasing={ 'ease-in' }
placement={ 'bottom' }
radius={ 5 }>
<FontAwesomeIcon className={ style.icon } icon={ faQuestionCircle } />
How does this work?
</Tooltip>

{ this.props.transcriptData !== null ? editor : null }
</section>
);
Expand Down
19 changes: 0 additions & 19 deletions src/lib/TranscriptEditor/TimedTextEditor/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,3 @@ https://github.com/facebook/draft-js/issues/528
}
}

.help {
cursor: pointer;
float: right;
padding-right: 0.5em;
padding-left: 11em;
margin: 0.5em 0;
}

.icon {
color: color-labs-red;
margin-right: 0.5em;
}

.helpMessage span {
display: block;
font-size: 0.8em;
font-weight: lighter;
margin-top: 1em;
}
28 changes: 27 additions & 1 deletion src/lib/TranscriptEditor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog, faKeyboard } from '@fortawesome/free-solid-svg-icons';
import { faCog, faKeyboard, faQuestionCircle, faMousePointer, faICursor, faUserEdit, faSave } from '@fortawesome/free-solid-svg-icons';

import Tooltip from 'react-simple-tooltip';

import TimedTextEditor from './TimedTextEditor';
import MediaPlayer from './MediaPlayer';
Expand Down Expand Up @@ -156,11 +158,35 @@ class TranscriptEditor extends React.Component {
handleShortcutsToggle={ this.handleShortcutsToggle }
/>;

const helpMessage = <div className={ style.helpMessage }>
<span><FontAwesomeIcon className={ style.icon } icon={ faMousePointer } />Double click on a word or timestamp to jump to that point in the video.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faICursor } />Start typing to edit text.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faUserEdit } />You can add and change names of speakers in your transcript.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faKeyboard } />Use keyboard shortcuts for quick control.</span>
<span><FontAwesomeIcon className={ style.icon } icon={ faSave } />Save & export to get a copy to your desktop.</span>
</div>;

const tooltip = <Tooltip
className={ style.help }
content={ helpMessage }
fadeDuration={ 250 }
fadeEasing={ 'ease-in' }
placement={ 'bottom' }
radius={ 5 }
border={ '#ffffff' }
background={ '#f2f2f2' }
color={ '#000000' }
>
<FontAwesomeIcon className={ style.icon } icon={ faQuestionCircle } />
How does this work?
</Tooltip>;

return (
<div className={ style.container }>
<header className={ style.header }>
{ this.state.showSettings ? settings : null }
{ this.state.showShortcuts ? shortcuts : null }
{tooltip}
</header>

<aside className={ style.aside }>{ this.props.mediaUrl ? mediaPlayer : null }</aside>
Expand Down
26 changes: 26 additions & 0 deletions src/lib/TranscriptEditor/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,29 @@
::moz-selection {
background: color-subt-green;
}

.help {
cursor: pointer;
float: right;
padding-right: 0.5em;
padding-left: 11em;
margin: 0.5em 0;
color: white;
display: block;
/* font-size: 0.8em; */
font-weight: lighter;
margin-top: 0.5em;
margin-right: 6em;
}

.icon {
color: color-labs-red;
margin-right: 0.5em;
}

.helpMessage span {
display: block;
/* font-size: 0.8em; */
font-weight: lighter;
margin-top: 1em;
}