refactor(toolbar): restructure toolbar component to separate modules

restructure toolbar component to separate modules

src/components/toolbar/toolbar-base.ts

@@ -0,0 +1,32 @@
+import { ElementRef, Renderer } from '@angular/core';
+
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
+import { ToolbarTitle } from './toolbar-title';
+
+/**
+ * @private
+ */
+export class ToolbarBase extends Ion {
+  private _title: ToolbarTitle;
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer, 'toolbar');
+  }
+
+  /**
+   * @private
+   */
+  _setTitle(titleCmp: ToolbarTitle) {
+    this._title = titleCmp;
+  }
+
+  /**
+   * @private
+   * Returns the toolbar title text if it exists or an empty string
+   */
+  getTitleText() {
+    return (this._title && this._title.getTitleText()) || '';
+  }
+
+}

src/components/toolbar/toolbar-footer.ts

@@ -0,0 +1,35 @@
+import { Directive, ElementRef, Optional, Renderer } from '@angular/core';
+
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
+import { ViewController } from '../../navigation/view-controller';
+
+/**
+ * @name Footer
+ * @description
+ * Footer is a root component of a page that sits at the bottom of the page.
+ * Footer can be a wrapper for `ion-toolbar` to make sure the content area is sized correctly.
+ *
+ * @usage
+ *
+ * ```html
+ * <ion-content></ion-content>
+ *
+ * <ion-footer>
+ *   <ion-toolbar>
+ *     <ion-title>Footer</ion-title>
+ *   </ion-toolbar>
+ * </ion-footer>
+ * ```
+ *
+ */
+@Directive({
+  selector: 'ion-footer'
+})
+export class Footer extends Ion {
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
+    super(config, elementRef, renderer, 'footer');
+    viewCtrl && viewCtrl._setFooter(this);
+  }
+}

src/components/toolbar/toolbar-header.ts

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, Optional, Renderer } from '@angular/core';
+
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
+import { ViewController } from '../../navigation/view-controller';
+
+/**
+ * @name Header
+ * @description
+ * Header is a parent component that holds the navbar and toolbar component.
+ * It's important to note that `ion-header` needs to be the one of the three root elements of a page
+ *
+ * @usage
+ *
+ * ```html
+ * <ion-header>
+ *   <ion-navbar>
+ *     <ion-title>Page1</ion-title>
+ *   </ion-navbar>
+ *
+ *   <ion-toolbar>
+ *     <ion-title>Subheader</ion-title>
+ *   </ion-toolbar>
+ * </ion-header>
+ *
+ * <ion-content></ion-content>
+ * ```
+ *
+ */
+@Directive({
+  selector: 'ion-header'
+})
+export class Header extends Ion {
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
+    super(config, elementRef, renderer, 'header');
+    viewCtrl && viewCtrl._setHeader(this);
+  }
+}

src/components/toolbar/toolbar.ios.scss

@@ -39,6 +39,8 @@ $toolbar-ios-button-border-radius:          4px !default;
 /// @prop - Height of the navigation bar
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
+$toolbar-button-ios-strong-font-weight:     600 !default;
+
 
 .toolbar-ios {
   padding: $toolbar-ios-padding;
@@ -378,5 +380,5 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 // --------------------------------------------------
 
 .bar-button-strong-ios {
-  font-weight: $button-ios-strong-font-weight;
+  font-weight: $toolbar-button-ios-strong-font-weight;
 }

src/components/toolbar/toolbar.md.scss

@@ -33,6 +33,8 @@ $toolbar-md-button-border-radius:        2px !default;
 /// @prop - Height of the navigation bar
 $navbar-md-height:                       $toolbar-md-height !default;
 
+$toolbar-button-md-strong-font-weight:   bold !default;
+
 
 .toolbar-md {
   padding: $toolbar-md-padding;
@@ -396,5 +398,5 @@ $navbar-md-height:                       $toolbar-md-height !default;
 // --------------------------------------------------
 
 .bar-button-strong-md {
-  font-weight: $button-md-strong-font-weight;
+  font-weight: $toolbar-button-md-strong-font-weight;
 }

src/components/toolbar/toolbar.ts

@@ -1,106 +1,10 @@
-import { ChangeDetectionStrategy, Component, Directive, ElementRef, Input, Optional, Renderer } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, Optional, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
-import { Ion } from '../ion';
-import { ToolbarTitle } from './toolbar-title';
 import { ViewController } from '../../navigation/view-controller';
+import { ToolbarBase } from './toolbar-base';
 
 
-/**
- * @name Header
- * @description
- * Header is a parent component that holds the navbar and toolbar component.
- * It's important to note that `ion-header` needs to be the one of the three root elements of a page
- *
- * @usage
- *
- * ```html
- * <ion-header>
- *   <ion-navbar>
- *     <ion-title>Page1</ion-title>
- *   </ion-navbar>
- *
- *   <ion-toolbar>
- *     <ion-title>Subheader</ion-title>
- *   </ion-toolbar>
- * </ion-header>
- *
- * <ion-content></ion-content>
- * ```
- *
- */
-@Directive({
-  selector: 'ion-header'
-})
-export class Header extends Ion {
-
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
-    super(config, elementRef, renderer, 'header');
-    viewCtrl && viewCtrl._setHeader(this);
-  }
-
-}
-
-
-/**
- * @name Footer
- * @description
- * Footer is a root component of a page that sits at the bottom of the page.
- * Footer can be a wrapper for `ion-toolbar` to make sure the content area is sized correctly.
- *
- * @usage
- *
- * ```html
- * <ion-content></ion-content>
- *
- * <ion-footer>
- *   <ion-toolbar>
- *     <ion-title>Footer</ion-title>
- *   </ion-toolbar>
- * </ion-footer>
- * ```
- *
- */
-@Directive({
-  selector: 'ion-footer'
-})
-export class Footer extends Ion {
-
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
-    super(config, elementRef, renderer, 'footer');
-    viewCtrl && viewCtrl._setFooter(this);
-  }
-
-}
-
-
-/**
- * @private
- */
-export class ToolbarBase extends Ion {
-  private _title: ToolbarTitle;
-
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer, 'toolbar');
-  }
-
-  /**
-   * @private
-   */
-  _setTitle(titleCmp: ToolbarTitle) {
-    this._title = titleCmp;
-  }
-
-  /**
-   * @private
-   * Returns the toolbar title text if it exists or an empty string
-   */
-  getTitleText() {
-    return (this._title && this._title.getTitleText()) || '';
-  }
-
-}
-
 /**
  * @name Toolbar
  * @description

src/components/toolbar/toolbar.wp.scss

@@ -42,6 +42,8 @@ $toolbar-wp-button-border-radius:        2px !default;
 /// @prop - Height of the navigation bar
 $navbar-wp-height:                       $toolbar-wp-height !default;
 
+$toolbar-button-wp-strong-font-weight:   bold !default;
+
 
 .toolbar-wp {
   padding: $toolbar-wp-padding;
@@ -350,5 +352,5 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
 // --------------------------------------------------
 
 .bar-button-strong-wp {
-  font-weight: $button-wp-strong-font-weight;
+  font-weight: $toolbar-button-wp-strong-font-weight;
 }