Поправил баги

frontend-park-mail-ru · May 24, 2024 · f537cec · f537cec
1 parent 566cbb0
commit f537cec
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 25 deletions.
diff --git a/public/src/components/Editor/Editor.sass b/public/src/components/Editor/Editor.sass
@@ -34,7 +34,6 @@
 	flex-direction: column
 	gap: 10px
 	position: relative
-	padding-left: 20px
 
 	@media screen and (max-width: $lg)
 		padding-left: 10px
@@ -79,7 +78,7 @@
 				animation: fadeIn 0.3s
 
 		.img
-			width: 75%
+			max-width: 50%
 			min-width: 300px
 
 			@media screen and (max-width: $sm)

diff --git a/public/src/components/Editor/EditorWrapper.tsx b/public/src/components/Editor/EditorWrapper.tsx
@@ -12,6 +12,9 @@ import {AppToasts} from "../../modules/toasts";
 import {AppUserStore} from "../../modules/stores/UserStore";
 import {Viewer} from "./Viewer";
 import {AppNotesStore} from "../../modules/stores/NotesStore";
+import {NoteType} from "../../utils/types";
+import {PluginProps} from "./Plugin";
+import {parseNoteTitle} from "../../modules/utils";
 
 window['mobileCheck'] = function() {
     let check = false;
@@ -33,7 +36,16 @@ type EditorState = {
     youtube: boolean
 }
 
-export class EditorWrapper extends Component<any, EditorState> {
+type EditorProps = {
+    open: boolean,
+    note: NoteType,
+    isOwner: boolean,
+    isEditable: boolean,
+    onChangeTitle: (value: string) => void,
+    onChangeContent: (value: PluginProps[]) => void
+}
+
+export class EditorWrapper extends Component<EditorProps, EditorState> {
     state = {
         tippyOpen: false,
         tippyPos: {
@@ -69,7 +81,6 @@ export class EditorWrapper extends Component<any, EditorState> {
     updateState = (store:NoteStoreState) => {
         this.syncTitle(store.note.title)
 
-        console.log(this.props.note)
         if (!this.props.isOwner && this.props.note?.public) {
             this.self.innerHTML = ""
             new Viewer(
@@ -89,6 +100,11 @@ export class EditorWrapper extends Component<any, EditorState> {
     }
 
     syncTitle = (title:string) => {
+        if (!this.props.isEditable) {
+            this.noteTitleRef.textContent = parseNoteTitle(title)
+            return
+        }
+
         this.noteTitleRef.textContent = title
 
         if (this.noteTitleRef.textContent.length == 0) {
@@ -101,7 +117,7 @@ export class EditorWrapper extends Component<any, EditorState> {
     openDropdown = (elem: HTMLElement) => {
         const editor = document.querySelector(".note-editor-wrapper")
         const offsetBottom = editor.clientHeight - elem.getBoundingClientRect().top
-        const dropdownOffsetTop = offsetBottom < 225 ? -225 : 20
+        const dropdownOffsetTop = offsetBottom < 255 ? -225 : 20
 
         this.setState(state => ({
             ...state,
@@ -114,7 +130,6 @@ export class EditorWrapper extends Component<any, EditorState> {
     }
 
     closeDropdown = () => {
-
         this.setState(state => ({
             ...state,
             dropdownOpen: false
@@ -182,7 +197,7 @@ export class EditorWrapper extends Component<any, EditorState> {
                 <Modal open={this.state.youtube} content={<YoutubeDialogForm handleClose={this.closeYoutube}/>} handleClose={this.closeYoutube}/>
 
                 <div className="note-editor-content">
-                    <div className="note-title" contentEditable={true} oninput={this.onChangeTitle} ref={ref => this.noteTitleRef = ref}></div>
+                    <div className="note-title" contentEditable={this.props.isEditable} oninput={this.onChangeTitle} ref={ref => this.noteTitleRef = ref}></div>
                     <div className="note-body" ref={elem => this.self = elem}></div>
                 </div>
 

diff --git a/public/src/components/Editor/Plugin.ts b/public/src/components/Editor/Plugin.ts
@@ -502,6 +502,8 @@ export const defaultPlugins: EditorPlugin[] = [
                 AppNoteRequests.GetImage(id, AppUserStore.state.JWT, AppUserStore.state.csrf).then(url => {
                     img.src = url;
                     AppDispatcher.dispatch(NoteStoreActions.PUT_TO_CACHE, {key: id, value: url})
+                }).catch(error => {
+                    console.log(error)
                 })
             }
 
@@ -517,12 +519,16 @@ export const defaultPlugins: EditorPlugin[] = [
 
             img.dataset.imgid = id;
 
+            // TODO: если вставить битую фотку, то пустой img останется в заметке
+
             AppNoteRequests.GetImage(id, AppUserStore.state.JWT, AppUserStore.state.csrf).then(url => {
                 img.src = url;
                 AppDispatcher.dispatch(NoteStoreActions.PUT_TO_CACHE, {key: id, value: url})
+            }).catch(error => {
+                console.log(error)
             })
 
-            return img;
+            return img
         }
     },
     {
@@ -888,8 +894,8 @@ export const insertBlockPlugin = (pluginName: string, ...args: any) => {
             plugin = val;
         }
     });
-    // 
-    if (plugin === undefined || plugin.insertNode === undefined) {
+
+    if (plugin === undefined || !plugin.insertNode) {
         return;
     }
     const self: string[] = [plugin.pluginName, plugin.type];
@@ -906,8 +912,11 @@ export const insertBlockPlugin = (pluginName: string, ...args: any) => {
             });
         }
         const newNode = plugin.insertNode([], args);
-        (nodeToReplace as HTMLElement).replaceWith(newNode);
-        document.getSelection().setPosition(newNode, 0);
+        console.log(newNode)
+        if (newNode) {
+            (nodeToReplace as HTMLElement).replaceWith(newNode);
+            document.getSelection().setPosition(newNode, 0);
+        }
     }
 }
 

diff --git a/public/src/components/Header/Header.tsx b/public/src/components/Header/Header.tsx
@@ -45,7 +45,7 @@ export class Header extends ScReact.Component<any, any>{
 
     render() {
         return (
-            <header id="header" className={(location.pathname.includes("notes") ? "notes " : "") + (this.state.fullscreen ? "fullscreen" : "")}>
+            <header id="header" className={(location.pathname.includes("notes") && this.state.isAuth ? "notes " : "") + (this.state.fullscreen ? "fullscreen" : "")}>
                 <Logo />
                 { this.state.userChecked ? (
                     this.state.isAuth ? <Profile avatarUrl={this.state.avatarUrl} otpEnabled={this.state.otpEnabled} qr={this.state.qr}/> : (

diff --git a/public/src/components/NoteEditor/NoteEditor.sass b/public/src/components/NoteEditor/NoteEditor.sass
@@ -51,10 +51,16 @@
 		@media screen and (max-width: $lg)
 			padding: 55px 5% 80px
 
+		@media screen and (max-width: $sm)
+			padding: 55px 15px 80px
+
 		.top-panel
 			background: none !important
 			padding: 15px 0
 
+		.bottom-panel
+			padding: 10px 0 50px
+
 		.note-background
 			height: 120px
 			display: block
@@ -188,5 +194,8 @@
 		gap: 10px
 		height: 100%
 		position: relative
-		padding: 10px 0 50px
-		animation: fadeIn 0.2s
+		padding: 10px 10px 50px 30px
+		animation: fadeIn 0.2s
+
+		@media screen and (max-width: $lg)
+			padding: 10px 10px 50px 0
diff --git a/public/src/components/NoteEditor/NoteEditor.tsx b/public/src/components/NoteEditor/NoteEditor.tsx
@@ -18,6 +18,7 @@ import {EmojiPicker} from "../EmojiPicker/EmojiPicker";
 import {BackgroundPicker} from "../BackgroundPicker/BackgroundPicker";
 import {NoteType} from "../../utils/types";
 import {SharePanel} from "../SharePanel/SharePanel";
+import {PluginProps} from "../Editor/Plugin";
 
 type NoteEditorType = {
     selectedNote: NoteType
@@ -233,6 +234,7 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
     render() {
         const isSubNote = this.state.selectedNote?.parent != "00000000-0000-0000-0000-000000000000" ? "hidden" : ""
         const isOwner = this.state.selectedNote?.owner_id == AppUserStore.state.user_id
+        const isEditable = this.state.selectedNote?.collaborators.includes(AppUserStore.state.user_id) || isOwner
 
         // TODO: скелетон для эдитора
         // console.log("render")
@@ -455,13 +457,14 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
                         open={this.state.selectedNote != null}
                         note={this.state.selectedNote}
                         isOwner={isOwner}
+                        isEditable={isEditable}
                         onChangeTitle={(value: string) => {
                             this.props.onChangeTitle(value);
                             this.onChangeNote();
                             AppDispatcher.dispatch(NoteStoreActions.CHANGE_TITLE, value)
                             AppDispatcher.dispatch(NotesActions.CHANGE_TITLE, value)
                         }}
-                        onChangeContent={(content) => {
+                        onChangeContent={(content:PluginProps) => {
                             this.props.onChangeNote()
                             this.onChangeNote()
                             AppDispatcher.dispatch(NoteStoreActions.CHANGE_CONTENT, content)

diff --git a/public/src/components/NoteMenu/NoteMenu.tsx b/public/src/components/NoteMenu/NoteMenu.tsx
@@ -72,7 +72,6 @@ export class NoteMenu extends ScReact.Component<any, any> {
 
     render() {
         const isOwner = this.props.note?.owner_id == AppUserStore.state.user_id
-        const isAuthorized = AppUserStore.state.user_id != null
 
         return (
             <div className={"note-menu " + (this.state.open ? "open" : "")}>
@@ -88,7 +87,7 @@ export class NoteMenu extends ScReact.Component<any, any> {
                         <span>Скачать в pdf</span>
                     </div>
 
-                    {isAuthorized ?
+                    {isOwner ?
                         <div className="options-item" onclick={this.exportToZip}>
                             <Img src="zip.svg" className="icon"/>
                             <span>Скачать в zip</span>

diff --git a/public/src/components/ViewerWrapper/ViewerWrapper.tsx b/public/src/components/ViewerWrapper/ViewerWrapper.tsx
@@ -9,6 +9,7 @@ import {Editor} from "../Editor/Editor";
 import {AppRouter} from "../../modules/router";
 import {NoteType} from "../../utils/types";
 import {Viewer} from "../Editor/Viewer";
+import {parseNoteTitle} from "../../modules/utils";
 
 type ViewerWrapperProps = {
     fullScreen: boolean
@@ -84,7 +85,7 @@ export class ViewerWrapper extends ScReact.Component<ViewerWrapperProps, any> {
 
                 <div className="bottom-panel">
                     <div className="note-editor" ref={ref => this.viewerRef = ref}>
-                        <div className="note-title">{this.props.note.data.title}</div>
+                        <div className="note-title">{parseNoteTitle(this.props.note.data.title)}</div>
                         <div className="note-body" ref={elem => this.noteContentRef = elem}></div>
                     </div>
                 </div>

diff --git a/public/src/pages/SharedNote/index.tsx b/public/src/pages/SharedNote/index.tsx
@@ -2,6 +2,8 @@ import {ScReact} from "@veglem/screact";
 import "./style.sass"
 import "../../components/Editor/Editor.sass"
 import {ViewerWrapper} from "../../components/ViewerWrapper/ViewerWrapper";
+import {AppNotesStore} from "../../modules/stores/NotesStore";
+import {NoteStoreActions} from "../../modules/stores/NoteStore";
 
 export class SharedNotePage extends ScReact.Component<any, any> {
     state = {
@@ -13,13 +15,19 @@ export class SharedNotePage extends ScReact.Component<any, any> {
             ...state,
             fullScreen: true
         }))
+        document.getElementById("header").classList.add("fullscreen")
     }
 
     closeFullScreen = () => {
         this.setState(state => ({
             ...state,
             fullScreen: false
         }))
+        document.getElementById("header").classList.remove("fullscreen")
+    }
+
+    componentWillUnmount() {
+        console.log("asdfasdfas")
     }
 
     render () {

diff --git a/public/src/pages/SharedNote/style.sass b/public/src/pages/SharedNote/style.sass
@@ -5,20 +5,17 @@
 	display: flex
 	justify-content: center
 	align-items: center
-	padding: 100px 20% 50px
+	padding: 100px 15% 50px
 	height: 100vh
 
 	@media screen and (max-width: $xl)
 		padding: 100px 10%
 
 	@media screen and (max-width: $lg)
-		padding: 100px 50px
+		padding: 100px 5%
 
 	@media screen and (max-width: $sm)
-		padding: 75px 15px
-
-	@media screen and (max-width: $xs)
-		padding: 75px 10px
+		padding: 75px 5%
 
 	&.fullscreen
 		padding: 0