docs: Change way how we recognize library, change switch library butt…

…on (#1504) * Change way how we recognize library * Change lib switcher to product menu
SAP · Nov 12, 2019 · 3a5c849 · 3a5c849
1 parent ea7d280
commit 3a5c849
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 25 deletions.
diff --git a/apps/docs/src/app/core/core-documentation.module.ts b/apps/docs/src/app/core/core-documentation.module.ts
@@ -756,6 +756,9 @@ import { ComboboxOpenControlExampleComponent } from './component-docs/combobox/e
         SharedDocumentationModule,
         MarkdownModule.forChild(),
         RouterModule.forChild(ROUTES)
+    ],
+    providers: [
+        { provide: 'CURRENT_LIB', useValue: 'core' }
     ]
 })
 export class CoreDocumentationModule {

diff --git a/...ocs/src/app/documentation/core-helpers/docs-section-title/docs-section-title.component.ts b/...ocs/src/app/documentation/core-helpers/docs-section-title/docs-section-title.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, Input, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, ElementRef, ViewChild, AfterViewInit, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Libraries } from '../../utilities/libraries';
 
 @Component({
     selector: 'fd-docs-section-title',
@@ -27,15 +28,16 @@ export class DocsSectionTitleComponent implements OnInit, AfterViewInit {
     @Input()
     componentName: string = '';
 
-    readonly currentLibrary: 'core' | 'platform' = null;
+    readonly currentLibrary: Libraries = null;
 
     private idFromUrl: any;
 
     constructor(
         private activatedRoute: ActivatedRoute,
-        private router: Router
+        private router: Router,
+        @Inject('CURRENT_LIB') private currentLib: Libraries
     ) {
-        this.currentLibrary = this.router.url && this.router.url.includes('core/') ? 'core' : 'platform';
+        this.currentLibrary = this.currentLib;
     }
 
     ngOnInit(): void {

diff --git a/apps/docs/src/app/documentation/core-helpers/toolbar/toolbar.component.html b/apps/docs/src/app/documentation/core-helpers/toolbar/toolbar.component.html
@@ -6,15 +6,20 @@
         NGX
     </span>
 </a>
+<div class="fd-docs--toolbar__lib">
+    <fd-product-menu [control]="isOnCore ? 'Core' : 'Platform'"
+                     [closePopoverOnSelect]="true"
+                     [items]="items">
+    </fd-product-menu>
+</div>
+<span class="fd-docs--toolbar__spacer"></span>
 
 
-<div class="fd-docs&#45;&#45;toolbar__lib">
-    <span>Platform</span>
-    <fd-toggle [ngModel]="isOnCore" [size]="'s'" (ngModelChange)="changeLibChange()"></fd-toggle>
-    <span>Core</span>
-</div>
+<!--<div class="fd-docs&#45;&#45;toolbar__lib">-->
+<!--    <button fd-button *ngIf="isOnCore" [fdType]="'medium'" [options]="'emphasized'" (click)="changeLibChange()">Platform Docs</button>-->
+<!--    <button fd-button *ngIf="!isOnCore" [fdType]="'medium'" [options]="'emphasized'" (click)="changeLibChange()">Core Docs</button>-->
+<!--</div>-->
 
-<span class="fd-docs--toolbar__spacer"></span>
 <span class="fd-docs--toolbar__version">v{{version}}</span>
 <a href="https://github.com/SAP/fundamental-ngx" title="Find us on Github!">
     <svg class="logo-github logo-github--white" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px"

diff --git a/apps/docs/src/app/documentation/core-helpers/toolbar/toolbar.component.scss b/apps/docs/src/app/documentation/core-helpers/toolbar/toolbar.component.scss
@@ -1,4 +1,5 @@
 :host {
+
     background-color: #354a5f;
     color: #fff;
     padding: 8px 20px;
@@ -15,6 +16,7 @@
 
 .fd-docs--toolbar {
 
+
     &__sidebar-btn {
         margin-left: -10px;
         margin-right: 10px;
@@ -65,9 +67,9 @@
     }
 
     &__lib {
-        margin-left: 15px;
+        margin-left: 10px;
         display: flex;
-        align-items: center;
+        height: 28px;
         @media only screen and (max-width:640px) {
             display: none;
         }

diff --git a/apps/docs/src/app/documentation/core-helpers/toolbar/toolbar.component.ts b/apps/docs/src/app/documentation/core-helpers/toolbar/toolbar.component.ts
@@ -1,6 +1,8 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Inject, Output } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { Router } from '@angular/router';
+import { Libraries } from '../../utilities/libraries';
+import { ShellbarMenuItem } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fd-docs-toolbar',
@@ -9,6 +11,18 @@ import { Router } from '@angular/router';
 })
 export class ToolbarComponent {
 
+    items: ShellbarMenuItem[] = [
+        {
+            name: 'Core Docs',
+            callback: () => { this.routerService.navigate(['core/home']) }
+        },
+        {
+            name: 'Platform Docs',
+            callback: () => { this.routerService.navigate(['platform/home']) }
+        }
+    ];
+
+
     @Output()
     btnClicked: EventEmitter<undefined> = new EventEmitter<undefined>();
 
@@ -17,16 +31,9 @@ export class ToolbarComponent {
     public isOnCore: boolean = false;
 
     constructor (
-        private routerService: Router
+        private routerService: Router,
+        @Inject('CURRENT_LIB') private currentLib: Libraries,
     ) {
-        this.isOnCore = this.routerService.url && this.routerService.url.includes('core/');
-    }
-
-    changeLibChange(): void {
-        if (this.isOnCore) {
-            this.routerService.navigate(['platform/home']);
-        } else {
-            this.routerService.navigate(['core/home']);
-        }
+        this.isOnCore = this.currentLib === 'core';
     }
 }
diff --git a/apps/docs/src/app/documentation/shared-documentation.module.ts b/apps/docs/src/app/documentation/shared-documentation.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { InjectionToken, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MarkdownModule } from 'ngx-markdown';
@@ -33,7 +33,6 @@ import { SectionsToolbarComponent } from './core-helpers/sections-toolbar/sectio
 import { HeaderTabsComponent } from './core-helpers/header-tabs/header-tabs.component';
 import { ApiComponent } from './core-helpers/api/api.component';
 
-
 @NgModule({
     declarations: [
         PlayGroundComponent,

diff --git a/apps/docs/src/app/documentation/utilities/libraries.ts b/apps/docs/src/app/documentation/utilities/libraries.ts
@@ -0,0 +1 @@
+export type Libraries = 'core' | 'platform';
diff --git a/apps/docs/src/app/platform/platform-documentation.module.ts b/apps/docs/src/app/platform/platform-documentation.module.ts
@@ -39,6 +39,9 @@ import { PLATFORM_COMPONENT_SCHEMAS } from './component-docs/schemas';
         SchemaModule.forRoot(PLATFORM_COMPONENT_SCHEMAS),
         MarkdownModule.forChild(),
         RouterModule.forChild(ROUTES)
+    ],
+    providers: [
+        { provide: 'CURRENT_LIB', useValue: 'platform' }
     ]
 })
 export class PlatformDocumentationModule { }
diff --git a/libs/core/src/lib/shellbar/product-menu/product-menu.component.scss b/libs/core/src/lib/shellbar/product-menu/product-menu.component.scss
@@ -0,0 +1 @@
+@import "~fundamental-styles/dist/shellbar";
diff --git a/libs/core/src/lib/shellbar/product-menu/product-menu.component.ts b/libs/core/src/lib/shellbar/product-menu/product-menu.component.ts
@@ -15,6 +15,7 @@ import { ShellbarMenuItem } from '../model/shellbar-menu-item';
 @Component({
     selector: 'fd-product-menu',
     templateUrl: './product-menu.component.html',
+    styleUrls: ['./product-menu.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })