Skip to content

Commit

Permalink
Merge pull request #38 from Sea10wood/feature/"36-custom-button-props
Browse files Browse the repository at this point in the history 
add:ボタンのカスタマイズ #36
  • Loading branch information
@Sea10wood
Sea10wood authored May 21, 2023
2 parents 3c8ffc4 + ec99abb commit 572bb57
Show file tree
Hide file tree
Showing 4 changed files with 254 additions and 178 deletions.
10 changes: 6 additions & 4 deletions src/components/Todo/AddTodo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,21 @@ import {
} from "@mui/material";
import Image from "next/image";
import { useState } from "react";
import { CustomButton } from "../common/CustomButton";
import DatePick from "../common/DatePick";

export default function AddTodo() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<Button
<CustomButton
onClick={() => {
setIsOpen(!isOpen);
}}
>
Open
</Button>
primaryColor="#C5956B"
secondaryColor="#C37349"
buttonName="Open"
/>
<Modal
open={isOpen}
onClose={() => setIsOpen(false)}
Expand Down
221 changes: 156 additions & 65 deletions src/components/common/CustomButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,183 @@
import { Box, Button, CircularProgress, Typography } from "@mui/material";
import {
Box,
Button,
ButtonProps,
CircularProgress,
Typography,
} from "@mui/material";

export const CustomButton = ({ buttonName }: { buttonName: string }) => {
export const CustomButton = (
props: {
buttonName: string;
primaryColor: string;
secondaryColor: string;
} & ButtonProps
) => {
return (
<Button
sx={{
position: "relative",
borderRadius: "999px",
textTransform: "none",
paddingLeft: 0.8,
}}
variant="contained"
>
<Box component="div" position="relative" padding={1}>
<Button
sx={{
position: "relative",
borderRadius: "999px",
textTransform: "none",
paddingLeft: 0.8,
zIndex: 100,
backgroundColor: props.primaryColor,
":hover": {
backgroundColor: props.primaryColor,
},
}}
{...props}
variant="contained"
>
<Box
position="absolute"
component="div"
sx={{
backgroundColor: props.secondaryColor,
width: "5px",
height: "15px",
left: 40,
top: 0,
borderEndEndRadius: "100px",
borderEndStartRadius: "100px",
zIndex: -10,
}}
/>
<Box
position="absolute"
component="div"
sx={{
backgroundColor: props.secondaryColor,
width: "5px",
height: "15px",
left: 50,
top: 0,
borderEndEndRadius: "100px",
borderEndStartRadius: "100px",
zIndex: -10,
}}
/>
<Box
position="absolute"
component="div"
sx={{
backgroundColor: props.secondaryColor,
width: "5px",
height: "15px",
left: 60,
top: 0,
borderEndEndRadius: "100px",
borderEndStartRadius: "100px",
zIndex: -10,
}}
/>
<Box
position="absolute"
component="div"
sx={{
backgroundColor: props.secondaryColor,
width: "5px",
height: "15px",
left: 70,
top: 0,
borderEndEndRadius: "100px",
borderEndStartRadius: "100px",
zIndex: -10,
}}
/>
<Typography
variant="caption"
sx={{
fontSize: "15px",
letterSpacing: -3,
paddingRight: 1,
zIndex: 120,
}}
>
・ω・
</Typography>
{props.buttonName}
<CircularProgress
value={60}
thickness={15}
variant="determinate"
size={14}
sx={{
position: "absolute",
right: -17,
top: 0,
rotate: "200deg",
zIndex: 95,
borderRadius: "999px",
color: props.primaryColor,
":hover": {
color: props.primaryColor,
},
}}
/>
<CircularProgress
value={60}
thickness={10}
variant="determinate"
size={20}
sx={{
position: "absolute",
right: -15,
rotate: "20deg",
zIndex: 95,
color: props.primaryColor,
":hover": {
color: props.primaryColor,
},
}}
/>
</Button>

<Box
position="absolute"
component="div"
sx={{
borderBottom: `20px solid #03A400`,
borderBottom: `20px solid ${props.primaryColor}`,
borderLeft: "12px solid transparent",
borderRight: "12px solid transparent",
width: 0,
height: 0,
left: 18,
top: -10,
zIndex: -10,
left: 24,
top: 0,
zIndex: 90,
}}
/>
<Box
position="absolute"
component="div"
sx={{
borderBottom: `10px solid black`,
borderLeft: "6px solid transparent",
borderRight: "6px solid transparent",
opacity: 0.5,
borderBottom: `20px solid ${props.primaryColor}`,
borderLeft: "12px solid transparent",
borderRight: "12px solid transparent",
width: 0,
height: 0,
left: 9,
top: -5,
zIndex: -5,
left: 10,
top: 0,
zIndex: 90,
}}
/>
<Box
position="absolute"
component="div"
sx={{
borderBottom: `20px solid #03A400`,
borderLeft: "12px solid transparent",
borderRight: "12px solid transparent",
borderBottom: `10px solid black`,
borderLeft: "6px solid transparent",
borderRight: "6px solid transparent",
opacity: 0.5,
width: 0,
height: 0,
left: 3,
top: -10,
zIndex: -10,
left: 30,
top: 3,
zIndex: 90,
}}
/>

<Box
position="absolute"
component="div"
Expand All @@ -64,44 +188,11 @@ export const CustomButton = ({ buttonName }: { buttonName: string }) => {
opacity: 0.5,
width: 0,
height: 0,
left: 24,
top: -5,
zIndex: -5,
}}
/>
<Typography
variant="caption"
sx={{ fontSize: "15px", letterSpacing: -3, paddingRight: 1 }}
>
・ω・
</Typography>
{buttonName}
<CircularProgress
value={60}
thickness={15}
variant="determinate"
size={14}
sx={{
position: "absolute",
right: -17,
top: 0,
rotate: "200deg",
zIndex: -10,
borderRadius: "999px",
}}
/>
<CircularProgress
value={60}
thickness={10}
variant="determinate"
size={20}
sx={{
position: "absolute",
right: -15,
rotate: "20deg",
zIndex: -10,
left: 16,
top: 3,
zIndex: 90,
}}
/>
</Button>
</Box>
);
};
7 changes: 1 addition & 6 deletions src/components/schedule/ScheduleCalender.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Schedule } from "@/types/schema";
import dayGridPlugin from "@fullcalendar/daygrid";
import FullCalendar from "@fullcalendar/react";
import { Button, Paper, Typography } from "@mui/material";
import { Paper, Typography } from "@mui/material";
import axios from "axios";
import { useEffect, useState } from "react";
import { CustomDate } from "../common/CustomDate";
Expand Down Expand Up @@ -50,11 +50,6 @@ export const ScheduleCalendar = () => {
padding: 2,
}}
>
<Button
onClick={() => {
console.log(schedule);
}}
></Button>
<Typography>{schedule?.title}</Typography>
<Typography>
開始:
Expand Down
Loading

0 comments on commit 572bb57

Please sign in to comment.