header discription of highlight

demo
taha12322 3 years ago
parent c361a989c5
commit 6c029f98b8
  1. 42
      src/components/contextMenu/ColorItem.tsx
  2. 23
      src/components/contextMenu/Item.tsx
  3. 2
      src/components/contextMenu/Wrapper.tsx
  4. 10
      src/containers/Header.tsx
  5. 10
      src/containers/Reader.tsx
  6. 29
      src/containers/commons/ContextMenu.tsx
  7. 91
      src/containers/commons/Snackbar.tsx
  8. 2
      src/containers/menu/commons/Highlight.tsx
  9. 22
      src/slices/book.ts
  10. 1
      src/types/highlight.ts

@ -1,37 +1,37 @@
import styled from 'styled-components' import styled from "styled-components";
// lib // lib
import * as styles from 'lib/styles/styles' import * as styles from "lib/styles/styles";
import palette from 'lib/styles/palette' import palette from "lib/styles/palette";
const ColorItem = ({ name, color, onClick }: Props) => { const ColorItem = ({ color, onClick }: Props) => {
const onClickItem = (e: any) => { const onClickItem = (e: any) => {
onClick(); onClick();
e.target.blur(); e.target.blur();
}; };
return ( return (
<Wrapper onClick={onClickItem}> <>
<ColorWrapper> <Wrapper onClick={onClickItem}>
<Color color={color} /> <ColorWrapper>
</ColorWrapper> <Color color={color} />
<Message>{name}</Message> </ColorWrapper>
</Wrapper> </Wrapper>
</>
); );
} };
const Wrapper = styled.button` const Wrapper = styled.button`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 32px; height: 32px;
width: 50px;
text-align: -webkit-center;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
background-color: rgba(0,0,0,0); background-color: rgba(0, 0, 0, 0);
transition: .1s ${styles.transition}; transition: 0.1s ${styles.transition};
outline: none; outline: none;
&:hover, &:focus { &:hover,
&:focus {
background-color: ${palette.blue3}; background-color: ${palette.blue3};
& > span { & > span {
@ -45,7 +45,6 @@ const ColorWrapper = styled.div`
height: 16px; height: 16px;
border-radius: 16px; border-radius: 16px;
background-color: #fff; background-color: #fff;
margin-right: 16px;
`; `;
const Color = styled.div<{ color: string }>` const Color = styled.div<{ color: string }>`
@ -53,7 +52,7 @@ const Color = styled.div<{ color: string }>`
height: 16px; height: 16px;
border-radius: 16px; border-radius: 16px;
background-color: ${({ color }) => color}; background-color: ${({ color }) => color};
opacity: .4; opacity: 0.4;
`; `;
const Message = styled.span` const Message = styled.span`
@ -64,9 +63,8 @@ const Message = styled.span`
`; `;
interface Props { interface Props {
name: string;
color: string; color: string;
onClick: () => void; onClick: () => void;
} }
export default ColorItem export default ColorItem;

@ -1,11 +1,15 @@
import styled from 'styled-components' import styled from "styled-components";
// lib // lib
import * as styles from 'lib/styles/styles' import * as styles from "lib/styles/styles";
import palette from 'lib/styles/palette' import palette from "lib/styles/palette";
const Item = ({ text, onClick }: Props) => { const Item = ({ text, onClick }: Props) => {
return <Container onClick={onClick}>{text}</Container>; return (
} <>
<Container onClick={onClick}>{text}</Container>
</>
);
};
const Container = styled.button` const Container = styled.button`
width: 100%; width: 100%;
@ -14,13 +18,14 @@ const Container = styled.button`
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
transition: .1s ${styles.transition}; transition: 0.1s ${styles.transition};
background-color: rgba(0,0,0,0); background-color: rgba(0, 0, 0, 0);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
&:focus, &:hover { &:focus,
&:hover {
color: #fff; color: #fff;
background-color: ${palette.red3}; background-color: ${palette.red3};
} }
@ -31,4 +36,4 @@ interface Props {
onClick: (e?: any) => void; onClick: (e?: any) => void;
} }
export default Item export default Item;

@ -15,7 +15,7 @@ const Wrapper = styled.div<Props>`
: `${y}px` : `${y}px`
}; };
width: ${({ width }) => width + 'px'}; width: ${({ width }) => width + 'px'};
height: ${({ height }) => height + 'px'}; height: ${({ height }) => 195 + 'px'};
box-sizing: border-box; box-sizing: border-box;
padding: ${({ width }) => width > 0 padding: ${({ width }) => width > 0
? `4px` ? `4px`

@ -43,7 +43,15 @@ const Header = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Item text={title as any} /> <nav
style={
window.innerWidth < 768
? { width: "150px", textOverflow: "ellipsis" , direction:'rtl' }
: { border: "none" }
}
>
<Item text={title as any} />
</nav>
<span style={{ color: "#fff", marginRight: "10px" }}> <span style={{ color: "#fff", marginRight: "10px" }}>
{title ? "|" : ""} {title ? "|" : ""}
</span> </span>

@ -217,16 +217,6 @@ const Reader = ({ url, loadingView }: Props) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [color, setcolor] = useState("light-white"); const [color, setcolor] = useState("light-white");
// const Colors = [
// { name: "dark-white", value: "#fff" },
// { name: "dark-blue", value: "#fff" },
// { name: "dark-brown", value: "#fff4e1" },
// { name: "light-white", value: "#121212" },
// { name: "light-brown", value: "#af622e" },
// { name: "light-blue", value: "#5858df" },
// ];
const readyColors = [ const readyColors = [
{ name: "dark-white", bgColor: "#4e4e4e", color: "#fff" }, { name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
{ name: "light-white", bgColor: "#fff", color: "#292929" }, { name: "light-white", bgColor: "#fff", color: "#292929" },

@ -43,7 +43,6 @@ const ContextMenu = ({
const ColorList = colorList.map((color) => ( const ColorList = colorList.map((color) => (
<ColorItem <ColorItem
key={color.code} key={color.code}
name={color.name}
color={color.code} color={color.code}
onClick={ onClick={
selection.update selection.update
@ -176,6 +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('')
return ( return (
<> <>
{display && ( {display && (
@ -187,6 +188,32 @@ const ContextMenu = ({
isReverse={isReverse} isReverse={isReverse}
ref={menuRef} ref={menuRef}
> >
<label
style={{
display: "flex",
justifyContent: "flex-end",
margin: "1px 5px",
color: "#fff",
}}
>
نام
</label>
<textarea
style={{
height: "50px",
width: "100%",
backgroundColor: "initial",
border: "solid 1.5px #fff",
textAlign: "center",
borderRadius: "5px",
color: "#fff",
resize: "none",
}}
placeholder="توضیحات"
value={discription}
onChange={(e)=>setDiscription(e.target.value)}
/>
<div> <div>
{ColorList} {ColorList}
{isEraseBtn && <Item text="حذف" onClick={onRemoveHighlight_} />} {isEraseBtn && <Item text="حذف" onClick={onRemoveHighlight_} />}

@ -1,56 +1,55 @@
import styled from 'styled-components' import styled from "styled-components";
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from "react-redux";
// components // components
import Snackbar from 'components/commons/Snackbar' import Snackbar from "components/commons/Snackbar";
// lib // lib
import zIndex from 'lib/styles/zIndex' import zIndex from "lib/styles/zIndex";
import media from 'lib/styles/media' import media from "lib/styles/media";
// slices // slices
import { deleteSnackbar } from 'slices/snackbar' import { deleteSnackbar } from "slices/snackbar";
// types // types
import { RootState } from 'slices' import { RootState } from "slices";
import { SnackbarState } from 'slices/snackbar' import { SnackbarState } from "slices/snackbar";
const SnackbarWrapper = () => {
const SnackbarWrapper = ()=> {
const dispatch = useDispatch(); const dispatch = useDispatch();
const snackbar = useSelector<RootState, SnackbarState>(state => state.snackbar); const snackbar = useSelector<RootState, SnackbarState>(
(state) => state.snackbar
);
const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (e) { const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
e.preventDefault(); if (e) {
e.stopPropagation(); e.preventDefault();
} e.stopPropagation();
dispatch(deleteSnackbar()); }
}; dispatch(deleteSnackbar());
};
return ( return (
<Container> <Container>
{snackbar.text !== '' && <Snackbar onClick={onClick} {snackbar.text !== "" && (
text={snackbar.text} <Snackbar onClick={onClick} text={snackbar.text} type={snackbar.type} />
type={snackbar.type} />} )}
</Container> </Container>
); );
} };
const Container = styled.div` const Container = styled.div`
position: fixed; position: fixed;
top: 40px; top: 40px;
right: 30px; right: 30px;
width: 320px; width: 320px;
height: auto; height: auto;
z-index: ${zIndex.snackbar}; z-index: ${zIndex.snackbar};
${media.small} { ${media.small} {
width: 100%; width: 100%;
top: initial; top: initial;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
} }
`; `;
export default SnackbarWrapper export default SnackbarWrapper;

@ -50,8 +50,6 @@ const Highlight = ({
return ( return (
<Wrapper onClick={onClickHighlight}> <Wrapper onClick={onClickHighlight}>
<div> <div>
<Title>{highlight.chpaterName}</Title>
<Post color={highlight.color}>{highlight.content}</Post> <Post color={highlight.color}>{highlight.content}</Post>
</div> </div>
</Wrapper> </Wrapper>

@ -35,12 +35,12 @@ const initialCurrentLocation: Page = {
/** 초기 색상표 상태 */ /** 초기 색상표 상태 */
const initialColorList: Color[] = [ const initialColorList: Color[] = [
{ name: "قرمز", code: palette.red4 }, { code: palette.red4 },
{ name: "نارنجی", code: palette.orange4 }, { code: palette.orange4 },
{ name: "زرد", code: palette.yellow4 }, { code: palette.yellow4 },
{ name: "سبز", code: palette.green4 }, { code: palette.green4 },
{ name: "آبی", code: palette.blue4 }, { code: palette.blue4 },
{ name: "بنفش", code: palette.purple4 }, { code: palette.purple4 },
]; ];
const initialState: BookState = { const initialState: BookState = {
@ -64,16 +64,6 @@ const bookSlice = createSlice({
}, },
/** CurrentPage 갱신 @dispatch */ /** CurrentPage 갱신 @dispatch */
updateCurrentPage(state, action: PayloadAction<Page>) { updateCurrentPage(state, action: PayloadAction<Page>) {
if (
state.currentLocation.currentPage == action.payload.currentPage &&
action.payload.chapterName
) {
console.log(JSON.parse(JSON.stringify(state)));
// let c = current(state)
// let x = [...c.toc];
// console.log(x[1]);
alert("فصل بعد");
}
state.currentLocation = action.payload; state.currentLocation = action.payload;
}, },
/** Book 초기화 @dispatch */ /** Book 초기화 @dispatch */

@ -28,7 +28,6 @@ interface Highlight {
* @param code Hex * @param code Hex
*/ */
export interface Color { export interface Color {
name: string;
code: string; code: string;
} }

Loading…
Cancel
Save