feat(FilePreview): support mobile menu

src/components/FilePreview/FilePreview.scss

@@ -1,102 +1,75 @@
 @use 'sass:math';
 @use '../variables';
+@use './variables.scss' as file-preview-css-variables;
 
 $block: '.#{variables.$ns}file-preview';
 
-$smallRoundedButtonSize: 24px;
-
 #{$block} {
     --_-box-shadow: none;
     --_-border-radius: 4px;
     --_-color-base-background: transparent;
     --_-action-button-size: 24px;
-    --_-image-preview-height: 64px;
-    --_-image-preview-width: 96px;
 
     position: relative;
-    width: 120px;
-
-    &:hover,
-    &:focus-within {
-        #{$block}__actions:not(#{$block}__actions_hide) {
-            opacity: 1;
-        }
-
-        --_-color-base-background: var(--g-color-base-simple-hover, rgba(0, 0, 0, 0.05));
-    }
 
-    &__actions {
-        position: absolute;
-        inset-block-start: -1 * math.div($smallRoundedButtonSize, 2);
-        inset-inline-end: -1 * math.div($smallRoundedButtonSize, 2);
-        z-index: 1;
+    width: file-preview-css-variables.$cardWidth;
 
-        display: flex;
-        gap: 4px;
-
-        opacity: 0;
+    &:not(#{$block}_mobile):focus-within,
+    &:not(#{$block}_mobile):hover {
+        --_-color-base-background: var(--g-color-base-simple-hover);
     }
 
     &:hover {
-        --_-color-base-background: var(--g-color-base-simple-hover);
+        #{$block}__actions-panel {
+            opacity: 1;
+        }
     }
 
     &__card {
         display: flex;
         flex-direction: column;
         align-items: center;
-
         position: relative;
         outline: none;
 
-        box-shadow: var(--gc-card-box-shadow);
         border-radius: var(--_-border-radius);
-        padding: 4px 10px;
+        padding: file-preview-css-variables.$verticalCardPadding
+            file-preview-css-variables.$horizontalCardPadding;
 
         &_clickable {
             cursor: pointer;
         }
-
         &_hoverable {
             background-color: var(--_-color-base-background);
         }
-
         &::after {
             position: absolute;
             inset: 0;
             border-radius: var(--_-border-radius);
             pointer-events: none;
         }
-
         &:hover {
             --_-box-shadow: 0px 3px 10px var(--g-color-sfx-shadow);
         }
-
         &:focus::after {
             content: '';
             box-shadow: 0 0 0 2px var(--g-color-line-misc);
         }
-
         &:focus:not(:focus-visible)::after {
             box-shadow: none;
         }
     }
-
     &__icon {
         display: flex;
         justify-content: center;
         align-items: center;
-
         border-radius: 4px;
         background-color: var(--g-color-base-generic-medium);
-
         height: 40px;
         width: 40px;
-
         &-svg {
             color: var(--g-color-base-background);
         }
-
         &_type {
             &_image,
             &_video,
@@ -116,55 +89,37 @@ $smallRoundedButtonSize: 24px;
             }
         }
     }
-
     &__name {
         margin-block-start: 4px;
     }
-
     &__name,
     &__description {
         text-align: center;
         width: 100%;
     }
-
     &__image-container {
         position: relative;
-
         border-radius: 4px;
         overflow: hidden;
     }
 
     &__icon-container,
     &__image-container {
-        height: var(--_-image-preview-height);
-        width: var(--_-image-preview-width);
+        height: file-preview-css-variables.$imagePreviewHeight;
+        width: file-preview-css-variables.$imagePreviewWidth;
     }
 
     &__icon-container {
         display: flex;
         align-items: center;
         justify-content: center;
     }
-
     &__image {
         position: absolute;
         inset-block-start: 0;
         inset-inline-start: 0;
-
         object-fit: cover;
-
         height: 100%;
         width: 100%;
     }
-
-    &__action-button {
-        height: var(--_-action-button-size);
-        width: var(--_-action-button-size);
-        display: flex;
-        align-items: center;
-    }
-
-    &__action-icon-wrapper {
-        display: flex;
-    }
 }

src/components/FilePreview/FilePreview.tsx

@@ -12,17 +12,16 @@ import {
     Filmstrip as VideoIcon,
 } from '@gravity-ui/icons';
 
