diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts index ea69cdf7d3..481af01336 100644 --- a/demos/component-docs/helpers.ts +++ b/demos/component-docs/helpers.ts @@ -94,6 +94,7 @@ export function getPageFor(hash) { 'checkbox': inputs.CheckboxPage, 'radio': inputs.RadioPage, 'range': inputs.RangePage, + 'segment': inputs.SegmentPage, 'select': inputs.SelectPage, 'switch': inputs.SwitchPage, diff --git a/demos/component-docs/img/thumbnail-kitten-1.jpg b/demos/component-docs/img/thumbnail-kitten-1.jpg new file mode 100644 index 0000000000..510e3ea373 Binary files /dev/null and b/demos/component-docs/img/thumbnail-kitten-1.jpg differ diff --git a/demos/component-docs/img/thumbnail-kitten-2.jpg b/demos/component-docs/img/thumbnail-kitten-2.jpg new file mode 100644 index 0000000000..add676fa1c Binary files /dev/null and b/demos/component-docs/img/thumbnail-kitten-2.jpg differ diff --git a/demos/component-docs/img/thumbnail-kitten-3.jpg b/demos/component-docs/img/thumbnail-kitten-3.jpg new file mode 100644 index 0000000000..5046c7431c Binary files /dev/null and b/demos/component-docs/img/thumbnail-kitten-3.jpg differ diff --git a/demos/component-docs/img/thumbnail-kitten-4.jpg b/demos/component-docs/img/thumbnail-kitten-4.jpg new file mode 100644 index 0000000000..dd510043f5 Binary files /dev/null and b/demos/component-docs/img/thumbnail-kitten-4.jpg differ diff --git a/demos/component-docs/img/thumbnail-puppy-1.jpg b/demos/component-docs/img/thumbnail-puppy-1.jpg new file mode 100644 index 0000000000..8e093637a2 Binary files /dev/null and b/demos/component-docs/img/thumbnail-puppy-1.jpg differ diff --git a/demos/component-docs/img/thumbnail-puppy-2.jpg b/demos/component-docs/img/thumbnail-puppy-2.jpg new file mode 100644 index 0000000000..89b5ced668 Binary files /dev/null and b/demos/component-docs/img/thumbnail-puppy-2.jpg differ diff --git a/demos/component-docs/img/thumbnail-puppy-3.jpg b/demos/component-docs/img/thumbnail-puppy-3.jpg new file mode 100644 index 0000000000..2a6e47f608 Binary files /dev/null and b/demos/component-docs/img/thumbnail-puppy-3.jpg differ diff --git a/demos/component-docs/img/thumbnail-puppy-4.jpg b/demos/component-docs/img/thumbnail-puppy-4.jpg new file mode 100644 index 0000000000..a234f235ca Binary files /dev/null and b/demos/component-docs/img/thumbnail-puppy-4.jpg differ diff --git a/demos/component-docs/inputs/inputs.ts b/demos/component-docs/inputs/inputs.ts index b9c4e27fdf..ee270aa390 100644 --- a/demos/component-docs/inputs/inputs.ts +++ b/demos/component-docs/inputs/inputs.ts @@ -1,5 +1,6 @@ export * from './checkbox/pages'; export * from './radio/pages'; export * from './range/pages'; +export * from './segment/pages'; export * from './select/pages'; export * from './switch/pages'; diff --git a/demos/component-docs/inputs/segment/pages.ts b/demos/component-docs/inputs/segment/pages.ts new file mode 100644 index 0000000000..783d55964b --- /dev/null +++ b/demos/component-docs/inputs/segment/pages.ts @@ -0,0 +1,14 @@ +import {Page} from 'ionic/ionic'; +import {forwardRef} from 'angular2/angular2'; +import {AndroidAttribute} from '../../helpers'; + +@Page({ + templateUrl: 'inputs/segment/template.html', + directives: [forwardRef(() => AndroidAttribute)] +}) +export class SegmentPage{ + constructor() { + this.pet = "puppies"; + } + +} diff --git a/demos/component-docs/inputs/segment/template.html b/demos/component-docs/inputs/segment/template.html new file mode 100644 index 0000000000..45f2428b67 --- /dev/null +++ b/demos/component-docs/inputs/segment/template.html @@ -0,0 +1,80 @@ + + + + Segment + + + + + + + +
+ + + Kittens + + + Puppies + + +
+ +
+ + + + + +

Ruby

+ + + + + +

Oscar

+ + + + + +

Zoey

+ + + + + +

Otto

+ + + + + + + + +

Luna

+ + + + + +

Milo

+ + + + + +

Bandit

+ + + + + +

Nala

+ + +
+ + + diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index 60ff6da28a..dd2388553e 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -1,9 +1,8 @@ -import {forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/angular2'; +import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; -import {ConfigComponent} from '../../config/decorators'; import {Platform} from '../../platform/platform'; import {Keyboard} from '../../util/keyboard'; import * as gestures from './menu-gestures'; @@ -44,20 +43,24 @@ import * as gestures from './menu-gestures'; * * ``` */ -@ConfigComponent({ +@Component({ selector: 'ion-menu', inputs: [ 'content', 'dragThreshold', - 'id' + 'id', + 'side', + 'type' ], defaultInputs: { 'side': 'left', - 'type': 'reveal' + 'menuType': 'reveal' }, outputs: ['opening'], host: { - 'role': 'navigation' + 'role': 'navigation', + '[attr.side]': 'side', + '[attr.type]': 'type' }, template: '', directives: [forwardRef(() => MenuBackdrop)] @@ -94,6 +97,10 @@ export class Menu extends Ion { return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n\n\n'); } + if (this.side !== 'left' && this.side !== 'right') { + this.side = 'left'; + } + if (!this.id) { // Auto register this.id = 'menu'; @@ -130,16 +137,12 @@ export class Menu extends Ion { } _initType(type) { - type = type && type.trim().toLowerCase() || FALLBACK_MENU_TYPE; - - let menuTypeCls = menuTypes[type]; - - if (!menuTypeCls) { - type = FALLBACK_MENU_TYPE; - menuTypeCls = menuTypes[type]; + type = type && type.trim().toLowerCase(); + if (!type) { + type = this.config.get('menuType'); } - this._type = new menuTypeCls(this); + this._type = new menuTypes[type](this); this.type = type; if (this.config.get('animate') === false) { @@ -307,7 +310,6 @@ export class Menu extends Ion { } let menuTypes = {}; -const FALLBACK_MENU_TYPE = 'reveal'; /** diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 02470fa1d3..3de4aa5ed7 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -30,10 +30,6 @@ export class ViewController { return false; } - /** - * TODO - * @param {TODO} instance TODO - */ setInstance(instance) { this.instance = instance; } @@ -50,9 +46,6 @@ export class ViewController { this._destroys.push(destroyFn); } - /** - * TODO - */ destroy() { for (let i = 0; i < this._destroys.length; i++) { this._destroys[i](); @@ -108,66 +101,38 @@ export class ViewController { return this._nbDir; } - /** - * TODO - * @returns {TODO} TODO - */ hasNavbar() { return !!this.getNavbar(); } - /** - * TODO - * @returns {TODO} TODO - */ navbarRef() { let navbar = this.getNavbar(); return navbar && navbar.getElementRef(); } - /** - * TODO - * @returns {TODO} TODO - */ titleRef() { let navbar = this.getNavbar(); return navbar && navbar.getTitleRef(); } - /** - * TODO - * @returns {TODO} TODO - */ navbarItemRefs() { let navbar = this.getNavbar(); return navbar && navbar.getItemRefs(); } - /** - * TODO - * @returns {TODO} TODO - */ backBtnRef() { let navbar = this.getNavbar(); return navbar && navbar.getBackButtonRef(); } - /** - * TODO - * @returns {TODO} TODO - */ backBtnTextRef() { let navbar = this.getNavbar(); return navbar && navbar.getBackButtonTextRef(); } - /** - * TODO - * @returns {TODO} TODO - */ navbarBgRef() { let navbar = this.getNavbar(); - return navbar && navbar.getNativeElement().querySelector('.toolbar-background'); + return navbar && navbar.getBackgroundRef(); } hideBackButton(shouldHide) { diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts index 425ab07c7a..6f54900dd4 100644 --- a/ionic/components/navbar/navbar.ts +++ b/ionic/components/navbar/navbar.ts @@ -38,13 +38,25 @@ class BackButton extends Ion { @Directive({ selector: '.back-button-text' }) -class BackButtonText extends Ion { +class BackButtonText { constructor( elementRef: ElementRef, - @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar + @Inject(forwardRef(() => Navbar)) navbar: Navbar ) { - super(elementRef, null); - navbar && navbar.setBackButtonTextRef(elementRef); + navbar.setBackButtonTextRef(elementRef); + } +} + + +@Directive({ + selector: 'toolbar-background' +}) +class ToolbarBackground { + constructor( + elementRef: ElementRef, + @Inject(forwardRef(() => Navbar)) navbar: Navbar + ) { + navbar.setBackgroundRef(elementRef); } } @@ -52,19 +64,19 @@ class BackButtonText extends Ion { @Component({ selector: 'ion-navbar', template: - '
' + - '' + - '' + - '' + - '' + - '' + - '
' + - '
', + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '', host: { '[hidden]': '_hidden' }, @@ -72,7 +84,7 @@ class BackButtonText extends Ion { 'hideBackButton', 'navbarStyle' ], - directives: [BackButton, BackButtonText, Icon] + directives: [BackButton, BackButtonText, Icon, ToolbarBackground] }) export class Navbar extends ToolbarBase { constructor( @@ -105,7 +117,7 @@ export class Navbar extends ToolbarBase { if (typeof hideBackButton === 'string') { this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true'); } - + if (this.navbarStyle) { this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, ''); } @@ -127,6 +139,14 @@ export class Navbar extends ToolbarBase { this.bbtRef = backButtonTextElementRef; } + setBackgroundRef(backgrouneElementRef) { + this.bgRef = backgrouneElementRef; + } + + getBackgroundRef() { + return this.bgRef; + } + didEnter() { this.app.setTitle(this.getTitleText()); } diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index f5d152ba7a..155bb46b46 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -67,8 +67,8 @@ export class Popup { constructor(ctrl: OverlayController, config: Config) { this.ctrl = ctrl; this._defaults = { - enterAnimation: config.get('popupPopIn'), - leaveAnimation: config.get('popupPopOut'), + enterAnimation: config.get('popupEnter'), + leaveAnimation: config.get('popupLeave'), }; } diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss index b201f690c3..cf7e4d37d1 100644 --- a/ionic/components/segment/modes/md.scss +++ b/ionic/components/segment/modes/md.scss @@ -38,7 +38,6 @@ ion-segment { .toolbar { ion-segment { - width: 95%; margin: 0 auto; } diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts index f144c2393f..ba372eacaa 100644 --- a/ionic/components/tabs/test/basic/index.ts +++ b/ionic/components/tabs/test/basic/index.ts @@ -99,12 +99,16 @@ class Tab3 {} - + - ` + `, + config: { + navbarStyle: 'secondary', + tabbarStyle: 'secondary' + } }) export class TabsPage { constructor() { diff --git a/ionic/components/tabs/test/ghost/e2e.ts b/ionic/components/tabs/test/ghost/e2e.ts deleted file mode 100644 index 8b13789179..0000000000 --- a/ionic/components/tabs/test/ghost/e2e.ts +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts index e57deb1b54..df9043bc43 100644 --- a/ionic/components/tap-click/tap-click.ts +++ b/ionic/components/tap-click/tap-click.ts @@ -25,7 +25,7 @@ export function initTapClick(windowInstance, documentInstance, appInstance, conf activator = new RippleActivator(app, config, fastdom); } else if (config.get('activator') == 'highlight') { - activator = new Activator(app, config, fastdom)); + activator = new Activator(app, config, fastdom); } isTapPolyfill = (config.get('tapPolyfill') === true); diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index f1b10aa69e..52f87ac4bf 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/ionic/components/toolbar/modes/ios.scss @@ -71,7 +71,7 @@ $toolbar-ios-title-font-size: 1.7rem !default; } -.toolbar .toolbar-background { +.toolbar toolbar-background { border-bottom-width: 1px; border-bottom-style: solid; } @@ -105,6 +105,6 @@ ion-nav-items[secondary] { order: map-get($toolbar-order-ios, secondary); } -&.hairlines .toolbar .toolbar-background { +&.hairlines .toolbar toolbar-background { border-bottom-width: 0.55px; } diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html index 7467222d5e..1500da91e4 100644 --- a/ionic/components/toolbar/test/scenarios/main.html +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -1,9 +1,6 @@ - - - - menu-toggle left. This is the title that never ends. It just goes on and on my friend. + This is the title that never ends. It just goes on and on my friend. @@ -168,6 +165,32 @@ + + + + + + + + Left side menu toggle + + + + + + + + Right side menu toggle + + + + + +