wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added author name feature

Browse Source
This commit is contained in:
rutik wankhade 2020-08-19 12:06:47 +05:30
parent 653cf20735
commit 473788d209
3 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ConfigCover.js
View File

@ -14,6 +14,7 @@ const defaultSettings = {
foregroundColor: "#ffffff", foregroundColor: "#ffffff",
textColor: "#676683", textColor: "#676683",
opacity: 1, opacity: 1,
author: 'Rutik Wankhade'
}; };
class ConfigCover extends React.Component { class ConfigCover extends React.Component {
@ -36,6 +37,13 @@ class ConfigCover extends React.Component {
onChange={(e) => this.setState({ title: e.target.value })} onChange={(e) => this.setState({ title: e.target.value })}
></input> ></input>
<input
type="text"
placeholder="Author"
className="inputTitle form-control"
onChange={(e) => this.setState({ author: e.target.value })}
></input>
<div> <div>
<label>Background</label> <label>Background</label>
<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} /> <input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />

14
src/components/CoverImage.css
View File

@ -4,10 +4,9 @@
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height:420px; height:380px;
width:800px; width:800px;
padding:90px; padding:90px;
margin:00px 0px 15px 0px;
} }
.title-card{ .title-card{
@ -33,6 +32,17 @@
border:4px solid #676683; border:4px solid #676683;
} }
.author{
float:bottom;
background-color: #676683;
color:#ffffff;
height:40px;
margin-bottom:20px;
padding :4px;
text-align:center;
font-weight: 500;
}
h1{height:auto;} h1{height:auto;}
button{ button{

14
src/components/CoverImage.js
View File

@ -17,19 +17,23 @@ class CoverImage extends React.Component {
} }
render() { render() {
const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity } = this.props; const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author } = this.props;
const styleToApply = { const styleToApply = {
borderTop: `${borderSize}px ${borderType} ${borderColor}`, borderTop: `${borderSize}px ${borderType} ${borderColor}`,
backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`, backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
color: `${textColor}`, color: `${textColor}`,
}; };
return ( return (
<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}> <div>
<div className={`${pattern}`}> <div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
<div className="title-card" style={styleToApply}> <div className={`${pattern}`}>
<p>{title}</p> <div className="title-card" style={styleToApply}>
<p>{title}</p>
</div>
</div> </div>
</div> </div>
<div className="author" style={{ backgroundColor: borderColor }}>A blog by {author}</div>
</div> </div>
); );
} }