setting colors

demo
taha12322 3 years ago
parent b71677b31a
commit a0d2306a29
  1. 130
      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/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 (
<>
<label class="switch">
<input type="checkbox" onChange={() => setIsChecked(!isChecked)} />
<input type="checkbox" onChange={colorMoodHandler} />
<span class="slider round"></span>
</label>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle>
<div onClick={() => changeIcone()}>
<img src={Icon} set="curved" className="palette-icon" alt="icon" />
<div>
<img
src={dropdownOpen ? PalletColorbold : PalletColorOutline}
className="palette-icon"
alt="icon"
/>
</div>
</DropdownToggle>
<DropdownMenu>
{isChecked ? (
<>
<DropdownItem>
<button
onClick={() => changeColorHandler("dark-white")}
id="red-btn-d"
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>
</DropdownItem>
{darkMood.map((item) => (
<DropdownItem>
<button
onClick={() => changeColorHandler(item.id)}
id="red-btn-d"
style={{ backgroundColor: item.bgColor, color: item.color }}
className={"btn-color"}
>
الف
</button>
</DropdownItem>
))}
</>
) : (
<>
<DropdownItem>
<button
onClick={() => changeColorHandler("light-white")}
id="red-btn-w"
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>
</DropdownItem>
{lightMood.map((item) => (
<DropdownItem>
<button
onClick={() => changeColorHandler(item.id)}
id="red-btn-d"
style={{ backgroundColor: item.bgColor, color: item.color }}
className={"btn-color"}
>
الف
</button>
</DropdownItem>
))}
</>
)}
</DropdownMenu>

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

@ -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 (
<>
<nav className="nav-btn">
<button
onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Sans" })}
className="btn-font"
>
سانس
</button>
<button
onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Nazanin" })}
className="btn-font"
>
نازنین
</button>
<DropdownItem onClick={() => changeFontStyle(1)}>
<button className="btn-font">سانس</button>
</DropdownItem>
<DropdownItem onClick={() => changeFontStyle(2)}>
<button className="btn-font">نازنین</button>
</DropdownItem>
</nav>
</>
);

@ -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 (
<div>
@ -18,7 +22,7 @@ const Fontstyle = (props) => {
</button>
</DropdownToggle>
<DropdownMenu className="nav-menu-font">
<Fonts bookStyle={bookStyle} setBookStyle={setBookStyle} />
<Fonts setDropdownOpen={setDropdownOpen} dropdownOpen={dropdownOpen} bookStyle={bookStyle} setBookStyle={setBookStyle} />
</DropdownMenu>
</Dropdown>
</div>

@ -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";

@ -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}
/>
</nav>
<nav className="nav-items">

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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
import { useDispatch } from 'react-redux'
// components
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'
// slices
import { updateHighlight } from 'slices/book'

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

Loading…
Cancel
Save