From 81b4ca4ce017a1b1cdc4ed53142bbcf31d928ee5 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 Mar 2015 09:18:53 -0500 Subject: [PATCH] rem units / toolbar stuff --- scripts/snapshot/protractor.config.js | 1 + src/components/app/_normalize.scss | 22 ------ src/components/app/_typography.scss | 78 +++++++++++++------ src/components/app/test/typography/e2e.js | 1 + src/components/app/test/typography/main.html | 25 ++++++ src/components/app/test/typography/main.js | 14 ++++ src/components/button/button.scss | 10 +-- src/components/button/test/sizes/main.html | 7 +- src/components/list/extensions/ios.scss | 4 +- .../toolbar/extensions/android.scss | 25 +++++- src/components/toolbar/extensions/ios.scss | 9 ++- src/components/toolbar/test/basic/main.html | 1 - src/components/toolbar/toolbar.js | 55 ++++++++----- src/components/toolbar/toolbar.scss | 6 +- 14 files changed, 177 insertions(+), 81 deletions(-) create mode 100644 src/components/app/test/typography/e2e.js create mode 100644 src/components/app/test/typography/main.html create mode 100644 src/components/app/test/typography/main.js diff --git a/scripts/snapshot/protractor.config.js b/scripts/snapshot/protractor.config.js index 1f205b89cb..3aa3bd2303 100644 --- a/scripts/snapshot/protractor.config.js +++ b/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. diff --git a/src/components/app/_normalize.scss b/src/components/app/_normalize.scss index d8366cf0d3..c85595a4c3 100644 --- a/src/components/app/_normalize.scss +++ b/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 // ========================================================================== diff --git a/src/components/app/_typography.scss b/src/components/app/_typography.scss index 7afac7e956..16046fbced 100644 --- a/src/components/app/_typography.scss +++ b/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; + } } diff --git a/src/components/app/test/typography/e2e.js b/src/components/app/test/typography/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/app/test/typography/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/app/test/typography/main.html b/src/components/app/test/typography/main.html new file mode 100644 index 0000000000..6c7e8aef50 --- /dev/null +++ b/src/components/app/test/typography/main.html @@ -0,0 +1,25 @@ + +
+

H1: gjpqy

+

I'm a paragraph, gjpqy!

+

I'm a paragraph, gjpqy!

+ +

H1: gjpqy

+

H2: gjpqy

+

I'm a paragraph, gjpqy!

+

I'm a paragraph, gjpqy!

+ +

H3: gjpqy

+

H4: gjpqy

+
H5: gjpqy
+
H6: gjpqy
+

I'm a paragraph, gjpqy!

+

Paragraph with sub and sup.

+ +

H1 with small

+

H2 with small

+

Paragraph with small

+ +

H1 with a link

+

Paragraph with a boring link.

+
diff --git a/src/components/app/test/typography/main.js b/src/components/app/test/typography/main.js new file mode 100644 index 0000000000..a70ef9ab9a --- /dev/null +++ b/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) diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 0bfe3f5e57..04c5015f15 100644 --- a/src/components/button/button.scss +++ b/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; } diff --git a/src/components/button/test/sizes/main.html b/src/components/button/test/sizes/main.html index b1f4ad10ad..cadf7423b2 100644 --- a/src/components/button/test/sizes/main.html +++ b/src/components/button/test/sizes/main.html @@ -12,8 +12,11 @@

- H - a + H + E + L + L + O a diff --git a/src/components/list/extensions/ios.scss b/src/components/list/extensions/ios.scss index 3f50ac3d61..ac033d2582 100644 --- a/src/components/list/extensions/ios.scss +++ b/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; diff --git a/src/components/toolbar/extensions/android.scss b/src/components/toolbar/extensions/android.scss index 99ae60c739..eb3772584e 100644 --- a/src/components/toolbar/extensions/android.scss +++ b/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; + } + } + diff --git a/src/components/toolbar/extensions/ios.scss b/src/components/toolbar/extensions/ios.scss index a0339ebb27..c13bdda19f 100644 --- a/src/components/toolbar/extensions/ios.scss +++ b/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 { diff --git a/src/components/toolbar/test/basic/main.html b/src/components/toolbar/test/basic/main.html index 106a4506a2..4188e4d186 100644 --- a/src/components/toolbar/test/basic/main.html +++ b/src/components/toolbar/test/basic/main.html @@ -9,7 +9,6 @@ - diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index f243a71361..e6c0b34f32 100644 --- a/src/components/toolbar/toolbar.js +++ b/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'

-
-
+
+
{{ title }}
@@ -25,41 +29,41 @@ import {NgElement, Component, Template} from 'angular2/angular2'
-
+
` }) 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 + } + }) } } diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index f352f65b18..8f71c9ff8f 100644 --- a/src/components/toolbar/toolbar.scss +++ b/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); }