|
|
|
@ -11,6 +11,10 @@ import ControlIconBtn from "components/option/ControlIconBtn"; |
|
|
|
import { BookStyle, BookFontFamily, BookFlow } from "types/book"; |
|
|
|
import { BookStyle, BookFontFamily, BookFlow } from "types/book"; |
|
|
|
import { MenuControl } from "lib/hooks/useMenu"; |
|
|
|
import { MenuControl } from "lib/hooks/useMenu"; |
|
|
|
import { BookOption } from "types/book"; |
|
|
|
import { BookOption } from "types/book"; |
|
|
|
|
|
|
|
import * as styles from 'lib/styles/styles' |
|
|
|
|
|
|
|
import palette from 'lib/styles/palette' |
|
|
|
|
|
|
|
import styled, { css } from 'styled-components' |
|
|
|
|
|
|
|
|
|
|
|
import Setting from "components/Setting/setting"; |
|
|
|
import Setting from "components/Setting/setting"; |
|
|
|
|
|
|
|
|
|
|
|
const Option = ( |
|
|
|
const Option = ( |
|
|
|
@ -140,10 +144,94 @@ const Option = ( |
|
|
|
ref={ref} |
|
|
|
ref={ref} |
|
|
|
> |
|
|
|
> |
|
|
|
<OptionLayout> |
|
|
|
<OptionLayout> |
|
|
|
<Setting/> |
|
|
|
<ControlIconBtnWrapper title="نحوه دیدن صفحه"> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="ScrollHorizontal" |
|
|
|
|
|
|
|
alt="Horizontal View" |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
isSelected={isScrollHorizontal} |
|
|
|
|
|
|
|
onClick={() => onClickDirection("Horizontal")} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="ScrollVertical" |
|
|
|
|
|
|
|
alt="Vertical View" |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
isSelected={!isScrollHorizontal} |
|
|
|
|
|
|
|
onClick={() => onClickDirection("Vertical")} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</ControlIconBtnWrapper> |
|
|
|
|
|
|
|
<ControlIconBtnWrapper title="حالت صفحه"> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="BookOpen" |
|
|
|
|
|
|
|
alt="دو صفحه" |
|
|
|
|
|
|
|
active={viewType.active} |
|
|
|
|
|
|
|
isSelected={viewType.spread} |
|
|
|
|
|
|
|
onClick={() => onClickViewType(true)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="BookClose" |
|
|
|
|
|
|
|
alt="تک صفحه" |
|
|
|
|
|
|
|
active={viewType.active} |
|
|
|
|
|
|
|
isSelected={!viewType.spread} |
|
|
|
|
|
|
|
onClick={() => onClickViewType(false)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</ControlIconBtnWrapper> |
|
|
|
|
|
|
|
<OptionDropdown |
|
|
|
|
|
|
|
title="فونت" |
|
|
|
|
|
|
|
defaultValue={fontFamily} |
|
|
|
|
|
|
|
valueList={["Nazanin", "Sans"]} |
|
|
|
|
|
|
|
onSelect={onSelectFontFamily} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionSlider |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
title="اندازه" |
|
|
|
|
|
|
|
minValue={8} |
|
|
|
|
|
|
|
maxValue={36} |
|
|
|
|
|
|
|
defaultValue={fontSize} |
|
|
|
|
|
|
|
step={1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("FontSize", e)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionSlider |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
title="فاصله ی بین خط ها" |
|
|
|
|
|
|
|
minValue={1} |
|
|
|
|
|
|
|
maxValue={3} |
|
|
|
|
|
|
|
defaultValue={lineHeight} |
|
|
|
|
|
|
|
step={0.1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("LineHeight", e)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionTitle>رنگ ها</OptionTitle> |
|
|
|
|
|
|
|
<BtnWrapper> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
</BtnWrapper> |
|
|
|
|
|
|
|
<BtnWrapper> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
<Btn>الف</Btn> |
|
|
|
|
|
|
|
</BtnWrapper> |
|
|
|
|
|
|
|
{/* <OptionSlider |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
title="Horizontal margin" |
|
|
|
|
|
|
|
minValue={0} |
|
|
|
|
|
|
|
maxValue={100} |
|
|
|
|
|
|
|
defaultValue={marginHorizontal} |
|
|
|
|
|
|
|
step={1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("MarginHorizontal", e)} |
|
|
|
|
|
|
|
/> */} |
|
|
|
|
|
|
|
{/* <OptionSlider |
|
|
|
|
|
|
|
active={bookFlow === "paginated"} |
|
|
|
|
|
|
|
title="Vertical margin" |
|
|
|
|
|
|
|
minValue={0} |
|
|
|
|
|
|
|
maxValue={100} |
|
|
|
|
|
|
|
defaultValue={marginVertical} |
|
|
|
|
|
|
|
step={1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("MarginVertical", e)} |
|
|
|
|
|
|
|
/> */} |
|
|
|
</OptionLayout> |
|
|
|
</OptionLayout> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Wrapper> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
)} |
|
|
|
</> |
|
|
|
</> |
|
|
|
@ -161,6 +249,43 @@ interface Props { |
|
|
|
onBookOptionChange: (bookOption: BookOption) => void; |
|
|
|
onBookOptionChange: (bookOption: BookOption) => void; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Btn = styled.button` |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
padding: 0 12px; |
|
|
|
|
|
|
|
dispayl: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
z-index: 0; |
|
|
|
|
|
|
|
transition: .3s ${styles.transition}; |
|
|
|
|
|
|
|
outline: none; |
|
|
|
|
|
|
|
&::before { |
|
|
|
|
|
|
|
content: ''; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
top: 0; |
|
|
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
margin: auto; |
|
|
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
|
|
border-radius: 30px; |
|
|
|
|
|
|
|
transition: .1s ${styles.transition}; |
|
|
|
|
|
|
|
background-color: rgb(0, 154, 168); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
const BtnWrapper = styled.div` |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
padding: 8px 0; |
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
const OptionTitle = styled.div` |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
`;
|
|
|
|
type SliderType = |
|
|
|
type SliderType = |
|
|
|
| "FontSize" |
|
|
|
| "FontSize" |
|
|
|
| "LineHeight" |
|
|
|
| "LineHeight" |
|
|
|
@ -173,80 +298,3 @@ type ViewType = { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default React.forwardRef(Option); |
|
|
|
export default React.forwardRef(Option); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <ControlIconBtnWrapper title="View Direction"> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="ScrollHorizontal" |
|
|
|
|
|
|
|
alt="Horizontal View" |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
isSelected={isScrollHorizontal} |
|
|
|
|
|
|
|
onClick={() => onClickDirection("Horizontal")} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="ScrollVertical" |
|
|
|
|
|
|
|
alt="Vertical View" |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
isSelected={!isScrollHorizontal} |
|
|
|
|
|
|
|
onClick={() => onClickDirection("Vertical")} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</ControlIconBtnWrapper> |
|
|
|
|
|
|
|
<ControlIconBtnWrapper title="View Spread"> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="BookOpen" |
|
|
|
|
|
|
|
alt="Two Page View" |
|
|
|
|
|
|
|
active={viewType.active} |
|
|
|
|
|
|
|
isSelected={viewType.spread} |
|
|
|
|
|
|
|
onClick={() => onClickViewType(true)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<ControlIconBtn |
|
|
|
|
|
|
|
type="BookClose" |
|
|
|
|
|
|
|
alt="One Page View" |
|
|
|
|
|
|
|
active={viewType.active} |
|
|
|
|
|
|
|
isSelected={!viewType.spread} |
|
|
|
|
|
|
|
onClick={() => onClickViewType(false)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</ControlIconBtnWrapper> |
|
|
|
|
|
|
|
<OptionDropdown |
|
|
|
|
|
|
|
title="Font" |
|
|
|
|
|
|
|
defaultValue={fontFamily} |
|
|
|
|
|
|
|
valueList={["Nazanin", "Sans"]} |
|
|
|
|
|
|
|
onSelect={onSelectFontFamily} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionSlider |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
title="Size" |
|
|
|
|
|
|
|
minValue={8} |
|
|
|
|
|
|
|
maxValue={36} |
|
|
|
|
|
|
|
defaultValue={fontSize} |
|
|
|
|
|
|
|
step={1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("FontSize", e)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionSlider |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
title="Line height" |
|
|
|
|
|
|
|
minValue={1} |
|
|
|
|
|
|
|
maxValue={3} |
|
|
|
|
|
|
|
defaultValue={lineHeight} |
|
|
|
|
|
|
|
step={0.1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("LineHeight", e)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionSlider |
|
|
|
|
|
|
|
active={true} |
|
|
|
|
|
|
|
title="Horizontal margin" |
|
|
|
|
|
|
|
minValue={0} |
|
|
|
|
|
|
|
maxValue={100} |
|
|
|
|
|
|
|
defaultValue={marginHorizontal} |
|
|
|
|
|
|
|
step={1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("MarginHorizontal", e)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<OptionSlider |
|
|
|
|
|
|
|
active={bookFlow === "paginated"} |
|
|
|
|
|
|
|
title="Vertical margin" |
|
|
|
|
|
|
|
minValue={0} |
|
|
|
|
|
|
|
maxValue={100} |
|
|
|
|
|
|
|
defaultValue={marginVertical} |
|
|
|
|
|
|
|
step={1} |
|
|
|
|
|
|
|
onChange={(e) => onChangeSlider("MarginVertical", e)} |
|
|
|
|
|
|
|
/> */} |
|
|
|
|
taha12322
3 years ago