Skip to content

Commit

Permalink
Modify Upload View #72
Browse files Browse the repository at this point in the history
  • Loading branch information
@KimKwon
KimKwon committed Apr 4, 2021
1 parent 6c9e0f7 commit 4eb5358
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 70 deletions.
33 changes: 12 additions & 21 deletions src/Components/Upload/ImageCropper/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import NoStyleButton from 'Components/Form/NoStyleButton';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

import Button from '@material-ui/core/Button';

function ImageCropper(props) {
const { imgHandler } = props;
const cropperRef = useRef(null);
Expand Down Expand Up @@ -48,7 +46,7 @@ function ImageCropper(props) {
} else {
// TO DO :: implement login modal !
}
}, [imgHandler, pictureImgUrl, user, pictureImg]);
}, [imgHandler, user, pictureImg]);

const removePicture = () => {
setPictureImg(null);
Expand Down Expand Up @@ -85,24 +83,17 @@ function ImageCropper(props) {
{!pictureImg && (
<div className="imageCropper__creator-previewPic__empty">
<div className="imageCropper__creator-previewPic__empty-uploadPic">
<Button
size="small"
fullWidth
disableRipple
disableFocusRipple
>
<label htmlFor="art-upload">
upload image
<input
accept="image/*"
type="file"
name="img"
id="art-upload"
style={{ display: 'none' }}
onChange={handlePictureImg}
/>
</label>
</Button>
<label htmlFor="art-upload">
Choose Image
<input
accept="image/*"
type="file"
name="img"
id="art-upload"
style={{ display: 'none' }}
onChange={handlePictureImg}
/>
</label>
</div>
</div>
)}
Expand Down
26 changes: 24 additions & 2 deletions src/Components/Upload/ImageCropper/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@

.imageCropper {
width: 100%;
height: 100%;
border-radius: 18px;
button:focus {
outline: none;
}
&__creator {
margin-bottom: 1rem;
height: 100%;
&-previewPic {
height: 100%;
position: relative;
display: flex;
margin: auto;
Expand All @@ -30,7 +33,6 @@

&__empty {
position: relative;
height: 400px;
width: 100%;
background-color: $background-color;
opacity: 50%;
Expand All @@ -40,20 +42,40 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

label {
margin: 0;
cursor: pointer;
font-family: 'GothamRound';
color: $main-color;

&:hover {
animation: buttonHover 0.3s ease;
animation-fill-mode: forwards;
border-radius: 18px;
padding: 1rem;
background-color: $main-color;
color: white;
}
}
}
}

.cropper {
margin: auto;
max-width: 80%;
max-height: 400px;
max-height: 100%;
}
}
}
}

@keyframes buttonHover {
0% {
transform: scale(1);
}

100% {
transform: scale(1.3);
}
}
62 changes: 39 additions & 23 deletions src/Components/Upload/UploadPost/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ class Upload extends Component {
super(props);
this.state = {
imageFormData: null,
content: '',
title: '',
description: '',
modal: false,
};
}
Expand All @@ -59,19 +60,23 @@ class Upload extends Component {
});
};

handleContent = (e) => {
this.setState({ content: e.target.value });
handleTitle = (e) => {
this.setState({ title: e.target.value });
};

handleDescription = (e) => {
this.setState({ description: e.target.value });
};

handlePostUpload = async () => {
const { user, uploadPost, token } = this.props;
const { imageFormData, content } = this.state;
const { imageFormData, title, description } = this.state;
if (user) {
const params = new URLSearchParams();

params.append('title', content);
params.append('title', title);
params.append('user_id', user.id);
params.append('description', content);
params.append('description', description);
params.append('category_id', 5);
params.append('is_public', true);
const postUpload = await uploadPost(imageFormData, params, token);
Expand Down Expand Up @@ -104,34 +109,45 @@ class Upload extends Component {
<div className="uploadPost">
<div className="uploadPost__header">
<div className="uploadPost__header__title">
Upload Your Masterpiece!
Share Your Masterpiece with Blecther.
</div>
<div className="uploadPost__header__sub">
This will be automatically uploaded to my feed and displayed
to Blecther home.
</div>
</div>
<div className="uploadPost__content">
<div className="uploadPost__content__border">
<div className="uploadPost__content__image">
<ImageCropper imgHandler={this.handlePictureWithCropper} />
</div>
<div className="uploadPost__content__input">
</div>
<div className="uploadPost__footer">
<div className="uploadPost__footer__input">
<div className="uploadPost__footer__input__text">
Brief Introduction about Your Masterpiece
</div>
<TextField
id="outlined-multiline"
placeholder="Art's title"
value={content}
multiline
rows="3"
rowsMax="10"
variant="outlined"
onChange={this.handleContent}
rows="1"
focused={false}
onChange={this.handleTitle}
/>
<TextField
id="outlined-multiline"
placeholder="Art's description"
value={content}
rows="1"
focused={false}
onChange={this.handleDescription}
/>
</div>
</div>
<div className="uploadPost__footer">
<NoStyleButton onClick={this.handlePostUpload}>
<div className="uploadPost__footer__upload">
<div className="uploadPost__footer__upload__text">
upload!
</div>
</div>
</NoStyleButton>
<div className="uploadPost__footer__buttons">
<NoStyleButton onClick={this.handlePostUpload}>
<div className="uploadPost__footer__upload">Upload</div>
</NoStyleButton>
</div>
</div>
</div>
</Modal>
Expand Down
74 changes: 50 additions & 24 deletions src/Components/Upload/UploadPost/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
.uploadPost {
background-color: white;
z-index: 1005;
width: 80%;
height: 85%;
width: 70%;
height: 70%;
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 25px;
border-radius: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
Expand All @@ -29,38 +29,64 @@
color: $main-color;
font-size: 1.9rem;
}

&__sub {
font-family: 'AppleSDGothicNeo';
}
}

&__content {
width: 90%;
@include content-center;
&__border {
width: 100%;
display: flex;
}

&__input {
width: 100%;
height: 50%;
flex-direction: column;
justify-content: space-around;
align-items: center;
&__image {
height: 100%;
}
}

&__footer {
width: 30%;
border-radius: 58px;
border: 1px solid $light-gray;
margin-bottom: 1rem;
&__upload {
width: 100%;
margin-bottom: 3%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;

&__input {
width: 40%;
height: 40%;
display: flex;
flex-direction: row;
align-items: center;
img {
margin-left: 0;
flex-direction: column;
justify-content: center;
& input {
width: max-content;
}

&__text {
font-size: 2rem;
margin-right: auto;
margin-left: auto;
color: $header-gray;
text-align: center;
color: $main-color;
font-size: 1.3rem;
}
}
&__buttons {
width: fit-content;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
& .noStyleButton {
height: fit-content;
padding: 1rem 4rem;
border-radius: 26px;
border: 2px solid $main-color;
text-align: center;

&:hover {
color: white;
background-color: $main-color;
}
}
}
}
Expand Down

0 comments on commit 4eb5358

Please sign in to comment.