fix dropdown element. handle mouseover event

libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx

@@ -20,6 +20,19 @@ export const CustomToggle = React.forwardRef(({ children, onClick, icon, classNa
   </button>
 ))
 
+export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction, icon, className = '' }: { children: React.ReactNode, mouseOverAction: () => void, icon: string, className: string }, ref: Ref<HTMLSpanElement>) => (
+  <span
+    ref={ref}
+    onClick={(e) => {
+      e.preventDefault()
+    }}
+    onMouseOver={mouseOverAction}
+    className={`${className.replace('dropdown-toggle', '')} mb-0 pb-0 d-flex justify-content-end align-items-end remixuimenuicon_shadow`}
+  >
+    { icon && <i className={`${icon}`}></i> }
+  </span>
+))
+
 // forwardRef again here!
 // Dropdown needs access to the DOM of the Menu to measure it
 export const CustomMenu = React.forwardRef(

libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css

@@ -94,4 +94,11 @@
     width: auto;
     color: var(--text);
   }
+
+  .remixuimenuicon_shadow {
+  }
+
+  .remixuimenuicon_shadow:hover {
+    box-shadow: 0px 0px 14px -7px;
+  }
   

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
-import { Dropdown } from 'react-bootstrap'
+import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { CustomMenu, CustomToggle } from '@remix-ui/helper'
+import { CustomIconsToggle, CustomMenu, CustomToggle } from '@remix-ui/helper'
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
 import { FileSystemContext } from './contexts'
 import './css/remix-ui-workspace.css'
@@ -294,18 +294,27 @@ export function Workspace () {
   }
 
   const workspaceMenuIcons = [
-    <span
+    <OverlayTrigger
-      hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
+      placement='right-start'
-      id='workspaceRename'
+      overlay={
-      data-id='workspaceRename'
+        <Tooltip id="workspaceRenametooltip">
-      onClick={(e) => {
+          <span>Rename</span>
-        e.stopPropagation()
+        </Tooltip>
-        renameCurrentWorkspace()
+      }
-        _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceRename'])
+    >
-      }}
+      <span
-      className='far fa-edit remixui_menuicon'
+        hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
-      title='Rename'>
+        id='workspaceRename'
-    </span>,
+        data-id='workspaceRename'
+        onClick={(e) => {
+          e.stopPropagation()
+          renameCurrentWorkspace()
+          _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceRename'])
+          hideIconsMenu(!showIconsMenu)
+        }}
+        className='far fa-edit w-100'>
+      </span>
+    </OverlayTrigger>,
     <span
       hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
       id='workspaceDelete'
@@ -314,8 +323,9 @@ export function Workspace () {
         e.stopPropagation()
         deleteCurrentWorkspace()
         _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceDelete'])
+        hideIconsMenu(!showIconsMenu)
       }}
-      className='far fa-trash remixui_menuicon'
+      className='far fa-trash w-100'
       title='Delete'>
     </span>,
     <span
@@ -326,8 +336,9 @@ export function Workspace () {
         e.stopPropagation()
         downloadWorkspaces()
         _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesDownload'])
+        hideIconsMenu(!showIconsMenu)
       }}
-      className='far fa-download remixui_menuicon'
+      className='far fa-download w-100'
       title='Download Workspaces'>
     </span>,
     <span
@@ -338,8 +349,9 @@ export function Workspace () {
         e.stopPropagation()
         restoreBackup()
         _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspacesRestore'])
+        hideIconsMenu(!showIconsMenu)
       }}
-      className='far fa-upload remixui_menuicon'
+      className='far fa-upload w-100'
       title='Restore Workspaces Backup'>
     </span>,
     <span
@@ -350,8 +362,9 @@ export function Workspace () {
         e.stopPropagation()
         cloneGitRepository()
         _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'cloneGitRepository'])
+        hideIconsMenu(!showIconsMenu)
       }}
-      className='far fa-clone remixui_menuicon'
+      className='far fa-clone w-100'
       title='Clone Git Repository'>
     </span>
   ]
@@ -362,11 +375,13 @@ export function Workspace () {
         <div>
           <header>
             <div className="mx-2 mb-2 d-flex flex-column">
-              <div className="justify-content-between">
+              <div className="d-flex justify-content-between">
-                <label className="pl-1 form-check-label" htmlFor="workspacesSelect">
+                <span className="d-flex align-items-end">
-                Workspaces
+                  <label className="pl-1 form-check-label" htmlFor="workspacesSelect">
-                </label>
+                    Workspaces
-                <span className="remixui_menu d-flex justify-content-between">
+                  </label>
+                </span>
+                <span className="remixui_menu d-flex justify-content-between align-items-end w-75">
                   <span
                     hidden={currentWorkspace === LOCALHOST}
                     id='workspaceCreate'
@@ -379,12 +394,27 @@ export function Workspace () {
                     className='far fa-plus-square remixui_menuicon'
                     title='Create'>
                   </span>
-                  <span className="fas fa-bars remixui_menuicon"></span>
+                  <Dropdown onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
+                    <Dropdown.Toggle
+                      as={CustomIconsToggle}
+                      mouseOverAction={() => hideIconsMenu(!showIconsMenu)}
+                      icon={'fas fa-bars'}
+                    ></Dropdown.Toggle>
+                    <Dropdown.Menu as={CustomMenu} className='w-100 custom-dropdown-items' align={'right'}>
+                      {
+                      workspaceMenuIcons.map(m => (
+                        <Dropdown.Item>
+                          {m}
+                        </Dropdown.Item>
+                      ))
+                    }
+                    </Dropdown.Menu>  
+                  </Dropdown>
                 </span>
               </div>
 
               <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
-                <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}>
+                <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1" icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}>
                   { selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? 'localhost' : NO_WORKSPACE }
                 </Dropdown.Toggle>
 
@@ -424,17 +454,6 @@ export function Workspace () {
             </div>
           </header>
         </div>
-            {
-              showIconsMenu && <Dropdown className="custom-dropdown-items">
-                {
-                  workspaceMenuIcons.map(m => (
-                    <Dropdown.Item>
-                      {m}
-                    </Dropdown.Item>
-                  ))
-                }
-              </Dropdown>
-            }
         <div className='h-100 remixui_fileExplorerTree' onFocus={() => { toggleDropdown(false) }}>
           <div className='h-100'>
           { (global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>}