Добавил анимацию появления плейсхолдера

frontend-park-mail-ru · May 7, 2024 · e10dc17 · e10dc17
1 parent 6d41c56
commit e10dc17
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/public/src/components/Editor/Editor.sass b/public/src/components/Editor/Editor.sass
@@ -1,5 +1,6 @@
 @import "/public/src/utils/variables.sass"
 @import "/public/src/utils/mixins.sass"
+@import "/public/src/utils/animations.sass"
 
 [contenteditable]
 	outline: none
@@ -48,10 +49,12 @@
 	.note-body
 		.blockplaceholder
 			caret-color: transparent
-		.blockplaceholder:before
-			content: "Введите '/' для комманд"
-			color: rgba(255, 255, 255, 0.7)
-			cursor: text
+
+			&:before
+				content: "Введите '/' для комманд"
+				color: rgba(255, 255, 255, 0.7)
+				cursor: text
+				animation: showAnim 0.5s
 
 		.subnote-wrapper
 			background: $modal-background
@@ -141,11 +144,3 @@
 						filter: invert(80%)
 						width: 20px
 						height: 20px
-
-		.placeholder
-			color: $text-secondary-color
-			position: absolute
-			top: 0
-			left: 30px
-			font-size: 28px
-			font-weight: bold
diff --git a/public/src/modules/stores/NoteStore.ts b/public/src/modules/stores/NoteStore.ts
@@ -96,12 +96,18 @@ class NoteStore extends BaseStore<NoteStoreState> {
 
     private changeTitle = (title: string) => {
         this.state.note.title = title;
-        this.saveNote({id: AppNotesStore.state.selectedNote.id, parent: AppNotesStore.state.selectedNote.parent, note: this.state.note});
+        this.onNoteChanged()
     };
 
     private changeContent = (content: any) => {
         this.state.note.blocks = content
-        this.saveNote({id: AppNotesStore.state.selectedNote.id, parent: AppNotesStore.state.selectedNote.parent, note: this.state.note});
+        this.onNoteChanged()
+    }
+
+    private onNoteChanged = () => {
+        if (AppNotesStore.state.selectedNote) {
+            this.saveNote({id: AppNotesStore.state.selectedNote.id, parent: AppNotesStore.state.selectedNote.parent, note: this.state.note});
+        }
     }
 
     private openDropdown = () => {