From a0d2306a29379e7d08643181704cc6fa5ca056d3 Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Wed, 1 Sep 2021 12:59:45 +0430 Subject: [PATCH] setting colors --- src/components/Setting/FontColor/colors.js | 130 +++++++++--------- src/components/Setting/FontSize/fontsize.js | 2 +- .../Setting/FontStyle/Fonts/fonts.js | 33 +++-- src/components/Setting/FontStyle/Fontstyle.js | 8 +- .../Setting/LineHeight/lineheight.js | 1 - src/components/Setting/setting.js | 2 + src/components/contextMenu/ColorItem.tsx | 12 +- src/components/nav/BookInfo.tsx | 14 +- src/components/style/fontStyle.scss | 1 + src/components/style/setting.scss | 1 - src/containers/Footer.tsx | 6 +- src/containers/Header.tsx | 30 ++-- src/containers/Reader.tsx | 31 +++-- src/containers/commons/ContextMenu.tsx | 8 +- src/containers/menu/commons/Highlight.tsx | 2 +- src/slices/book.ts | 2 +- 16 files changed, 149 insertions(+), 134 deletions(-) diff --git a/src/components/Setting/FontColor/colors.js b/src/components/Setting/FontColor/colors.js index b43a286..bbcb8c3 100644 --- a/src/components/Setting/FontColor/colors.js +++ b/src/components/Setting/FontColor/colors.js @@ -1,9 +1,9 @@ -import React, { useState } from "react"; +import { useState, useEffect } from "react"; import "../../../components/style/colorsComponents.scss"; import "../../../components/style/chosecolor.scss"; import PalletColorOutline from "../../image/PalletColorOutline.svg"; import PalletColorbold from "../../image/PalletColorBold.svg"; -import Chosecolor from "./Colors/chosecolor"; +// import Chosecolor from "./Colors/chosecolor"; import { ButtonDropdown, DropdownToggle, @@ -12,92 +12,92 @@ import { } from "reactstrap"; const Colors = (props) => { - const { setcolor, color } = props; + const { setcolor, color, readyColors } = props; + const [localColorControl, localColorControlSetter] = useState(true); const [dropdownOpen, setOpen] = useState(false); const toggle = () => setOpen(!dropdownOpen); const [isChecked, setIsChecked] = useState(false); - const [Icon, seticon] = useState(PalletColorOutline); - const changeIcone = () => { - seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline); + // const idofelement = readyColors.map((item) => item.id); + const colorMoodHandler = () => { + setIsChecked(!isChecked); + if (Number(localStorage.getItem("colorId")) > 3) { + setcolor(Number(localStorage.getItem("colorId")) - 3); + localStorage.setItem( + "colorId", + Number(localStorage.getItem("colorId")) - 3 + ); + } else { + setcolor(Number(localStorage.getItem("colorId")) + 3); + localStorage.setItem( + "colorId", + Number(localStorage.getItem("colorId")) + 3 + ); + } }; - const changeColorHandler = (value) => { - setcolor(value); + const changeColorHandler = (id) => { + localStorage.setItem("colorId", id); + setcolor(id); }; + useEffect(() => { + if (localStorage.getItem("colorId") !== color && localColorControl) { + localStorage.setItem("colorId", 1); + localColorControlSetter(false); + } + }); + + const darkMood = readyColors.slice(0, 3); + + const lightMood = readyColors.slice(3); + return ( <> -
changeIcone()}> - icon +
+ icon
{isChecked ? ( <> - - - - - - - - - + {darkMood.map((item) => ( + + + + ))} ) : ( <> - - - - - - - - - + {lightMood.map((item) => ( + + + + ))} )} diff --git a/src/components/Setting/FontSize/fontsize.js b/src/components/Setting/FontSize/fontsize.js index 6386c9d..7dba8fc 100644 --- a/src/components/Setting/FontSize/fontsize.js +++ b/src/components/Setting/FontSize/fontsize.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +// import React, { useState } from "react"; import "../../../components/style/fontsize.scss"; function ButtonIncrement(props) { diff --git a/src/components/Setting/FontStyle/Fonts/fonts.js b/src/components/Setting/FontStyle/Fonts/fonts.js index 676a3b3..5c888d1 100644 --- a/src/components/Setting/FontStyle/Fonts/fonts.js +++ b/src/components/Setting/FontStyle/Fonts/fonts.js @@ -1,24 +1,31 @@ import React from "react"; import "../../../style/fonts.scss"; +import { DropdownItem } from "reactstrap"; const Fonts = (props) => { - const { setBookStyle, bookStyle } = props; + const { setBookStyle, bookStyle, dropdownOpen, setDropdownOpen } = props; + + const changeFontStyle = (id) => { + setDropdownOpen(!dropdownOpen) + console.log() + + if (id === 1) { + setBookStyle({ ...bookStyle, fontFamily: "Sans" }); + } else { + setBookStyle({ ...bookStyle, fontFamily: "Nazanin" }); + } + console.log(bookStyle) + }; return ( <> ); diff --git a/src/components/Setting/FontStyle/Fontstyle.js b/src/components/Setting/FontStyle/Fontstyle.js index a159284..58c8be0 100644 --- a/src/components/Setting/FontStyle/Fontstyle.js +++ b/src/components/Setting/FontStyle/Fontstyle.js @@ -7,7 +7,11 @@ const Fontstyle = (props) => { const { bookStyle, setBookStyle } = props; const [dropdownOpen, setDropdownOpen] = useState(false); - const toggle = () => setDropdownOpen((prevState) => !prevState); + const toggle = () => { + + setDropdownOpen(!dropdownOpen) + } + return (
@@ -18,7 +22,7 @@ const Fontstyle = (props) => { - +
diff --git a/src/components/Setting/LineHeight/lineheight.js b/src/components/Setting/LineHeight/lineheight.js index 1748070..9035c44 100644 --- a/src/components/Setting/LineHeight/lineheight.js +++ b/src/components/Setting/LineHeight/lineheight.js @@ -1,4 +1,3 @@ -import React, { useState } from "react"; import lineSpace from "../../image/lineSpace.svg"; import line from "../../image/line.svg"; import "../../../components/style/lineheight.scss"; diff --git a/src/components/Setting/setting.js b/src/components/Setting/setting.js index 2e92e4a..1891cbf 100644 --- a/src/components/Setting/setting.js +++ b/src/components/Setting/setting.js @@ -15,6 +15,7 @@ const Setting = (props) => { // valueList, // defaultValue, // title, + readyColors, setIsChecked, isChecked, setcolor, @@ -34,6 +35,7 @@ const Setting = (props) => { setIsChecked={setIsChecked} isChecked={isChecked} color={color} + readyColors={readyColors} />