rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 20:09: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";
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 { 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) {
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 Youtube from "@tiptap/extension-youtube";
import VideoBlock from "./Extensions/Video/VideoBlock";
import { Save } from "lucide-react";
interface Editor {
content: string;
@ -97,7 +98,7 @@ function Editor(props: Editor) {
{" "}
<b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
</EditorInfoDocName>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save</EditorSaveButton>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save <Save size={12}/></EditorSaveButton>
</EditorInfoWrapper>
<EditorButtonsWrapper>
<ToolbarButtons editor={editor} />
@ -213,24 +214,29 @@ const EditorInfoDocName = styled.div`
const EditorSaveButton = styled.div`
display: flex;
border-radius: 6px;
border-radius: 8px;
padding: 5px;
font-size: 12px;
margin-right: 5px;
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 {
background: rgba(176, 176, 176, 0.5);
&:hover {
background: rgba(139, 139, 139, 0.5);
background: rgba(31, 31, 31, 0.5);
cursor: pointer;
}
}
&:hover {
background: rgba(217, 217, 217, 0.48);
cursor: pointer;
}
`;