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 option to choose background theme

Browse Source
This commit is contained in:
rutik wankhade 2023-01-26 15:49:22 +05:30
parent b4e57e4b51
commit 95ce5de577
4 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/theme7.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

6
src/components/Editor.js
View File

@ -13,6 +13,8 @@ import theme3 from '../assets/images/theme3.webp'
import theme4 from '../assets/images/theme4.webp'
import theme5 from '../assets/images/theme5.webp'
import theme6 from '../assets/images/theme6.webp'
import theme7 from '../assets/images/theme7.webp'
@ -236,6 +238,10 @@ class Editor extends React.Component {
<div className="p-4 flex flex-wrap overflow-y-scroll ">
<img src={theme7} alt="basic theme"
onClick={(e) => this.setState({ theme: "background" })}
className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/>
<img src={theme1} alt="basic theme"
onClick={(e) => this.setState({ theme: "basic" })}
className=" cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "

22
src/components/Themes/BackgroundTheme.js
View File

@ -18,7 +18,7 @@ const BackgroundTheme = ({ config }) => {
.getPhotos({
query: searchText,
page: 1,
per_page: 25,
per_page: 30,
// orientation:'portrait'
@ -33,9 +33,9 @@ const BackgroundTheme = ({ config }) => {
unsplash.search
.getPhotos({
query: 'dev',
query: 'setup',
page: 1,
per_page: 25
per_page: 30
})
.then(response => {
@ -82,14 +82,10 @@ const BackgroundTheme = ({ config }) => {
<div className='relative flex group'>
<div className="h-max w-full ">
<img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-full w-full " alt="preview" />
</div>
<div className=" backdrop-blur-sm h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
<button
onClick={() => setUnsplashImage('')}
@ -106,7 +102,7 @@ const BackgroundTheme = ({ config }) => {
{
customIcon ?
<div className=" ">
<img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
<img src={customIcon} alt="img" className="w-12 h-12 m-2 rounded-full bg-white border-2 border-white" />
</div>
:
<div className="mr-2 items-center justify-center flex">
@ -135,19 +131,23 @@ const BackgroundTheme = ({ config }) => {
:
<div className="flex flex-col p-2 bg-white items-center justify-center">
<form onSubmit={(e) => handleSearchSubmit(e)} className="flex bg-gray-50 rounded-full border mb-2">
<div className="flex items-center w-full px-6 ">
<div className="text-lg font-semibold text-gray-700">Click on any image to select</div>
<form onSubmit={(e) => handleSearchSubmit(e)} className=" ml-auto mr-2 w-1/2 flex bg-gray-50 rounded-full border mb-2">
<input type="text"
value={searchText}
placeholder="Search image"
className="focus:outline-none w-max text-lg bg-gray-50 p-1 px-4 rounded-full border border-gray-50"
className="focus:outline-none w-full text-lg bg-gray-50 p-1 px-4 rounded-full border border-gray-50"
onChange={(e) => setSearchText(e.target.value)}
/>
<button type="submit" onClick={() => searchImages(searchText)}>
<svg className="w-9 h-9 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<svg className="w-9 h-9 ml-auto mr-1 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</form>
</div>
<div className="overflow-y-scroll overflow-x-hidden h-96 justify-center flex flex-wrap">
{

5
src/components/Themes/StylishTheme.js
View File

@ -18,7 +18,7 @@ const StylishTheme = ({ config }) => {
.getPhotos({
query: searchText,
page: 1,
per_page: 25,
per_page: 30,
// orientation:'portrait'
@ -33,7 +33,7 @@ const StylishTheme = ({ config }) => {
unsplash.search
.getPhotos({
query: 'dev',
query: 'setup',
page: 1,
per_page: 25
@ -54,7 +54,6 @@ const StylishTheme = ({ config }) => {
})
// unsplash.photos.trackDownload({ downloadLocation: image.links.download_location, });
}