Browse Source

add customize article modal

master
Collapseyu 3 months ago
parent
commit
5656c0f2df
  1. 2
      components/popover/modal/index.tsx
  2. 39
      components/popover/modal/modal.module.scss
  3. 34
      components/post_content.tsx
  4. 25
      pages/admin/post/index.tsx
  5. 2
      types/typings.d.ts

2
components/popover/modal/index.tsx

@ -14,7 +14,7 @@ export declare type ModalProps = ComponentProps<{ show?: boolean; onClose?: () = @@ -14,7 +14,7 @@ export declare type ModalProps = ComponentProps<{ show?: boolean; onClose?: () =
const ModalContent = (props: ModalProps) => {
const { onClose, className, style, children } = props;
return (
<div>
<div className={styles.wrapper}>
<div className={concat(className, styles.modal)} style={style}>
<Card style={{ background: 'var(--background)' }}>
{!!onClose ? (

39
components/popover/modal/modal.module.scss

@ -1,9 +1,13 @@ @@ -1,9 +1,13 @@
.modal {
position: fixed;
z-index: 6;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// left: 50%;
// top: 50%;
// transform: translate(-50%, -50%);
animation-name: scaleDraw; /*关键帧名称*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
animation-iteration-count: 1; /*动画播放的次数*/
animation-duration: 0.5s; /*动画所花费的时间*/
}
.dimmed {
@ -18,3 +22,32 @@ @@ -18,3 +22,32 @@
animation-fill-mode: forwards;
z-index: 5;
}
.wrapper{
position: absolute;
z-index: 6;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
// 0%{
// transform: scale(0.5) translate(-100%, -100%); /*开始为原始大小*/
// }
0%{
transform: scale(0);
}
50%{
transform: scale(1.2); /*放大1.1倍*/
}
100%{
transform: scale(1);
}
// 75%{
// transform: scale(1.1) translate(-50%, -50%);
// }
}

34
components/post_content.tsx

@ -27,7 +27,6 @@ interface PostContentProps { @@ -27,7 +27,6 @@ interface PostContentProps {
interface PostContentState {
travel?: Blotter.Travel;
disgusting?: boolean;
}
class PostContent extends Component<PostContentProps, PostContentState> {
@ -35,7 +34,7 @@ class PostContent extends Component<PostContentProps, PostContentState> { @@ -35,7 +34,7 @@ class PostContent extends Component<PostContentProps, PostContentState> {
context!: React.ContextType<typeof Context>;
constructor(props) {
super(props);
this.state = {travel: undefined,disgusting:false};
this.state = {travel: undefined};
}
resetImage() {
const containers = document.getElementsByClassName('image');
@ -75,13 +74,23 @@ class PostContent extends Component<PostContentProps, PostContentState> { @@ -75,13 +74,23 @@ class PostContent extends Component<PostContentProps, PostContentState> {
this.resetImage();
this.resetTable();
this.drawMermaid();
if (this.isDisgust){
this.setState({disgusting:true});
}
if (this.isTravel()) {
if (!!this.isTravel()) {
this.getTravelData();
}
if (!!this.props.post.poptext){
var poptext = this.props.post.poptext.replace(/\n/g, '<br/>');
Modal.info({children:<div
style={{ wordBreak: 'break-all' ,display:'flex',
justifyContent:'center',alignItems:'center',
minWidth: '20em' , minHeight: '5em',
textAlign: 'center', lineHeight: '1.5em',}}
dangerouslySetInnerHTML={{ __html: poptext }}
></div>}
)
}
}
componentDidUpdate() {
this.resetImage();
this.resetTable();
@ -95,11 +104,6 @@ class PostContent extends Component<PostContentProps, PostContentState> { @@ -95,11 +104,6 @@ class PostContent extends Component<PostContentProps, PostContentState> {
);
};
isDisgust = () => {
return (
this.props.post.url.substring(-8) === 'disgust1'
);
};
getTravelData = () => {
travels_get_url(this.props.post.url)
@ -159,10 +163,10 @@ class PostContent extends Component<PostContentProps, PostContentState> { @@ -159,10 +163,10 @@ class PostContent extends Component<PostContentProps, PostContentState> {
<Flex direction="TB" fullWidth>
<PostCard post={this.props.post} inset inPost />
{!!this.context.ad_text && <AD setting={this.context.ad_text} />}
<Modal show={this.state.disgusting} onClose={() => this.setState({disgusting:false})} style={{ maxWidth: 500, width: '90%' }}>
<p></p>
<p>Welcome to the darkest part of me</p>
</Modal>
{/* <Modal show={this.state.popfilter} onClose={() => this.setState({popfilter:false})} style={{ maxWidth: 500, width: '90%' }}>
</Modal> */}
{this.props.prefix}
{this.renderTravel()}
{!!this.props.post.images && this.props.post.images.length > 0 ? (

25
pages/admin/post/index.tsx

@ -75,6 +75,8 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> { @@ -75,6 +75,8 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
title: '',
url: '',
abstract: '',
pop:false,
poptext:'',
head_image: '',
view: 0,
publish_time: now,
@ -200,6 +202,8 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> { @@ -200,6 +202,8 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
keywords: this.state.keywords,
status: this.state.status,
abstract: this.state.abstract,
pop: this.state.pop,
poptext: this.state.poptext,
view: this.state.view,
head_image: this.state.head_image,
tags: this.state.tags,
@ -367,6 +371,18 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> { @@ -367,6 +371,18 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
>
</Button>
<CheckBox
switchStyle={true}
checkText="使用弹窗"
uncheckText="不使用弹窗"
value={!!this.state.pop}
onChange={(value) =>
this.setState({pop:value})
}
/>
</Flex>
<TagSearch onAdd={this.tagOnAdd} onDelete={this.tagOnDelete} tags={this.state.tags} />
@ -380,6 +396,15 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> { @@ -380,6 +396,15 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
onChange={(abstract) => this.setState({ abstract })}
/>
<TextArea
label="弹窗文字"
rows={4}
spellCheck="false"
placeholder="弹窗文字"
value={this.state.poptext}
onChange={(poptext) => this.setState({ poptext })}
/>
<Flex
direction="TB"
subAxis="flex-end"

2
types/typings.d.ts vendored

@ -74,6 +74,8 @@ declare namespace Blotter { @@ -74,6 +74,8 @@ declare namespace Blotter {
tags: Tag[];
head_image: string;
length: number;
pop:boolean;
poptext:string;
}
interface Post extends PostCard {
content: string;

Loading…
Cancel
Save