From fc3b4955deef23488dc2dd38823da04e48f2be1d Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Mon, 12 Jun 2023 17:33:36 +0900
Subject: [PATCH 01/11] Chore(web): Add SettingsButtons Component
---
web/src/beta/components/Icon/Icons/audio.svg | 3 +
.../components/Icon/Icons/buttonBlock.svg | 4 ++
web/src/beta/components/Icon/Icons/camera.svg | 4 ++
.../beta/components/Icon/Icons/editIcon.svg | 3 +
web/src/beta/components/Icon/Icons/mdFile.svg | 6 ++
.../beta/components/Icon/Icons/settings.svg | 3 +
web/src/beta/components/Icon/Icons/video.svg | 3 +
web/src/beta/components/Icon/icons.ts | 14 ++++
.../SettingsButtons/index.stories.tsx | 29 +++++++++
.../beta/components/SettingsButtons/index.tsx | 64 +++++++++++++++++++
10 files changed, 133 insertions(+)
create mode 100644 web/src/beta/components/Icon/Icons/audio.svg
create mode 100644 web/src/beta/components/Icon/Icons/buttonBlock.svg
create mode 100644 web/src/beta/components/Icon/Icons/camera.svg
create mode 100644 web/src/beta/components/Icon/Icons/editIcon.svg
create mode 100644 web/src/beta/components/Icon/Icons/mdFile.svg
create mode 100644 web/src/beta/components/Icon/Icons/settings.svg
create mode 100644 web/src/beta/components/Icon/Icons/video.svg
create mode 100644 web/src/beta/components/SettingsButtons/index.stories.tsx
create mode 100644 web/src/beta/components/SettingsButtons/index.tsx
diff --git a/web/src/beta/components/Icon/Icons/audio.svg b/web/src/beta/components/Icon/Icons/audio.svg
new file mode 100644
index 0000000000..e73c60548e
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/audio.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/beta/components/Icon/Icons/buttonBlock.svg b/web/src/beta/components/Icon/Icons/buttonBlock.svg
new file mode 100644
index 0000000000..b922ecacb7
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/buttonBlock.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/src/beta/components/Icon/Icons/camera.svg b/web/src/beta/components/Icon/Icons/camera.svg
new file mode 100644
index 0000000000..fbb8548d52
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/camera.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/src/beta/components/Icon/Icons/editIcon.svg b/web/src/beta/components/Icon/Icons/editIcon.svg
new file mode 100644
index 0000000000..4f844cf905
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/editIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/beta/components/Icon/Icons/mdFile.svg b/web/src/beta/components/Icon/Icons/mdFile.svg
new file mode 100644
index 0000000000..371470c386
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/mdFile.svg
@@ -0,0 +1,6 @@
+
diff --git a/web/src/beta/components/Icon/Icons/settings.svg b/web/src/beta/components/Icon/Icons/settings.svg
new file mode 100644
index 0000000000..d4cee33d1d
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/settings.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/beta/components/Icon/Icons/video.svg b/web/src/beta/components/Icon/Icons/video.svg
new file mode 100644
index 0000000000..72082e6490
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/video.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index b358fd6d56..63f2fcd4c5 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -35,6 +35,14 @@ import PlayRight from "./Icons/play-right.svg";
import PlayLeft from "./Icons/play-left.svg";
import Ellipse from "./Icons/ellipse.svg";
+// SettingsButton
+import Audio from "./Icons/audio.svg";
+import EditIcon from "./Icons/editIcon.svg";
+import Settings from "./Icons/settings.svg";
+import ButtonBlock from "./Icons/buttonBlock.svg";
+import Camera from "./Icons/camera.svg";
+import MdFile from "./Icons/mdFile.svg";
+
export default {
file: File,
dl: InfoTable,
@@ -57,4 +65,10 @@ export default {
playLeft: PlayLeft,
timeline: Timeline,
actionbutton: ActionButton,
+ audio: Audio,
+ editIcon: EditIcon,
+ settings: Settings,
+ buttonBlock: ButtonBlock,
+ camera: Camera,
+ mdFile: MdFile,
};
diff --git a/web/src/beta/components/SettingsButtons/index.stories.tsx b/web/src/beta/components/SettingsButtons/index.stories.tsx
new file mode 100644
index 0000000000..12e4db1bbe
--- /dev/null
+++ b/web/src/beta/components/SettingsButtons/index.stories.tsx
@@ -0,0 +1,29 @@
+import { action } from "@storybook/addon-actions";
+import { Meta, StoryObj } from "@storybook/react";
+import React, { ReactNode } from "react";
+
+import SettingsButtons from ".";
+
+export default {
+ component: SettingsButtons,
+} as Meta;
+
+type Story = StoryObj;
+
+const Wrapper: React.FC<{ children: ReactNode }> = ({ children }) => (
+ {children}
+);
+
+export const Default: Story = {
+ render: () => (
+
+
+
+ ),
+};
diff --git a/web/src/beta/components/SettingsButtons/index.tsx b/web/src/beta/components/SettingsButtons/index.tsx
new file mode 100644
index 0000000000..df607dc4b9
--- /dev/null
+++ b/web/src/beta/components/SettingsButtons/index.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import { styled } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+export interface Props {
+ title: string;
+ icon: string;
+ onBlock?: () => void;
+ onEdit?: () => void;
+ onSetting?: () => void;
+}
+
+const SettingsButtons: React.FC = ({ title, icon, onBlock, onEdit, onSetting }) => {
+ return (
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ padding: 0px;
+
+ width: 100%;
+ height: 100%;
+ background: #3b3cd0;
+`;
+
+export default SettingsButtons;
From b95f951c2377c25ac991a28e8283d2136ecc7eca Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Tue, 13 Jun 2023 11:18:12 +0900
Subject: [PATCH 02/11] Chore(web): Modifying parts that are not necessary
---
web/src/beta/components/SettingsButtons/index.tsx | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/web/src/beta/components/SettingsButtons/index.tsx b/web/src/beta/components/SettingsButtons/index.tsx
index df607dc4b9..3fb01c32bc 100644
--- a/web/src/beta/components/SettingsButtons/index.tsx
+++ b/web/src/beta/components/SettingsButtons/index.tsx
@@ -51,14 +51,12 @@ const SettingsButtons: React.FC = ({ title, icon, onBlock, onEdit, onSett
const Wrapper = styled.div`
display: flex;
- flex-direction: row;
justify-content: space-around;
align-items: center;
- padding: 0px;
width: 100%;
height: 100%;
- background: #3b3cd0;
+ background: ${props => props.theme.infoBox.accent2};
`;
export default SettingsButtons;
From d1b8b98377bed667d26c3e92c429e2acfe5e6383 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Wed, 14 Jun 2023 14:45:55 +0900
Subject: [PATCH 03/11] Fix(web): Render to args
---
.../SettingsButtons/index.stories.tsx | 25 +++++++++++--------
1 file changed, 14 insertions(+), 11 deletions(-)
diff --git a/web/src/beta/components/SettingsButtons/index.stories.tsx b/web/src/beta/components/SettingsButtons/index.stories.tsx
index 12e4db1bbe..5c18108015 100644
--- a/web/src/beta/components/SettingsButtons/index.stories.tsx
+++ b/web/src/beta/components/SettingsButtons/index.stories.tsx
@@ -15,15 +15,18 @@ const Wrapper: React.FC<{ children: ReactNode }> = ({ children }) => (
);
export const Default: Story = {
- render: () => (
-
-
-
- ),
+ args: {
+ title: "Audio",
+ icon: "audio",
+ onBlock: action("onBlock"),
+ onEdit: action("onEdit"),
+ onSetting: action("onSetting"),
+ },
+ render: args => {
+ return (
+
+
+
+ );
+ },
};
From c52701a4bff71816ad15a65f8aeec0448ba6c3f1 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Mon, 19 Jun 2023 18:15:00 +0900
Subject: [PATCH 04/11] Fix(web): modification by feedback
---
web/src/beta/components/Icon/Icons/audio.svg | 4 ++--
web/src/beta/components/Icon/Icons/clock.svg | 4 ++++
web/src/beta/components/Icon/Icons/editIcon.svg | 4 ++--
web/src/beta/components/Icon/Icons/mdFile.svg | 6 +++---
web/src/beta/components/Icon/Icons/settings.svg | 4 ++--
web/src/beta/components/Icon/Icons/video.svg | 4 ++--
web/src/beta/components/Icon/icons.ts | 2 ++
.../components/SettingsButtons/index.stories.tsx | 6 +-----
web/src/beta/components/SettingsButtons/index.tsx | 15 +++++++--------
9 files changed, 25 insertions(+), 24 deletions(-)
create mode 100644 web/src/beta/components/Icon/Icons/clock.svg
diff --git a/web/src/beta/components/Icon/Icons/audio.svg b/web/src/beta/components/Icon/Icons/audio.svg
index e73c60548e..e6d09cd92e 100644
--- a/web/src/beta/components/Icon/Icons/audio.svg
+++ b/web/src/beta/components/Icon/Icons/audio.svg
@@ -1,3 +1,3 @@
-