feat(taskSidebar): add scroll to buttons for notes and sidenav

src/app/app.component.html

@@ -15,9 +15,11 @@
                  [mode]="(layoutService.isNavOver$|async) ? 'over' : 'side'"
                  [opened]="(layoutService.isShowSideNav$|async)"
                  position="start">
-      <side-nav></side-nav>
+      <side-nav #sideNavElRef
+                (scrollToNotes)="scrollToNotes()"></side-nav>
       <hr>
-      <notes></notes>
+      <notes #notesElRef
+             (scrollToSidenav)="scrollToSidenav()"></notes>
     </mat-sidenav>
 
     <mat-sidenav-content>

src/app/app.component.ts

@@ -1,12 +1,4 @@
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostListener,
-  Inject,
-  ViewChild
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostListener, ViewChild, ViewContainerRef} from '@angular/core';
 import {ProjectService} from './features/project/project.service';
 import {ChromeExtensionInterfaceService} from './core/chrome-extension-interface/chrome-extension-interface.service';
 import {ShortcutService} from './core-ui/shortcut/shortcut.service';
@@ -16,13 +8,12 @@ import {LayoutService} from './core-ui/layout/layout.service';
 import {ElectronService} from 'ngx-electron';
 import {IPC} from '../../electron/ipc-events.const';
 import {SnackService} from './core/snack/snack.service';
-import {BodyClass, IS_ELECTRON} from './app.constants';
+import {IS_ELECTRON} from './app.constants';
 import {SwUpdate} from '@angular/service-worker';
 import {BookmarkService} from './features/bookmark/bookmark.service';
 import {expandAnimation} from './ui/animations/expand.ani';
 import {warpRouteAnimation} from './ui/animations/warp-route';
-import {DOCUMENT} from '@angular/common';
-import {distinctUntilChanged, filter, map, share, take} from 'rxjs/operators';
+import {filter, map, take} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {Store} from '@ngrx/store';
 import {fadeAnimation} from './ui/animations/fade.ani';
@@ -35,7 +26,6 @@ import {TranslateService} from '@ngx-translate/core';
 import {GlobalThemeService} from './core/theme/global-theme.service';
 import {UiHelperService} from './features/ui-helper/ui-helper.service';
 import {TaskService} from './features/tasks/task.service';