-import {useActionHandlers, useUniqId} from '../../hooks';
+import {useActionHandlers} from '../../hooks';
 import {Icon} from '../Icon';
 import type {IconData} from '../Icon';
 import {Text} from '../Text';
 import {useMobile} from '../mobile';
 import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
-import {FilePreviewAction} from './FilePreviewAction';
-import type {FilePreviewActionProps} from './FilePreviewAction';
-import type {FileType} from './types';
+import {FilePreviewActions} from './FilePreviewActions/FilePreviewActions';
+import type {FilePreviewActionProps, FileType} from './types';
 import {getFileType} from './utils';
 
 import './FilePreview.scss';
@@ -62,12 +61,11 @@ export function FilePreview({
     onClick,
     actions,
 }: FilePreviewProps) {
-    const id = useUniqId();
-
     const [previewSrc, setPreviewSrc] = React.useState<string | undefined>(imageSrc);
-    const mobile = useMobile();
     const type = getFileType(file);
 
+    const mobile = useMobile();
+
     const {onKeyDown} = useActionHandlers(onClick);
 
     React.useEffect(() => {
@@ -90,10 +88,9 @@ export function FilePreview({
     const withActions = Boolean(actions?.length);
 
     const isPreviewString = typeof previewSrc === 'string';
-    const hideActions = isPreviewString && mobile;
 
     return (
-        <div className={cn(null, className)} data-qa={qa}>
+        <div className={cn({mobile}, className)} data-qa={qa}>
             <div
                 className={cn('card', {clickable, hoverable: clickable || withActions})}
                 role={clickable ? 'button' : undefined}
@@ -126,17 +123,12 @@ export function FilePreview({
                     </Text>
                 )}
             </div>
-            {actions?.length ? (
-                <div className={cn('actions', {hide: hideActions})}>
-                    {actions.map((action, index) => (
-                        <FilePreviewAction
-                            key={`${id}-${index}`}
-                            id={`${id}-${index}`}
-                            {...action}
-                        />
-                    ))}
-                </div>
-            ) : null}
+            <FilePreviewActions
+                actions={actions}
+                hoverabelPanelClassName={cn('actions-panel')}
+                fileName={file.name}
+                isCustomImage={isPreviewString}
+            />
         </div>
     );
 }

src/components/FilePreview/FilePreviewActions/FilePreviewActions.scss

@@ -0,0 +1,73 @@
+@use 'sass:math';
+@use '../../variables';
+@use '../../../../styles/mixins';
+@use '../variables.scss' as file-preview-css-variables;
+
+$block: '.#{variables.$ns}file-preview-actions';
+
+$desktopButtonSize: 24px;
+$mobileActionsGap: 2px;
+
+#{$block} {
+    --_-mobile-actions-menu-size: 28px;
+
+    &__desktop-actions,
+    &__mobile-actions-menu {
+        position: absolute;
+        z-index: 1;
+    }
+
+    &__mobile-actions-menu {
+        height: $desktopButtonSize;
+        width: $desktopButtonSize;
+        padding: 0;
+
+        inset-block-start: file-preview-css-variables.$verticalCardPadding + $mobileActionsGap;
+        inset-inline-end: math.div(
+                file-preview-css-variables.$cardWidth -
+                    file-preview-css-variables.$imagePreviewWidth,
+                2
+            ) +
+            $mobileActionsGap;
+
+        &::before {
+            box-shadow: none;
+        }
+    }
+
+    &__desktop-actions {
+        inset-block-start: -1 * math.div($desktopButtonSize, 2);
+        inset-inline-end: -1 * math.div($desktopButtonSize, 2);
+        opacity: 0;
+        display: flex;
+        gap: var(--g-spacing-1);
+    }
+
+    &__desktop-action-button {
+        width: $desktopButtonSize;
+        height: $desktopButtonSize;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__action-icon-wrapper {
+        display: flex;
+    }
+
+    &__mobile-list-item {
+        display: flex;
+        gap: var(--g-spacing-2);
+        align-items: center;
+        padding: 0 var(--g-spacing-4);
+
+        & > svg {
+            width: var(--_-mobile-icon-size);
+            height: var(--_-mobile-icon-size);
+        }
+    }
+
+    &__mobile-sheet {
+        --_-mobile-icon-size: 18px;
+        --g-sheet-content-padding: var(--g-spacing-1) 0;
+    }
+}