rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: redesign save button and add preview button

Browse source
This commit is contained in:
swve 2023-04-26 22:17:10 +02:00
parent bca9371af0
commit 5b2187c311
1 changed files with 63 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

68
front/components/Editor/Editor.tsx
View file

@ -10,7 +10,7 @@ import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";
import styled from "styled-components";
import { getBackendUrl } from "@services/config/config";
import { SlashIcon } from "@radix-ui/react-icons";
import { DividerVerticalIcon, EyeOpenIcon, SlashIcon } from "@radix-ui/react-icons";
import Avvvatars from "avvvatars-react";
// extensions
import InfoCallout from "./Extensions/Callout/Info/InfoCallout";
@ -18,10 +18,11 @@ import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "./Extensions/Image/ImageBlock";
import Youtube from "@tiptap/extension-youtube";
import VideoBlock from "./Extensions/Video/VideoBlock";
import { Save } from "lucide-react";
import { Eye, Save } from "lucide-react";
import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
import PDFBlock from "./Extensions/PDF/PDFBlock";
import QuizBlock from "./Extensions/Quiz/QuizBlock";
import ToolTip from "@components/UI/Tooltip/Tooltip";
interface Editor {
content: string;
@ -113,9 +114,7 @@ function Editor(props: Editor) {
{" "}
<b>{props.course.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
</EditorInfoDocName>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>
Save <Save size={11} />
</EditorSaveButton>
</EditorInfoWrapper>
<EditorButtonsWrapper>
<ToolbarButtons editor={editor} />
@ -126,6 +125,11 @@ function Editor(props: Editor) {
{!auth.isAuthenticated && <span>Loading</span>}
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />}
</EditorUserProfileWrapper>
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey" }} />
<EditorLeftOptionsSection>
<EditorLeftOptionsSaveButton onClick={() => props.setContent(editor.getJSON())}> Save </EditorLeftOptionsSaveButton>
<ToolTip content="Preview"><EditorLeftOptionsPreviewButton> <Eye size={15} /> </EditorLeftOptionsPreviewButton></ToolTip>
</EditorLeftOptionsSection>
</EditorUsersSection>
</EditorTop>
</motion.div>
@ -186,11 +190,63 @@ const EditorDocSection = styled.div`
`;
const EditorUsersSection = styled.div`
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const EditorLeftOptionsSection = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const EditorLeftOptionsSaveButton = styled.button`
background-color: #8783f7;
border-radius: 8px;
border: none;
color: white;
padding: 8px;
margin-left: 10px;
margin-right: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
outline: none;
&:hover {
background-color: #4a44f9;
opacity: 0.8;
}
`;
const EditorLeftOptionsPreviewButton = styled.button`
background-color: #a4a4a449;
border-radius: 8px;
border: none;
color: #000000;
padding: 8px;
margin-right: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
outline: none;
// center icon
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #c0bfbf;
opacity: 0.8;
}
`;
// Inside EditorDocSection
const EditorInfoWrapper = styled.div`
display: flex;