created canvas to show enhanced tutorial

src/app/app.component.html

@@ -16,6 +16,11 @@
     </div>
 </div>
 
+<div *ngIf="enhancedTutorialActive" class="enhanced-tutorial"
+    [class.enhanced-tutorial__visible]="enhancedTutorialVisible">
+    <app-tutorial-enhanced class="enhanced-tutorial__content" (closeEvent)="closeTutorial()"></app-tutorial-enhanced>
+</div>
+
 <app-media-viewer id="media-viewer" *ngIf="openedMediaEvent" [openedMediaEvent]="openedMediaEvent"
     (closeSubject)="closeMedia()" (dragenter)="dragenter($event)"></app-media-viewer>
 

src/app/app.component.scss

@@ -172,3 +172,26 @@ app-streams-selection-footer {
         }
     }
 }
+
+.enhanced-tutorial {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 9999999;
+    opacity: 0;
+    transition: all .4s;
+
+    &__visible {
+        opacity: 1;
+    }
+
+    &__content {
+        display: block;
+        padding: 25px;
+        width: calc(100%);
+        height: calc(100%);
+    }
+}

src/app/app.component.ts

@@ -127,6 +127,8 @@ export class AppComponent implements OnInit, OnDestroy {
         this.columnEditorSub = this.navigationService.activatedPanelSubject.subscribe((event: OpenLeftPanelEvent) => {
             if (event.type === LeftPanelType.Closed) {
                 this.floatingColumnActive = false;
+
+                this.checkEnhancedTutorial();
             } else {
                 this.floatingColumnActive = true;
             }
@@ -155,6 +157,33 @@ export class AppComponent implements OnInit, OnDestroy {
         });
     }
 
+    enhancedTutorialActive: boolean;
+    enhancedTutorialVisible: boolean;
+    private checkEnhancedTutorial() {
+        let enhancedTutorialDesactivated = JSON.parse(localStorage.getItem('tutorial'));
+        console.warn(enhancedTutorialDesactivated);
+
+        if (!this.floatingColumnActive && !this.tutorialActive && !enhancedTutorialDesactivated) {
+            console.warn('load enhanced tutorial');
+
+            setTimeout(() => {
+                this.enhancedTutorialActive = true;
+                setTimeout(() => {
+                    this.enhancedTutorialVisible = true;
+                }, 100);
+            }, 500);
+        }
+    }
+
+    closeTutorial(){
+        console.warn('close tutorial');
+        this.enhancedTutorialVisible = false;
+        setTimeout(() => {
+            this.enhancedTutorialActive = false;
+        }, 400);
+        //localStorage.setItem('tutorial', JSON.stringify(true));        
+    }
+
     ngOnDestroy(): void {
         this.streamSub.unsubscribe();
         this.columnEditorSub.unsubscribe();

src/app/app.module.ts

@@ -83,6 +83,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { BookmarksComponent } from './components/floating-column/manage-account/bookmarks/bookmarks.component';
 import { AttachementImageComponent } from './components/stream/status/attachements/attachement-image/attachement-image.component';
+import { TutorialEnhancedComponent } from './components/tutorial-enhanced/tutorial-enhanced.component';
 
 
 const routes: Routes = [
@@ -146,7 +147,8 @@ const routes: Routes = [
         StreamNotificationsComponent,
         NotificationComponent,
         BookmarksComponent,
-        AttachementImageComponent
+        AttachementImageComponent,
+        TutorialEnhancedComponent
     ],
     entryComponents: [
         EmojiPickerComponent

src/app/components/tutorial-enhanced/tutorial-enhanced.component.html

@@ -0,0 +1,10 @@
+<div class="tutorial">
+    <div class="tutorial__content"></div>
+    <div class="tutorial__footer">        
+        <a href (click)="close()">close</a>
+        <a href (click)="close()">prev.</a>
+        <a href (click)="close()">next</a>
+    </div>
+
+    
+</div>

src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss

@@ -0,0 +1,8 @@
+@import"variables";
+
+.tutorial {
+    border: 1px solid #1d2335;
+    background-color: $color-primary;
+    height: calc(100%);
+    border-radius: 2px;
+}

src/app/components/tutorial-enhanced/tutorial-enhanced.component.spec.ts

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

src/app/components/tutorial-enhanced/tutorial-enhanced.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-tutorial-enhanced',
+    templateUrl: './tutorial-enhanced.component.html',
+    styleUrls: ['./tutorial-enhanced.component.scss']
+})
+export class TutorialEnhancedComponent implements OnInit {
+
+    @Output() closeEvent = new EventEmitter();
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+    close(): boolean {
+        this.closeEvent.next();
+        return false;
+    }
+
+}