From 7551c672be56def9eb0c1323966ef52ee320c3dc Mon Sep 17 00:00:00 2001 From: YarikMix <43493788+YarikMix@users.noreply.github.com> Date: Sat, 25 May 2024 00:23:28 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=BE=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/src/components/Editor/Editor.sass | 1 + .../src/components/Editor/EditorWrapper.tsx | 78 ++----------------- public/src/components/Editor/Plugin.ts | 20 ++--- public/src/components/Header/Header.sass | 4 +- .../src/components/NoteEditor/NoteEditor.tsx | 63 ++++++++++++++- .../YoutubeDialog/YoutubeDialog.sass | 5 +- public/src/modules/router.tsx | 18 ++--- public/src/pages/Home/index.tsx | 2 +- public/src/pages/Notes/style.sass | 2 +- public/src/pages/SharedNote/style.sass | 2 +- 10 files changed, 97 insertions(+), 98 deletions(-) diff --git a/public/src/components/Editor/Editor.sass b/public/src/components/Editor/Editor.sass index 597fa8b5..31b0a469 100644 --- a/public/src/components/Editor/Editor.sass +++ b/public/src/components/Editor/Editor.sass @@ -145,6 +145,7 @@ cursor: pointer transition: 0.2s ease margin-left: 2px + border: 1px solid hsl(217.2 32.6% 25%) &:hover cursor: pointer diff --git a/public/src/components/Editor/EditorWrapper.tsx b/public/src/components/Editor/EditorWrapper.tsx index a0bacc2e..64c0fd29 100644 --- a/public/src/components/Editor/EditorWrapper.tsx +++ b/public/src/components/Editor/EditorWrapper.tsx @@ -2,16 +2,10 @@ import {Component} from "@veglem/screact/dist/component"; import {VDomNode} from "@veglem/screact/dist/vdom"; import "./Editor.sass" import {Editor} from "./Editor"; -import {Dropdown} from "../Dropdown/Dropdown"; import {AppNoteStore, NoteStoreState} from "../../modules/stores/NoteStore"; import {Tippy} from "../Tippy/Tippy"; -import {YoutubeDialogForm} from "../YoutubeDialog/YoutubeDialog"; -import {Modal} from "../Modal/Modal"; import {isEqual} from "@veglem/screact/dist/isEqual"; -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"; @@ -28,12 +22,6 @@ type EditorState = { left: number, top: number } - dropdownOpen: boolean, - dropdownPos: { - left: number, - top: number - } - youtube: boolean } type EditorProps = { @@ -41,6 +29,8 @@ type EditorProps = { note: NoteType, isOwner: boolean, isEditable: boolean, + openDropdown: () => void, + closeDropdown: () => void, onChangeTitle: (value: string) => void, onChangeContent: (value: PluginProps[]) => void } @@ -51,17 +41,7 @@ export class EditorWrapper extends Component { tippyPos: { left: 0, top: 0 - }, - dropdownOpen: false, - dropdownPos: { - left: 0, - top: 0 - }, - youtube: false - } - - constructor() { - super(); + } } private self: HTMLElement @@ -92,7 +72,7 @@ export class EditorWrapper extends Component { this.editor = new Editor( store.note.blocks, this.self, - {open: this.openDropdown, close: this.closeDropdown}, + {open: this.props.openDropdown, close: this.props.closeDropdown}, this.props.onChangeContent, {open: this.openTippy, close: this.closeTippy} ); @@ -114,42 +94,6 @@ export class EditorWrapper extends Component { } } - openDropdown = (elem: HTMLElement) => { - const editor = document.querySelector(".note-editor-wrapper") - const offsetBottom = editor.clientHeight - elem.getBoundingClientRect().top - const dropdownOffsetTop = offsetBottom < 255 ? -225 : 20 - - this.setState(state => ({ - ...state, - dropdownOpen: true, - dropdownPos: { - left: elem.offsetLeft + 20, - top: elem.offsetTop + dropdownOffsetTop - } - })) - } - - closeDropdown = () => { - this.setState(state => ({ - ...state, - dropdownOpen: false - })) - } - - openYoutube = (elem: HTMLElement) => { - this.setState(state => ({ - ...state, - youtube: true, - })) - } - - closeYoutube = () => { - this.setState(state => ({ - ...state, - youtube: false - })) - } - openTippy = (elem: HTMLElement) => { this.setState(state => ({ ...state, @@ -162,7 +106,6 @@ export class EditorWrapper extends Component { } closeTippy = () => { - this.setState(state => ({ ...state, tippyOpen: false @@ -182,20 +125,13 @@ export class EditorWrapper extends Component { render(): VDomNode { return (
- - - } handleClose={this.closeYoutube}/> -
this.noteTitleRef = ref}>
this.self = elem}>
diff --git a/public/src/components/Editor/Plugin.ts b/public/src/components/Editor/Plugin.ts index 404ab9f0..c4a7723c 100644 --- a/public/src/components/Editor/Plugin.ts +++ b/public/src/components/Editor/Plugin.ts @@ -1022,24 +1022,24 @@ const RenderAttach = (attach_filename:string, attach_id:string) => { attachContainer.appendChild(fileExtensionLabel) attachContainer.appendChild(fileName) - const closeAttachBtnContainer = document.createElement("div") - closeAttachBtnContainer.className = "close-attach-btn-container" - - const closeBtn = document.createElement("img") - closeBtn.src = "./src/assets/close.svg" - closeBtn.className = "close-attach-btn" if (pluginSettings.isEditable) { + const closeAttachBtnContainer = document.createElement("div") + closeAttachBtnContainer.className = "close-attach-btn-container" + const closeBtn = document.createElement("img") + closeBtn.src = "./src/assets/close.svg" + closeBtn.className = "close-attach-btn" + closeBtn.onclick = (e) => { e.stopPropagation() attachWrapper.remove(); } - } + closeAttachBtnContainer.appendChild(closeBtn) + + attachContainer.appendChild(closeAttachBtnContainer) + } - closeAttachBtnContainer.appendChild(closeBtn) - - attachContainer.appendChild(closeAttachBtnContainer) attachWrapper.appendChild(attachContainer) diff --git a/public/src/components/Header/Header.sass b/public/src/components/Header/Header.sass index 7bc9afab..57cd4e41 100644 --- a/public/src/components/Header/Header.sass +++ b/public/src/components/Header/Header.sass @@ -16,7 +16,7 @@ header padding: 0 5% &.notes - padding: 0 15% + padding: 0 10% @media screen and (max-width: $xxl) padding: 0 5% @@ -24,5 +24,5 @@ header &.fullscreen padding: 0 10% - @media screen and (max-width: $lg) + @media screen and (max-width: $xxl) padding: 0 5% \ No newline at end of file diff --git a/public/src/components/NoteEditor/NoteEditor.tsx b/public/src/components/NoteEditor/NoteEditor.tsx index a35015ec..cce68290 100644 --- a/public/src/components/NoteEditor/NoteEditor.tsx +++ b/public/src/components/NoteEditor/NoteEditor.tsx @@ -19,6 +19,10 @@ import {BackgroundPicker} from "../BackgroundPicker/BackgroundPicker"; import {NoteType} from "../../utils/types"; import {SharePanel} from "../SharePanel/SharePanel"; import {PluginProps} from "../Editor/Plugin"; +import {Editor} from "../Editor/Editor"; +import {parseNoteTitle} from "../../modules/utils"; +import {Dropdown} from "../Dropdown/Dropdown"; +import YoutubeDialogForm from "../YoutubeDialog/YoutubeDialog"; type NoteEditorType = { selectedNote: NoteType @@ -50,9 +54,17 @@ export class NoteEditor extends ScReact.Component { + const editor = this.editorWrapperRef + const offsetBottom = editor.clientHeight - elem.getBoundingClientRect().top + const dropdownOffsetTop = offsetBottom < 205 ? -225 : 40 + + this.setState(state => ({ + ...state, + dropdownOpen: true, + dropdownPos: { + left: elem.offsetLeft + 20, + top: elem.offsetTop + dropdownOffsetTop + } + })) + } + + closeDropdown = () => { + this.setState(state => ({ + ...state, + dropdownOpen: false + })) + } + + openYoutube = (elem: HTMLElement) => { + this.setState(state => ({ + ...state, + youtube: true, + })) + } + + closeYoutube = () => { + this.setState(state => ({ + ...state, + youtube: false + })) + } + render() { const isSubNote = this.state.selectedNote?.parent != "00000000-0000-0000-0000-000000000000" ? "hidden" : "" const isOwner = this.state.selectedNote?.owner_id == AppUserStore.state.user_id @@ -251,7 +299,7 @@ export class NoteEditor extends ScReact.Component +
this.editorWrapperRef = ref}> @@ -293,6 +341,8 @@ export class NoteEditor extends ScReact.Component} /> + } handleClose={this.closeYoutube}/> +
@@ -453,11 +503,20 @@ export class NoteEditor extends ScReact.Component + + { this.props.onChangeTitle(value); this.onChangeNote(); diff --git a/public/src/components/YoutubeDialog/YoutubeDialog.sass b/public/src/components/YoutubeDialog/YoutubeDialog.sass index aa3fc3e0..59fcff04 100644 --- a/public/src/components/YoutubeDialog/YoutubeDialog.sass +++ b/public/src/components/YoutubeDialog/YoutubeDialog.sass @@ -1,3 +1,5 @@ +@import "/public/src/utils/variables.sass" + #youtube-dialog-form display: flex flex-direction: column @@ -7,4 +9,5 @@ gap: 15px h3 - margin-bottom: 15px \ No newline at end of file + margin-bottom: 15px + color: $text-main-color \ No newline at end of file diff --git a/public/src/modules/router.tsx b/public/src/modules/router.tsx index d7eb38fa..401148ee 100644 --- a/public/src/modules/router.tsx +++ b/public/src/modules/router.tsx @@ -56,15 +56,15 @@ export class Router extends ScReact.Component { } normalizeURL = (path:string) => { - return path.replace(/\/\/+/g, '/').replace(/^\//, '').replace(/\/$/, '') + return path.replace(/\/\/+/g, '/') } private initPages = () => { - this.pages[''] = {page: HomePage, loader: HomePageLoader}; - this.pages['login'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton}; - this.pages['register'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton}; - this.pages['notes'] = {page: NotesPage, loader: NotesLoader, skeleton: NotesPageSkeleton}; - this.pages['404'] = {page: NotFoundPage }; + this.pages['/'] = {page: HomePage, loader: HomePageLoader}; + this.pages['/login'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton}; + this.pages['/register'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton}; + this.pages['/notes'] = {page: NotesPage, loader: NotesLoader, skeleton: NotesPageSkeleton}; + this.pages['/404'] = {page: NotFoundPage }; }; public handlePopState = () => { @@ -73,6 +73,8 @@ export class Router extends ScReact.Component { let isAuth = AppUserStore.state.isAuth; + history.replaceState(null, null, path) + if (path.includes('notes/')) { const noteId = path.split('/').at(-1); @@ -92,8 +94,6 @@ export class Router extends ScReact.Component { return; } - - history.replaceState(null, null, path) const page: RouterMapValue = this.pages[path]; @@ -132,7 +132,7 @@ export class Router extends ScReact.Component { let page: RouterMapValue = this.pages[path]; if (path.includes('notes/')) { - page = this.pages['notes']; + page = this.pages['/notes']; } console.log("history.pushState") diff --git a/public/src/pages/Home/index.tsx b/public/src/pages/Home/index.tsx index 2b8ff256..9dbc9f8d 100644 --- a/public/src/pages/Home/index.tsx +++ b/public/src/pages/Home/index.tsx @@ -31,7 +31,7 @@ export class HomePage extends ScReact.Component { } handleButtonClick = () => { - const url = AppUserStore.state.isAuth ? '/notes' : 'login'; + const url = AppUserStore.state.isAuth ? '/notes' : '/login'; AppRouter.go(url); }; diff --git a/public/src/pages/Notes/style.sass b/public/src/pages/Notes/style.sass index 7c5ee2c0..d9a79ffc 100644 --- a/public/src/pages/Notes/style.sass +++ b/public/src/pages/Notes/style.sass @@ -8,7 +8,7 @@ display: flex justify-content: center gap: 25px - padding: 100px 15% 75px + padding: 100px 10% 75px background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%) position: relative diff --git a/public/src/pages/SharedNote/style.sass b/public/src/pages/SharedNote/style.sass index 2d0ff5f8..5888345a 100644 --- a/public/src/pages/SharedNote/style.sass +++ b/public/src/pages/SharedNote/style.sass @@ -5,7 +5,7 @@ display: flex justify-content: center align-items: center - padding: 100px 15% 50px + padding: 100px 10% 50px height: 100vh @media screen and (max-width: $xl)