rem units / toolbar stuff

scripts/snapshot/protractor.config.js

@@ -9,6 +9,7 @@ exports.config = {
   // include glob patterns.
   specs: [
     path.resolve(projectRoot, 'dist/e2e/**/*e2e.js'),
+    //path.resolve(projectRoot, 'dist/e2e/toolbar/**/*e2e.js'),
   ],
 
   // Options to be passed to Jasmine-node.

src/components/app/_normalize.scss

@@ -63,28 +63,6 @@ strong {
   font-weight: bold;
 }
 
-// Address inconsistent and variable font size in all browsers.
-small {
-  font-size: 80%;
-}
-
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
 
 // Embedded content
 // ==========================================================================

src/components/app/_typography.scss

@@ -1,14 +1,17 @@
 
 // Typography
 // -------------------------
+// All font sizes use rem units
+
 
 $font-family-sans-serif:          "Helvetica Neue", "Roboto", sans-serif !default;
 $font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
 
 $font-family-base:                $font-family-sans-serif !default;
-$font-size-base:                  14px !default;
+$font-size-root:                  62.5% !default;
+$font-size-base:                  1.4rem !default; // 1.4rem == 14px
 
-$line-height-base:                1.428571429 !default; // 20/14
+$line-height-base:                1.4 !default;
 $line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
 
 $headings-font-family:            $font-family-base !default;
@@ -16,40 +19,71 @@ $headings-font-weight:            500 !default;
 $headings-line-height:            1.2 !default;
 
 
+html {
+  font-size: $font-size-root;
+}
+
+
 [ion-app] {
   font-size: $font-size-base;
   font-family: $font-family-base;
-  line-height: $line-height-computed;
 
   h1, h2, h3, h4, h5, h6 {
     font-weight: $headings-font-weight;
     font-family: $headings-font-family;
     line-height: $headings-line-height;
-  }
-
-  h1,
-  h2,
-  h3 {
-    margin-top: $line-height-computed;
-    margin-bottom: ($line-height-computed / 2);
+    margin-top: 1.6rem;
+    margin-bottom: 1rem;
 
     &:first-child {
-      margin-top: 0;
+      margin-top: -0.4rem;
     }
   }
 
-  h4,
-  h5,
-  h6 {
-    margin-top: ($line-height-computed / 2);
-    margin-bottom: ($line-height-computed / 2);
+  h1 + h2,
+  h1 + h3,
+  h2 + h3 {
+    margin-top: -0.4rem;
   }
 
-  h1 { font-size: floor($font-size-base * 2.60); } // ~36px
-  h2 { font-size: floor($font-size-base * 2.15); } // ~30px
-  h3 { font-size: ceil($font-size-base * 1.70); } // ~24px
-  h4 { font-size: ceil($font-size-base * 1.25); } // ~18px
-  h5 { font-size: $font-size-base; }
-  h6 { font-size: ceil($font-size-base * 0.85); } // ~12px
+  h1 {
+    font-size: 3.6rem;
+    margin-top: 2rem;
+  }
+  h2 {
+    font-size: 3rem;
+    margin-top: 1.8rem;
+  }
+  h3 {
+    font-size: 2.4rem;
+  }
+  h4 {
+    font-size: 2rem;
+  }
+  h5 {
+    font-size: 1.6rem;
+  }
+  h6 {
+    font-size: 1.4rem;
+  }
 
+  small {
+    font-size: 75%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
 }

src/components/app/test/typography/e2e.js

@@ -0,0 +1 @@
+

src/components/app/test/typography/main.html

@@ -0,0 +1,25 @@
+
+<div class="padding">
+  <h1>H1: gjpqy</h1>
+  <p>I'm a paragraph, gjpqy!</p>
+  <p>I'm a paragraph, gjpqy!</p>
+
+  <h1>H1: gjpqy</h1>
+  <h2>H2: gjpqy</h2>
+  <p>I'm a paragraph, gjpqy!</p>
+  <p>I'm a paragraph, gjpqy!</p>
+
+  <h3>H3: gjpqy</h3>
+  <h4>H4: gjpqy</h4>
+  <h5>H5: gjpqy</h5>
+  <h6>H6: gjpqy</h6>
+  <p>I'm a paragraph, gjpqy!</p>
+  <p>Paragraph with <sub>sub</sub> and <sup>sup</sup>.</p>
+
+  <h1>H1 with <small>small</small></h1>
+  <h2>H2 with <small>small</small></h2>
+  <p>Paragraph with <small>small</small></p>
+
+  <h1>H1 with a <a href="#">link</a></h1>
+  <p>Paragraph with a <a href="#">boring link</a>.</p>
+</div>

src/components/app/test/typography/main.js

@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/button/button.scss

@@ -7,17 +7,17 @@ $button-clear-padding:            6px !default;
 $button-border-radius:            2px !default;
 $button-border-width:             1px !default;
 
-$button-font-size:                16px !default;
+$button-font-size:                1.6rem !default;
 $button-height:                   42px !default;
 $button-padding:                  12px !default;
 $button-icon-size:                24px !default;
 
-$button-large-font-size:          20px !default;
+$button-large-font-size:          2rem !default;
 $button-large-height:             54px !default;
 $button-large-padding:            16px !default;
 $button-large-icon-size:          32px !default;
 
-$button-small-font-size:          12px !default;
+$button-small-font-size:          1.2rem !default;
 $button-small-height:             28px !default;
 $button-small-padding:            4px !default;
 $button-small-icon-size:          16px !default;
@@ -86,7 +86,7 @@ $button-small-icon-size:          16px !default;
   margin: 0;
   padding: 0 $button-padding;
 
-  min-width: ($button-padding * 3) + $button-font-size;
+  min-width: ($button-padding * 4);
   min-height: $button-height + 5px;
 
   line-height: normal;
@@ -130,7 +130,7 @@ $button-small-icon-size:          16px !default;
 
 .button-large {
   padding: 0 $button-large-padding;
-  min-width: ($button-large-padding * 3) + $button-large-font-size;
+  min-width: ($button-large-padding * 4);
   min-height: $button-large-height + 5;
   font-size: $button-large-font-size;
 }

src/components/button/test/sizes/main.html

@@ -12,8 +12,11 @@
 
 <p>
   <a class="button button-large button-positive" href="#">
-    <span style="font-size:44px">H</span>
-    a</a>
+    <span style="font-size:48px">H</span>
+    <span style="font-size:38px">E</span>
+    <span style="font-size:32px">L</span>
+    <span style="font-size:24px">L</span>
+    O</a>
   <button class="button button-large button-positive">button</button>
 
   <a class="button button-outline button-large button-positive" href="#">a</a>

src/components/list/extensions/ios.scss

@@ -6,12 +6,12 @@ $list-ios-background-color:      #fff !default;
 $list-ios-border-color:          #c8c7cc !default;
 
 $list-ios-header-margin:         35px 15px 10px 15px !default;
-$list-ios-header-font-size:      14px !default;
+$list-ios-header-font-size:      1.4rem !default;
 $list-ios-header-color:          #6d6d72 !default;
 
 $list-ios-footer-margin:         10px 0 35px 0 !default;
 $list-ios-footer-padding:        0 15px !default;
-$list-ios-footer-font-size:      14px !default;
+$list-ios-footer-font-size:      1.4rem !default;
 $list-ios-footer-color:          #8f8f94 !default;
 
 

src/components/toolbar/extensions/android.scss

@@ -2,17 +2,38 @@
 // Android Toolbar
 // --------------------------------------------------
 
+$toolbar-android-height:                  6.4rem !default;
+$toolbar-android-background:              #f7f7f8 !default;
+
+$toolbar-android-title-font-size:         1.7rem !default;
+$toolbar-android-button-font-size:        1.7rem !default;
+$toolbar-android-button-color:            #007aff !default;
+
 
 .toolbar-android {
+  height: $toolbar-android-height;
+  background: $toolbar-android-background;
 
-  .spacer {
+  .bar-spacer {
     @include flex(none);
   }
 
-  .title {
+  .bar-title {
     position: static;
     margin: 0;
     text-align: left;
   }
 
+  .button {
+    font-size: $toolbar-android-button-font-size;
+    color: $toolbar-android-button-color;
+    border: none;
+    padding: 0;
+    margin: 0 10px;
+    min-height: $toolbar-android-height;
+    min-width: 0;
+    background: transparent;
+  }
+
 }
+

src/components/toolbar/extensions/ios.scss

@@ -2,12 +2,12 @@
 // iOS Toolbar
 // --------------------------------------------------
 
-$toolbar-ios-height:                  44px !default;
+$toolbar-ios-height:                  4.4rem !default;
 $toolbar-ios-background:              #f7f7f8 !default;
 $toolbar-ios-border-color:            #c4c4c4 !default;
 
-$toolbar-ios-title-font-size:         17px !default;
-$toolbar-ios-button-font-size:        17px !default;
+$toolbar-ios-title-font-size:         1.7rem !default;
+$toolbar-ios-button-font-size:        1.7rem !default;
 $toolbar-ios-button-color:            #007aff !default;
 
 
@@ -34,9 +34,10 @@ $toolbar-ios-button-color:            #007aff !default;
     content: '';
   }
 
-  .title {
+  .bar-inner-title {
     font-size: $toolbar-ios-title-font-size;
     text-align: center;
+    opacity: 0;
   }
 
   .button {

src/components/toolbar/test/basic/main.html

@@ -9,7 +9,6 @@
     <button class="button">p1</button>
     <button class="button">p2</button>
     <button class="button">p3</button>
-    <button class="button">p4</button>
   </ion-nav-items>
 
   <ion-nav-items side="secondary">

src/components/toolbar/toolbar.js

@@ -1,10 +1,14 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
+import {ComponentConfig} from 'ionic2/config/component-config'
+
+export let ToolbarConfig = new ComponentConfig('toolbar')
 
 @Component({
   selector: 'ion-toolbar',
   bind: {
     title: 'view-title'
-  }
+  },
+  services: [ToolbarConfig]
 })
 @Template({
   inline: `
@@ -16,8 +20,8 @@ import {NgElement, Component, Template} from 'angular2/angular2'
           <div class="back-title"></div>
         </div>
       </button>
-      <div class="title">
-        <div class="inner-title">
+      <div class="bar-title">
+        <div class="bar-inner-title">
           {{ title }}
           <content select="ion-view-title"></content>
         </div>
@@ -25,41 +29,41 @@ import {NgElement, Component, Template} from 'angular2/angular2'
       <div class="bar-item bar-primary-item">
         <content select="ion-nav-items[side=primary]"></content>
       </div>
-      <div class="spacer"></div>
+      <div class="bar-spacer"></div>
       <div class="bar-item bar-secondary-item">
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
     </div>`
 })
 export class Toolbar {
-  constructor(@NgElement() ngEle:NgElement) {
-    this.ele = ngEle.domElement
-    this.ele.classList.add('toolbar')
-    this.ele.classList.add('toolbar-ios')
+  constructor(@NgElement() ngEle:NgElement, configFactory: ToolbarConfig) {
+    this.domElement = ngEle.domElement
+
+    this.config = configFactory.create(this);
 
     window.requestAnimationFrame(() => {
       this.alignTitle()
     })
   }
 
-  alignTitle(ele) {
-    ele = ele || this.ele;
-    this.titleEle = this.titleEle || ele.querySelector('.title')
+  alignTitle() {
+    let ele = this.domElement
+    this.titleEle = this.titleEle || ele.querySelector('.bar-inner-title')
 
     this.textAlign = this.textAlign || window.getComputedStyle(this.titleEle).textAlign
 
     if (this.textAlign !== 'center') return
 
-    var barItemElements = ele.querySelectorAll('.bar-item')
-    var x, barItemElement
-    var leftMargin = 0
-    var rightMargin = ele.offsetWidth
-    var centerPoint = ele.offsetWidth / 2
+    let barItemElements = ele.querySelectorAll('.bar-item')
+    let x, barItemElement
+    let leftMargin = 0
+    let rightMargin = ele.offsetWidth
+    let centerPoint = ele.offsetWidth / 2
 
     for (x = 0; x < (barItemElements && barItemElements.length); x++) {
       barItemElement = barItemElements[x]
 
-      var itemRightPoint = barItemElement.offsetLeft + barItemElement.offsetWidth
+      let itemRightPoint = barItemElement.offsetLeft + barItemElement.offsetWidth
       if (itemRightPoint < centerPoint) {
         if (itemRightPoint > leftMargin) {
           leftMargin = itemRightPoint
@@ -69,10 +73,25 @@ export class Toolbar {
       }
     }
 
-    var newMargin = `0 ${Math.max(leftMargin, ele.offsetWidth - rightMargin)}px`
+    let centeredMargin = Math.max(leftMargin, ele.offsetWidth - rightMargin) + 'px'
+    let newMargin = '0 ' + centeredMargin
 
     if (newMargin !== this.titleMargin) {
       this.titleEle.style.margin = this.titleMargin = newMargin
+      this.titleEle.style.textAlign = ''
+
+      // if an ellipsis is being shown, open up the right side
+      // as far as it can before hitting right side buttons
+      window.requestAnimationFrame(() => {
+        if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
+          this.titleEle.style.margin = `0 ${ele.offsetWidth - rightMargin}px 0 ${centeredMargin}`
+          this.titleEle.style.textAlign = 'left'
+        }
+        if (!this.isTitleVisible) {
+          this.titleEle.style.opacity = 1
+          this.isTitleVisible = true
+        }
+      })
     }
 
   }

src/components/toolbar/toolbar.scss

@@ -30,7 +30,7 @@
   @include flex-align-items(center);
 }
 
-.bar-items > .title {
+.bar-title {
   position: absolute;
   top: 0;
   right: 0;
@@ -42,7 +42,7 @@
   @include flex-align-items(center);
 }
 
-.bar-items > .title > .inner-title {
+.bar-inner-title {
   width: 100%;
   padding: 0 15px;
   overflow: hidden;
@@ -57,6 +57,6 @@
   }
 }
 
-.bar-items > .spacer {
+.bar-spacer {
   @include flex(1);
 }