Add support for new remote action menu types (queue, transfers, share…

…_roots, events, favorite_hubs), style tweaks

resources/locales/en/webui.main.json

@@ -108,6 +108,8 @@
       "minSizeName": "Minimum size",
       "sizeLimitsName": "Size limits"
     },
+    "actionsCaption": "Actions...",
+    "searchActions": "Search actions",
     "resetAll": "Reset all",
     "user": "User",
     "hubs": "Hubs",
@@ -200,6 +202,8 @@
     "globalDefault": "Global default",
     "addFavoriteHub": "Add favorite hub",
     "editFavoriteHub": "Edit favorite hub",
+    "actionsCaption": "Actions...",
+    "favoriteHubActions": "Favorite hub actions",
     "form": {
       "genericName": "Hub properties",
       "nameName": "Name",
@@ -561,6 +565,8 @@
         "removeSourceSuccess": "The user {{item.user.nicks}} was removed from {{result.count}} files"
       }
     },
+    "actionsCaption": "Actions...",
+    "transferActions": "Transfer actions",
     "noActiveTransfers": "No active transfers"
   },
   "settings": {

src/actions/ui/event/EventActions.ts

@@ -22,3 +22,8 @@ export const EventActions: UI.ActionListType<undefined> = {
 export const EventActionModule = {
   moduleId: UI.Modules.EVENTS,
 };
+
+export const EventActionMenu = {
+  moduleData: EventActionModule,
+  actions: EventActions,
+};

src/actions/ui/favorite-hub/FavoriteHubActions.ts

@@ -50,6 +50,10 @@ export const FavoriteHubRemoveAction = {
   handler: handleRemove,
 };
 
+const FavoriteHubCreateActions: UI.ActionListType<undefined> = {
+  create: FavoriteHubCreateAction,
+};
+
 const FavoriteHubEditActions: UI.ActionListType<API.FavoriteHubEntry> = {
   edit: FavoriteHubEditAction,
   remove: FavoriteHubRemoveAction,
@@ -63,3 +67,8 @@ export const FavoriteHubEditActionMenu = {
   moduleData: FavoriteHubActionModule,
   actions: FavoriteHubEditActions,
 };
+
+export const FavoriteHubActionMenu = {
+  moduleData: FavoriteHubActionModule,
+  actions: FavoriteHubCreateActions,
+};

src/actions/ui/search/SearchActions.ts

@@ -42,7 +42,7 @@ export const SearchBrowseContentAction = {
   handler: handleBrowseContent,
 };
 
-const SearchActions: UI.ActionListType<API.GroupedSearchResult> = {
+const GroupedSearchResultActions: UI.ActionListType<API.GroupedSearchResult> = {
   result: SearchResultDetailsAction,
   browseContent: SearchBrowseContentAction,
 };
@@ -51,6 +51,13 @@ export const SearchActionModule = {
   moduleId: UI.Modules.SEARCH,
 };
 
+export const GroupedSearchResultActionMenu = {
+  moduleData: SearchActionModule,
+  actions: GroupedSearchResultActions,
+};
+
+const SearchActions: UI.ActionListType<API.SearchInstance> = {};
+
 export const SearchActionMenu = {
   moduleData: SearchActionModule,
   actions: SearchActions,

src/actions/ui/transfer/TransferActions.ts

@@ -98,7 +98,7 @@ export const TransferRemoveSourceAction = {
   },
 };
 
-const TransferActions: UI.ActionListType<API.Transfer> = {
+const TransferItemActions: UI.ActionListType<API.Transfer> = {
   force: TransferForceAction,
   disconnect: TransferDisconnectAction,
   divider: MENU_DIVIDER,
@@ -110,6 +110,13 @@ export const TransferActionModule = {
   moduleId: UI.Modules.TRANSFERS,
 };
 
+export const TransferItemActionMenu = {
+  moduleData: TransferActionModule,
+  actions: TransferItemActions,
+};
+
+const TransferActions: UI.ActionListType<undefined> = {};
+
 export const TransferActionMenu = {
   moduleData: TransferActionModule,
   actions: TransferActions,

src/components/action-menu/builder/expandMenuBuilder.tsx

@@ -2,12 +2,15 @@ import classNames from 'classnames';
 
 import * as UI from 'types/ui';
 import MenuItemLink from 'components/semantic/MenuItemLink';
-import Icon from 'components/semantic/Icon';
 
 // Convert action menu items to React components for regular Dropdown component
 
 const buildChildMenu = (items: UI.ActionMenuItem[], className?: string) => {
-  return <div className={classNames('menu', className)}>{items.map(buildMenuItem)}</div>;
+  return (
+    <div className={classNames('menu', 'upward', className)}>
+      {items.map(buildMenuItem)}
+    </div>
+  );
 };
 
 const buildMenuItem = (menuItem: UI.ActionMenuItem, index: number) => {
@@ -19,9 +22,8 @@ const buildMenuItem = (menuItem: UI.ActionMenuItem, index: number) => {
   if (childMenu) {
     const { children, ...other } = item;
     return (
-      <MenuItemLink key={id} className="submenu" {...other}>
-        {children}
-        <Icon icon="dropdown" />
+      <MenuItemLink key={id} submenuIcon="dropdown" {...other}>
+        <span className="text">{children}</span>
         {buildChildMenu(childMenu)}
       </MenuItemLink>
     );

src/components/download/layout/DownloadView.tsx

@@ -46,9 +46,7 @@ const getMenuItem = (
   >
     <>
       {t(toI18nKey(section.key, UI.Modules.COMMON), section.name)}
-      {!!section.list && (
-        <div className="ui small right label">{section.list.length}</div>
-      )}
+      {!!section.list && <div className="ui small label">{section.list.length}</div>}
     </>
   </MenuItemLink>
 );

src/components/semantic/Dropdown.tsx

@@ -145,8 +145,8 @@ class Dropdown extends React.PureComponent<DropdownProps, State> {
           triggerIcon !== undefined
             ? triggerIcon
             : selection
-            ? 'dropdown'
-            : IconConstants.EXPAND
+              ? 'dropdown'
+              : IconConstants.EXPAND
         }
         className="trigger"
       />

src/components/semantic/MenuItemLink.tsx

@@ -11,6 +11,7 @@ export interface MenuItemLinkProps extends React.HTMLAttributes<HTMLDivElement>
   onClick: (evt: React.SyntheticEvent<any>) => void;
   active?: boolean;
   disabled?: boolean;
+  submenuIcon?: string;
   children: React.ReactNode | React.ReactNode[];
 }
 
@@ -21,20 +22,23 @@ const MenuItemLink: React.FC<MenuItemLinkProps> = ({
   onClick,
   active = false,
   disabled = false,
+  submenuIcon,
   style,
   ...other
 }) => {
   const itemClass = classNames(
     'item',
     'link',
     className,
+    { submenu: !!submenuIcon },
     { active: active },
     { disabled: disabled },
   );
 
   return (
     <div {...other} className={itemClass} onClick={onClick}>
       <Icon icon={icon} />
+      <Icon icon={submenuIcon} />
       {children}
     </div>
   );

src/routes/FavoriteHubs/components/FavoriteHubs.tsx

@@ -8,8 +8,7 @@ import { Column } from 'fixed-data-table-2';
 import { CheckboxCell, ActionMenuCell } from 'components/table/Cell';
 import ConnectStateCell from './ConnectStateCell';
 
-import { TableActionMenu } from 'components/action-menu';
-import ActionButton from 'components/ActionButton';
+import { ActionMenu, TableActionMenu } from 'components/action-menu';
 import { RowWrapperCellChildProps } from 'components/table/RowWrapperCell';
 
 import LoginStore from 'stores/LoginStore';
@@ -25,8 +24,7 @@ import { updateFavoriteHub } from 'services/api/FavoriteHubApi';
 import { runBackgroundSocketAction } from 'utils/ActionUtils';
 import MenuConstants from 'constants/MenuConstants';
 import {
-  FavoriteHubActionModule,
-  FavoriteHubCreateAction,
+  FavoriteHubActionMenu,
   FavoriteHubEditActionMenu,
   FavoriteHubPasswordActionMenu,
 } from 'actions/ui/favorite-hub';
@@ -78,19 +76,24 @@ class FavoriteHubs extends React.Component<WithTranslation> {
 
   favT = getModuleT(this.props.t, UI.Modules.FAVORITE_HUBS);
   render() {
-    const footerData = (
-      <ActionButton
-        action={FavoriteHubCreateAction}
-        moduleData={FavoriteHubActionModule}
-      />
-    );
-
+    const { translate } = this.favT;
     const editAccess = LoginStore.hasAccess(API.AccessEnum.HUBS_EDIT);
     return (
       <>
         <VirtualTable
           rowClassNameGetter={this.rowClassNameGetter}
-          footerData={footerData}
+          footerData={
+            <ActionMenu
+              className="top left pointing"
+              caption={translate('Actions...')}
+              actions={FavoriteHubActionMenu}
+              header={translate('Favorite hub actions')}
+              triggerIcon="chevron up"
+              button={true}
+              remoteMenuId="favorite_hubs"
+              direction="upward"
+            />
+          }
           store={FavoriteHubStore}
           moduleId={UI.Modules.FAVORITE_HUBS}
         >

src/routes/Queue/components/Queue.tsx

@@ -97,6 +97,7 @@ class Queue extends React.Component<WithTranslation> {
               header={translate('Queue actions')}
               triggerIcon="chevron up"
               button={true}
+              remoteMenuId="queue"
             />
           }
           moduleId={UI.Modules.QUEUE}

src/routes/Search/components/ResultTable.tsx

@@ -13,7 +13,7 @@ import {
   FileDownloadCell,
   DecimalCell,
 } from 'components/table/Cell';
-import { TableActionMenu, TableUserMenu } from 'components/action-menu';
+import { ActionMenu, TableActionMenu, TableUserMenu } from 'components/action-menu';
 
 import { dupeToStringType } from 'utils/TypeConvert';
 import { UserFileActions } from 'actions/ui/user/UserActions';
@@ -31,7 +31,7 @@ import { searchDownloadHandler } from 'services/api/SearchApi';
 import IconConstants from 'constants/IconConstants';
 import MenuConstants from 'constants/MenuConstants';
 import SearchConstants from 'constants/SearchConstants';
-import { SearchActionMenu } from 'actions/ui/search';
+import { GroupedSearchResultActionMenu, SearchActionMenu } from 'actions/ui/search';
 
 const getUserCaption = ({ count, user }: API.SearchResultUserInfo, t: UI.TranslateF) => {
   if (count > 1) {
@@ -61,7 +61,7 @@ const UserCell: React.FC<
     remoteMenuId={MenuConstants.HINTED_USER}
   >
     <TableActionMenu
-      actions={SearchActionMenu}
+      actions={GroupedSearchResultActionMenu}
       itemData={rowDataGetter}
       ids={['result']}
     />
@@ -172,6 +172,7 @@ class ResultTable extends React.Component<ResultTableProps> {
 
   render() {
     const { searchT, instance } = this.props;
+    const { translate } = searchT;
     return (
       <>
         <VirtualTable
@@ -183,6 +184,18 @@ class ResultTable extends React.Component<ResultTableProps> {
           }}
           entityId={instance.id}
           moduleId={UI.Modules.SEARCH}
+          footerData={
+            <ActionMenu
+              className="top left pointing"
+              caption={translate('Actions...')}
+              actions={SearchActionMenu}
+              header={translate('Search actions')}
+              triggerIcon="chevron up"
+              button={true}
+              itemData={instance}
+              remoteMenuId="search_instance"
+            />
+          }
         >
           <Column
             name="Name"

src/routes/Share/components/Share.tsx

@@ -55,6 +55,7 @@ class Share extends Component<WithTranslation> {
               triggerIcon="chevron up"
               ids={['create']}
               button={true}
+              remoteMenuId="share_roots"
             >
               <ActionMenu actions={ShareActionMenu} ids={['refresh']} />
             </ActionMenu>

src/routes/Sidebar/routes/Events/components/EventsLayout.tsx

@@ -2,12 +2,11 @@ import { useEffect, memo } from 'react';
 import * as React from 'react';
 
 import EventAPIActions from 'actions/reflux/EventActions';
-import { EventActionModule, EventClearAction } from 'actions/ui/event/EventActions';
+import { EventActionMenu } from 'actions/ui/event/EventActions';
 
 import EventStore from 'stores/EventStore';
 
 import LayoutHeader from 'components/semantic/LayoutHeader';
-import ActionButton from 'components/ActionButton';
 
 import '../style.css';
 import EventMessageView from 'routes/Sidebar/routes/Events/components/EventMessageView';
@@ -18,6 +17,7 @@ import { useStore } from 'effects/StoreListenerEffect';
 import { useTranslation } from 'react-i18next';
 import { translate } from 'utils/TranslationUtils';
 import IconConstants from 'constants/IconConstants';
+import { ActionMenu } from 'components/action-menu';
 
 const SystemLog: React.FC = memo(
   function SystemLog() {
@@ -39,12 +39,11 @@ const SystemLog: React.FC = memo(
         <div className="wrapper">
           <LayoutHeader
             icon={IconConstants.EVENTS_COLORED}
-            title={translate('Events', t, UI.Modules.EVENTS)}
-            rightComponent={
-              <ActionButton
-                action={EventClearAction}
-                moduleData={EventActionModule}
-                icon={null}
+            title={
+              <ActionMenu
+                caption={translate('Events', t, UI.Modules.EVENTS)}
+                actions={EventActionMenu}
+                remoteMenuId="events"
               />
             }
           />

src/routes/Transfers/components/Transfers.tsx

@@ -23,8 +23,10 @@ import { RowWrapperCellChildProps } from 'components/table/RowWrapperCell';
 import * as API from 'types/api';
 import * as UI from 'types/ui';
 import { withTranslation, WithTranslation } from 'react-i18next';
-import { translate } from 'utils/TranslationUtils';
+import { getModuleT } from 'utils/TranslationUtils';
 import IconConstants from 'constants/IconConstants';
+import { ActionMenu } from 'components/action-menu';
+import { TransferActionMenu } from 'actions/ui/transfer';
 
 const FlagsCell: React.FC<RowWrapperCellChildProps<string[], API.Transfer>> = ({
   cellData,
@@ -44,21 +46,34 @@ class Transfers extends React.Component<TransfersProps> {
   };
 
   emptyRowsNodeGetter = () => {
-    const { t } = this.props;
+    const { translate } = this.transferT;
     return (
       <Message
-        title={translate('No active transfers', t, UI.Modules.TRANSFERS)}
+        title={translate('No active transfers')}
         icon={IconConstants.TRANSFERS_PLAIN}
       />
     );
   };
 
+  transferT = getModuleT(this.props.t, UI.Modules.TRANSFERS);
   render() {
+    const { translate } = this.transferT;
     return (
       <VirtualTable
         emptyRowsNodeGetter={this.emptyRowsNodeGetter}
         store={TransferStore}
         moduleId={UI.Modules.TRANSFERS}
+        footerData={
+          <ActionMenu
+            className="top left pointing"
+            caption={translate('Actions...')}
+            actions={TransferActionMenu}
+            header={translate('Transfer actions')}
+            triggerIcon="chevron up"
+            button={true}
+            remoteMenuId="transfers"
+          />
+        }
       >
         <Column
           name="User"