Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
feat: refine setting page (#19)
Browse files Browse the repository at this point in the history 
* refine setting page structure, and update the navigation for device

* update menuButton for device , and fix the workspace list setting page

* update fixed postion style for header and left navigation

* Move dataset and plugin molecules files from workspace to project folder

* change i18n title

* import assetContainer to settings page assets, wip: change assetContainer to work in both modal and settings

* add VirtualAssetCard component

* update asset modal style

* bring back multiple asset select and use it in removing assets, fix project list not updating bug

* fix Dashboard asset model bug

* fix Earth editor Asset modal bug

* update project list page project cell style

* fix assets cards icon preview image problems

* fix setting page properties style bug place

* update setting statusSection style problems

* update a little bit log and header style

* delete old assetlist component story file

* update suggestions form Inoue

* update metricsSizes and some flex

* fix PublicationStatus issues

* use grid css to update AssetContainer

* fix remove assets problem

* update colors and assetcontainer props name

* fix name

* fix name again

* fix file bug for setting page

* add some translation and update some style based on review

* delete commit

Co-authored-by: KaWaite <flippindaisy@gmail.com>
  • Loading branch information
@lavalse
lavalse and KaWaite committed Jul 1, 2021
1 parent d08ebac commit d06ee7e
Show file tree
Hide file tree
Showing 79 changed files with 574 additions and 771 deletions.
2 changes: 1 addition & 1 deletion src/components/atoms/Button/index.tsx
View file
Expand Up @@ -106,7 +106,7 @@ const StyledButton = styled.button<ButtonProps>`
large
? `${metricsSizes["s"]}px ${metricsSizes["2xl"]}px`
: `${metricsSizes["xs"]}px ${metricsSizes["xl"]}px`};
margin: ${({ margin }) => margin || "10px"};
margin: ${({ margin }) => margin || `${metricsSizes["m"]}px`};
user-select: none;
cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
justify-content: center;
Expand Down
5 changes: 5 additions & 0 deletions src/components/atoms/Icon/Icons/menuForDevice.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/atoms/Icon/icons.ts
View file
Expand Up @@ -104,6 +104,7 @@ import Scale from "./Icons/scale.svg";
import MapIcon from "./Icons/map.svg";
import NoProjects from "./Icons/noProjects.svg";
import TopPage from "./Icons/topPage.svg";
import MenuForDevice from "./Icons/menuForDevice.svg";

// Plugi-ins
import UploadZipPlugin from "./Icons/uploadZipPlugin.svg";
Expand Down Expand Up @@ -203,4 +204,5 @@ export default {
uploadZipPlugin: UploadZipPlugin,
privateGitHubRepo: PrivateGitHubRepo,
publicGitHubRepo: PublicGitHubRepo,
menuForDevice: MenuForDevice,
};
2 changes: 1 addition & 1 deletion src/components/atoms/Icon/index.stories.tsx
View file
Expand Up @@ -11,5 +11,5 @@ export default {
} as Meta;

export const Default = () => <Icon icon="layer" alt="icon" size={20} />;
export const Image = () => <Icon icon="/sample.svg" alt="icon" size={20} />;
export const Image = () => <Icon icon="textIcon.png" alt="icon" size={20} />;
export const Svg = () => <Icon icon={icon} alt="icon" size={20} />;
3 changes: 1 addition & 2 deletions src/components/atoms/PublicationStatus/index.tsx
View file
Expand Up @@ -52,7 +52,6 @@ const PublicationStatus: React.FC<PublishStatusProps> = ({
const StyledStatus = styled.div`
display: flex;
align-items: center;
line-height: 0;
`;

const StatusCircle = styled.div<PublishStatusProps>`
Expand All @@ -67,7 +66,7 @@ const StatusCircle = styled.div<PublishStatusProps>`
? props.theme.publishStatus.building
: null};
border-radius: 50px;
margin-right: ${metricsSizes["s"]}px;
margin: auto ${metricsSizes["s"]}px auto 0;
`;

const PublishLink = styled.a`
Expand Down
21 changes: 14 additions & 7 deletions src/components/molecules/Common/AssetModal/AssetCard/index.tsx
View file
Expand Up @@ -11,7 +11,6 @@ export type Props = {
className?: string;
name: string;
url: string;
isImage?: boolean;
cardSize?: CardSize;
checked?: boolean;
selected?: boolean;
Expand All @@ -22,7 +21,6 @@ const AssetCard: React.FC<Props> = ({
className,
name,
url,
isImage,
cardSize,
checked,
selected,
Expand All @@ -35,8 +33,12 @@ const AssetCard: React.FC<Props> = ({
selected={selected}
cardSize={cardSize}
onClick={() => onCheck?.(!check)}>
<ImgWrapper cardSize={cardSize} url={url}>
{!isImage && <Icon icon="file" />}
<ImgWrapper cardSize={cardSize}>
{/\.(jpg|jpeg|png|gif|svg|webp|GIF|JPG|JPEG|PNG|SVG|WEBP)$/.test(url) ? (
<PreviewImage url={url} />
) : (
<Icon icon="file" />
)}
</ImgWrapper>
<FileName size={cardSize === "large" ? "m" : "xs"} cardSize={cardSize} customColor>
{name}
Expand All @@ -57,16 +59,16 @@ const Wrapper = styled(Flex)<{ selected?: boolean; cardSize?: CardSize }>`
box-shadow: 0 6px 6px -6px ${props => props.theme.colors.other.black};
border: 1px solid
${props => (props.selected ? `${props.theme.assetCard.highlight}` : "transparent")};
margin: ${({ cardSize }) => (cardSize === "small" ? "5px" : "10px")};
padding: ${({ cardSize }) =>
cardSize === "small" ? "8px" : cardSize === "medium" ? "12px" : "20px"};
width: ${({ cardSize }) =>
cardSize === "small" ? "104px" : cardSize === "medium" ? "163px" : "218px"};
cardSize === "small" ? "104px" : cardSize === "medium" ? "192px" : "274px"};
height: ${({ cardSize }) =>
cardSize === "small" ? "104px" : cardSize === "medium" ? "168px" : "234px"};
cardSize === "small" ? "104px" : cardSize === "medium" ? "186px" : "257px"};
position: relative;
cursor: pointer;
color: ${({ theme }) => theme.assetCard.text};
box-sizing: border-box;
&:hover {
background: ${({ theme }) => theme.assetCard.bgHover};
Expand All @@ -81,6 +83,11 @@ const ImgWrapper = styled.div<{ cardSize?: CardSize; url?: string }>`
justify-content: center;
height: ${({ cardSize }) =>
cardSize === "small" ? "77px" : cardSize === "medium" ? "126px" : "175px"};
`;

const PreviewImage = styled.div<{ url?: string }>`
width: 100%;
height: 100%;
background-image: ${props => `url(${props.url})`};
background-size: cover;
background-position: center;
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts
View file
Expand Up @@ -26,7 +26,7 @@ export default ({
assets?: Asset[];
isMultipleSelectable?: boolean;
accept?: string;
onCreateAsset?: (file: File) => void;
onCreateAsset?: (files: FileList) => void;
initialAsset?: Asset;
selectAsset?: (assets: Asset[]) => void;
selectedAssets?: Asset[];
Expand Down Expand Up @@ -89,7 +89,7 @@ export default ({
);
};

const handleFileSelect = useFileInput(files => onCreateAsset?.(files[0]), {
const handleFileSelect = useFileInput(files => onCreateAsset?.(files), {
accept,
multiple: isMultipleSelectable,
});
Expand Down
104 changes: 65 additions & 39 deletions src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
View file
@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";
import { useIntl } from "react-intl";

import Button from "@reearth/components/atoms/Button";
Expand All @@ -23,22 +23,26 @@ export type Props = {
assets?: Asset[];
isMultipleSelectable?: boolean;
accept?: string;
onCreateAsset?: (file: File) => void;
onCreateAsset?: (files: FileList) => void;
onRemove?: (assetIds: string[]) => void;
initialAsset?: Asset;
selectedAssets?: Asset[];
selectAsset?: (assets: Asset[]) => void;
fileType?: "image" | "video" | "file";
isHeightFixed?: boolean;
};

const AssetContainer: React.FC<Props> = ({
assets,
isMultipleSelectable = false,
accept,
onCreateAsset,
onRemove,
initialAsset,
selectedAssets,
selectAsset,
fileType,
isHeightFixed,
}) => {
const intl = useIntl();
const {
Expand Down Expand Up @@ -70,20 +74,39 @@ const AssetContainer: React.FC<Props> = ({
{ key: "name", label: intl.formatMessage({ defaultMessage: "Alphabetical" }) },
];

const handleRemove = useCallback(() => {
if (selectedAssets?.length) {
onRemove?.(selectedAssets.map(a => a.id));
selectAsset?.([]);
}
}, [onRemove, selectAsset, selectedAssets]);

return (
<Wrapper>
<StyledUploadButton
large
text={
fileType === "image"
? intl.formatMessage({ defaultMessage: "Upload image" })
: intl.formatMessage({ defaultMessage: "Upload file" })
}
icon="upload"
type="button"
buttonType="primary"
onClick={handleUploadToAsset}
/>
<Flex justify={onRemove ? "flex-end" : "center"}>
<Button
large
text={
fileType === "image"
? intl.formatMessage({ defaultMessage: "Upload image" })
: intl.formatMessage({ defaultMessage: "Upload file" })
}
icon="upload"
type="button"
buttonType={onRemove ? "secondary" : "primary"}
onClick={handleUploadToAsset}
/>
{onRemove && (
<Button
large
text={intl.formatMessage({ defaultMessage: "Delete" })}
icon="bin"
type="button"
buttonType="secondary"
onClick={handleRemove}
/>
)}
</Flex>
<Divider margin="0" />
<NavBar align="center" justify="space-between">
<SelectWrapper direction="row" justify="space-between" align="center">
Expand All @@ -95,7 +118,7 @@ const AssetContainer: React.FC<Props> = ({
<StyledIcon icon={iconChoice} onClick={handleReverse} />
</SelectWrapper>

<LayoutButtons justify="center">
<LayoutButtons justify="left">
<StyledIcon
icon="assetList"
onClick={() => setLayoutType("list")}
Expand All @@ -114,7 +137,7 @@ const AssetContainer: React.FC<Props> = ({
</LayoutButtons>
<SearchBar onChange={handleSearch} />
</NavBar>
<AssetWrapper direction="column" justify="space-between">
<AssetWrapper isHeightFixed={isHeightFixed}>
{!filteredAssets || filteredAssets.length < 1 ? (
<Template align="center" justify="center">
<TemplateText size="m">
Expand All @@ -130,16 +153,12 @@ const AssetContainer: React.FC<Props> = ({
</TemplateText>
</Template>
) : (
<AssetList
wrap={layoutType === "list" ? "nowrap" : "wrap"}
justify="space-between"
layoutType={layoutType}>
<AssetList layoutType={layoutType}>
{layoutType === "list"
? (searchResults || filteredAssets)?.map(a => (
<AssetListItem
key={a.id}
asset={a}
isImage={fileType === "image"}
onCheck={() => handleAssetsSelect(a)}
selected={selectedAssets?.includes(a)}
checked={currentSaved === a}
Expand All @@ -151,7 +170,6 @@ const AssetContainer: React.FC<Props> = ({
name={a.name}
cardSize={layoutType}
url={a.url}
isImage={fileType === "image"}
onCheck={() => handleAssetsSelect(a)}
selected={selectedAssets?.includes(a)}
checked={currentSaved === a}
Expand All @@ -166,35 +184,42 @@ const AssetContainer: React.FC<Props> = ({
};

const Wrapper = styled.div`
height: 558px;
width: 100%;
`;

const AssetWrapper = styled(Flex)`
height: 425px;
const AssetWrapper = styled.div<{ isHeightFixed?: boolean }>`
height: ${({ isHeightFixed }) => (isHeightFixed ? "" : "425px")};
min-height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
`;

const AssetList = styled(Flex)<{ layoutType?: LayoutTypes }>`
${({ layoutType }) => layoutType === "list" && "flex-direction: column;"}
max-height: 458px;
const AssetList = styled.div<{ layoutType?: LayoutTypes }>`
padding: ${metricsSizes["l"]}px ${metricsSizes["m"]}px;
overflow-y: scroll;
scrollbar-width: none;
display: grid;
grid-template-columns: ${({ layoutType }) =>
(layoutType === "list" && "100%") ||
(layoutType === "medium" && "repeat(auto-fill, 192px)") ||
(layoutType === "small" && "repeat(auto-fill, 104px)")};
grid-template-rows: ${({ layoutType }) =>
(layoutType === "list" && "46px") ||
(layoutType === "medium" && "repeat(auto-fill, 186px)") ||
(layoutType === "small" && "repeat(auto-fill, 120px)")};
gap: ${({ layoutType }) =>
(layoutType === "list" && "12px") ||
(layoutType === "medium" && "24px") ||
(layoutType === "small" && "16px")};
justify-content: space-between;
&::-webkit-scrollbar {
display: none;
}
&::after {
content: "";
flex: ${({ layoutType }) => (layoutType === "medium" ? "0 33%" : "auto")};
}
`;

const StyledUploadButton = styled(Button)`
margin: ${metricsSizes["m"]}px auto ${metricsSizes["2xl"]}px auto;
`;

const NavBar = styled(Flex)`
margin: ${metricsSizes["s"]}px;
margin: ${metricsSizes["m"]}px;
flex: 1;
`;

Expand All @@ -203,11 +228,12 @@ const SelectWrapper = styled(Flex)`
`;

const LayoutButtons = styled(Flex)`
margin-left: ${metricsSizes["l"]}px;
flex: 3;
`;

const StyledIcon = styled(Icon)<{ selected?: boolean }>`
margin-left: ${metricsSizes["s"]}px;
margin-left: ${metricsSizes["m"]}px;
border-radius: 5px;
padding: ${metricsSizes["2xs"]}px;
color: ${({ theme }) => theme.colors.text.main};
Expand Down
13 changes: 10 additions & 3 deletions src/components/molecules/Common/AssetModal/AssetListItem/index.tsx
View file
Expand Up @@ -25,12 +25,18 @@ export type Props = {
onCheck?: (checked: boolean) => void;
};

const AssetListItem: React.FC<Props> = ({ asset, selected, checked, isImage, onCheck }) => {
const AssetListItem: React.FC<Props> = ({ asset, selected, checked, onCheck }) => {
const theme = useTheme();
return (
<ListItem key={asset.id} align="center" selected={selected} onClick={() => onCheck?.(!check)}>
<Icon
icon={checked ? "checkCircle" : isImage ? "image" : "file"}
icon={
checked
? "checkCircle"
: /\.(jpg|jpeg|png|gif|svg|webp|GIF|JPG|JPEG|PNG|SVG|WEBP)$/.test(asset.url)
? "image"
: "file"
}
size={16}
color={checked ? theme.assetCard.highlight : theme.assetCard.text}
/>
Expand All @@ -52,9 +58,10 @@ const ListItem = styled(Flex)<{ selected?: boolean }>`
border: 1px solid
${({ selected, theme }) => (selected ? `${theme.assetCard.highlight}` : "transparent")};
padding: ${metricsSizes["m"]}px ${metricsSizes["xl"]}px;
margin-bottom: ${metricsSizes["l"]}px;
cursor: pointer;
color: ${({ theme }) => theme.colors.text.main};
height: 46px;
box-sizing: border-box;
&:hover {
background: ${({ theme }) => theme.assetCard.bgHover};
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/Common/AssetModal/index.tsx
View file
Expand Up @@ -21,7 +21,7 @@ export type Props = {
isMultipleSelectable?: boolean;
isOpen?: boolean;
onClose?: () => void;
onCreateAsset?: (file: File) => void;
onCreateAsset?: (files: FileList) => void;
onSelect?: (value: string | null) => void;
value?: string;
fileType?: "image" | "video" | "file";
Expand Down
1 change: 1 addition & 0 deletions src/components/molecules/Common/Header/index.tsx
View file
Expand Up @@ -114,6 +114,7 @@ const Content = styled.div`
padding: 0 20px;
width: calc(100% - 40px);
height: 100%;
align-items: center;
`;

const itemStyle = css`
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/Common/ProjectCreationModal/index.tsx
View file
Expand Up @@ -25,7 +25,7 @@ export interface Props {
onClose?: (refetch?: boolean) => void;
onSubmit?: (values: FormValues) => Promise<void> | void;
assets?: Asset[];
createAssets?: (file: File) => Promise<void>;
createAssets?: (files: FileList) => Promise<void>;
}

const initialValues: FormValues = {
Expand Down

0 comments on commit d06ee7e

Please sign in to comment.