enh(weg-tb): configurable animation for context menus

src/apps/seelen_rofi/modules/launcher/infra/Item.tsx

@@ -1,14 +1,15 @@
 import { SeelenCommand } from '@seelen-ui/lib';
 import { convertFileSrc, invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
-import { Dropdown, Menu } from 'antd';
+import { Menu } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { OverflowTooltip } from 'src/apps/shared/components/OverflowTooltip';
-
 import { StartMenuApp } from '../../shared/store/domain';
 
+import { AnimatedDropdown } from '../../../../shared/components/AnimatedWrappers';
+import { OverflowTooltip } from '../../../../shared/components/OverflowTooltip';
+
 export const Item = memo(({ item, hidden }: { item: StartMenuApp; hidden: boolean }) => {
   const { label, icon, path } = item;
 
@@ -22,7 +23,12 @@ export const Item = memo(({ item, hidden }: { item: StartMenuApp; hidden: boolea
   const shortPath = path.slice(path.indexOf('\\Programs\\') + 10);
 
   return (
-    <Dropdown
+    <AnimatedDropdown
+      animationDescription={{
+        maxAnimationTimeMs: 500,
+        openAnimationName: 'launcher-item-context-menu-open',
+        closeAnimationName: 'launcher-item-context-menu-close',
+      }}
       trigger={['contextMenu']}
       dropdownRender={() => (
         <Menu
@@ -54,6 +60,6 @@ export const Item = memo(({ item, hidden }: { item: StartMenuApp; hidden: boolea
         <OverflowTooltip className="launcher-item-label" text={label} />
         <OverflowTooltip className="launcher-item-path" text={shortPath} />
       </button>
-    </Dropdown>
+    </AnimatedDropdown>
   );
 });

src/apps/seelenweg/components/WithContextMenu.tsx

@@ -1,10 +1,11 @@
-import { Dropdown, Menu } from 'antd';
+import { Menu } from 'antd';
 import { ItemType, MenuItemType } from 'antd/es/menu/interface';
 import { PropsWithChildren, useState } from 'react';
 
 import { BackgroundByLayersV2 } from './BackgroundByLayers/infra';
 
-import { useWindowFocusChange } from 'src/apps/shared/hooks';
+import { AnimatedDropdown } from '../../shared/components/AnimatedWrappers';
+import { useWindowFocusChange } from '../../shared/hooks';
 
 interface Props extends PropsWithChildren {
   items: ItemType<MenuItemType>[];
@@ -21,7 +22,12 @@ export function WithContextMenu({ children, items, onOpenChange }: Props) {
   });
 
   return (
-    <Dropdown
+    <AnimatedDropdown
+      animationDescription={{
+        maxAnimationTimeMs: 500,
+        openAnimationName: 'weg-context-menu-container-open',
+        closeAnimationName: 'weg-context-menu-container-close',
+      }}
       placement="topLeft"
       open={openContextMenu}
       onOpenChange={(isOpen) => {
@@ -49,6 +55,6 @@ export function WithContextMenu({ children, items, onOpenChange }: Props) {
       )}
     >
       {children}
-    </Dropdown>
+    </AnimatedDropdown>
   );
 }

src/apps/seelenweg/modules/item/infra/UserApplication.tsx

@@ -17,7 +17,7 @@ import {
   RootState,
 } from '../../shared/store/domain';
 
-import AnimatedPopover from '../../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../../shared/components/AnimatedWrappers';
 import { cx } from '../../../../shared/styles';
 import { WithContextMenu } from '../../../components/WithContextMenu';
 import { getMenuForItem } from '../../bar/menu';

src/apps/shared/components/AnimatedWrappers/AnimatedDropdown/index.tsx

@@ -0,0 +1,41 @@
+import { Dropdown, DropdownProps } from 'antd';
+import { useState } from 'react';
+
+import { CustomAnimationProps } from '../domain';
+
+import { useTimeout } from '../../../hooks';
+import { cx } from '../../../styles';
+
+export interface AnimatedDropwonProps extends DropdownProps {
+  animationDescription: CustomAnimationProps;
+}
+
+export function AnimatedDropdown({ children, open, dropdownRender, animationDescription, ...dropdownProps }: AnimatedDropwonProps) {
+  const [delayedOpenPopover, setDelayedOpenPopover] = useState(false);
+
+  useTimeout(() => {
+    setDelayedOpenPopover(!!open);
+  }, animationDescription.maxAnimationTimeMs, [open]);
+
+  const animationObject = {};
+  if (animationDescription.openAnimationName) {
+    animationObject[animationDescription.openAnimationName] = open && !delayedOpenPopover;
+  }
+  if (animationDescription.closeAnimationName) {
+    animationObject[animationDescription.closeAnimationName] = delayedOpenPopover && !open;
+  }
+
+  return (
+    <Dropdown
+      open={open || delayedOpenPopover}
+      {...dropdownProps}
+      dropdownRender={(origin) => dropdownRender &&
+        <div className={cx(animationObject)}>
+          {dropdownRender(origin)}
+        </div>
+      }
+    >
+      {children}
+    </Dropdown>
+  );
+}

src/apps/shared/components/AnimatedPopover/index.tsx → src/apps/shared/components/AnimatedWrappers/AnimatedPopover/index.tsx

@@ -1,20 +1,16 @@
 import { Popover, PopoverProps } from 'antd';
 import { useState } from 'react';
 
-import { useTimeout } from '../../hooks';
-import { cx } from '../../styles';
+import { CustomAnimationProps } from '../domain';
 
-export interface PopoverAnimationProps {
-  maxAnimationTimeMs: number;
-  openAnimationName: String;
-  closeAnimationName: String;
-}
+import { useTimeout } from '../../../hooks';
+import { cx } from '../../../styles';
 
 export interface AnimatedPopoverProps extends PopoverProps {
-  animationDescription: PopoverAnimationProps;
+  animationDescription: CustomAnimationProps;
 }
 
-export default function AnimatedPopover({ children, open, content, animationDescription, ...popoverProps }: AnimatedPopoverProps) {
+export function AnimatedPopover({ children, open, content, animationDescription, ...popoverProps }: AnimatedPopoverProps) {
   const [delayedOpenPopover, setDelayedOpenPopover] = useState(false);
 
   useTimeout(() => {

src/apps/shared/components/AnimatedWrappers/domain.ts

@@ -0,0 +1,5 @@
+export interface CustomAnimationProps {
+  maxAnimationTimeMs: number;
+  openAnimationName: String;
+  closeAnimationName: String;
+}

src/apps/shared/components/AnimatedWrappers/index.tsx

@@ -0,0 +1,2 @@
+export { AnimatedDropdown } from './AnimatedDropdown';
+export { AnimatedPopover } from './AnimatedPopover';

src/apps/toolbar/modules/Date/Calendar.tsx

@@ -10,7 +10,7 @@ import { BackgroundByLayersV2 } from '../../../seelenweg/components/BackgroundBy
 
 import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
-import AnimatedPopover from '../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../shared/components/AnimatedWrappers';
 import { Icon } from '../../../shared/components/Icon';
 import { cx } from '../../../shared/styles';
 

src/apps/toolbar/modules/Notifications/infra/Module.tsx

@@ -11,7 +11,7 @@ import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
 import { RootState } from '../../shared/store/domain';
 
-import AnimatedPopover from '../../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../../shared/components/AnimatedWrappers';
 import { ArrivalPreview } from './ArrivalPreview';
 import { Notifications } from './Notifications';
 

src/apps/toolbar/modules/Settings/infra.tsx

@@ -16,7 +16,7 @@ import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
 import { RootState } from '../shared/store/domain';
 
-import AnimatedPopover from '../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../shared/components/AnimatedWrappers';
 import { Icon } from '../../../shared/components/Icon';
 
 interface Props {

src/apps/toolbar/modules/Tray/index.tsx

@@ -15,7 +15,7 @@ import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
 import { TrayInfo } from '../shared/store/domain';
 
-import AnimatedPopover from '../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../shared/components/AnimatedWrappers';
 import { OverflowTooltip } from '../../../shared/components/OverflowTooltip';
 
 interface Props {

src/apps/toolbar/modules/item/infra/infra.tsx

@@ -1,5 +1,5 @@
 import { GenericToolbarItem } from '@seelen-ui/lib/types';
-import { Dropdown, Menu } from 'antd';
+import { Menu } from 'antd';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,6 +10,7 @@ import { SavePlaceholderAsCustom } from '../../main/application';
 import { RootActions, Selectors } from '../../shared/store/app';
 import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
+import { AnimatedDropdown } from '../../../../shared/components/AnimatedWrappers';
 import { Icon } from '../../../../shared/components/Icon';
 import { InnerItem, InnerItemProps } from './Inner';
 
@@ -26,7 +27,12 @@ export function Item(props: InnerItemProps) {
   });
 
   return (
-    <Dropdown
+    <AnimatedDropdown
+      animationDescription={{
+        maxAnimationTimeMs: 500,
+        openAnimationName: 'ft-bar-item-context-menu-open',
+        closeAnimationName: 'ft-bar-item-context-menu-close',
+      }}
       open={openContextMenu}
       onOpenChange={setOpenContextMenu}
       trigger={['contextMenu']}
@@ -51,7 +57,7 @@ export function Item(props: InnerItemProps) {
       )}
     >
       <InnerItem {...props} clickable={!!props.onClick} />
-    </Dropdown>
+    </AnimatedDropdown>
   );
 }
 

src/apps/toolbar/modules/main/infra.tsx

@@ -1,7 +1,6 @@
 import { HideMode } from '@seelen-ui/lib';
 import { ToolbarModuleType as ToolbarItemType } from '@seelen-ui/lib';
 import { Placeholder, Plugin, ToolbarItem } from '@seelen-ui/lib/types';
-import { Dropdown } from 'antd';
 import { Reorder, useForceUpdate } from 'framer-motion';
 import { debounce } from 'lodash';
 import { JSXElementConstructor, useCallback, useLayoutEffect, useState } from 'react';
@@ -19,8 +18,9 @@ import { SettingsModule } from '../Settings/infra';
 
 import { RootActions, Selectors } from '../shared/store/app';
 import { SavePlaceholderAsCustom } from './application';
-import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
+import { AnimatedDropdown } from '../../../shared/components/AnimatedWrappers';
+import { useWindowFocusChange } from '../../../shared/hooks';
 import { cx } from '../../../shared/styles';
 import { TrayModule } from '../Tray';
 import { WorkspacesModule } from '../Workspaces';
@@ -140,7 +140,12 @@ export function ToolBar({ structure }: Props) {
     !isAppFocused && hideMode !== HideMode.Never && (isOverlaped || hideMode === HideMode.Always);
 
   return (
-    <Dropdown
+    <AnimatedDropdown
+      animationDescription={{
+        maxAnimationTimeMs: 500,
+        openAnimationName: 'ft-bar-context-menu-open',
+        closeAnimationName: 'ft-bar-context-menu-close',
+      }}
       trigger={['contextMenu']}
       open={openContextMenu}
       onOpenChange={setOpenContextMenu}
@@ -175,6 +180,6 @@ export function ToolBar({ structure }: Props) {
           {structure.right.map(componentByModule.bind(null, plugins))}
         </div>
       </Reorder.Group>
-    </Dropdown>
+    </AnimatedDropdown>
   );
 }

src/apps/toolbar/modules/media/infra/MediaControls.tsx

@@ -14,7 +14,7 @@ import { calcLuminance } from '../application';
 
 import { MediaChannelTransportData, MediaDevice } from '../../shared/store/domain';
 
-import AnimatedPopover from '../../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../../shared/components/AnimatedWrappers';
 import { Icon } from '../../../../shared/components/Icon';
 import { OverflowTooltip } from '../../../../shared/components/OverflowTooltip';
 import { useTimeout, useWindowFocusChange } from '../../../../shared/hooks';

src/apps/toolbar/modules/network/infra/WlanSelector.tsx

@@ -13,7 +13,7 @@ import { useWindowFocusChange } from 'src/apps/shared/hooks';
 
 import { WlanBssEntry } from '../domain';
 
-import AnimatedPopover from '../../../../shared/components/AnimatedPopover';
+import { AnimatedPopover } from '../../../../shared/components/AnimatedWrappers';
 import { WlanSelectorEntry } from './WlanSelectorEntry';
 
 function WlanSelector({ open }: { open: boolean }) {

static/themes/default/theme.launcher.css

@@ -69,6 +69,23 @@ body {
   }
 }
 
+@keyframes PopupBaseAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.launcher-item-context-menu-open, 
+.launcher-item-context-menu-close {
+  animation: PopupBaseAnimation 0.2s linear forwards; 
+}
+.launcher-item-context-menu-close {
+  animation-direction: reverse;
+}
+
 .launcher-body {
   display: flex;
   flex-direction: column;

static/themes/default/theme.toolbar.css

@@ -53,12 +53,12 @@
 }
 
 
-.notification-open, .settings-open, .calendar-open, .tray-open, .wlan-open, .media-open,
-.notification-close, .settings-close, .calendar-close, .tray-close, .wlan-close, .media-close {
+.notification-open, .settings-open, .calendar-open, .tray-open, .wlan-open, .media-open, .ft-bar-item-context-menu-open, .ft-bar-context-menu-open, 
+.notification-close, .settings-close, .calendar-close, .tray-close, .wlan-close, .media-close, .ft-bar-item-context-menu-close, .ft-bar-context-menu-close {
  animation: PopupBaseAnimation 0.2s linear forwards; 
 }
 
-.notification-close, .settings-close, .calendar-close, .tray-close, .wlan-close, .media-close {
+.notification-close, .settings-close, .calendar-close, .tray-close, .wlan-close, .media-close, .ft-bar-item-context-menu-close, .ft-bar-context-menu-close {
   animation-direction: reverse;
 }
 

static/themes/default/theme.weg.css

@@ -244,11 +244,12 @@
 }
 
 
-.weg-item-preview-container-open, .weg-item-preview-container-close {
+.weg-item-preview-container-open, .weg-context-menu-container-open
+.weg-item-preview-container-close, .weg-context-menu-container-close {
   animation: PreviewContainerAnimation 0.2s linear forwards; 
 }
 
-.weg-item-preview-container-close {
+.weg-item-preview-container-close, .weg-context-menu-container-close {
   animation-direction: reverse;
 }