setting colors

demo
taha12322 3 years ago
parent b71677b31a
commit a0d2306a29
  1. 104
      src/components/Setting/FontColor/colors.js
  2. 2
      src/components/Setting/FontSize/fontsize.js
  3. 33
      src/components/Setting/FontStyle/Fonts/fonts.js
  4. 8
      src/components/Setting/FontStyle/Fontstyle.js
  5. 1
      src/components/Setting/LineHeight/lineheight.js
  6. 2
      src/components/Setting/setting.js
  7. 12
      src/components/contextMenu/ColorItem.tsx
  8. 14
      src/components/nav/BookInfo.tsx
  9. 1
      src/components/style/fontStyle.scss
  10. 1
      src/components/style/setting.scss
  11. 6
      src/containers/Footer.tsx
  12. 30
      src/containers/Header.tsx
  13. 31
      src/containers/Reader.tsx
  14. 8
      src/containers/commons/ContextMenu.tsx
  15. 2
      src/containers/menu/commons/Highlight.tsx
  16. 2
      src/slices/book.ts

@ -1,9 +1,9 @@
import React, { useState } from "react"; import { useState, useEffect } from "react";
import "../../../components/style/colorsComponents.scss"; import "../../../components/style/colorsComponents.scss";
import "../../../components/style/chosecolor.scss"; import "../../../components/style/chosecolor.scss";
import PalletColorOutline from "../../image/PalletColorOutline.svg"; import PalletColorOutline from "../../image/PalletColorOutline.svg";
import PalletColorbold from "../../image/PalletColorBold.svg"; import PalletColorbold from "../../image/PalletColorBold.svg";
import Chosecolor from "./Colors/chosecolor"; // import Chosecolor from "./Colors/chosecolor";
import { import {
ButtonDropdown, ButtonDropdown,
DropdownToggle, DropdownToggle,
@ -12,92 +12,92 @@ import {
} from "reactstrap"; } from "reactstrap";
const Colors = (props) => { const Colors = (props) => {
const { setcolor, color } = props; const { setcolor, color, readyColors } = props;
const [localColorControl, localColorControlSetter] = useState(true);
const [dropdownOpen, setOpen] = useState(false); const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen); const toggle = () => setOpen(!dropdownOpen);
const [isChecked, setIsChecked] = useState(false); const [isChecked, setIsChecked] = useState(false);
const [Icon, seticon] = useState(PalletColorOutline); // const idofelement = readyColors.map((item) => item.id);
const changeIcone = () => { const colorMoodHandler = () => {
seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline); 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) => { const changeColorHandler = (id) => {
setcolor(value); 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 ( return (
<> <>
<label class="switch"> <label class="switch">
<input type="checkbox" onChange={() => setIsChecked(!isChecked)} /> <input type="checkbox" onChange={colorMoodHandler} />
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}> <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle> <DropdownToggle>
<div onClick={() => changeIcone()}> <div>
<img src={Icon} set="curved" className="palette-icon" alt="icon" /> <img
src={dropdownOpen ? PalletColorbold : PalletColorOutline}
className="palette-icon"
alt="icon"
/>
</div> </div>
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
{isChecked ? ( {isChecked ? (
<> <>
{darkMood.map((item) => (
<DropdownItem> <DropdownItem>
<button <button
onClick={() => changeColorHandler("dark-white")} onClick={() => changeColorHandler(item.id)}
id="red-btn-d" id="red-btn-d"
className="btn-color" style={{ backgroundColor: item.bgColor, color: item.color }}
> className={"btn-color"}
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("dark-brown")}
id="green-btn-d"
className="btn-color"
>
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("dark-blue")}
id="blue-btn-d"
className="btn-color"
> >
الف الف
</button> </button>
</DropdownItem> </DropdownItem>
))}
</> </>
) : ( ) : (
<> <>
{lightMood.map((item) => (
<DropdownItem> <DropdownItem>
<button <button
onClick={() => changeColorHandler("light-white")} onClick={() => changeColorHandler(item.id)}
id="red-btn-w" id="red-btn-d"
className="btn-color" style={{ backgroundColor: item.bgColor, color: item.color }}
> className={"btn-color"}
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("light-brown")}
id="green-btn-w"
className="btn-color"
>
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("light-blue")}
id="blue-btn-w"
className="btn-color"
> >
الف الف
</button> </button>
</DropdownItem> </DropdownItem>
))}
</> </>
)} )}
</DropdownMenu> </DropdownMenu>

@ -1,4 +1,4 @@
import React, { useState } from "react"; // import React, { useState } from "react";
import "../../../components/style/fontsize.scss"; import "../../../components/style/fontsize.scss";
function ButtonIncrement(props) { function ButtonIncrement(props) {

@ -1,24 +1,31 @@
import React from "react"; import React from "react";
import "../../../style/fonts.scss"; import "../../../style/fonts.scss";
import { DropdownItem } from "reactstrap";
const Fonts = (props) => { 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 ( return (
<> <>
<nav className="nav-btn"> <nav className="nav-btn">
<button <DropdownItem onClick={() => changeFontStyle(1)}>
onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Sans" })} <button className="btn-font">سانس</button>
className="btn-font" </DropdownItem>
> <DropdownItem onClick={() => changeFontStyle(2)}>
سانس <button className="btn-font">نازنین</button>
</button> </DropdownItem>
<button
onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Nazanin" })}
className="btn-font"
>
نازنین
</button>
</nav> </nav>
</> </>
); );

@ -7,7 +7,11 @@ const Fontstyle = (props) => {
const { bookStyle, setBookStyle } = props; const { bookStyle, setBookStyle } = props;
const [dropdownOpen, setDropdownOpen] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState); const toggle = () => {
setDropdownOpen(!dropdownOpen)
}
return ( return (
<div> <div>
@ -18,7 +22,7 @@ const Fontstyle = (props) => {
</button> </button>
</DropdownToggle> </DropdownToggle>
<DropdownMenu className="nav-menu-font"> <DropdownMenu className="nav-menu-font">
<Fonts bookStyle={bookStyle} setBookStyle={setBookStyle} /> <Fonts setDropdownOpen={setDropdownOpen} dropdownOpen={dropdownOpen} bookStyle={bookStyle} setBookStyle={setBookStyle} />
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</div> </div>

@ -1,4 +1,3 @@
import React, { useState } from "react";
import lineSpace from "../../image/lineSpace.svg"; import lineSpace from "../../image/lineSpace.svg";
import line from "../../image/line.svg"; import line from "../../image/line.svg";
import "../../../components/style/lineheight.scss"; import "../../../components/style/lineheight.scss";

@ -15,6 +15,7 @@ const Setting = (props) => {
// valueList, // valueList,
// defaultValue, // defaultValue,
// title, // title,
readyColors,
setIsChecked, setIsChecked,
isChecked, isChecked,
setcolor, setcolor,
@ -34,6 +35,7 @@ const Setting = (props) => {
setIsChecked={setIsChecked} setIsChecked={setIsChecked}
isChecked={isChecked} isChecked={isChecked}
color={color} color={color}
readyColors={readyColors}
/> />
</nav> </nav>
<nav className="nav-items"> <nav className="nav-items">

@ -55,12 +55,12 @@ const Color = styled.div<{ color: string }>`
opacity: 0.4; opacity: 0.4;
`; `;
const Message = styled.span` // const Message = styled.span`
width: 48px; // width: 48px;
font-size: 14px; // font-size: 14px;
color: #ddd; // color: #ddd;
line-height: 20px; // line-height: 20px;
`; // `;
interface Props { interface Props {
color: string; color: string;

@ -18,13 +18,13 @@ const Container = styled.div`
padding: 24px; padding: 24px;
`; `;
const BookImg = styled.img` // const BookImg = styled.img`
margin-right: 12px; // margin-right: 12px;
width: 44%; // width: 44%;
min-width: 120px; // min-width: 120px;
border-radius: 4px; // border-radius: 4px;
background: #eee; // background: #eee;
`; // `;
const BookContent = styled.div` const BookContent = styled.div`
flex-grow: 1; flex-grow: 1;

@ -1,6 +1,7 @@
@import "./colors"; @import "./colors";
.nav-menu-font { .nav-menu-font {
padding: 0 !important;
min-width: 3.5rem !important; min-width: 3.5rem !important;
transform: translate3d(-5px, 24px, 0px) !important; transform: translate3d(-5px, 24px, 0px) !important;
} }

@ -3,7 +3,6 @@
align-items: center; align-items: center;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
justify-content: space-between; justify-content: space-between;
z-index: 1000;
.nav-items{ .nav-items{
display: flex; display: flex;

@ -21,7 +21,7 @@ const Footer = ({
// totalPage, // totalPage,
//viewType, //viewType,
// // onPageMove, // // onPageMove,
// CountPage, CountPage,
// onClickDirection, // onClickDirection,
// onClickViewType, // onClickViewType,
onBookOptionChange, onBookOptionChange,
@ -86,10 +86,10 @@ const Footer = ({
<nav className="footer-item"> <nav className="footer-item">
<> <>
<nav className="nav-footer-item" id="toggler"> <nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${101}`} /> <Item text={`${CountPage} / ${101}`} />
</nav> </nav>
<nav style={{ direction: "rtl", flex: 1 }}> <nav style={{ direction: "rtl", flex: 1 }}>
<ProgressBar value={nowPage} max={100} /> <ProgressBar value={CountPage} max={100} />
</nav> </nav>
{isMobile ? ( {isMobile ? (
// --------- Mobile // --------- Mobile

@ -1,11 +1,11 @@
// components // components
import { useState } from "react"; // import { useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import Wrapper from "components/header/Wrapper"; import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout"; import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo"; import Logo from "components/header/Logo";
import Item from "components/footer/Item"; import Item from "components/footer/Item";
import BookInfo from "components/nav/BookInfo"; // import BookInfo from "components/nav/BookInfo";
// import { Collapse, Button, CardBody, Card } from "reactstrap"; // import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({ const Header = ({
@ -83,20 +83,20 @@ const Header = ({
); );
}; };
const ButtonB = styled.button` // const ButtonB = styled.button`
display: flex; // display: flex;
margin-top: 15px; // margin-top: 15px;
border-radius: 5px; // border-radius: 5px;
border: solid 2px #fff; // border: solid 2px #fff;
padding: 2px 2rem; // padding: 2px 2rem;
color: #fff; // color: #fff;
font-family: inherit; // font-family: inherit;
&:hover { // &:hover {
background-color: #fff; // background-color: #fff;
color: rgb(0, 154, 168); // color: rgb(0, 154, 168);
} // }
`; // `;
const Img = styled.img` const Img = styled.img`
width: 25px; width: 25px;

@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
resizeOnOrientationChange: true, resizeOnOrientationChange: true,
spread: "auto", spread: "auto",
}); });
const [pPage, setpPage] = useState(0); // const [pPage, setpPage] = useState(0);
const [navControl, onNavToggle] = useMenu(navRef, 300); const [navControl, onNavToggle] = useMenu(navRef, 300);
const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300); const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
const [learningControl, onLearningToggle] = useMenu(learningRef, 300); const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
@ -93,7 +93,7 @@ const Reader = ({ url, loadingView }: Props) => {
}`; }`;
const node = const node =
iframe && iframe.contentWindow && iframe.contentWindow.document; iframe && iframe.contentWindow && iframe.contentWindow.document;
// node && node.head && node.head.appendChild(new_style_element); node && node.head && node.head.appendChild(new_style_element);
}; };
const onBookInfoChange = (book: Book) => { const onBookInfoChange = (book: Book) => {
loadFont(); loadFont();
@ -177,7 +177,7 @@ const Reader = ({ url, loadingView }: Props) => {
// setsettingicon(!settingicon); // setsettingicon(!settingicon);
// }; // };
const [isScrollHorizontal, setIsScrollHorizontal] = useState(true); // const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
const onClickDirection = (type: "Horizontal" | "Vertical") => { const onClickDirection = (type: "Horizontal" | "Vertical") => {
if (type === "Horizontal") { if (type === "Horizontal") {
onBookOptionChange({ onBookOptionChange({
@ -216,20 +216,20 @@ const Reader = ({ url, loadingView }: Props) => {
const [CountPage, setCountPage] = useState(0); const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [color, setcolor] = useState("light-white"); const [color, setcolor] = useState(1);
const readyColors = [ const readyColors = [
{ name: "dark-white", bgColor: "#4e4e4e", color: "#fff" }, { id: 4, name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
{ name: "light-white", bgColor: "#fff", color: "#292929" }, { id: 5, name: "dark-brown", bgColor: "#af622e", color: "#fff4e1" },
{ name: "dark-blue", bgColor: "#5858d3", color: "#fff" }, { id: 6, name: "dark-blue", bgColor: "#5858d3", color: "#fff" },
{ name: "dark-brown", bgColor: "#af622e", color: "#fff4e1" }, { id: 1, name: "light-white", bgColor: "#fff", color: "#4e4e4e" },
{ name: "light-brown", bgColor: "#fff4e1", color: "#af622e" }, { id: 2, name: "light-brown", bgColor: "#fff4e1", color: "#af622e" },
{ name: "light-blue", bgColor: "#C3DDFF", color: "#5858df" }, { id: 3, name: "light-blue", bgColor: "#C3DDFF", color: "#5858df" },
]; ];
const colorHandler = (color: any) => { // const colorHandler = (color: any) => {
let myColor = readyColors.filter((item) => item.name === color); // let myColor = readyColors.filter((item) => item.id === color);
return myColor[0].bgColor; // return myColor[0].bgColor;
}; // };
return ( return (
<> <>
@ -250,11 +250,12 @@ const Reader = ({ url, loadingView }: Props) => {
bookOption={bookOption} bookOption={bookOption}
setBookOption={setBookOption} setBookOption={setBookOption}
isOpen={isOpen} isOpen={isOpen}
readyColors={readyColors}
/> />
<nav <nav
style={{ style={{
backgroundColor: colorHandler(color), backgroundColor: readyColors.filter((item) => item.id === color)[0].bgColor,
color: "green", color: "green",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",

@ -175,7 +175,8 @@ const ContextMenu = ({
setY(y_); setY(y_);
}, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]); }, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]);
const [discription, setDiscription] = useState('') const [discription, setDiscription] = useState("");
localStorage.setItem("highlight", discription);
return ( return (
<> <>
@ -194,6 +195,8 @@ const ContextMenu = ({
justifyContent: "flex-end", justifyContent: "flex-end",
margin: "1px 5px", margin: "1px 5px",
color: "#fff", color: "#fff",
fontSize: "12px",
fontWeight: "lighter",
}} }}
> >
نام نام
@ -209,10 +212,9 @@ const ContextMenu = ({
color: "#fff", color: "#fff",
resize: "none", resize: "none",
}} }}
placeholder="توضیحات" placeholder="توضیحات"
value={discription} value={discription}
onChange={(e)=>setDiscription(e.target.value)} onChange={(e) => setDiscription(e.target.value)}
/> />
<div> <div>
{ColorList} {ColorList}

@ -1,7 +1,7 @@
import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
// components // components
import Wrapper from 'components/note/highlight/Wrapper' import Wrapper from 'components/note/highlight/Wrapper'
import Title from 'components/note/highlight/Title' // import Title from 'components/note/highlight/Title'
import Post from 'components/note/highlight/Post' import Post from 'components/note/highlight/Post'
// slices // slices
import { updateHighlight } from 'slices/book' import { updateHighlight } from 'slices/book'

@ -65,7 +65,7 @@ const bookSlice = createSlice({
/** CurrentPage 갱신 @dispatch */ /** CurrentPage 갱신 @dispatch */
updateCurrentPage(state, action: PayloadAction<Page>) { updateCurrentPage(state, action: PayloadAction<Page>) {
if ( if (
state.currentLocation.currentPage == action.payload.currentPage && state.currentLocation.currentPage === action.payload.currentPage &&
action.payload.chapterName action.payload.chapterName
) { ) {
console.log(JSON.parse(JSON.stringify(state))); console.log(JSON.parse(JSON.stringify(state)));

Loading…
Cancel
Save