2021-09-10 15:38:53 +00:00
|
|
|
import variables from 'modules/variables';
|
2022-10-30 16:56:26 +00:00
|
|
|
import { PureComponent, memo } from 'react';
|
2022-04-08 13:48:36 +00:00
|
|
|
import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
|
|
|
|
import { useFloating, shift } from '@floating-ui/react-dom';
|
2021-09-10 18:00:45 +00:00
|
|
|
import TextareaAutosize from '@mui/material/TextareaAutosize';
|
2021-04-22 21:10:04 +00:00
|
|
|
import { toast } from 'react-toastify';
|
2022-04-18 18:50:16 +00:00
|
|
|
import Tooltip from '../../helpers/tooltip/Tooltip';
|
2022-04-08 13:48:36 +00:00
|
|
|
import { saveFile } from 'modules/helpers/settings/modals';
|
2022-08-31 20:54:03 +00:00
|
|
|
import EventBus from 'modules/helpers/eventbus';
|
2021-04-22 21:10:04 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
class Notes extends PureComponent {
|
2021-03-23 13:10:34 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
2021-03-17 13:01:53 +00:00
|
|
|
this.state = {
|
2021-07-12 10:34:05 +00:00
|
|
|
notes: localStorage.getItem('notes') || '',
|
2022-04-08 13:48:36 +00:00
|
|
|
visibility: localStorage.getItem('notesPinned') === 'true' ? 'visible' : 'hidden',
|
|
|
|
showNotes: localStorage.getItem('notesPinned') === 'true' ? true : false,
|
2020-10-17 17:46:27 +00:00
|
|
|
};
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
|
|
|
|
2022-08-31 20:54:03 +00:00
|
|
|
setZoom() {
|
|
|
|
this.setState({
|
2022-11-06 11:59:59 +00:00
|
|
|
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
|
|
|
|
});
|
2022-08-31 20:54:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
EventBus.on('refresh', (data) => {
|
2022-10-30 16:43:08 +00:00
|
|
|
if (data === 'navbar') {
|
2022-08-31 20:54:03 +00:00
|
|
|
this.forceUpdate();
|
|
|
|
try {
|
|
|
|
this.setZoom();
|
|
|
|
} catch (e) {}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setZoom();
|
|
|
|
}
|
|
|
|
|
2022-10-30 16:43:08 +00:00
|
|
|
componentWillUnmount() {
|
|
|
|
EventBus.off('refresh');
|
|
|
|
}
|
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
setNotes = (e) => {
|
|
|
|
localStorage.setItem('notes', e.target.value);
|
|
|
|
this.setState({
|
2022-04-08 13:48:36 +00:00
|
|
|
notes: e.target.value,
|
2021-03-17 13:01:53 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
showNotes() {
|
|
|
|
this.setState({
|
|
|
|
showNotes: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
hideNotes() {
|
2022-08-31 12:31:49 +00:00
|
|
|
this.setState({
|
2022-11-06 11:59:59 +00:00
|
|
|
showNotes: localStorage.getItem('notesPinned') === 'true',
|
2022-08-31 12:31:49 +00:00
|
|
|
});
|
2022-04-08 13:48:36 +00:00
|
|
|
}
|
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
pin() {
|
2021-09-28 22:04:04 +00:00
|
|
|
variables.stats.postEvent('feature', 'Notes pin');
|
2022-11-06 11:59:59 +00:00
|
|
|
const notesPinned = localStorage.getItem('notesPinned') === 'true';
|
2022-08-31 12:31:49 +00:00
|
|
|
localStorage.setItem('notesPinned', !notesPinned);
|
|
|
|
this.setState({
|
|
|
|
showNotes: !notesPinned,
|
|
|
|
});
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
2020-10-17 17:46:27 +00:00
|
|
|
|
2021-04-22 21:10:04 +00:00
|
|
|
copy() {
|
2021-09-28 22:04:04 +00:00
|
|
|
variables.stats.postEvent('feature', 'Notes copied');
|
2021-07-12 10:34:05 +00:00
|
|
|
navigator.clipboard.writeText(this.state.notes);
|
2022-08-26 09:45:32 +00:00
|
|
|
toast(variables.getMessage('toasts.notes'));
|
2021-04-22 21:10:04 +00:00
|
|
|
}
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
download() {
|
|
|
|
const notes = localStorage.getItem('notes');
|
|
|
|
if (!notes || notes === '') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
variables.stats.postEvent('feature', 'Notes download');
|
|
|
|
saveFile(this.state.notes, 'mue-notes.txt', 'text/plain');
|
|
|
|
}
|
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
render() {
|
2021-08-25 12:28:41 +00:00
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="notes" onMouseLeave={() => this.hideNotes()} onFocus={() => this.showNotes()}>
|
|
|
|
<button
|
|
|
|
className="first"
|
|
|
|
onMouseEnter={() => this.showNotes()}
|
|
|
|
onFocus={() => this.showNotes()}
|
|
|
|
onBlur={() => this.hideNotes()}
|
|
|
|
ref={this.props.notesRef}
|
2022-08-31 20:54:03 +00:00
|
|
|
style={{ fontSize: this.state.zoomFontSize }}
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
2022-11-06 11:59:59 +00:00
|
|
|
<MdAssignment className="topicons" />
|
2022-04-08 13:48:36 +00:00
|
|
|
</button>
|
|
|
|
{this.state.showNotes && (
|
|
|
|
<span
|
|
|
|
className="notesContainer"
|
|
|
|
ref={this.props.floatRef}
|
|
|
|
style={{
|
|
|
|
position: this.props.position,
|
|
|
|
top: this.props.yPosition ?? '44',
|
|
|
|
left: this.props.xPosition ?? '',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="flexNotes">
|
|
|
|
<div className="topBarNotes" style={{ display: 'flex' }}>
|
|
|
|
<MdAssignment />
|
2022-08-26 09:45:32 +00:00
|
|
|
<span>{variables.getMessage('widgets.navbar.notes.title')}</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</div>
|
|
|
|
<div className="notes-buttons">
|
2022-08-26 09:45:32 +00:00
|
|
|
<Tooltip title={variables.getMessage('widgets.navbar.todo.pin')}>
|
2022-04-08 13:48:36 +00:00
|
|
|
<button onClick={() => this.pin()}>
|
|
|
|
<MdPushPin />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
2022-08-26 09:45:32 +00:00
|
|
|
<Tooltip title={variables.getMessage('widgets.quote.copy')}>
|
2022-04-08 13:48:36 +00:00
|
|
|
<button onClick={() => this.copy()}>
|
|
|
|
<MdContentCopy />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
2022-08-26 09:45:32 +00:00
|
|
|
<Tooltip title={variables.getMessage('widgets.background.download')}>
|
2022-04-08 13:48:36 +00:00
|
|
|
<button onClick={() => this.download()}>
|
|
|
|
<MdDownload />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
<TextareaAutosize
|
2022-08-26 10:44:24 +00:00
|
|
|
placeholder={variables.getMessage('widgets.navbar.notes.placeholder')}
|
2022-04-08 13:48:36 +00:00
|
|
|
value={this.state.notes}
|
|
|
|
onChange={this.setNotes}
|
|
|
|
minRows={5}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</div>
|
2021-03-17 13:01:53 +00:00
|
|
|
);
|
|
|
|
}
|
2020-10-17 17:46:27 +00:00
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
|
2022-10-30 16:56:26 +00:00
|
|
|
function NotesWrapper() {
|
2022-04-08 13:48:36 +00:00
|
|
|
const { x, y, reference, floating, strategy } = useFloating({
|
|
|
|
placement: 'bottom',
|
|
|
|
middleware: [shift()],
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Notes
|
|
|
|
notesRef={reference}
|
|
|
|
floatRef={floating}
|
|
|
|
position={strategy}
|
|
|
|
xPosition={x}
|
|
|
|
yPosition={y}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2022-11-06 11:59:59 +00:00
|
|
|
export default memo(NotesWrapper);
|