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

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

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

@ -43,7 +43,15 @@ const Header = ({
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" }}>
{title ? "|" : ""}
</span>

@ -217,16 +217,6 @@ const Reader = ({ url, loadingView }: Props) => {
const [isOpen, setIsOpen] = useState(false);
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 = [
{ name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
{ name: "light-white", bgColor: "#fff", color: "#292929" },

@ -43,7 +43,6 @@ const ContextMenu = ({
const ColorList = colorList.map((color) => (
<ColorItem
key={color.code}
name={color.name}
color={color.code}
onClick={
selection.update
@ -176,6 +175,8 @@ const ContextMenu = ({
setY(y_);
}, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]);
const [discription, setDiscription] = useState('')
return (
<>
{display && (
@ -187,6 +188,32 @@ const ContextMenu = ({
isReverse={isReverse}
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>
{ColorList}
{isEraseBtn && <Item text="حذف" onClick={onRemoveHighlight_} />}

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

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

@ -35,12 +35,12 @@ const initialCurrentLocation: Page = {
/** 초기 색상표 상태 */
const initialColorList: Color[] = [
{ name: "قرمز", code: palette.red4 },
{ name: "نارنجی", code: palette.orange4 },
{ name: "زرد", code: palette.yellow4 },
{ name: "سبز", code: palette.green4 },
{ name: "آبی", code: palette.blue4 },
{ name: "بنفش", code: palette.purple4 },
{ code: palette.red4 },
{ code: palette.orange4 },
{ code: palette.yellow4 },
{ code: palette.green4 },
{ code: palette.blue4 },
{ code: palette.purple4 },
];
const initialState: BookState = {
@ -64,16 +64,6 @@ const bookSlice = createSlice({
},
/** CurrentPage 갱신 @dispatch */
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;
},
/** Book 초기화 @dispatch */

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

Loading…
Cancel
Save