-import {observeWidth} from './util/resize-observer-obs';
 
 
 @Component({
@@ -50,7 +40,7 @@ import {observeWidth} from './util/resize-observer-obs';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent  {
+export class AppComponent {
   isAllDataLoadedInitially$: Observable<boolean> = combineLatest([
     this._projectService.isRelatedDataLoadedForCurrentProject$,
     this._store.select(selectIsTaskDataLoaded),
@@ -60,6 +50,9 @@ export class AppComponent  {
     take(1),
   );
 
+  @ViewChild('notesElRef', {read: ViewContainerRef, static: false}) notesElRef: ViewContainerRef;
+  @ViewChild('sideNavElRef', {read: ViewContainerRef, static: false}) sideNavElRef: ViewContainerRef;
+
 
   constructor(
     private _configService: GlobalConfigService,
@@ -177,6 +170,14 @@ export class AppComponent  {
     return outlet.activatedRouteData.page || 'one';
   }
 
+  scrollToNotes() {
+    this.notesElRef.element.nativeElement.scrollIntoView({behavior: 'smooth'});
+  }
+
+  scrollToSidenav() {
+    this.sideNavElRef.element.nativeElement.scrollIntoView({behavior: 'smooth'});
+  }
+
 
   private _initElectronErrorHandler() {
     this._electronService.ipcRenderer.on(IPC.ERROR, (ev, data: {

src/app/core-ui/side-nav/side-nav.component.html

@@ -80,6 +80,14 @@
     <mat-icon>settings_applications</mat-icon>
     <span class="text">{{T.MH.SETTINGS|translate}}</span>
   </button>
+
+  <button class="route-link scroll-down-btn"
+          mat-menu-item
+          (click)="onScrollToNotesClick()">
+    <mat-icon>notes</mat-icon>
+    <span class="text">{{T.MH.NOTES|translate}}</span>
+    <mat-icon>arrow_downwards</mat-icon>
+  </button>
 </section>
 
 

src/app/core-ui/side-nav/side-nav.component.scss

@@ -97,6 +97,17 @@ section {
   }
 }
 
+.scroll-down-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ::ng-deep mat-icon:last-of-type {
+    margin-left: auto;
+    margin-right: 0;
+  }
+}
+
 
 .project,
 .route-link {

src/app/core-ui/side-nav/side-nav.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, OnDestroy} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, Output} from '@angular/core';
 import {ProjectService} from '../../features/project/project.service';
 import {T} from '../../t.const';
 import {DialogCreateProjectComponent} from '../../features/project/dialogs/create-project/dialog-create-project.component';
@@ -16,6 +16,9 @@ import {Subscription} from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SideNavComponent implements OnDestroy {
+
+  @Output() scrollToNotes = new EventEmitter<void>();
+
   T = T;
   PROJECTS_SIDE_NAV = 'PROJECTS_SIDE_NAV';
 
@@ -71,4 +74,8 @@ export class SideNavComponent implements OnDestroy {
       : color;
     return {background: colorToUse};
   }
+
+  onScrollToNotesClick() {
+    this.scrollToNotes.emit();
+  }
 }

src/app/features/note/note/note.component.scss

@@ -69,7 +69,6 @@ $noteFontSize: 12px;
   inline-markdown ::ng-deep {
     .markdown-wrapper {
       min-height: 40px;
-      max-height: 400px;
     }
 
     .markdown-unparsed,

src/app/features/note/notes/notes.component.html

@@ -6,7 +6,7 @@
     {{T.F.NOTE.NOTES_CMP.DROP_TO_ADD|translate}}
   </div>
 
-  <header style="position: sticky; top: 0;">
+  <header>
     <button #buttonEl
             (click)="addNote()"
             mat-button
@@ -14,6 +14,10 @@
       <mat-icon>add</mat-icon>
       {{T.F.NOTE.NOTES_CMP.ADD_BTN|translate}}
     </button>
+    <button mat-icon-button
+            (click)="onScrollToSidenavClick()">
+      <mat-icon>arrow_upwards</mat-icon>
+    </button>
     <!--<button mat-icon-button>-->
     <!--<mat-icon>search</mat-icon>-->
     <!--</button>-->

src/app/features/note/notes/notes.component.scss

@@ -1,5 +1,11 @@
 @import '../../../../variables';
 
+:host,
+.wrapper {
+  position: sticky;
+  top: 0;
+}
+
 .wrapper {
   display: block;
   text-align: center;
@@ -24,7 +30,9 @@
   }
 
   header {
-    display: block;
+    display: flex;
+    position: sticky;
+    top: 0;
   }
 }
 

src/app/features/note/notes/notes.component.ts

@@ -1,4 +1,13 @@
-import {ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import {NoteService} from '../note.service';
 import {DragulaService} from 'ng2-dragula';
 import {Subscription} from 'rxjs';
@@ -19,6 +28,8 @@ import {T} from '../../../t.const';
 
 })
 export class NotesComponent implements OnInit, OnDestroy {
+  @Output() scrollToSidenav = new EventEmitter<void>();
+
   T = T;
   isElementWasAdded = false;
   isDragOver = false;
@@ -80,4 +91,8 @@ export class NotesComponent implements OnInit, OnDestroy {
   addNote() {
     this._matDialog.open(DialogAddNoteComponent);
   }
+
+  onScrollToSidenavClick() {
+    this.scrollToSidenav.emit();
+  }
 }

src/app/t.const.ts

@@ -40,10 +40,10 @@ export const T = {
     },
     'BOOKMARK': {
       'BAR': {
-        'DROP': 'F.BOOKMARK.BAR.DROP',
-        'NO_BOOKMARKS': 'F.BOOKMARK.BAR.NO_BOOKMARKS',
         'ADD': 'F.BOOKMARK.BAR.ADD',
-        'EDIT': 'F.BOOKMARK.BAR.EDIT'
+        'DROP': 'F.BOOKMARK.BAR.DROP',
+        'EDIT': 'F.BOOKMARK.BAR.EDIT',
+        'NO_BOOKMARKS': 'F.BOOKMARK.BAR.NO_BOOKMARKS'
       },
       'DIALOG_EDIT': {
         'ADD_BOOKMARK': 'F.BOOKMARK.DIALOG_EDIT.ADD_BOOKMARK',
@@ -351,6 +351,7 @@ export const T = {
         'SNOOZE': 'F.NOTE.D_VIEW_REMINDER.SNOOZE',
         'TITLE': 'F.NOTE.D_VIEW_REMINDER.TITLE'
       },
+      'EDIT_FULLSCREEN': 'F.NOTE.EDIT_FULLSCREEN',
       'EDIT_REMINDER': 'F.NOTE.EDIT_REMINDER',
       'NOTES_CMP': {
         'ADD_BTN': 'F.NOTE.NOTES_CMP.ADD_BTN',
@@ -361,7 +362,6 @@ export const T = {
         'ENABLE_PARSE': 'F.NOTE.NOTE_CMP.ENABLE_PARSE'
       },
       'REMOVE_REMINDER': 'F.NOTE.REMOVE_REMINDER',
-      'EDIT_FULLSCREEN': 'F.NOTE.EDIT_FULLSCREEN',
       'S': {
         'ADDED_REMINDER': 'F.NOTE.S.ADDED_REMINDER',
         'DELETED_REMINDER': 'F.NOTE.S.DELETED_REMINDER',
@@ -817,6 +817,7 @@ export const T = {
     'GO_TO_TASK_LIST': 'MH.GO_TO_TASK_LIST',
     'MANAGE_PROJECTS': 'MH.MANAGE_PROJECTS',
     'METRICS': 'MH.METRICS',
+    'NOTES': 'MH.NOTES',
     'PROCRASTINATE': 'MH.PROCRASTINATE',
     'PROJECTS': 'MH.PROJECTS',
     'PROJECT_MENU': 'MH.PROJECT_MENU',

src/assets/i18n/en.json

@@ -817,6 +817,7 @@
     "GO_TO_TASK_LIST": "Go to task list",
     "MANAGE_PROJECTS": "Manage Projects",
     "METRICS": "Metrics",
+    "NOTES": "Notes",
     "PROCRASTINATE": "Procrastinate",
     "PROJECTS": "Projects",
     "PROJECT_MENU": "Project Menu",