add own class for popup when threedot click

This commit is contained in:
lukas 2021-01-26 19:14:47 +01:00
parent 009f21390e
commit 4e52688ff9
3 changed files with 59 additions and 8 deletions

View File

@ -4,6 +4,9 @@ import {Spinner} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import GlobalInfos from '../../utils/GlobalInfos';
import {callAPIPlain} from '../../utils/Api';
import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import QuickActionPop from '../QuickActionPop/QuickActionPop';
interface PreviewProps {
name: string;
@ -12,6 +15,7 @@ interface PreviewProps {
interface PreviewState {
previewpicture: string | null;
optionsvisible: boolean;
}
/**
@ -23,7 +27,8 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
super(props);
this.state = {
previewpicture: null
previewpicture: null,
optionsvisible: false
};
}
@ -38,9 +43,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<Link to={'/player/' + this.props.movie_id}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}>
<FontAwesomeIcon style={{
verticalAlign: 'middle',
fontSize: '25px'
}} icon={faEllipsisV} size='1x'/>
</div>
{this.popupvisible()}
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<Link to={'/player/' + this.props.movie_id}>
<div className={style.previewpic}>
{this.state.previewpicture !== null ?
<img className={style.previewimage}
@ -49,14 +61,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
<span className={style.loadAnimation}><Spinner animation='border'/></span>}
</div>
</Link>
<div className={style.previewbottom}>
</div>
</div>
</Link>
);
}
popupvisible(): JSX.Element {
if (this.state.optionsvisible)
return (<QuickActionPop>heeyyho</QuickActionPop>);
else
return <></>;
}
}
/**

View File

@ -0,0 +1,24 @@
import React from 'react';
import style from './QuickActionPopup.module.css'
interface props{
}
class QuickActionPop extends React.Component<props> {
constructor(props: props) {
super(props);
this.state = {};
}
render(): JSX.Element {
return (
<div className={style.quickaction}>
<div onClick={():void => {console.log('clicked');}}>testi</div>testi
</div>
);
}
}
export default QuickActionPop;

View File

@ -0,0 +1,8 @@
.quickaction {
background-color: white;
width: 90px;
height: 120px;
z-index: 2;
position: absolute;
}