Skip to content

作品作成画面の対応拡張子のポップアップ #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yuki6ra wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

作品作成画面の対応拡張子のポップアップ #235

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f5c7684
feat: information tool tip
yuki6ra May 6, 2024
85b447e
feat: import InfoPopOver to AssetUpload, ThumbnailUpload
yuki6ra May 6, 2024
6e29f35
style: change component Name
yuki6ra May 7, 2024
032d64d
refactor: interface
yuki6ra May 7, 2024
611ecf8
refactor: add supportExtension in constants
yuki6ra May 7, 2024
8afed66
refactor: import extensions
yuki6ra May 7, 2024
b6d7332
refactor: add asset accept constants
yuki6ra May 7, 2024
679563a
refactor: generate asset extensions
yuki6ra Jun 7, 2024
4ae3a45
fix: console
yuki6ra Jun 7, 2024
a810fbd
refactor: update supportedExts type in SupportExtPopOver and Thumbnai…
yuki6ra Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 26 additions & 21 deletions src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import type { FC } from 'react';

import { AssetRender } from '../../../AssetList/assetRender';

import { SupportExtPopOver } from './SupportExtPopOver';

import type { Asset } from '@/domains/Work/types';

import { Horizontal } from '@/components/Layout/Horizontal';
import { Vertical } from '@/components/Layout/Vertical';
import { DropImage } from '@/components/functional/DropImage';
import { Center } from '@/components/ui/Center';
Expand All @@ -23,27 +24,31 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
<Typography className="text-red-500" variant="body2">
必須
</Typography>
<SupportExtPopOver
supportedExts={[

@tosaken1116 tosaken1116 May 7, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

supportedExtsは別で変数化して渡すだけにする
src/contstantsに記述する
Thumbnailも同様の変更が必要

メリット
対応拡張子が増えたときに編集する箇所がconstantsだけになりuiファイルに変更が起きないため意図しない変更が起きづらい

もし可能であればinputのaccept fileもsupportedExtsを参照するようにしたい(これは別issueに切り出しても良き)

https://github.com/Kyutech-C3/ToyBox_front_replace/blob/d0bb9a5915eb678c6c15ddaddc7f6861686ad48b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx#L70C4-L82C9

@yuki6ra yuki6ra May 7, 2024

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

了解です
とりあえずsupportedExtsはやります
inputの方はついででできる感じならしますけどissue切り出す？

@tosaken1116 tosaken1116 May 7, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

個人的にはissueの内容と外れるので分けた方がいいとは思いますけどそこまで大きいタスクでもないのでやりやすい方で任せます

{
category: '画像',
exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
},
{
category: '動画',
exts: ['mp4', 'mov'],
},
{
category: '音源',
exts: ['mp3', 'wav', 'm4a'],
},
{
category: 'モデル',
exts: ['gltf', 'fbx'],
},
{
category: 'zip',
exts: ['zip'],
},
]}
/>
</Vertical>
<Horizontal className="gap-0 items-start -mt-4">
<Typography variant="body2" className="text-gray-500">
対応形式:
</Typography>
<Typography variant="body2" className="text-xs text-gray-500 mx-4">
画像 [ .png .jpg .jpeg .bmp .gif ]
</Typography>
<Typography variant="body2" className="text-xs text-gray-500 mx-4">
動画 [ .mp4 .mov ]
</Typography>
<Typography variant="body2" className="text-xs text-gray-500 mx-4">
音源 [ .mp3 .wav .m4a ]
</Typography>
<Typography variant="body2" className="text-xs text-gray-500 mx-4">
モデル [ .gltf .fbx ]
</Typography>
<Typography variant="body2" className="text-xs text-gray-500 mx-4">
zip[ .zip ]
</Typography>
</Horizontal>
<Vertical className="gap-2 w-full overflow-scroll">
{assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
</Vertical>
Expand Down
49 changes: 49 additions & 0 deletions src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import type { FC } from 'react';

import { Info } from 'lucide-react';

import { Horizontal } from '@/components/Layout/Horizontal';
import { Vertical } from '@/components/Layout/Vertical';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/Tooltip';
import { Typography } from '@/components/ui/Typography';

type Props = {
supportedExts: { category: string; exts: string[] }[];
};

export const SupportExtPopOver: FC<Props> = ({ supportedExts }) => (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info size={16} color="#757575" />
</TooltipTrigger>

<TooltipContent className="rounded-md relative border-2 bg-white border-orange-pop text-[10px]">
<Horizontal className="gap-1">
<Typography variant="strong">対応形式:</Typography>
{supportedExts.map(({ category, exts }) => (
<Vertical key={category} className="pl-4 gap-1">
<Typography variant="strong">{category}</Typography>
<Typography variant="strong">
<Vertical className="gap-1">
[
<Vertical className="gap-1">
{exts.map((ext) => (
<span key={ext}>.{ext}</span>
))}
</Vertical>
]
</Vertical>
</Typography>
</Vertical>
))}
</Horizontal>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
19 changes: 10 additions & 9 deletions src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { FC } from 'react';

import { Horizontal } from '@/components/Layout/Horizontal';
import { SupportExtPopOver } from './SupportExtPopOver';

import { Vertical } from '@/components/Layout/Vertical';
import { DropImage } from '@/components/functional/DropImage';
import { Center } from '@/components/ui/Center';
Expand All @@ -24,15 +25,15 @@ export const ThumbnailUpload: FC<Props> = ({
<Typography variant="body2" className="text-red-500">
必須
</Typography>
<SupportExtPopOver
supportedExts={[
{
category: '画像',
exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
},
]}
/>
</Vertical>
<Horizontal className="gap-0 items-start -mt-4">
<Typography variant="body2" className="text-gray-500">
対応形式:
</Typography>
<Typography variant="body2" className="text-xs text-gray-500 mx-4">
画像 [ .png .jpg .jpeg .bmp .gif ]
</Typography>
</Horizontal>
<DropImage
onDrop={(e) => {
if (e[0]) {
Expand Down