diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index 5150800e4a..c1663776fe 100644 --- a/src/components/app/ionic.scss +++ b/src/components/app/ionic.scss @@ -34,8 +34,7 @@ "../radio/radio", "../switch/switch", "../tabs/tabs", - "../toolbar/toolbar", - "../view/view"; + "../toolbar/toolbar"; // Android Components @@ -48,6 +47,7 @@ // iOS Components @import "../checkbox/extensions/ios", + "../content/extensions/ios", "../list/extensions/ios", "../item/extensions/ios", "../radio/extensions/ios", diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js index 2e5b399bc3..771fcebdaf 100644 --- a/src/components/checkbox/checkbox.js +++ b/src/components/checkbox/checkbox.js @@ -31,13 +31,13 @@ export let CheckboxConfig = new ComponentConfig('checkbox') export class Checkbox { constructor( configFactory: CheckboxConfig, - element: NgElement, + @NgElement() ngElement: NgElement, @PropertySetter('attr.role') setAriaRole: Function, @PropertySetter('attr.aria-checked') setAriaChecked: Function, @PropertySetter('attr.aria-invalid') setAriaInvalid: Function, @PropertySetter('attr.aria-disabled') setAriaDisabled: Function ) { - this.domElement = element.domElement + this.domElement = ngElement.domElement this.domElement.classList.add('item') this.config = configFactory.create(this) diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html index edbf3ed50e..75b3878181 100644 --- a/src/components/checkbox/test/basic/main.html +++ b/src/components/checkbox/test/basic/main.html @@ -1,30 +1,26 @@ -
+ -
+ -
+
Some Checkboxes
- + - Some Checkboxes + + Apples + - - Apples - + + Bananas + - - Bananas - + + Oranges + - - Oranges - + - + -
- -
- -
+ diff --git a/src/components/content/content.scss b/src/components/content/content.scss index 083bcafec2..3c8fd88479 100644 --- a/src/components/content/content.scss +++ b/src/components/content/content.scss @@ -2,7 +2,9 @@ // Content // -------------------------------------------------- +$content-background-color: #fff !default; -.content { - background-color: white; + +.pane-container { + background-color: $content-background-color; } diff --git a/src/components/content/extensions/ios.scss b/src/components/content/extensions/ios.scss new file mode 100644 index 0000000000..ba9d2ca090 --- /dev/null +++ b/src/components/content/extensions/ios.scss @@ -0,0 +1,10 @@ + +// iOS Content +// -------------------------------------------------- + +$content-ios-background-color: #efeff4 !default; + + +.view-ios .pane-container { + background-color: $content-ios-background-color; +} diff --git a/src/components/item/extensions/ios.scss b/src/components/item/extensions/ios.scss index d61f308cbc..6030f5c134 100644 --- a/src/components/item/extensions/ios.scss +++ b/src/components/item/extensions/ios.scss @@ -2,15 +2,21 @@ // iOS Item // -------------------------------------------------- -$item-ios-min-height: 44px !default; -$item-ios-padding-left: 15px !default; -$item-ios-accessory-color: #8e8e93 !default; -$item-ios-border-color: $list-ios-border-color !default; +$item-ios-background-color: #fff !default; +$item-ios-min-height: 44px !default; +$item-ios-padding-left: 15px !default; +$item-ios-accessory-color: #8e8e93 !default; +$item-ios-border-color: $list-ios-border-color !default; -.list-ios { +.view-ios { + + .list-header { + margin-left: $item-ios-padding-left; + } .item { + background: $item-ios-background-color; min-height: $item-ios-min-height; padding-left: $item-ios-padding-left; } diff --git a/src/components/item/item.scss b/src/components/item/item.scss index 4012010388..87a3db4bee 100644 --- a/src/components/item/item.scss +++ b/src/components/item/item.scss @@ -5,18 +5,6 @@ $item-min-height: 44px !default; -//
  • -//
    -//
    -// Item Title -//
    -//
    -// Badge -//
    -//
    -//
    • - - .item { position: relative; diff --git a/src/components/list/extensions/ios.scss b/src/components/list/extensions/ios.scss index ac033d2582..d92159b549 100644 --- a/src/components/list/extensions/ios.scss +++ b/src/components/list/extensions/ios.scss @@ -9,19 +9,14 @@ $list-ios-header-margin: 35px 15px 10px 15px !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: 1.4rem !default; $list-ios-footer-color: #8f8f94 !default; -.list-ios { +.view-ios { - .list-content { - background: $list-ios-background-color; - } - - .list-content:before { + .list:before { position: absolute; top: 0; right: auto; @@ -39,7 +34,7 @@ $list-ios-footer-color: #8f8f94 !default; content: ''; } - .list-content:after { + .list:after { position: absolute; top: auto; right: auto; @@ -72,7 +67,6 @@ $list-ios-footer-color: #8f8f94 !default; } .list-footer { - margin: $list-ios-footer-margin; padding: $list-ios-footer-padding; font-size: $list-ios-footer-font-size; color: $list-ios-footer-color; diff --git a/src/components/list/list.js b/src/components/list/list.js index 207f927ed7..0e07609922 100644 --- a/src/components/list/list.js +++ b/src/components/list/list.js @@ -1,31 +1,21 @@ import {NgElement, Component, Template} from 'angular2/angular2' import {ComponentConfig} from 'ionic2/config/component-config'; -export let ListConfig = new ComponentConfig('list'); +export let ListConfig = new ComponentConfig('list') @Component({ selector: 'ion-list', services: [ListConfig] }) @Template({ - inline: ` -
    - -
    -
    - -
    - - ` + inline: `` }) export class List { constructor( configFactory: ListConfig, - element: NgElement + ngElement: NgElement ) { - this.domElement = element.domElement; + this.domElement = ngElement.domElement; configFactory.create(this); } } diff --git a/src/components/list/list.scss b/src/components/list/list.scss index a8cc07c685..782e0bc0e7 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -2,50 +2,29 @@ // List // -------------------------------------------------- -$list-margin: 35px 0 !default; -$list-content-margin: 10px 0 !default; - - -//
    -//
    -// List Header -//
    -// -//
    -// List Footer -//
    -//
    - - -.list { - position: relative; - display: block; - margin: $list-margin; - width: 100%; -} .list-header { position: relative; - + margin-top: 35px; + margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -.list-header + .list-content { - margin: $list-content-margin; -} - -.list-content { +.list { position: relative; - margin: 0; + display: block; + margin: 35px 0; padding: 0; + width: 100%; list-style-type: none; } .list-footer { - margin: 10px 0; + margin: -25px 0 10px; } +.list-header + .list { + margin-top: 0; +} diff --git a/src/components/toolbar/test/basic/e2e.js b/src/components/list/test/basic/e2e.js similarity index 100% rename from src/components/toolbar/test/basic/e2e.js rename to src/components/list/test/basic/e2e.js diff --git a/src/components/list/test/basic/main.html b/src/components/list/test/basic/main.html index 103cd6b646..154b4a5cd5 100644 --- a/src/components/list/test/basic/main.html +++ b/src/components/list/test/basic/main.html @@ -1,3 +1,84 @@ - - Hello - + + + + + + +
    + List Header +
    + + + +
    +
    +
    + Item +
    +
    +
    + +     + +
    + List Footer +
    + + +
    + List Header +
    + + + +
    +
    +
    + Item +
    +
    +
    + +     + + +
    + List Header +
    + + + +
    +
    +
    + Item +
    +
    +
    + +     + + + +
    +
    +
    + Item +
    +
    +
    + +
    +
    +
    + Item +
    +
    +
    + +     + + +     + +     diff --git a/src/components/list/test/basic/main.js b/src/components/list/test/basic/main.js index 456c6c1d28..57787662f9 100644 --- a/src/components/list/test/basic/main.js +++ b/src/components/list/test/basic/main.js @@ -1,12 +1,14 @@ import {bootstrap} from 'angular2/core'; import {Component, Template} from 'angular2/angular2'; +import {View} from 'ionic2/components/view/view'; +import {Content} from 'ionic2/components/content/content'; import {List} from 'ionic2/components/list/list'; -import {Item} from 'ionic2/components/item/item'; + @Component({ selector: '[ion-app]' }) @Template({ url: 'main.html', - directives: [List, Item] + directives: [View, Content, List] }) class IonicApp { constructor() { diff --git a/src/components/radio/radio-group.js b/src/components/radio/radio-group.js index 5b9c080170..e467e25dbe 100644 --- a/src/components/radio/radio-group.js +++ b/src/components/radio/radio-group.js @@ -8,17 +8,7 @@ export let RadioConfig = new ComponentConfig('radio'); services: [RadioConfig] }) @Template({ - inline: ` -
    - -
    -
    - -
    - - ` + inline: `` }) export class RadioGroup { constructor( @@ -27,7 +17,7 @@ export class RadioGroup { ) { this.domElement = element.domElement this.domElement.classList.add('list') - this.domElement.classList.add('list-ios') + this.domElement.classList.add('radio-group') configFactory.create(this) } } diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html index ae97195982..9f9c72c618 100644 --- a/src/components/radio/test/basic/main.html +++ b/src/components/radio/test/basic/main.html @@ -1,28 +1,24 @@ -
    + -
    - -
    - - - - - Radio Group - - - - Star Wars - - - - Star Trek - - - + +
    + Radio Group
    -
    + -
    + + Star Wars + + + + Star Trek + + + + + + +     diff --git a/src/components/switch/test/basic/main.html b/src/components/switch/test/basic/main.html index 6337a6d6e5..a5f901705b 100644 --- a/src/components/switch/test/basic/main.html +++ b/src/components/switch/test/basic/main.html @@ -1,30 +1,26 @@ -
    + -
    + -
    +
    Some Switches
    - + - Some Switches + + Apples + - - Apples - + + Bananas + - - Bananas - + + Oranges + - - Oranges - + - + -
    - -
    - -
    + diff --git a/src/components/toolbar/extensions/ios.scss b/src/components/toolbar/extensions/ios.scss index 9b8f94d276..93950e4ada 100644 --- a/src/components/toolbar/extensions/ios.scss +++ b/src/components/toolbar/extensions/ios.scss @@ -46,7 +46,7 @@ $toolbar-ios-button-background-color: transparent !default; } .bar-inner-title { - opacity: 0; + opacity: 0; // JS will set to 1 after adjusting alignment } .bar-secondary-item { diff --git a/src/components/toolbar/test/html-title/e2e.js b/src/components/toolbar/test/html-title/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/toolbar/test/html-title/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/toolbar/test/html-title/main.html b/src/components/toolbar/test/html-title/main.html new file mode 100644 index 0000000000..a26f3a19e4 --- /dev/null +++ b/src/components/toolbar/test/html-title/main.html @@ -0,0 +1,18 @@ + + + + + Awesome + HTML + Title + + + + + + + + + + + diff --git a/src/components/toolbar/test/basic/main.js b/src/components/toolbar/test/html-title/main.js similarity index 78% rename from src/components/toolbar/test/basic/main.js rename to src/components/toolbar/test/html-title/main.js index d0bbf22754..8500d4a69c 100644 --- a/src/components/toolbar/test/basic/main.js +++ b/src/components/toolbar/test/html-title/main.js @@ -1,12 +1,11 @@ import {bootstrap} from 'angular2/core'; import {Component, Template} from 'angular2/angular2'; import {View} from 'ionic2/components/view/view'; -import {Content} from 'ionic2/components/content/content'; @Component({ selector: '[ion-app]' }) @Template({ url: 'main.html', - directives: [View, Content] + directives: [View] }) class IonicApp { constructor() { diff --git a/src/components/toolbar/test/long-title/e2e.js b/src/components/toolbar/test/long-title/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/toolbar/test/long-title/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/toolbar/test/basic/main.html b/src/components/toolbar/test/long-title/main.html similarity index 60% rename from src/components/toolbar/test/basic/main.html rename to src/components/toolbar/test/long-title/main.html index 4188e4d186..e94edeabf1 100644 --- a/src/components/toolbar/test/basic/main.html +++ b/src/components/toolbar/test/long-title/main.html @@ -1,9 +1,5 @@ - - - - !ele Title! - + @@ -13,11 +9,6 @@ - - - CONTENT!! - - diff --git a/src/components/toolbar/test/long-title/main.js b/src/components/toolbar/test/long-title/main.js new file mode 100644 index 0000000000..8500d4a69c --- /dev/null +++ b/src/components/toolbar/test/long-title/main.js @@ -0,0 +1,16 @@ +import {bootstrap} from 'angular2/core'; +import {Component, Template} from 'angular2/angular2'; +import {View} from 'ionic2/components/view/view'; + +@Component({ selector: '[ion-app]' }) +@Template({ + url: 'main.html', + directives: [View] +}) +class IonicApp { + constructor() { + console.log('IonicApp Start') + } +} + +bootstrap(IonicApp) diff --git a/src/components/toolbar/test/lopsided-buttons/e2e.js b/src/components/toolbar/test/lopsided-buttons/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/toolbar/test/lopsided-buttons/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/toolbar/test/lopsided-buttons/main.html b/src/components/toolbar/test/lopsided-buttons/main.html new file mode 100644 index 0000000000..e43353ffb6 --- /dev/null +++ b/src/components/toolbar/test/lopsided-buttons/main.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/toolbar/test/lopsided-buttons/main.js b/src/components/toolbar/test/lopsided-buttons/main.js new file mode 100644 index 0000000000..8500d4a69c --- /dev/null +++ b/src/components/toolbar/test/lopsided-buttons/main.js @@ -0,0 +1,16 @@ +import {bootstrap} from 'angular2/core'; +import {Component, Template} from 'angular2/angular2'; +import {View} from 'ionic2/components/view/view'; + +@Component({ selector: '[ion-app]' }) +@Template({ + url: 'main.html', + directives: [View] +}) +class IonicApp { + constructor() { + console.log('IonicApp Start') + } +} + +bootstrap(IonicApp) diff --git a/src/components/view/view.js b/src/components/view/view.js index 9710bc8942..38f629bb50 100644 --- a/src/components/view/view.js +++ b/src/components/view/view.js @@ -1,11 +1,15 @@ import {NgElement, Component, Template, Parent} from 'angular2/angular2' import {Toolbar} from 'ionic2/components/toolbar/toolbar' +import {ComponentConfig} from 'ionic2/config/component-config' + +export let ViewConfig = new ComponentConfig('view') @Component({ selector: 'ion-view', bind: { title: 'view-title' - } + }, + services: [ViewConfig] }) @Template({ inline: ` @@ -20,8 +24,12 @@ import {Toolbar} from 'ionic2/components/toolbar/toolbar' directives: [Toolbar] }) export class View { - constructor(@NgElement() ele:NgElement) { - ele.domElement.classList.add('pane') - console.log('View constructed', ele.domElement); + constructor( + configFactory: ViewConfig, + @NgElement() ngElement:NgElement + ) { + this.domElement = ngElement.domElement + this.domElement.classList.add('pane') + this.config = configFactory.create(this) } } diff --git a/src/components/view/view.scss b/src/components/view/view.scss deleted file mode 100644 index 2e4e8e5a19..0000000000 --- a/src/components/view/view.scss +++ /dev/null @@ -1,3 +0,0 @@ -.pane-container { - flex: 1; -}