...

6 files changed, 73 insertions, 15 deletions

diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 55c7c95f..2c92d6b2 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -7,6 +7,7 @@
   "description": "Timeline app.",

   "dependencies": {

     "@microsoft/signalr": "^5.0.7",

+    "@popperjs/core": "^2.9.2",

     "axios": "^0.21.1",

     "bootstrap": "^5.0.2",

     "bootstrap-icons": "^1.5.0",

@@ -23,6 +24,7 @@
     "react-color": "^2.19.3",

     "react-dom": "^17.0.2",

     "react-i18next": "^11.11.0",

+    "react-popper": "^2.2.5",

     "react-responsive": "^8.2.0",

     "react-router": "^5.2.0",

     "react-router-dom": "^5.2.0",

diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index 7523247d..04243fa3 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next";
 import { convertI18nText, I18nText } from "@/common";
 import { PaletteColorType } from "@/palette";
 
+import "./Menu.css";
+
 export type MenuItem =
   | {
       type: "divider";
@@ -19,17 +21,23 @@ export type MenuItem =
 
 export type MenuItems = MenuItem[];
 
-export interface MenuProps {
+export type MenuProps = {
   items: MenuItems;
-  className?: string;
   onItemClicked?: () => void;
-}
+  className?: string;
+  style?: React.CSSProperties;
+};
 
-const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
+export default function _Menu({
+  items,
+  onItemClicked,
+  className,
+  style,
+}: MenuProps): React.ReactElement | null {
   const { t } = useTranslation();
 
   return (
-    <div className={classnames("cru-menu", className)}>
+    <div className={classnames("cru-menu", className)} style={style}>
       {items.map((item, index) => {
         if (item.type === "divider") {
           return <div key={index} className="cru-menu-divider" />;
@@ -61,6 +69,4 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
       })}
     </div>
   );
-};
-
-export default Menu;
+}
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
new file mode 100644
index 00000000..8465a1bb
--- /dev/null
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -0,0 +1,3 @@
+.cru-popup-menu-menu-container {

+

+}

diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 0d447f09..50f80a91 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -1,17 +1,63 @@
+import classNames from "classnames";
 import React from "react";
+import { usePopper } from "react-popper";
 
 import Menu, { MenuItems } from "./Menu";
 
+import "./PopupMenu.css";
+
 export interface PopupMenuProps {
   items: MenuItems;
-  children: React.ReactElement;
+  children?: React.ReactNode;
+  containerClassName?: string;
+  containerStyle?: React.CSSProperties;
 }
 
-export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
+const PopupMenu: React.FC<PopupMenuProps> = ({
+  items,
+  children,
+  containerClassName,
+  containerStyle,
+}) => {
   const [show, setShow] = React.useState<boolean>(false);
-  const toggle = (): void => setShow(!show);
 
-  // TODO:
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [arrowElement, setArrowElement] = React.useState<HTMLDivElement | null>(
+    null
+  );
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+  });
 
-  return <Menu items={items} onItemClicked={() => setShow(false)} />;
+  return (
+    <>
+      <div
+        ref={setReferenceElement}
+        className={classNames(
+          "cru-popup-menu-trigger-container",
+          containerClassName
+        )}
+        style={containerStyle}
+        onClick={() => setShow(true)}
+      >
+        {children}
+      </div>
+      {show ? (
+        <div
+          ref={setPopperElement}
+          className="cru-popup-menu-menu-container"
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <Menu items={items} />
+          <div ref={setArrowElement} style={styles.arrow} />
+        </div>
+      ) : null}
+    </>
+  );
 };
+
+export default PopupMenu;
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 78af1131..75f2d400 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -17,7 +17,8 @@ import CollapseButton from "./CollapseButton";
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
 import ConnectionStatusBadge from "./ConnectionStatusBadge";
-import { MenuItems, PopupMenu } from "../common/menu/Menu";
+import { MenuItems } from "../common/menu/Menu";
+import PopupMenu from "../common/menu/PopupMenu";
 import FullPageDialog from "../common/dailog/FullPageDialog";
 import Card from "../common/Card";
 
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index 1e6591c0..e2045429 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -16,7 +16,7 @@ import { base64 } from "@/http/common";
 
 import BlobImage from "../common/BlobImage";
 import LoadingButton from "../common/button/LoadingButton";
-import { PopupMenu } from "../common/menu/Menu";
+import PopupMenu from "../common/menu/PopupMenu";
 import Card from "../common/Card";
 import MarkdownPostEdit from "./MarkdownPostEdit";
 import TimelineLine from "./TimelineLine";