From 0bb9e56bf2193d078c2d5fc090141cec956b9d73 Mon Sep 17 00:00:00 2001 From: Ramon Klein Date: Mon, 19 Nov 2018 10:43:08 +0100 Subject: [PATCH 1/4] configurable button gap --- .../lib/models/onboarding-buttons-configuration.interface.ts | 5 +++++ projects/ngx-onboarding/src/lib/onboarding.component.ts | 1 + .../ngx-onboarding/src/lib/services/onboarding.service.ts | 5 +++-- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts b/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts index 6c02f05..f8b76fd 100644 --- a/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts +++ b/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts @@ -19,4 +19,9 @@ export interface OnboardingButtonsConfiguration { * the distance to the left or right border in pixel */ horizontalDistanceToBorderInPx?: number; + + /** + * the distance between the buttons in pixels + */ + betweenButtonsDistanceInPx?: number; } diff --git a/projects/ngx-onboarding/src/lib/onboarding.component.ts b/projects/ngx-onboarding/src/lib/onboarding.component.ts index 46a7605..c6e0b58 100644 --- a/projects/ngx-onboarding/src/lib/onboarding.component.ts +++ b/projects/ngx-onboarding/src/lib/onboarding.component.ts @@ -83,6 +83,7 @@ export class OnboardingComponent implements OnInit, AfterViewInit, OnDestroy { dynCss += ``; this.dynamicCss = this.domSanitizer.bypassSecurityTrustHtml(dynCss); } diff --git a/projects/ngx-onboarding/src/lib/services/onboarding.service.ts b/projects/ngx-onboarding/src/lib/services/onboarding.service.ts index 5a010f8..ed08279 100644 --- a/projects/ngx-onboarding/src/lib/services/onboarding.service.ts +++ b/projects/ngx-onboarding/src/lib/services/onboarding.service.ts @@ -60,8 +60,9 @@ export class OnboardingService { }, buttonsConfiguration: { position: OnboardingButtonsPosition.BottomRight, - horizontalDistanceToBorderInPx: 10, - verticalDistanceToBorderInPx: 10 + horizontalDistanceToBorderInPx: 100, + verticalDistanceToBorderInPx: 500, + betweenButtonsDistanceInPx: 8 } }; From 9922f589161dda293f67fe47439d943df6f48ac6 Mon Sep 17 00:00:00 2001 From: Ramon Klein Date: Mon, 19 Nov 2018 10:48:53 +0100 Subject: [PATCH 2/4] remove configurable gap vs. static --- .../lib/models/onboarding-buttons-configuration.interface.ts | 5 ----- projects/ngx-onboarding/src/lib/onboarding.component.less | 3 +++ projects/ngx-onboarding/src/lib/onboarding.component.ts | 1 - .../ngx-onboarding/src/lib/services/onboarding.service.ts | 3 +-- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts b/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts index f8b76fd..6c02f05 100644 --- a/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts +++ b/projects/ngx-onboarding/src/lib/models/onboarding-buttons-configuration.interface.ts @@ -19,9 +19,4 @@ export interface OnboardingButtonsConfiguration { * the distance to the left or right border in pixel */ horizontalDistanceToBorderInPx?: number; - - /** - * the distance between the buttons in pixels - */ - betweenButtonsDistanceInPx?: number; } diff --git a/projects/ngx-onboarding/src/lib/onboarding.component.less b/projects/ngx-onboarding/src/lib/onboarding.component.less index f6cddc5..7838fd3 100644 --- a/projects/ngx-onboarding/src/lib/onboarding.component.less +++ b/projects/ngx-onboarding/src/lib/onboarding.component.less @@ -48,6 +48,9 @@ & > button { float: right; } + button[color=primary] { + margin-right: 8px; + } } .onboarding-header { position: fixed; diff --git a/projects/ngx-onboarding/src/lib/onboarding.component.ts b/projects/ngx-onboarding/src/lib/onboarding.component.ts index c6e0b58..46a7605 100644 --- a/projects/ngx-onboarding/src/lib/onboarding.component.ts +++ b/projects/ngx-onboarding/src/lib/onboarding.component.ts @@ -83,7 +83,6 @@ export class OnboardingComponent implements OnInit, AfterViewInit, OnDestroy { dynCss += ``; this.dynamicCss = this.domSanitizer.bypassSecurityTrustHtml(dynCss); } diff --git a/projects/ngx-onboarding/src/lib/services/onboarding.service.ts b/projects/ngx-onboarding/src/lib/services/onboarding.service.ts index ed08279..b90c6d0 100644 --- a/projects/ngx-onboarding/src/lib/services/onboarding.service.ts +++ b/projects/ngx-onboarding/src/lib/services/onboarding.service.ts @@ -61,8 +61,7 @@ export class OnboardingService { buttonsConfiguration: { position: OnboardingButtonsPosition.BottomRight, horizontalDistanceToBorderInPx: 100, - verticalDistanceToBorderInPx: 500, - betweenButtonsDistanceInPx: 8 + verticalDistanceToBorderInPx: 500 } }; From a01c6525939e7d91f68d055efb5199c1a0798477 Mon Sep 17 00:00:00 2001 From: Ramon Klein Date: Mon, 19 Nov 2018 11:15:40 +0100 Subject: [PATCH 3/4] adding docs for button positioning --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 7332a0a..4e8f5ae 100644 --- a/README.md +++ b/README.md @@ -250,6 +250,30 @@ export class AppModule { ``` +### Customization of overlay buttons +Position of buttons on the onboarding overlay ('Next' and 'Turn off') can be customized: + +```typescript +export class AppModule { + constructor(onboardingService: OnboardingService) { + onboardingService.configure({ + buttonsConfiguration: { + position: OnboardingButtonsPosition.BottomLeft, + verticalDistanceToBorderInPx: 10, + horizontalDistanceToBorderInPx: 10 + } + }); + } +} +``` + +The above configuration would place the buttons on the bottom left side of the screen (position). Possible values for `position` are: + + BottomRight (default), Bottom, BottomLeft, Left, TopLeft, Top, TopRight, Right + +The distance from the left is specificied with `horizontalDistanceToBorderInPx` and the distance from the screen´s bottom +is set via `verticalDistanceToBorderInPx`. + ## Translations (I18N) See [I18N instructions](https://github.com/rosen-group/ngx-onboarding/blob/master/I18N.md) From 4a3cac04dd5823f3c5ae7a81d2401caa78b77f48 Mon Sep 17 00:00:00 2001 From: Ramon Klein Date: Mon, 19 Nov 2018 11:26:58 +0100 Subject: [PATCH 4/4] better default values for button positioning --- .../ngx-onboarding/src/lib/services/onboarding.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/ngx-onboarding/src/lib/services/onboarding.service.ts b/projects/ngx-onboarding/src/lib/services/onboarding.service.ts index b90c6d0..adc378f 100644 --- a/projects/ngx-onboarding/src/lib/services/onboarding.service.ts +++ b/projects/ngx-onboarding/src/lib/services/onboarding.service.ts @@ -60,8 +60,8 @@ export class OnboardingService { }, buttonsConfiguration: { position: OnboardingButtonsPosition.BottomRight, - horizontalDistanceToBorderInPx: 100, - verticalDistanceToBorderInPx: 500 + horizontalDistanceToBorderInPx: 50, + verticalDistanceToBorderInPx: 40 } };