From 9ffc02123e72cbca4249585c28ebf99baab403a5 Mon Sep 17 00:00:00 2001
From: GiordanoT <giordanotinella@gmail.com>
Date: Sat, 28 Oct 2023 14:48:48 +0200
Subject: [PATCH] navbar and support button

---
 src/App.tsx                          |  2 +
 src/components/helper/Helper.tsx     | 23 +++++++++++
 src/components/helper/style.scss     | 36 +++++++++++++++++
 src/components/navbar/Navbar.tsx     | 59 ++++++++++++++++++++--------
 src/components/navbar/style.scss     | 12 +++---
 src/components/navbar/tabs/Edit.tsx  |  6 +--
 src/components/navbar/tabs/File.tsx  | 17 ++++----
 src/components/navbar/tabs/Share.tsx |  7 ++--
 src/pages/Editor.tsx                 |  5 ++-
 src/popup/Cleaning.tsx               | 17 --------
 src/popup/style.scss                 | 20 ----------
 11 files changed, 128 insertions(+), 76 deletions(-)
 create mode 100644 src/components/helper/Helper.tsx
 create mode 100644 src/components/helper/style.scss
 delete mode 100644 src/popup/Cleaning.tsx
 delete mode 100644 src/popup/style.scss

diff --git a/src/App.tsx b/src/App.tsx
index d118075c2..ebc4722de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import Navbar from "./components/navbar/Navbar";
 import {FakeStateProps} from "./joiner/types";
 import Dashboard from "./pages/Dashboard";
 import Editor from "./pages/Editor";
+import Helper from "./components/helper/Helper";
 
 function App(props: AllProps) {
     const debug = props.debug;
@@ -19,6 +20,7 @@ function App(props: AllProps) {
                 onClick={e => statehistory.globalcanundostate = true}>
         {isLoading && <Loader />}
         <Navbar />
+        <Helper />
         {user.project ? <Editor /> : <Dashboard />}
     </div>);
 
diff --git a/src/components/helper/Helper.tsx b/src/components/helper/Helper.tsx
new file mode 100644
index 000000000..91ea2b8ae
--- /dev/null
+++ b/src/components/helper/Helper.tsx
@@ -0,0 +1,23 @@
+import './style.scss'
+import React from "react";
+import {useStateIfMounted} from "use-state-if-mounted";
+
+interface Props {}
+function Helper(props: Props) {
+    const [flag, setFlag] = useStateIfMounted(false);
+
+    return(<section className={'helper'} >
+        {flag && <div className={'helper-menu border'}>
+            <div tabIndex={-1} onClick={e => alert('ok1')} className={'helper-item'}>Test 1</div>
+            <div tabIndex={-1} onClick={e => alert('ok2')} className={'helper-item'}>Test 2</div>
+            <hr />
+            <div tabIndex={-1} onClick={e => setFlag(false)} className={'text-danger helper-item'}>Close</div>
+        </div>}
+        <div tabIndex={-1} onClick={e => setFlag(!flag)}
+             className={'helper-icon bg-dark circle border d-flex justify-content-center align-items-center'}>
+            <label style={{cursor: 'pointer'}} className={'text-white'}>?</label>
+        </div>
+    </section>)
+}
+
+export default Helper;
diff --git a/src/components/helper/style.scss b/src/components/helper/style.scss
new file mode 100644
index 000000000..1ce7b3657
--- /dev/null
+++ b/src/components/helper/style.scss
@@ -0,0 +1,36 @@
+.helper {
+  position: absolute;
+  z-index: 999;
+  bottom: 0; right: 0;
+  margin: 1rem;
+}
+
+.helper-menu {
+  display: block;
+  background-color: white;
+  margin-bottom: 2rem;
+}
+
+.helper-item {
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 0.25rem 3rem 0.25rem 1rem;
+}
+.helper-item:hover {
+  background-color: #F1F1F1;
+}
+
+.helper-icon {
+  cursor: pointer;
+  width: 1.5rem; height: 1.5rem;
+  position: absolute;
+  bottom: 0; right: 0;
+}
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 2a101f92b..9777c9b2e 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import './style.scss';
-import {Dispatch, ReactElement} from 'react';
+import React, {Dispatch, ReactElement} from 'react';
 import {connect} from 'react-redux';
 import {DState, DUser, LUser} from '../../joiner';
 import File from './tabs/File';
@@ -17,26 +17,53 @@ function NavbarComponent(props: AllProps) {
     return(<nav className={'navbar navbar-expand-lg'}>
         <ul className={'navbar-nav'}>
             {(project) ?
-                <>
-                    <File />
-                    <Edit />
-                    <Share />
-                </> :
-                <>
-
-                </>
+                <li className={'nav-item dropdown'}>
+                    <i tabIndex={-1} className={'fs-3 dropdown-toggle bi bi-list'} data-bs-toggle={'dropdown'} />
+                    <ul className={'dropdown-menu'}>
+                        <li tabIndex={-1} className={'dropdown-item'}>
+                            Test
+                        </li>
+                        <hr />
+                        <File />
+                        <Edit />
+                        <Share />
+                        <hr />
+                        <li tabIndex={-1} onClick={e => user.project = null} className={'text-danger dropdown-item'}>
+                            Close Project
+                        </li>
+                    </ul>
+                </li> :
+                <li className={'nav-item dropdown'}>
+                    <i tabIndex={-1} className={'fs-3 dropdown-toggle bi bi-list'} data-bs-toggle={'dropdown'} />
+                    <ul className={'dropdown-menu'}>
+                        <li tabIndex={-1} className={'dropdown-item'}>
+                            Test
+                        </li>
+                    </ul>
+                </li>
             }
-            {debug && <li className={'d-block ms-1 m-auto'}>
-                <img width={30} height={30} src={Debug} />
-            </li>}
         </ul>
         <ul className={'navbar-nav ms-auto'}>
-            <li className={'d-flex'}>
-                <b className={'my-auto me-5'}>{user.username}</b>
-                <img width={80} height={40} src={Logo} />
+            <li className={'nav-item dropdown'}>
+                <div tabIndex={-1} style={{cursor: 'pointer', width: '2rem', height: '2rem'}} data-bs-toggle={'dropdown'}
+                     className={'dropdown-toggle bg-primary circle border d-flex justify-content-center align-items-center'}>
+                    <label style={{cursor: 'pointer'}} className={'text-white'}>A</label>
+                </div>
+                <ul className={'dropdown-menu'}>
+                    <li tabIndex={-1} className={'dropdown-item'}>
+                        Test
+                    </li>
+                </ul>
+            </li>
+            <li className={'nav-item'}>
+                <button style={{backgroundColor: '#9746fd', fontSize: '0.85rem'}} className={'text-white btn p-1'}>
+                    Share
+                </button>
             </li>
+            {debug && <li className={'nav-item'}>
+                <img alt={'debug'} width={25} height={25} src={Debug} />
+            </li>}
         </ul>
-
     </nav>);
 
 }
diff --git a/src/components/navbar/style.scss b/src/components/navbar/style.scss
index 120f6be7a..cffeb9d73 100644
--- a/src/components/navbar/style.scss
+++ b/src/components/navbar/style.scss
@@ -4,17 +4,18 @@
 }
 
 .nav-item {
-  padding: 0.25rem 0.75rem;
+  padding: 0 0.75rem;
   border-radius: 3px;
   font-size: 0.9rem;
   cursor: pointer;
   margin: auto;
 }
 .nav-item:hover, .nav-item:focus-within {
-  color: #ED474A;
+  color: black;
 }
 
 .dropdown-item {
+  display: flex;
   font-size: 0.8rem;
   cursor: pointer;
 }
