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: add feature to add custom icon

Browse Source
This commit is contained in:
rutik wankhade 2022-04-24 22:03:51 +05:30
parent a0036534e3
commit cd486ea421
4 changed files with 70 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Editor.js
View File

@ -14,7 +14,8 @@ const defaultSettings = {
icon: { 'label': 'react', 'value': 'react' },
devIconOptions: {},
font: 'font-sans',
theme: 'modern'
theme: 'modern',
customIcon: ''
};
@ -30,6 +31,7 @@ class Editor extends React.Component {
componentDidMount() {
console.log("Mount")
fetch(devIconsUrl).then(r => r.json()).then(data => {
data.push({ name: 'custom' })
this.setState({ devIconOptions: data.map(item => ({ 'value': item.name, 'label': item.name })) })
})
}
@ -51,6 +53,24 @@ class Editor extends React.Component {
);
// customOption = props => {
// const { data, innerRef, innerProps } = props;
// return data.name === 'custom' ? (
// <div ref={innerRef} {...innerProps}>
// <input type="file"
// className="text-xl cursor-pointer mb-2 bg-white rounded border"
// onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
// />
// </div>
// ) : (
// <components.Option {...props} />
// );
// };
render() {
return (
<div className="flex md:flex-row flex-col bg-gray-50 ">
@ -136,6 +156,17 @@ class Editor extends React.Component {
/>
</div>
{this.state.icon.label === 'custom' ?
<div className="flex items-center justify-center m-2">
<input type="file"
className="text-lg cursor-pointer bg-white rounded border"
onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
/>
</div>
:
<div></div>
}
<div className="flex">

15
src/components/Themes/BasicTheme.js
View File

@ -2,7 +2,7 @@ import React from 'react';
const BasicTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font } = config;
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
return (
<div className="p-4 bg-white border">
@ -19,7 +19,18 @@ const BasicTheme = ({ config }) => {
</div>
<div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white">
<i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
{
customIcon ?
<div className="w-12 h-12 ">
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
</div>
:
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
</div>
}
<h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
</div>

19
src/components/Themes/ModernTheme.js
View File

@ -3,7 +3,7 @@ import React from 'react';
const ModernTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font } = config;
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
return (
<div className="p-4 bg-white border">
@ -11,9 +11,18 @@ const ModernTheme = ({ config }) => {
<div className={` h-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} `}
style={{ backgroundColor: bgColor }}
>
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
</div>
{
customIcon ?
<div className="w-28 h-28 mx-auto items-center justify-center flex">
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
</div>
:
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
</div>
}
<div className="h-full w-2/3">
<div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
@ -22,7 +31,7 @@ const ModernTheme = ({ config }) => {
</div>
</div>
</div>
</div>
</div>

13
src/components/Themes/OutlineTheme.js
View File

@ -1,6 +1,6 @@
import React from 'react';
const OutlineTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font } = config;
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
return (
<div className="p-4 bg-white border">
@ -22,7 +22,16 @@ const OutlineTheme = ({ config }) => {
</div>
<div className={`${font} w-full border-gray-800 border-t-4 flex mt-10 p-2 px-6 items-center bg-white`}>
<i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
{
customIcon ?
<div className="w-12 h-12 ">
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
</div>
:
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
</div>
}
<h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
</div>