diff --git a/src/app/app.component.html b/src/app/app.component.html index b65659e870..f213e73c42 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -15,9 +15,11 @@ [mode]="(layoutService.isNavOver$|async) ? 'over' : 'side'" [opened]="(layoutService.isShowSideNav$|async)" position="start"> - +
- + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 24c66824a0..fbeef5abaf 100644 --- a/src/app/app.component.ts +++ b/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 = 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: { diff --git a/src/app/core-ui/side-nav/side-nav.component.html b/src/app/core-ui/side-nav/side-nav.component.html index 6472fb198d..46d4be5387 100644 --- a/src/app/core-ui/side-nav/side-nav.component.html +++ b/src/app/core-ui/side-nav/side-nav.component.html @@ -80,6 +80,14 @@ settings_applications {{T.MH.SETTINGS|translate}} + + diff --git a/src/app/core-ui/side-nav/side-nav.component.scss b/src/app/core-ui/side-nav/side-nav.component.scss index 743563978b..4e6782ce2f 100644 --- a/src/app/core-ui/side-nav/side-nav.component.scss +++ b/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 { diff --git a/src/app/core-ui/side-nav/side-nav.component.ts b/src/app/core-ui/side-nav/side-nav.component.ts index d2a3e1d173..8d73fb958b 100644 --- a/src/app/core-ui/side-nav/side-nav.component.ts +++ b/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(); + 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(); + } } diff --git a/src/app/features/note/note/note.component.scss b/src/app/features/note/note/note.component.scss index 261e22b75e..8c0cd249e9 100644 --- a/src/app/features/note/note/note.component.scss +++ b/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, diff --git a/src/app/features/note/notes/notes.component.html b/src/app/features/note/notes/notes.component.html index ad90e99968..d30ba44369 100644 --- a/src/app/features/note/notes/notes.component.html +++ b/src/app/features/note/notes/notes.component.html @@ -6,7 +6,7 @@ {{T.F.NOTE.NOTES_CMP.DROP_TO_ADD|translate}} -
+
+ diff --git a/src/app/features/note/notes/notes.component.scss b/src/app/features/note/notes/notes.component.scss index e5310f8996..2c72216b28 100644 --- a/src/app/features/note/notes/notes.component.scss +++ b/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; } } diff --git a/src/app/features/note/notes/notes.component.ts b/src/app/features/note/notes/notes.component.ts index ff04627176..d2557c0aee 100644 --- a/src/app/features/note/notes/notes.component.ts +++ b/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(); + 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(); + } } diff --git a/src/app/t.const.ts b/src/app/t.const.ts index fea76fe81b..407bfefe57 100644 --- a/src/app/t.const.ts +++ b/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', diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index a214aad3d2..bd4d23a020 100644 --- a/src/assets/i18n/en.json +++ b/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",