mirror of https://github.com/mue/mue.git
156 lines
4.3 KiB
JavaScript
156 lines
4.3 KiB
JavaScript
// TODO: make it work with pins or on click or smth
|
|
import variables from 'config/variables';
|
|
import { PureComponent, memo, useState } from 'react';
|
|
|
|
import { MdPlaylistRemove, MdOutlineApps } from 'react-icons/md';
|
|
import { Tooltip } from 'components/Elements';
|
|
|
|
import { shift, useFloating } from '@floating-ui/react-dom';
|
|
import EventBus from 'utils/eventbus';
|
|
|
|
class Apps extends PureComponent {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
apps: JSON.parse(localStorage.getItem('applinks')),
|
|
visibility: localStorage.getItem('appsPinned') === 'true' ? 'visible' : 'hidden',
|
|
marginLeft: localStorage.getItem('refresh') === 'false' ? '-200px' : '-130px',
|
|
showApps: localStorage.getItem('appsPinned') === 'true',
|
|
};
|
|
}
|
|
|
|
setZoom() {
|
|
this.setState({
|
|
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
EventBus.on('refresh', (data) => {
|
|
if (data === 'navbar') {
|
|
this.forceUpdate();
|
|
try {
|
|
this.setZoom();
|
|
} catch (e) {}
|
|
}
|
|
});
|
|
|
|
this.setZoom();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
EventBus.off('refresh');
|
|
}
|
|
|
|
showApps() {
|
|
this.setState({
|
|
showApps: true,
|
|
});
|
|
}
|
|
|
|
hideApps() {
|
|
this.setState({
|
|
showApps: localStorage.getItem('AppsPinned') === 'true',
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const appsInfo = this.state.apps;
|
|
|
|
return (
|
|
<div className="notes" onMouseLeave={() => this.hideApps()} onFocus={() => this.showApps()}>
|
|
<button
|
|
className="navbarButton"
|
|
onMouseEnter={() => this.showApps()}
|
|
onFocus={() => this.hideApps()}
|
|
onBlur={() => this.showApps()}
|
|
ref={this.props.appsRef}
|
|
style={{ fontSize: this.state.zoomFontSize }}
|
|
>
|
|
<MdOutlineApps className="topicons" />
|
|
</button>
|
|
{this.state.showApps && (
|
|
<span
|
|
className="notesContainer"
|
|
ref={this.props.floatRef}
|
|
style={{
|
|
position: this.props.position,
|
|
top: this.props.yPosition ?? '44px',
|
|
left: this.props.xPosition ?? '',
|
|
}}
|
|
>
|
|
<div className="flexTodo">
|
|
<div className="topBarNotes" style={{ display: 'flex' }}>
|
|
<MdOutlineApps />
|
|
<span>{variables.getMessage('widgets.navbar.apps.title')}</span>
|
|
</div>
|
|
</div>
|
|
{appsInfo.length > 0 ? (
|
|
<div className="appsShortcutContainer">
|
|
{appsInfo.map((info, i) => (
|
|
<Tooltip
|
|
title={info.name.split(' ')[0]}
|
|
subtitle={info.name.split(' ').slice(1).join(' ')}
|
|
key={i}
|
|
>
|
|
<a href={info.url} className="appsIcon">
|
|
<img
|
|
src={
|
|
info.icon === ''
|
|
? `https://icon.horse/icon/ ${info.url.replace('https://', '').replace('http://', '')}`
|
|
: info.icon
|
|
}
|
|
width="40px"
|
|
height="40px"
|
|
alt="Google"
|
|
/>
|
|
<span>{info.name}</span>
|
|
</a>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="todosEmpty">
|
|
<div className="emptyNewMessage">
|
|
<MdPlaylistRemove />
|
|
<span className="title">
|
|
{variables.language.getMessage(
|
|
variables.languagecode,
|
|
'widgets.navbar.apps.no_apps',
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function AppsWrapper() {
|
|
const [reference, setReference] = useState(null);
|
|
|
|
const { x, y, refs, strategy } = useFloating({
|
|
placement: 'bottom',
|
|
middleware: [shift()],
|
|
elements: {
|
|
reference,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Apps
|
|
appsRef={setReference}
|
|
floatRef={refs.setFloating}
|
|
position={strategy}
|
|
xPosition={x}
|
|
yPosition={y}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const MemoizedAppsWrapper = memo(AppsWrapper);
|
|
export { MemoizedAppsWrapper as default, MemoizedAppsWrapper as Apps };
|