mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 02:54:15 +00:00
improve style
This commit is contained in:
parent
e8350daf9c
commit
8acaddfba6
@ -122,6 +122,8 @@ export default class PostCreator extends React.Component {
|
||||
console.error(error)
|
||||
antd.message.error(error)
|
||||
|
||||
req.onError(error)
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
@ -134,7 +136,8 @@ export default class PostCreator extends React.Component {
|
||||
|
||||
removeAttachment = (file_uid) => {
|
||||
this.setState({
|
||||
postAttachments: this.state.postAttachments.filter((file) => file.uid !== file_uid)
|
||||
postAttachments: this.state.postAttachments.filter((file) => file.uid !== file_uid),
|
||||
fileList: this.state.fileList.filter((file) => file.uid !== file_uid)
|
||||
})
|
||||
}
|
||||
|
||||
@ -187,7 +190,6 @@ export default class PostCreator extends React.Component {
|
||||
|
||||
break
|
||||
}
|
||||
|
||||
case "done": {
|
||||
// remove pending file
|
||||
this.setState({
|
||||
@ -341,7 +343,6 @@ export default class PostCreator extends React.Component {
|
||||
const uploading = file.status === "uploading"
|
||||
|
||||
const onClickDelete = () => {
|
||||
actions.remove()
|
||||
this.removeAttachment(file.uid)
|
||||
}
|
||||
|
||||
@ -355,11 +356,15 @@ export default class PostCreator extends React.Component {
|
||||
uploading && <Icons.LoadingOutlined style={{ margin: "0 !important" }} />
|
||||
}
|
||||
{
|
||||
!uploading && <antd.Button
|
||||
type="link"
|
||||
icon={<Icons.Trash />}
|
||||
onClick={onClickDelete}
|
||||
/>
|
||||
!uploading && <antd.Popconfirm
|
||||
title="Are you sure you want to delete this file?"
|
||||
onConfirm={onClickDelete}
|
||||
>
|
||||
<antd.Button
|
||||
type="link"
|
||||
icon={<Icons.Trash />}
|
||||
/>
|
||||
</antd.Popconfirm>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@ -442,6 +447,7 @@ export default class PostCreator extends React.Component {
|
||||
ref={this.creatorRef}
|
||||
onDragEnter={this.handleDrag}
|
||||
onDragLeave={this.handleDrag}
|
||||
style={this.props.style}
|
||||
>
|
||||
<div className="textInput">
|
||||
<div className="avatar">
|
||||
@ -489,23 +495,15 @@ export default class PostCreator extends React.Component {
|
||||
|
||||
<div className="actions">
|
||||
<antd.Button
|
||||
type="primary"
|
||||
disabled={loading}
|
||||
type="ghost"
|
||||
onClick={this.handleUploadClick}
|
||||
icon={<Icons.Upload />}
|
||||
/>
|
||||
|
||||
<antd.Button
|
||||
type="primary"
|
||||
disabled={loading}
|
||||
type="ghost"
|
||||
icon={<Icons.MdPoll />}
|
||||
/>
|
||||
|
||||
<antd.Button
|
||||
type="primary"
|
||||
disabled={loading}
|
||||
icon={<Icons.MdPrivacyTip />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@file_preview_borderRadius: 7px;
|
||||
|
||||
.postCreator {
|
||||
position: relative;
|
||||
|
||||
@ -10,32 +12,36 @@
|
||||
z-index: 55;
|
||||
|
||||
max-width: 600px;
|
||||
border-radius: 7px;
|
||||
border-radius: 12px;
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
padding: 15px;
|
||||
|
||||
transition: all 250ms ease-in-out;
|
||||
//transition: all 250ms ease-in-out;
|
||||
|
||||
.actions {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
color: var(--text-color) !important;
|
||||
|
||||
.ant-btn {
|
||||
margin-left: 10px;
|
||||
font-size: 1rem;
|
||||
font-size: 1.2rem;
|
||||
|
||||
color: var(--text-color);
|
||||
|
||||
opacity: 0.7;
|
||||
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
color: var(--text-color) !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -129,21 +135,19 @@
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
border-radius: 10px;
|
||||
gap: 10px;
|
||||
|
||||
border-radius: @file_preview_borderRadius;
|
||||
|
||||
.ant-upload-list-item-container {
|
||||
background-color: black;
|
||||
background-color: rgba(var(--bg_color_5), 1);
|
||||
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
|
||||
margin-left: 10px;
|
||||
|
||||
border-radius: 7px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
||||
border-radius: @file_preview_borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ant-upload-list-item-actions {
|
||||
@ -155,6 +159,8 @@
|
||||
width: 100%;
|
||||
|
||||
font-size: 2rem;
|
||||
|
||||
border-radius: @file_preview_borderRadius;
|
||||
}
|
||||
|
||||
.hint {
|
||||
@ -186,6 +192,9 @@
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
|
||||
font-size: 2rem;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
@ -216,15 +225,21 @@
|
||||
|
||||
.preview {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
border-radius: 10px;
|
||||
border-radius: @file_preview_borderRadius;
|
||||
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@ -240,11 +255,13 @@
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
backdrop-filter: blur(0);
|
||||
|
||||
opacity: 0;
|
||||
color: rgba(var(--bg_color_1), 1);
|
||||
|
||||
border-radius: @file_preview_borderRadius;
|
||||
|
||||
svg {
|
||||
color: rgba(var(--bg_color_1), 1);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from "react"
|
||||
import classnames from "classnames"
|
||||
|
||||
import PostCreator from "../PostCreator"
|
||||
import PostCreator from "components/PostCreator"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
export default (props) => {
|
||||
const [visible, setVisible] = React.useState(true)
|
||||
const [visible, setVisible] = React.useState(false)
|
||||
|
||||
let escTimeout = null
|
||||
|
||||
@ -40,6 +40,10 @@ export default (props) => {
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setVisible(true)
|
||||
}, 10)
|
||||
|
||||
document.addEventListener("keydown", handleEsc, false)
|
||||
|
||||
return () => {
|
||||
@ -51,8 +55,8 @@ export default (props) => {
|
||||
className={classnames(
|
||||
"post_creator_modal",
|
||||
{
|
||||
["visible"]: visible,
|
||||
},
|
||||
["active"]: visible
|
||||
}
|
||||
)}
|
||||
onClick={handleClickOutside}
|
||||
>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@import "theme/vars.less";
|
||||
|
||||
@modal_background_blur: 10px;
|
||||
|
||||
.post_creator_modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -12,36 +16,30 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: rgba(var(--layoutBackgroundColor) 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
opacity: 0;
|
||||
&.active {
|
||||
background-color: rgba(var(--bg_color_6), 0.5);
|
||||
|
||||
animation: fadeOut 150ms ease-in-out forwards;
|
||||
backdrop-filter: blur(@modal_background_blur);
|
||||
-webkit-backdrop-filter: blur(@modal_background_blur);
|
||||
|
||||
&.visible {
|
||||
animation: fadeIn 150ms ease-in-out forwards;
|
||||
.postCreator {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
.postCreator {
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
.postCreator {
|
||||
box-shadow: @card-shadow;
|
||||
-webkit-box-shadow: @card-shadow;
|
||||
-moz-box-shadow: @card-shadow;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user