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 {Link} from 'react-router-dom';
import GlobalInfos from '../../utils/GlobalInfos'; import GlobalInfos from '../../utils/GlobalInfos';
import {callAPIPlain} from '../../utils/Api'; 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 { interface PreviewProps {
name: string; name: string;
@ -12,6 +15,7 @@ interface PreviewProps {
interface PreviewState { interface PreviewState {
previewpicture: string | null; previewpicture: string | null;
optionsvisible: boolean;
} }
/** /**
@ -23,7 +27,8 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
super(props); super(props);
this.state = { this.state = {
previewpicture: null previewpicture: null,
optionsvisible: false
}; };
} }
@ -38,9 +43,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
return ( return (
<Link to={'/player/' + this.props.movie_id}> <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}> <div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div> <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}> <div className={style.previewpic}>
{this.state.previewpicture !== null ? {this.state.previewpicture !== null ?
<img className={style.previewimage} <img className={style.previewimage}
@ -49,14 +61,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
<span className={style.loadAnimation}><Spinner animation='border'/></span>} <span className={style.loadAnimation}><Spinner animation='border'/></span>}
</div> </div>
<div className={style.previewbottom}> </Link>
<div className={style.previewbottom}>
</div>
</div> </div>
</Link> </div>
); );
} }
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;
}