From e3dc09ff39c8fbc9ff07f846b3d45b885d78d4c3 Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Thu, 8 Jun 2023 11:08:11 +0900 Subject: [PATCH 1/9] Chore(web): Add InsertionButton --- .../InsertionButton/index.stories.tsx | 13 +++++ .../beta/components/InsertionButton/index.tsx | 52 +++++++++++++++++++ 2 files changed, 65 insertions(+) create mode 100644 web/src/beta/components/InsertionButton/index.stories.tsx create mode 100644 web/src/beta/components/InsertionButton/index.tsx diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx new file mode 100644 index 0000000000..ae0b45aeb2 --- /dev/null +++ b/web/src/beta/components/InsertionButton/index.stories.tsx @@ -0,0 +1,13 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import InsertionButton from "."; + +export default { + component: InsertionButton, +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx new file mode 100644 index 0000000000..ff27f06e80 --- /dev/null +++ b/web/src/beta/components/InsertionButton/index.tsx @@ -0,0 +1,52 @@ +import styled from "@emotion/styled"; +import { FC } from "react"; + +import Icon from "../Icon"; + +type Props = { + onClick?: () => void; +}; + +const InsertionButton: FC = ({ onClick }) => { + return ( + + + + + ); +}; + +const Box = styled.div` + display: flex; + flex-direction: row; + align-items: center; + padding: 2px 0px; + gap: 4px; + + border-radius: 6px; + opacity: 0; + + &:hover { + opacity: 1; + transition: all 0.5s ease; + } +`; + +const Border = styled.object` + height: 1px; + width: 100%; + + background: #3b3cd0; + border-radius: 1px; +`; +export default InsertionButton; From 62231dc80954e1fa802c4aab0fb67c7b2e130c84 Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Fri, 9 Jun 2023 09:58:47 +0900 Subject: [PATCH 2/9] Chore(web) : Add svg file --- web/src/beta/components/Icon/Icons/plus.svg | 3 +++ web/src/beta/components/Icon/icons.ts | 4 ++++ 2 files changed, 7 insertions(+) create mode 100644 web/src/beta/components/Icon/Icons/plus.svg diff --git a/web/src/beta/components/Icon/Icons/plus.svg b/web/src/beta/components/Icon/Icons/plus.svg new file mode 100644 index 0000000000..b34d787e46 --- /dev/null +++ b/web/src/beta/components/Icon/Icons/plus.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..b543c25510 100644 --- a/web/src/beta/components/Icon/icons.ts +++ b/web/src/beta/components/Icon/icons.ts @@ -35,6 +35,9 @@ import PlayRight from "./Icons/play-right.svg"; import PlayLeft from "./Icons/play-left.svg"; import Ellipse from "./Icons/ellipse.svg"; +// Plus +import Plus from "./Icons/plus.svg"; + export default { file: File, dl: InfoTable, @@ -55,6 +58,7 @@ export default { ellipse: Ellipse, playRight: PlayRight, playLeft: PlayLeft, + plus: Plus, timeline: Timeline, actionbutton: ActionButton, }; From 8e54317b215321f1f3433488e9e5759741a2fc3e Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Fri, 9 Jun 2023 14:40:50 +0900 Subject: [PATCH 3/9] Fix(web): InsertionButton stroies use render --- web/src/beta/components/InsertionButton/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx index ae0b45aeb2..f2505e397c 100644 --- a/web/src/beta/components/InsertionButton/index.stories.tsx +++ b/web/src/beta/components/InsertionButton/index.stories.tsx @@ -9,5 +9,5 @@ export default { type Story = StoryObj; export const Default: Story = { - args: {}, + render: () => , }; From 1482e6cad9cd502c1d0cb5268fa3fcf58423aedb Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Tue, 13 Jun 2023 10:55:21 +0900 Subject: [PATCH 4/9] Fix(web): Modification by feedback on InsertionButton --- web/src/beta/components/InsertionButton/index.stories.tsx | 3 ++- web/src/beta/components/InsertionButton/index.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx index f2505e397c..ad8d93e8ef 100644 --- a/web/src/beta/components/InsertionButton/index.stories.tsx +++ b/web/src/beta/components/InsertionButton/index.stories.tsx @@ -1,3 +1,4 @@ +import { action } from "@storybook/addon-actions"; import { Meta, StoryObj } from "@storybook/react"; import InsertionButton from "."; @@ -9,5 +10,5 @@ export default { type Story = StoryObj; export const Default: Story = { - render: () => , + render: () => , }; diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx index ff27f06e80..a2464d6d91 100644 --- a/web/src/beta/components/InsertionButton/index.tsx +++ b/web/src/beta/components/InsertionButton/index.tsx @@ -1,6 +1,7 @@ -import styled from "@emotion/styled"; import { FC } from "react"; +import { styled } from "@reearth/services/theme"; + import Icon from "../Icon"; type Props = { @@ -40,13 +41,14 @@ const Box = styled.div` opacity: 1; transition: all 0.5s ease; } + cursor: pointer; `; const Border = styled.object` height: 1px; width: 100%; - background: #3b3cd0; + background: ${props => props.theme.main.select}; border-radius: 1px; `; export default InsertionButton; From b7ae58af16c317f682a0f83d2a29f418f42d976e Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Wed, 14 Jun 2023 14:38:54 +0900 Subject: [PATCH 5/9] Fix(web): render to args --- web/src/beta/components/InsertionButton/index.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx index ad8d93e8ef..a2200d7937 100644 --- a/web/src/beta/components/InsertionButton/index.stories.tsx +++ b/web/src/beta/components/InsertionButton/index.stories.tsx @@ -10,5 +10,7 @@ export default { type Story = StoryObj; export const Default: Story = { - render: () => , + args: { + onClick: action("onClick"), + }, }; From ed9d5a982aa13d1e2278b4e67b73d552fe52e928 Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK Date: Fri, 16 Jun 2023 09:09:39 +0900 Subject: [PATCH 6/9] Fix(web): delete onClick funtion in story --- web/src/beta/components/InsertionButton/index.stories.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx index a2200d7937..1166244773 100644 --- a/web/src/beta/components/InsertionButton/index.stories.tsx +++ b/web/src/beta/components/InsertionButton/index.stories.tsx @@ -1,4 +1,3 @@ -import { action } from "@storybook/addon-actions"; import { Meta, StoryObj } from "@storybook/react"; import InsertionButton from "."; @@ -9,8 +8,4 @@ export default { type Story = StoryObj; -export const Default: Story = { - args: { - onClick: action("onClick"), - }, -}; +export const Default: Story = {}; From af30a77e1d39c3861e4b9bb3fd4ba899d7e091ba Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Tue, 20 Jun 2023 18:00:03 +0900 Subject: [PATCH 7/9] Fix(web): changed color theme --- web/src/beta/components/InsertionButton/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx index a2464d6d91..4c2949d517 100644 --- a/web/src/beta/components/InsertionButton/index.tsx +++ b/web/src/beta/components/InsertionButton/index.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; -import { styled } from "@reearth/services/theme"; +import { styled, useTheme } from "@reearth/services/theme"; import Icon from "../Icon"; @@ -9,6 +9,8 @@ type Props = { }; const InsertionButton: FC = ({ onClick }) => { + const theme = useTheme(); + return ( = ({ onClick }) => { style={{ width: "9.75px", height: "9.75px", - background: "#3b3cd0", + background: theme.general.select, borderRadius: "50%", padding: "2px", - color: "black", + color: theme.general.bg.transparent, }} /> @@ -48,7 +50,7 @@ const Border = styled.object` height: 1px; width: 100%; - background: ${props => props.theme.main.select}; + background: ${props => props.theme.general.select}; border-radius: 1px; `; export default InsertionButton; From e53b1f1fd335ee5ff27067d99cc2e5262f5a5e0d Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Fri, 23 Jun 2023 18:04:09 +0900 Subject: [PATCH 8/9] Fix(web): Modification by feedback --- .../beta/components/InsertionButton/index.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx index 4c2949d517..a978ca84f8 100644 --- a/web/src/beta/components/InsertionButton/index.tsx +++ b/web/src/beta/components/InsertionButton/index.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; -import { styled, useTheme } from "@reearth/services/theme"; +import { styled } from "@reearth/services/theme"; import Icon from "../Icon"; @@ -9,21 +9,9 @@ type Props = { }; const InsertionButton: FC = ({ onClick }) => { - const theme = useTheme(); - return ( - + ); @@ -39,10 +27,13 @@ const Box = styled.div` border-radius: 6px; opacity: 0; - &:hover { + :hover { opacity: 1; transition: all 0.5s ease; } + :not(:hover) { + transition: all 0.5s ease; + } cursor: pointer; `; @@ -53,4 +44,12 @@ const Border = styled.object` background: ${props => props.theme.general.select}; border-radius: 1px; `; + +const StyledIcon = styled(Icon)` + background: ${props => props.theme.general.select}; + border-radius: 50%; + padding: 2px; + color: ${props => props.theme.general.bg.transparent}; +`; + export default InsertionButton; From c64eda2eb9460d15306c6981c11e9359e26e0d55 Mon Sep 17 00:00:00 2001 From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com> Date: Fri, 23 Jun 2023 18:05:42 +0900 Subject: [PATCH 9/9] Fix(web): Modification by feedback --- web/src/beta/components/InsertionButton/index.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx index a978ca84f8..1199aa755e 100644 --- a/web/src/beta/components/InsertionButton/index.tsx +++ b/web/src/beta/components/InsertionButton/index.tsx @@ -1,14 +1,11 @@ -import { FC } from "react"; - +import Icon from "@reearth/beta/components/Icon"; import { styled } from "@reearth/services/theme"; -import Icon from "../Icon"; - type Props = { onClick?: () => void; }; -const InsertionButton: FC = ({ onClick }) => { +const InsertionButton: React.FC = ({ onClick }) => { return (