Added version next to logo

for the web app only

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { AngularFireAuthModule } from '@angular/fire/auth';
 import { NgxDiff2htmlModule } from 'ngx-diff2html';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
 import { SafePipe } from './pipes/safe.pipe';
+import { LogoComponent } from './components/partials/logo/logo.component';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { SafePipe } from './pipes/safe.pipe';
     TranslateDirective,
     TranslatePipe,
     ClickOutsideDirective,
-    SafePipe
+    SafePipe,
+    LogoComponent
   ],
   imports: [
     BrowserModule,

src/app/components/explorer/explorer.component.css

@@ -24,9 +24,6 @@
   font-weight: 600;
   line-height: 60px;
 }
-.left-layout > nz-header img {
-  margin: 0 16px;
-}
 nz-sider {
   overflow: auto;
   height: 100%;

src/app/components/explorer/explorer.component.html

@@ -1,11 +1,6 @@
 <nz-layout class="left-layout">
   <nz-header>
-      <img
-        width="40"
-        alt="Firestore Manager Logo"
-        src="assets/images/firestore_logo.png"
-      />
-      <span>Firestore Manager</span>
+      <fm-logo></fm-logo>
       <div class="spacer"></div>
       <a
         class="toolbar-icon"

src/app/components/manager/manager.component.css

@@ -20,9 +20,6 @@ p {
   color: white;
   font-weight: 600;
 }
-.toolbar img {
-  margin: 0 16px;
-}
 .toolbar-icon {
   font-size: 23px;
   margin-right: 24px;

src/app/components/manager/manager.component.html

@@ -1,12 +1,7 @@
 
 <!-- Toolbar -->
 <div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Firestore Manager Logo"
-    src="assets/images/firestore_logo.png"
-  />
-  <span>Firestore Manager</span>
+  <fm-logo></fm-logo>
   <div class="spacer"></div>
   <span
     *ngIf="!app.isWebExtension"

src/app/components/partials/logo/logo.component.css

@@ -0,0 +1,3 @@
+img {
+  margin: 0 16px;
+}

src/app/components/partials/logo/logo.component.html

@@ -0,0 +1,8 @@
+
+<img
+  width="40"
+  alt="Firestore Manager Logo"
+  src="assets/images/firestore_logo.png"
+/>
+<span>Firestore Manager</span>
+<nz-tag *ngIf="!app.isWebExtension" nzColor="#108ee9" style="margin-left: 10px;">{{ version }}</nz-tag>

src/app/components/partials/logo/logo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoComponent } from './logo.component';
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/partials/logo/logo.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from 'src/app/services/app.service';
+import { version } from 'package.json';
+
+@Component({
+  selector: 'fm-logo',
+  templateUrl: './logo.component.html',
+  styleUrls: ['./logo.component.css']
+})
+export class LogoComponent implements OnInit {
+
+  version: string = version;
+
+  constructor(public app: AppService) { }
+
+  ngOnInit() {
+  }
+
+}

tsconfig.json

@@ -18,7 +18,8 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,