add own class for popup when threedot click

src/elements/Preview/Preview.tsx

@@ -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.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}>
                         {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>
-                    <div className={style.previewbottom}>
+                </Link>
+                <div className={style.previewbottom}>
 
-                    </div>
                 </div>
-            </Link>
+            </div>
-
         );
     }
+
+
+    popupvisible(): JSX.Element {
+        if (this.state.optionsvisible)
+            return (<QuickActionPop>heeyyho</QuickActionPop>);
+        else
+            return <></>;
+    }
 }
 
 /**

src/elements/QuickActionPop/QuickActionPop.tsx

@@ -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;

src/elements/QuickActionPop/QuickActionPopup.module.css

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