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 2 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
26 changes: 5 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 { InfoPopOver } from './InfoPopOver';

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,10 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
<Typography className="text-red-500" variant="body2">
必須
</Typography>
<InfoPopOver>
{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a ]\n モデル[.gltf .fbx]\n zip[.zip]`}

@K-Kizuku K-Kizuku May 6, 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.

文字の前後の空白を入れるか入れないかで統一してほしいです
[.xxx] or [ .xxx ]
前者なら以下の修正

Suggested change
{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a ]\n モデル[.gltf .fbx]\n zip[.zip]`}
{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a]\n モデル[.gltf .fbx]\n zip[.zip]`}

@K-Kizuku K-Kizuku May 6, 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.

<br />じゃだめ？(特に要件とか仕様は確認してないので，何か理由があるなら無視してOK．)

Suggested change
{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a ]\n モデル[.gltf .fbx]\n zip[.zip]`}
対応形式:
<br />
画像[.png .jpg .jpeg .bmp .gif]
<br />
動画[.mp4 .mov]
<br />
音源[.mp3 .wav .m4a ]
<br />
モデル[.gltf .fbx]
<br />
zip[.zip]

@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.

拡張子情報は親要素から受け取るわけじゃないからpopoverの中に隠蔽しちゃっていいと思う

@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.

って思ったけどこれアセットとサムネイルで違うのか

</InfoPopOver>
</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
27 changes: 27 additions & 0 deletions src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { FC, ReactNode } from 'react';

import { Info } from 'lucide-react';

import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/Tooltip';

type Props = {
children: ReactNode;
};

export const InfoPopOver: FC<Props> = ({ children }) => (

@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.

Infoだと情報が薄くて何の情報なのかわかりづらいからSupportExtPopOverとかにしてもいいかも

<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info size={16} color="#757575" />
</TooltipTrigger>
<TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">
<p className="whitespace-pre-wrap text-[10px] font-bold">{children}</p>
</TooltipContent>

@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.

Suggested change
<TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">
<p className="whitespace-pre-wrap text-[10px] font-bold">{children}</p>
</TooltipContent>
<TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">
{
supportedExts.map(({category,exts})=>(
<Vertical>
<Typography>
{category}
</Typography>
<span>
[
<Vertical>
{
exts.map((ext)=>(
<p>
.{ext}
</p>
))
}
<Vertical>
]
</Vertical>
))
}
</TooltipContent>

冗長ではあると思うけど私だったらこういうふうに書くかも(動くかどうかは確かめてない、あくまでイメージ)

supportedExtっていうpropsを取ってそれを元にPopoverがレンダリングする

supportedExtはcategoryとextsをkeyに持つ構造体の配列

で親からsupportedExtを渡すだけでpopoverが統一されたスタイルでレンダリングをしてくれる

親が渡すsupportedExtは固定値で持っておけば何か変更があったとしても構造体を変えるだけでそれまでと同様のスタイルが保てる(文字列だと開発者がスタイルを気にして開発しなきゃいけなくなる(ドットだったりスペースだったり))

@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.

ありがとうございます 勉強になりま
そんな感じにしてみます

</Tooltip>
</TooltipProvider>
);
12 changes: 3 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 { InfoPopOver } from './InfoPopOver';

import { Vertical } from '@/components/Layout/Vertical';
import { DropImage } from '@/components/functional/DropImage';
import { Center } from '@/components/ui/Center';
Expand All @@ -24,15 +25,8 @@ export const ThumbnailUpload: FC<Props> = ({
<Typography variant="body2" className="text-red-500">
必須
</Typography>
<InfoPopOver>{`対応形式:\n 画像 [ .png .jpg .jpeg .bmp .gif ]`}</InfoPopOver>
</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