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: update save button ui

Browse source
This commit is contained in:
swve 2023-01-11 23:30:13 +01:00
parent b7ef575d83
commit af8542069f
2 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

5
front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx
View file

@ -1,3 +1,4 @@
"use client"; "use client";
import { default as React, useEffect, useRef } from "react"; import { default as React, useEffect, useRef } from "react";
@ -10,10 +11,6 @@ import AuthProvider from "../../../../../../../../components/Security/AuthProvid
import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper"; import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper";
import { getCourseMetadata } from "../../../../../../../../services/courses/courses"; import { getCourseMetadata } from "../../../../../../../../services/courses/courses";
// Workaround (Next.js SSR doesn't support tip tap editor)
const Editor: any = dynamic(() => import("../../../../../../../../components/Editor/EditorWrapper") as any, {
ssr: false,
});
function EditElement(params: any) { function EditElement(params: any) {
const router = useRouter(); const router = useRouter();

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

@ -18,6 +18,7 @@ import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "./Extensions/Image/ImageBlock"; import ImageBlock from "./Extensions/Image/ImageBlock";
import Youtube from "@tiptap/extension-youtube"; import Youtube from "@tiptap/extension-youtube";
import VideoBlock from "./Extensions/Video/VideoBlock"; import VideoBlock from "./Extensions/Video/VideoBlock";
import { Save } from "lucide-react";
interface Editor { interface Editor {
content: string; content: string;
@ -97,7 +98,7 @@ function Editor(props: Editor) {
{" "} {" "}
<b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "} <b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
</EditorInfoDocName> </EditorInfoDocName>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save</EditorSaveButton> <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save <Save size={12}/></EditorSaveButton>
</EditorInfoWrapper> </EditorInfoWrapper>
<EditorButtonsWrapper> <EditorButtonsWrapper>
<ToolbarButtons editor={editor} /> <ToolbarButtons editor={editor} />
@ -213,24 +214,29 @@ const EditorInfoDocName = styled.div`
const EditorSaveButton = styled.div` const EditorSaveButton = styled.div`
display: flex; display: flex;
border-radius: 6px; border-radius: 8px;
padding: 5px; padding: 5px;
font-size: 12px; font-size: 12px;
margin-right: 5px; margin-right: 5px;
margin-left: 7px; margin-left: 7px;
background: rgba(176, 176, 176, 0.145); background: #ffffff8d;
color: #5252528d;
border: solid 1px #52525257;
align-items: center;
justify-content: space-between;
width: 53px;
&.is-active { &.is-active {
background: rgba(176, 176, 176, 0.5); background: rgba(176, 176, 176, 0.5);
&:hover { &:hover {
background: rgba(139, 139, 139, 0.5); background: rgba(31, 31, 31, 0.5);
cursor: pointer; cursor: pointer;
} }
} }
&:hover { &:hover {
background: rgba(217, 217, 217, 0.48);
cursor: pointer; cursor: pointer;
} }
`; `;