Merge pull request #22 from rosen-group/addconfigdocs

added documentation for font/icon configurations

README.md

@@ -167,6 +167,88 @@ export class AppComponent implements OnInit, OnDestroy {
      }
  }
 ```
+## Custom configurations 
+Some options can be configured with the `configure` method of the onboarding service. 
+
+### Font family customization
+You can replace the font-family used for the onboarding UI.
+
+If you add the imports for onboarding service in your `AppModule`, a configuration would be arranged like this:
+```typescript
+
+export class AppModule {
+    constructor(onboardingService: OnboardingService) {
+        onboardingService.configure({
+            textConfiguration: {
+                regularFontFamily: '"Segoe UI", "SegoeUI-Regular","Tahoma", Helvetica, Arial, sans-serif;',
+                scriptFontFamily: '"Segoe Script", "Comic Sans MS", Georgia,  Times New Roman, serif;'
+            }
+        });
+    }
+
+}
+```
+
+`scriptFontFamily` is used for headers (see "What is behind me?" in the screenshot)
+
+`regularFontFamily` is used for text body (see "You have to learn a lot about this button" in the screenshot) 
+
+### Icon customization
+
+You can replace the icon for the onboarding UI.
+
+The are three different ways how to do that:
+
+1 ) Use an predefined icon from the material design icons (look here: [material design icons](https://material.io/tools/icons/?icon=outlined_flag&style=baseline) )
+```typescript
+export class AppModule {
+    constructor(onboardingService: OnboardingService) {
+        onboardingService.configure({
+            iconConfiguration: {
+                matIconName: 'outlined_flag'
+            }
+        });
+    }
+}
+```
+This code would show a flag as an icon. The name of the icon can be found on the above-mentioned website.
+
+2 ) Use an icon from a font set (e.g. glyphicons)
+```typescript
+export class AppModule {
+    constructor(onboardingService: OnboardingService, iconRegistry: MatIconRegistry) {
+        iconRegistry.registerFontClassAlias('fas');
+        onboardingService.configure({
+            iconConfiguration: {
+                fontSet: 'fas',
+                fontIcon: 'fa-exclamation-circle'
+            }
+        });
+        // if you haven not already added fontawesome icons to your page you need to add a reference to your index.html
+        // e.g. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" >
+    }
+}
+```
+
+This code would show an exclamation mark in a circle as icon. The name of the icon can be found on the font awesome website.
+
+3 ) Use an svg icon
+
+If you have placed a svg icon e.g. in the folder src/assets/icons the configuration would look like this: 
+```typescript
+export class AppModule {
+    constructor(onboardingService: OnboardingService, sanitizer: DomSanitizer, iconRegistry: MatIconRegistry) {
+        iconRegistry.addSvgIcon('onboarding_icon',
+            sanitizer.bypassSecurityTrustResourceUrl('./assets/icons/onboarding_icon.svg'));
+        onboardingService.configure({
+            iconConfiguration: {
+                svgIcon: 'onboarding_icon'
+            }
+        });
+    }
+}
+```
+
 
 ## Translations (I18N)
 

projects/ngx-onboarding/src/lib/models/index.ts

@@ -6,3 +6,4 @@ export * from './onboarding-item.model';
 export * from './visible-onboarding-item.model';
 export * from './onboarding-configuration.model';
 export * from './onboarding-text-configuration.interface';
+export * from './onboarding-buttons-position.enum';

projects/ngx-onboarding/src/public_api.ts

@@ -5,6 +5,7 @@
 export * from './lib/services/onboarding.service';
 export * from './lib/onboarding-button.component';
 export * from './lib/models/onboarding-item.model';
+export * from './lib/models/onboarding-buttons-position.enum';
 export * from './lib/onboarding.component';
 export * from './lib/onboarding.module';
 export * from './lib/services/seen-selectors-base.service';

src/app/app.component.css

@@ -0,0 +1,25 @@
+/* styles for svg icon on onboarding overlay */
+.onboarding-header svg path,
+.onboarding-header svg rect {
+    fill: #d9d9d9;
+}
+
+.onboarding-header svg .backfill {
+    fill: #d9d9d9;
+    fill-opacity: 1.0;
+}
+.onboarding-header svg .letters {
+    fill-opacity: 0.0;
+}
+
+/* adjust counter position at icon */
+.onboarding-button .mat-badge-content {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+}
+
+.onboarding-button .mat-badge-medium.mat-badge-below .mat-badge-content {
+    bottom: -4px;
+    right: -6px;
+}

src/app/app.component.ts

@@ -1,15 +1,15 @@
 import {Component, ErrorHandler, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
 import {OnboardingItem, OnboardingService} from '../../projects/ngx-onboarding/src';
 import {HttpClient} from '@angular/common/http';
-import {OnboardingButtonsPosition} from '../../projects/ngx-onboarding/src/lib/models/onboarding-buttons-position.enum';
 
 /**
  * Example component to test the onboarding component
  */
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit, OnDestroy {
     title = 'ngx-onboarding-app';
@@ -19,13 +19,6 @@ export class AppComponent implements OnInit, OnDestroy {
     constructor(private onboardingService: OnboardingService,
                 private httpClient: HttpClient,
                 private errorHandler: ErrorHandler) {
-        onboardingService.configure({
-            buttonsConfiguration: {
-                position: OnboardingButtonsPosition.BottomRight,
-                verticalDistanceToBorderInPx: 10,
-                horizontalDistanceToBorderInPx: 10
-            }
-        });
     }
 
     public ngOnInit() {

src/app/app.module.ts

@@ -1,11 +1,12 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule, DomSanitizer} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+
+import {AppComponent} from './app.component';
+import {OnboardingButtonsPosition, OnboardingModule, OnboardingService} from '../../projects/ngx-onboarding/src';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatButtonModule, MatIconModule, MatIconRegistry} from '@angular/material';
+import {HttpClientModule} from '@angular/common/http';
 
-import { AppComponent } from './app.component';
-import { OnboardingModule } from '../../projects/ngx-onboarding/src';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule, MatIconModule } from '@angular/material';
-import { HttpClientModule } from '@angular/common/http';
 
 /**
  * Example module to test the onboarding component
@@ -26,5 +27,23 @@ import { HttpClientModule } from '@angular/common/http';
     bootstrap: [AppComponent]
 })
 export class AppModule {
+    constructor(onboardingService: OnboardingService, sanitizer: DomSanitizer, iconRegistry: MatIconRegistry) {
+        iconRegistry.addSvgIcon('onboarding_icon',
+            sanitizer.bypassSecurityTrustResourceUrl('./assets/icons/onboarding_icon.svg'));
+        onboardingService.configure({
+            buttonsConfiguration: {
+                position: OnboardingButtonsPosition.BottomRight,
+                verticalDistanceToBorderInPx: 10,
+                horizontalDistanceToBorderInPx: 10
+            },
+            textConfiguration: {
+                regularFontFamily: 'Helvetica, Arial, sans-serif;',
+                scriptFontFamily: '"Comic Sans MS", Georgia,  Times New Roman, serif;'
+            },
+            iconConfiguration: {
+                svgIcon: 'onboarding_icon'
+            }
+        });
+    }
 
 }