init dropdown with popup in Submit
This commit is contained in:
parent
abeba4bf34
commit
a8841982ef
3
src/assets/pencil_ico.svg
Normal file
3
src/assets/pencil_ico.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.6705 6.075L26.6705 14.075L9.29547 31.45L2.16422 32.2375C1.20797 32.3437 0.40172 31.5375 0.50797 30.5812L1.30172 23.4438L18.6705 6.075ZM31.6205 4.8875C32.7955 6.0625 32.7955 7.9625 31.6205 9.13125L28.083 12.6625L20.083 4.6625L23.6142 1.13125C24.7892 -0.04375 26.6892 -0.04375 27.858 1.13125L31.6205 4.8875Z" fill="black"/>
|
||||
</svg>
|
After Width: | Height: | Size: 438 B |
@ -11,11 +11,10 @@ const CircleNumberStyle = styled(Container)`
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: ${({ fontSize }) => (fontSize ? fontSize : '14px')};
|
||||
font-weight: 500;
|
||||
width: ${({ width }) => (width ? width : '24px')};
|
||||
height: ${({ height }) => (height ? height : '24px')};
|
||||
margin: ${({ margin }) => (margin ? margin : '0')};
|
||||
|
||||
@media (min-width: ${({ theme }) => theme.overMobile}) {
|
||||
width: ${({ width }) => (width ? width : '36px')};
|
||||
@ -32,6 +31,12 @@ const CircleNumber = (props) => {
|
||||
fontSize={props.fontSize}
|
||||
borderRadius={props.borderRadius}
|
||||
margin={props.margin}
|
||||
padding={props.padding}
|
||||
position={props.position}
|
||||
top={props.top}
|
||||
left={props.left}
|
||||
right={props.right}
|
||||
bottom={props.bottom}
|
||||
>
|
||||
{props.number}
|
||||
</CircleNumberStyle>
|
||||
|
36
src/components/generic/DropdownWithPopup.js
Normal file
36
src/components/generic/DropdownWithPopup.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { FlexColumn, FlexRow, Grid } from '../../utils/containers';
|
||||
import { Medium } from '../../utils/fonts';
|
||||
import theme from '../../utils/theme';
|
||||
import ImageButton from './ImageButton';
|
||||
import pencilIco from '../../assets/pencil_ico.svg';
|
||||
|
||||
const DropdownWithPopup = (props) => {
|
||||
return (
|
||||
<FlexColumn gap="8px" width="100%" alignmentX="flex-start">
|
||||
<Medium as="label" htmlFor={props.label}>
|
||||
{props.label}
|
||||
</Medium>
|
||||
<Grid
|
||||
borderRadius="4px"
|
||||
width="100%"
|
||||
height="100px"
|
||||
border={`1px solid ${theme.colors.dark}`}
|
||||
shadow={theme.shadow}
|
||||
onChange={(e) => props.handler(e.target.value)}
|
||||
padding="12px"
|
||||
gridTemplateColumns="1fr auto"
|
||||
>
|
||||
<FlexRow height="100%" alignmentX="flex-start" alignmentY="flex-start">
|
||||
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
|
||||
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
|
||||
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
|
||||
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
|
||||
</FlexRow>
|
||||
<ImageButton src={pencilIco} width="20px" height="20px" />
|
||||
</Grid>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownWithPopup;
|
45
src/components/generic/ImageButton.js
Normal file
45
src/components/generic/ImageButton.js
Normal file
@ -0,0 +1,45 @@
|
||||
import { Svg, FlexRow } from '../../utils/containers';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const ImageButtonStyle = styled(FlexRow)`
|
||||
cursor: pointer;
|
||||
transition: transform ease-in-out 0.3s;
|
||||
transform: rotate(${({ rotate }) => (rotate ? rotate : '0')});
|
||||
&:hover {
|
||||
transform: rotate(${({ rotate }) => (rotate ? rotate : '0')}), scale(1.2);
|
||||
}
|
||||
`;
|
||||
|
||||
const ImageButton = ({
|
||||
handler,
|
||||
src,
|
||||
alt,
|
||||
width,
|
||||
height,
|
||||
as,
|
||||
href,
|
||||
download,
|
||||
rotate,
|
||||
margin,
|
||||
position,
|
||||
top,
|
||||
left,
|
||||
}) => {
|
||||
return (
|
||||
<ImageButtonStyle
|
||||
as={as ? as : 'button'}
|
||||
href={href ? href : undefined}
|
||||
download={download ? download : undefined}
|
||||
onClick={handler}
|
||||
rotate={rotate}
|
||||
margin={margin}
|
||||
position={position}
|
||||
top={top}
|
||||
left={left}
|
||||
>
|
||||
<Svg src={src} alt={alt} size="cover" width={width} height={height} />
|
||||
</ImageButtonStyle>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageButton;
|
@ -8,6 +8,7 @@ import theme from '../../utils/theme';
|
||||
import challengeSubmission from '../../api/challengeSubmissionPost';
|
||||
import Loading from '../generic/Loading';
|
||||
import getTags from '../../api/getTags';
|
||||
import DropdownWithPopup from '../generic/DropdownWithPopup';
|
||||
|
||||
const Submit = (props) => {
|
||||
const [description, setDescription] = React.useState('');
|
||||
@ -15,6 +16,8 @@ const Submit = (props) => {
|
||||
const [repoBranch, setRepoBranch] = React.useState('');
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [tags, setTags] = React.useState([]);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [submissionTags, setSubmissionTags] = React.useState([]);
|
||||
|
||||
React.useMemo(() => {
|
||||
getTags(setTags);
|
||||
@ -53,6 +56,10 @@ const Submit = (props) => {
|
||||
/>
|
||||
<SubmitInput label="Submission repo URL" handler={setRepoUrl} />
|
||||
<SubmitInput label="Submission repo branch" handler={setRepoBranch} />
|
||||
<DropdownWithPopup
|
||||
label="Submission tags"
|
||||
handler={setSubmissionTags}
|
||||
/>
|
||||
</FlexColumn>
|
||||
<Button width="122px" height="44px" handler={challengeSubmissionSubmit}>
|
||||
<Menu color={theme.colors.white}>Submit</Menu>
|
||||
|
@ -29,7 +29,7 @@ const Challenges = () => {
|
||||
getChallenges(dispatch);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
React.useMemo(() => {
|
||||
statusFilterHandle(state.statusFilter, state.challenges, dispatch);
|
||||
}, [state.statusFilter, state.challenges]);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user