Поправил стили у превьюшек заметок

frontend-park-mail-ru · May 15, 2024 · dbe2d36 · dbe2d36
1 parent 158fefa
commit dbe2d36
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/public/src/components/Note/Note.sass b/public/src/components/Note/Note.sass
@@ -18,6 +18,10 @@
 	&:hover
 		background: rgba(27, 39, 53, 0.9)
 
+		.favorite-icon
+			animation: showAnim 0.2s
+			display: flex
+
 	.note-title__container
 		display: flex
 		align-items: center
@@ -53,6 +57,8 @@
 
 	.favorite-icon
 		position: absolute
+		display: none
+		animation: closeAnim 0.2s
 		right: 15px
 		top: 10px
 		filter: invert(70%)
@@ -62,5 +68,9 @@
 		padding: 4px
 		border-radius: 8px
 
+		&.show
+			display: block
+			animation: showAnim 0.2s
+
 		&:hover
 			background: rgba(0, 0, 0, 0.15)
diff --git a/public/src/components/Note/Note.tsx b/public/src/components/Note/Note.tsx
@@ -59,7 +59,7 @@ export class Note extends ScReact.Component<NoteProps, any> {
                 <div className="note-tags-container" ref={ref => this.tagsContainerRef = ref}></div>
                 <span className="update-time">{formatDate(this.props.note.update_time)}</span>
 
-                <Img src={this.props.note.favorite ? "star-filled.svg" : "star.svg"} className="favorite-icon" onClick={this.toggleFavorite}/>
+                <Img src={this.props.note.favorite ? "star-filled.svg" : "star.svg"} className={"favorite-icon " + (this.props.note.favorite ? "show" : "") } onClick={this.toggleFavorite}/>
             </div>
         );
     }

diff --git a/public/src/modules/stores/NotesStore.ts b/public/src/modules/stores/NotesStore.ts
@@ -741,6 +741,7 @@ class NotesStore extends BaseStore<NotesStoreState> {
             }))
 
             AppToasts.info("Заметка добавлена в избранное")
+
         }
     }
 
@@ -750,7 +751,6 @@ class NotesStore extends BaseStore<NotesStoreState> {
         AppDispatcher.dispatch(UserActions.UPDATE_CSRF, csrf);
 
         if (status == 200) {
-
             if (this.state.selectedNote?.id == note_id) {
                 this.SetState(state => ({
                     ...state,
@@ -771,6 +771,7 @@ class NotesStore extends BaseStore<NotesStoreState> {
             }))
 
             AppToasts.info("Заметка удалена из избранного")
+
         }
     }
 

diff --git a/public/src/pages/Notes/index.tsx b/public/src/pages/Notes/index.tsx
@@ -240,7 +240,9 @@ export class NotesPage extends ScReact.Component<any, any> {
                     <div className="notes-container" onclick={this.handleSelectNote} ref={ref => this.notesContainerRef = ref}>
                         <Loader active={this.state.fetching}/>
                         {
-                            this.state.notes.length > 0 ?
+                            this.state.notes.sort(function (note1, note2) {
+                                return (note1.favorite === note2.favorite)? 0 : note1.favorite? -1 : 1
+                            }).length > 0 ?
                                 this.state.notes.map(note => (
                                     <Note selected={this.state.selectedNote?.id == note.id} note={note}/>
                                 ))