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 some editor blocks

Browse source
This commit is contained in:
swve 2023-08-14 14:10:49 +02:00
parent 3cca78d6e1
commit 7a6d86e598
11 changed files with 131 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

33
front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -1,9 +1,10 @@
import { NodeViewWrapper } from "@tiptap/react";
import React from "react";
import styled from "styled-components";
import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info } from "lucide-react";
import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info, Loader } from "lucide-react";
import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf";
import { getBackendUrl } from "../../../../../services/config/config";
import { UploadIcon } from "@radix-ui/react-icons";
import { getActivityBlockMediaDirectory } from "@services/media/media";
function PDFBlockComponent(props: any) {
@ -30,19 +31,24 @@ function PDFBlockComponent(props: any) {
return (
<NodeViewWrapper className="block-pdf">
{!blockObject && (
<BlockPDFWrapper contentEditable={props.extension.options.editable}>
<div>
<FileText color="#e1e0e0" size={50} />
<br />
</div>
<input onChange={handlePDFChange} type="file" name="" id="" />
<br />
<button onClick={handleSubmit}>Submit</button>
<BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
{isLoading ? (
<Loader className="animate-spin animate-pulse text-gray-200" size={50} />
) : (
<>
<div>
<FileText className="text-gray-200" size={50} />
</div>
<input className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer file:bg-gray-200 cursor-pointer file:text-gray-500" onChange={handlePDFChange} type="file" name="" id="" />
<button className='p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex' onClick={handleSubmit}><UploadIcon></UploadIcon><p>Submit</p></button>
</>
)}
</BlockPDFWrapper>
)}
{blockObject && (
<BlockPDF>
<iframe
className="shadow rounded-lg h-96 w-full object-scale-down bg-black"
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
props.extension.options.activity.course_id,
props.extension.options.activity.activity_id,
@ -63,14 +69,7 @@ function PDFBlockComponent(props: any) {
export default PDFBlockComponent;
const BlockPDFWrapper = styled.div`
display: flex;
flex-direction: column;
background: #f9f9f9;
border-radius: 3px;
padding: 30px;
min-height: 74px;
border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
// center
align-items: center;
justify-content: center;