Заготовка под шеринг заметки

frontend-park-mail-ru · May 17, 2024 · 11a7554 · 11a7554
1 parent b5ff0ab
commit 11a7554
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 12 deletions.
diff --git a/public/src/assets/viber.png b/public/src/assets/viber.png
diff --git a/public/src/components/Modal/Modal.sass b/public/src/components/Modal/Modal.sass
@@ -25,6 +25,15 @@
 			animation: 0.3s superScaleIn ease-in-out
 			opacity: 1
 
+	&.short
+		.modal-content
+			border-radius: 0
+			background: none
+			padding: 0
+
+		.close-modal-btn
+			top: 28px
+
 	.overlay
 		position: absolute
 		top: 0

diff --git a/public/src/components/Modal/Modal.tsx b/public/src/components/Modal/Modal.tsx
@@ -21,7 +21,7 @@ export class Modal extends ScReact.Component<any, any> {
 
     render() {
         return (
-            <div className={'modal-wrapper ' + (this.props.open ? 'active' : '')}>
+            <div className={'modal-wrapper ' + (this.props.open ? 'active ' : '') + (this.props.hideTitle ? "short " : "")}>
                 <div className="overlay" ref={ref => this.overlayRef = ref}></div>
                 <div className="modal-content">
                     <h2 className="modal-content__title">{this.props.title ? this.props.title : ""}</h2>

diff --git a/public/src/components/NoteEditor/NoteEditor.tsx b/public/src/components/NoteEditor/NoteEditor.tsx
@@ -28,6 +28,7 @@ type NoteEditorType = {
     emojiModalOpen: boolean
     backgroundModalOpen: boolean
     fullScreen: boolean
+    shareModalOpen: boolean
 }
 
 type NoteEditorProps = {
@@ -47,11 +48,10 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
         tagsModalOpen: false,
         emojiModalOpen: false,
         backgroundModalOpen: false,
+        shareModalOpen: false,
         fullScreen: false
     };
 
-    private savingLabelRef;
-
     componentDidMount() {
         AppNotesStore.SubscribeToStore(this.updateState);
         AppNoteStore.AddSaver(this.saveNote);
@@ -206,6 +206,20 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
         }))
     }
 
+    openShareModal = () => {
+        this.setState(state => ({
+            ...state,
+            shareModalOpen: true
+        }))
+    }
+
+    closeShareModal = () => {
+        this.setState(state => ({
+            ...state,
+            shareModalOpen: 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
@@ -246,6 +260,13 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
                        content={<BackgroundPicker />}
                 />
 
+                <Modal open={this.state.shareModalOpen}
+                       handleClose={this.closeShareModal}
+                       reset={false}
+                       hideTitle={true}
+                       content={<SharePanel />}
+                />
+
                 <div className="note-background" style={`background: ${this.state.selectedNote?.header};`}>
 
                 </div>
@@ -380,6 +401,7 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
                             openTagList={this.openTagsModal}
                             openEmojiList={this.openEmojiModal}
                             openBackgroundList={this.openBackgroundModal}
+                            openSharePanel={this.openShareModal}
                         /> : ""
                     }
 

diff --git a/public/src/components/NoteMenu/NoteMenu.tsx b/public/src/components/NoteMenu/NoteMenu.tsx
@@ -71,6 +71,10 @@ export class NoteMenu extends ScReact.Component<any, any> {
         AppDispatcher.dispatch(NotesActions.EXPORT_TO_PDF)
     }
 
+    sharePanel = () => {
+        this.toggleMenu()
+        this.props.openSharePanel()
+    }
 
     render() {
         return (
@@ -81,34 +85,38 @@ export class NoteMenu extends ScReact.Component<any, any> {
                     </div>
                 </div>
                 <div className="options" ref={ref => this.noteMenuRef = ref}>
-                    <div className="options-item" onClick={this.deleteNote}>
-                        <Img src="trash.svg" className="icon"/>
-                        <span>Удалить заметку</span>
+                    <div className="options-item" onclick={this.sharePanel}>
+                        <Img src="link.svg" className="icon"/>
+                        <span>Поделиться</span>
                     </div>
-                    <div className="options-item" onClick={this.exportToPdf}>
+                    <div className="options-item" onclick={this.exportToPdf}>
                         <Img src="pdf.svg" className="icon"/>
                         <span>Скачать в pdf</span>
                     </div>
-                    <div className="options-item" onClick={this.exportToZip}>
+                    <div className="options-item" onclick={this.exportToZip}>
                         <Img src="zip.svg" className="icon"/>
                         <span>Скачать в zip</span>
                     </div>
                     <div className="options-item mobile-option">
                         <Img src={this.props.note.favorite ? "star-filled.svg" : "star.svg"} className="icon"/>
                         <span>{this.props.note.favorite ? "Удалить из избранного" : "В избранное"}</span>
                     </div>
-                    <div className="options-item mobile-option" onClick={this.tagList}>
+                    <div className="options-item mobile-option" onclick={this.tagList}>
                         <Img src="tag.svg" className="icon"/>
                         <span>Изменить тэги</span>
                     </div>
-                    <div className="options-item mobile-option" onClick={this.emojiList}>
+                    <div className="options-item mobile-option" onclick={this.emojiList}>
                         <Img src="emoji.svg" className="icon"/>
                         <span>Изменить иконку</span>
                     </div>
-                    <div className="options-item mobile-option" onClick={this.backgroundList}>
+                    <div className="options-item mobile-option" onclick={this.backgroundList}>
                         <Img src="image.svg" className="icon"/>
                         <span>Изменить шапку</span>
                     </div>
+                    <div className="options-item" onclick={this.deleteNote}>
+                        <Img src="trash.svg" className="icon"/>
+                        <span>Удалить заметку</span>
+                    </div>
                 </div>
             </div>
         )

diff --git a/public/src/components/SharePanel/SharePanel.tsx b/public/src/components/SharePanel/SharePanel.tsx
@@ -21,7 +21,7 @@ export class SharePanel extends ScReact.Component<any, any> {
                         <span>Просматривать могут все, у кого есть ссылка</span>
                         <ToggleButton />
                     </div>
-                    <input type="text" disabled className="share_panel__share-link-container__input" value="http://localhost:8010/notes/0a48fb5e-eb2b-41f4-9e41-87544842f539"/>
+                    <input type="text" disabled className="share_panel__share-link-container__input" value="https://you-note.ru/notes/4a644626-c335-4728-bb82-f63e9844eb74"/>
                     <Button label="Скопировать"/>
                 </div>
                 <div className="share_panel__social-btns-container">
@@ -30,6 +30,7 @@ export class SharePanel extends ScReact.Component<any, any> {
                         <Img src="vk.png" className="social-icon"/>
                         <Img src="odnoklassniki.png" className="social-icon" />
                         <Img src="whatsapp.png" className="social-icon" />
+                        <Img src="viber.png" className="social-icon" />
                     </div>
                 </div>
             </div>