@@ -28,19 +29,20 @@
 .nav-item .submenu {
   display: none;
   position: absolute;
-  left:100%; top:-7px;
+  left: 100%; top: 0;
 }
 .nav-item .submenu-left {
-  right:100%; left:auto;
+  right: 100%; left: auto;
 }
 .dropdown-menu > li:hover {
   background-color: #F1F1F1
 }
-.dropdown-menu > li:hover > .submenu{
+.dropdown-menu > li:hover > .submenu {
   display: block;
 }
 
 .dropdown-menu {
+  padding: 0;
   border-radius: 0;
 }
 
diff --git a/src/components/navbar/tabs/Edit.tsx b/src/components/navbar/tabs/Edit.tsx
index 99f4e920b..0177b0c0d 100644
--- a/src/components/navbar/tabs/Edit.tsx
+++ b/src/components/navbar/tabs/Edit.tsx
@@ -15,9 +15,9 @@ function EditComponent(props: AllProps) {
         RedoAction.new(index + 1);
     }
 
-    return(<li className={'nav-item dropdown'}>
-        <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>Edit</div>
-        <ul className={'dropdown-menu'}>
+    return(<li className={'dropdown-item'}>Edit
+        <i className={'ms-auto bi bi-caret-right-fill'} />
+        <ul className={'submenu dropdown-menu'}>
             <li tabIndex={-1} onClick={e => doUndo(0)} className={'dropdown-item'}>Undo ({undo.length})</li>
             <li tabIndex={-1} onClick={e => doRedo(0)} className={'dropdown-item'}>Redo ({redo.length})</li>
         </ul>
diff --git a/src/components/navbar/tabs/File.tsx b/src/components/navbar/tabs/File.tsx
index b9278498c..125dae42d 100644
--- a/src/components/navbar/tabs/File.tsx
+++ b/src/components/navbar/tabs/File.tsx
@@ -58,15 +58,15 @@ function FileComponent(props: AllProps) {
     const exportLayout = () => {SaveManager.exportLayout_click(false)}
     const importLayout = () => {SaveManager.importLayout_click(false)}
 
-    return(<li className={'nav-item dropdown'}>
-        <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>File</div>
-        <ul className={'dropdown-menu'}>
+    return(<li className={'dropdown-item'}>File
+        <i className={'ms-auto bi bi-caret-right-fill'} />
+        <ul className={'submenu dropdown-menu'}>
             <li tabIndex={-1} className={'dropdown-item'}>New
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     <li tabIndex={-1} onClick={createM2} className={'dropdown-item'}>Metamodel</li>
                     {metamodels.length > 0 && <li tabIndex={-1} className={'dropdown-item'}>Model
-                        <i className={'ms-1 bi bi-arrow-right'}></i>
+                        <i className={'ms-auto bi bi-caret-right-fill'} />
                         <ul className={'submenu dropdown-menu'}>
                             {metamodels.map((metamodel, index) => {
                                 return(<li key={index} tabIndex={-1} onClick={e => createM1(metamodel)} className={'dropdown-item'}>
@@ -78,7 +78,7 @@ function FileComponent(props: AllProps) {
                 </ul>
             </li>
             {elements.length > 0 && <li tabIndex={-1} className={'dropdown-item'}>Open
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     {elements.map((m, index) => {
                         return(<li key={index} tabIndex={-1} onClick={e => open(m)} className={'dropdown-item'}>
@@ -90,7 +90,7 @@ function FileComponent(props: AllProps) {
             <li tabIndex={-1} onClick={save} className={'dropdown-item'}>Save</li>
             <li tabIndex={-1} onClick={load} className={'dropdown-item'}>Load</li>
             <li tabIndex={-1} className={'dropdown-item'}>Export
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     <li tabIndex={-1} onClick={exportJson} className={'dropdown-item'}>JSON</li>
                     <li tabIndex={-1} onClick={exportXml} className={'dropdown-item'}>XML</li>
@@ -98,14 +98,13 @@ function FileComponent(props: AllProps) {
                 </ul>
             </li>
             <li tabIndex={-1} className={'dropdown-item'}>Import
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     <li tabIndex={-1} onClick={importJson} className={'dropdown-item'}>JSON</li>
                     <li tabIndex={-1} onClick={importXml} className={'dropdown-item'}>XML</li>
                     <li tabIndex={-1} onClick={importLayout} className={'dropdown-item'}>Layout</li>
                 </ul>
             </li>
-            <li tabIndex={-1} onClick={e => user.project = null} className={'text-danger dropdown-item'}>Close Project</li>
         </ul>
     </li>);
 }
diff --git a/src/components/navbar/tabs/Share.tsx b/src/components/navbar/tabs/Share.tsx
index e42c9e7d7..5dcbe0c94 100644
--- a/src/components/navbar/tabs/Share.tsx
+++ b/src/components/navbar/tabs/Share.tsx
@@ -16,10 +16,9 @@ function ShareComponent(props: AllProps) {
     const quit = async() => {
         window.location.replace(root);
     }
-
-    return(<li className={'nav-item dropdown'}>
-        <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>Share</div>
-        <ul className={'dropdown-menu'}>
+    return(<li className={'dropdown-item'}>Share
+        <i className={'ms-auto bi bi-caret-right-fill'} />
+        <ul className={'submenu dropdown-menu'}>
             {!room && <li tabIndex={-1} onClick={create} className={'dropdown-item'}>Collaborative</li>}
             {room && <li tabIndex={-1} onClick={quit} className={'dropdown-item'}>Quit</li>}
         </ul>
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index 8de48075c..1edffc8da 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -1,14 +1,15 @@
-import React, {Dispatch, ReactElement} from 'react';
+import {Dispatch, ReactElement} from 'react';
 import {connect} from 'react-redux';
 import {DState, DUser, LUser} from '../joiner';
 import {FakeStateProps} from '../joiner/types';
 import Dock from '../components/abstract/Dock';
 
+
 function EditorComponent(props: AllProps) {
     const user = props.user;
     const project = user.project;
 
-    return (<Dock />);
+    return(<Dock />);
 }
 interface OwnProps {}
 interface StateProps {user: LUser}
diff --git a/src/popup/Cleaning.tsx b/src/popup/Cleaning.tsx
deleted file mode 100644
index 1ea97afee..000000000
--- a/src/popup/Cleaning.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import './style.scss';
-import {Oval} from "react-loader-spinner";
-import React from "react";
-
-function Cleaning() {
-    return(<div className={'popup-container'}>
-        <div className={'popup'}>
-            <label className={'d-block text-center mt-3'}>
-                <b style={{color: '#475e6c'}}>CLEANING...</b>
-                <Oval height={60} width={60} wrapperStyle={{justifyContent: 'center'}} wrapperClass={'mt-5'}
-                      color={'#475e6c'} secondaryColor={'#ff8811'} />
-            </label>
-        </div>
-    </div>);
-}
-
-export default Cleaning;
diff --git a/src/popup/style.scss b/src/popup/style.scss
deleted file mode 100644
index db97e6bdc..000000000
--- a/src/popup/style.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "../styles/variables";
-
-.popup-container {
-  position: absolute; height: 100%; width: 100%;
-  background-color: rgba(0, 0, 0, 0.55);
-  top: 0; left: 0;
-  z-index: 9999;
-}
-
-.popup {
-  position: absolute; height: 33%; width: 33%;
-  right: 0; left: 0; top: 0; bottom: 0; margin: auto;
-  background-color: whitesmoke;
-  border-radius: $radius;
-  border: 1px solid $border-color;
-  & > label {
-    font-size: 1.1rem;
-  }
-}
-