Show editor name and icon in navbar

desktop/src/app/components/app.module.ts

@@ -46,6 +46,7 @@ import { Modals } from '../services/modals';
 import { Languages } from '../services/languages';
 import { NavbarComponent } from './navbar/navbar.component';
 import { ProjectsComponent } from './navbar/projects.component';
+import { TaskbarEditorComponent } from './navbar/taskbar-editor.component';
 import { TaskbarConflictsComponent } from './navbar/taskbar-conflicts.component';
 import { TaskbarSyncStatusComponent } from './navbar/taskbar-sync-status.component';
 import { TaskbarUpdateComponent } from './navbar/taskbar-update.component';
@@ -103,6 +104,7 @@ registerLocaleData(localeUk, 'uk');
         TaskbarUpdateComponent,
         ProjectsComponent,
         HelpComponent,
+        TaskbarEditorComponent
     ],
     providers: [
         Modals,

desktop/src/app/components/navbar/taskbar-editor.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';;
+import { SettingsProvider } from '../../services/settings/settings-provider';
+import { AppComponent } from '../app.component';
+
+@Component({
+    selector: 'taskbar-editor',
+    templateUrl: './taskbar-editor.html'
+})
+/**
+ * @author Danilo Guzzo
+ */
+
+export class TaskbarEditorComponent implements OnInit {
+    public currentEditor: string;
+
+    constructor(
+        private settingsProvider: SettingsProvider,
+        private appComponent: AppComponent
+    ) {
+        this.currentEditor = this.settingsProvider.getSettings().username;
+        this.settingsProvider.settingsChangesNotifications().subscribe(settings => this.currentEditor = settings.username);
+    }
+    public openModal = () => this.appComponent.promptEditorName();
+
+    ngOnInit() {
+
+        this.currentEditor = this.settingsProvider.getSettings().username;
+    }
+
+    public getEditorName() {
+        return this.currentEditor;
+    }
+}

desktop/src/app/components/navbar/taskbar-editor.html

@@ -0,0 +1,12 @@
+<div id="editor">
+    <span class="mdi mdi-account-alert" *ngIf="getEditorName() === 'anonymous'"></span>
+    <span class="mdi mdi-account-check" *ngIf="getEditorName() != 'anonymous'"></span>
+    <a
+        id="editor-name"
+        class="nav-link px-2"
+        type="button"
+        (click)="openModal()"
+    >
+        {{getEditorName()}}
+    </a>
+</div>

desktop/src/app/components/navbar/taskbar-editor.scss

@@ -0,0 +1,17 @@
+taskbar-editor {
+    #editor {
+        padding-right: 1rem !important;
+
+        position: relative;
+        left: 1px;
+        height: 20px;
+        .mdi {
+            float: left;
+            margin-right: 10px;
+        }
+
+        #editor-name {
+            white-space: nowrap
+        }
+    }
+}

desktop/src/app/components/navbar/taskbar.html

@@ -7,6 +7,8 @@
         <taskbar-conflicts></taskbar-conflicts>
     </li>
 
+    <li> <taskbar-editor></taskbar-editor></li>
+
     <li *ngIf="showSyncStatus()" class="nav-item pr-2">
         <taskbar-sync-status></taskbar-sync-status>
     </li>

desktop/src/app/components/navbar/taskbar.scss

@@ -1,6 +1,7 @@
 @import 'taskbar-conflicts';
 @import 'taskbar-update';
 @import 'taskbar-sync-status';
+@import 'taskbar-editor';
 
 .taskbar {
   margin-top: 2px;