Skip to content
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

feat(web): add support to copy asset url from asset dashboard #1195

Merged
merged 12 commits into from
Oct 29, 2024
Merged

feat(web): add support to copy asset url from asset dashboard #1195

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e3e71c6
feat: add support to copy asset url
mulengawilfred Oct 23, 2024
2a6034d
feat: add tooltip for asset url
mulengawilfred Oct 24, 2024
c387706
fix: remove unused tooltip component
mulengawilfred Oct 24, 2024
923bd4d
fix: revert change to asset name width
mulengawilfred Oct 24, 2024
1a3402f
fix: refactor css to col component and run translate command
mulengawilfred Oct 25, 2024
c88037e
fix: update translation text and refactor styling to column
mulengawilfred Oct 28, 2024
2fbce48
Merge branch 'main' into feat/copy-asset-url
mulengawilfred Oct 28, 2024
bac80c4
fix: remove asset url text
mulengawilfred Oct 28, 2024
b431efa
Merge branch 'main' into feat/copy-asset-url
airslice Oct 29, 2024
68a7e14
refactor: styles & copy
airslice Oct 29, 2024
aa267ed
style: revert
airslice Oct 29, 2024
f70be48
style: min width for the content area
airslice Oct 29, 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
11 changes: 8 additions & 3 deletions web/src/beta/features/AssetsManager/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,21 +112,26 @@ const AssetsManager: FC<AssetsManagerProps> = ({
{layout === "list" && (
<ListHeader size={size} width={contentWidth}>
<ThumbnailSpacer />
<Col width={50}>
<Col width={40}>
<Typography weight="bold" size="body">
{t("Name")}
</Typography>
</Col>
<Col width={30}>
<Col width={20}>
<Typography weight="bold" size="body">
{t("Uploaded At")}
</Typography>
</Col>
<Col width={30}>
<Col width={10}>
<Typography weight="bold" size="body">
{t("Size")}
</Typography>
</Col>
<Col width={30}>
<Typography weight="bold" size="body">
{t("Path")}
</Typography>
</Col>
</ListHeader>
)}
<AssetsWrapper ref={assetsWrapperRef}>
Expand Down
46 changes: 38 additions & 8 deletions web/src/beta/features/AssetsManager/item/AssetListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Icon, Typography } from "@reearth/beta/lib/reearth-ui";
import { Icon, IconButton, Typography } from "@reearth/beta/lib/reearth-ui";
import { formatRelativeTime } from "@reearth/beta/utils/time";
import { useT } from "@reearth/services/i18n";
import { useNotification } from "@reearth/services/state";
import { styled, useTheme } from "@reearth/services/theme";
import { FC, MouseEvent, useCallback, useMemo } from "react";

Expand All @@ -15,6 +17,8 @@ const AssetListItem: FC<AssetItemProps> = ({
() => selectedAssetIds.includes(asset.id),
[selectedAssetIds, asset.id]
);
const t = useT();
const [, setNotification] = useNotification();

const type = useMemo(() => getAssetType(asset), [asset]);

Expand All @@ -28,6 +32,18 @@ const AssetListItem: FC<AssetItemProps> = ({
[asset, onSelect]
);

const handleIconClick = useCallback(
(e: MouseEvent) => {
e.stopPropagation();
navigator.clipboard.writeText(asset.url);
setNotification({
type: "success",
text: t("Asset url copied")
});
},
[asset.url, setNotification, t]
);

const formattedDate = useMemo(
() => formatRelativeTime(new Date(asset.createdAt)),
[asset.createdAt]
Expand All @@ -44,15 +60,25 @@ const AssetListItem: FC<AssetItemProps> = ({
size={20}
/>
</Thumbnail>
<AssetName>
<Typography size="body">{asset.name}</Typography>
</AssetName>
<Col width={30}>
<Col width={40}>
<AssetName>
<Typography size="body">{asset.name}</Typography>
</AssetName>
</Col>
<Col width={20}>
<Typography size="body">{formattedDate}</Typography>
</Col>
<Col width={30}>
<Col width={10}>
<Typography size="body">{formattedSize}</Typography>
</Col>
<Col width={30} title={asset.url}>
<IconButton
appearance="simple"
icon="copy"
onClick={handleIconClick}
size="medium"
/>
</Col>
</Wrapper>
);
};
Expand Down Expand Up @@ -96,10 +122,14 @@ const AssetName = styled("div")(() => ({
flexShrink: 0
}));

const Col = styled("div")<{ width: number }>(({ width }) => ({
const Col = styled("div")<{
width: number;
}>(({ width }) => ({
width: `${width}%`,
flexGrow: 0,
flexShrink: 0
flexShrink: 0,
display: "flex",
alignItems: "center"
}));

function formatBytes(bytes: number): string {
Expand Down
2 changes: 2 additions & 0 deletions web/src/services/i18n/translations/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ Assets selected: ''
Asset selected: ''
Uploaded At: ''
Size: ''
Path: ''
No Asset has been uploaded yet: ''
Asset url copied: ''
Use Name or Email: ''
Find Member: ''
No Member match your search.: ''
Expand Down
2 changes: 2 additions & 0 deletions web/src/services/i18n/translations/ja.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ Assets selected: ''
Asset selected: ''
Uploaded At: ''
Size: ''
Path: 'パス'
No Asset has been uploaded yet: ''
Asset url copied: 'アセットURLをコピーしました'
Use Name or Email: ''
Find Member: ''
No Member match your search.: ''
Expand Down
Loading