diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index a1ea90b0c3..4550f00ebb 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -310,6 +310,8 @@ declare global { } namespace JSXElements { export interface IonBackButtonAttributes extends HTMLAttributes { + defaultHref?: string; + icon?: string; mode?: 'ios' | 'md'; text?: string|undefined; } diff --git a/packages/core/src/components/back-button/back-button.ios.scss b/packages/core/src/components/back-button/back-button.ios.scss index 33368824b7..d5580d5ebe 100644 --- a/packages/core/src/components/back-button/back-button.ios.scss +++ b/packages/core/src/components/back-button/back-button.ios.scss @@ -6,7 +6,7 @@ .back-button-ios .back-button-inner { @include padding(0); - @include margin(0); + @include margin(2px, 0, 0, 0); z-index: $back-button-ios-button-z-index; overflow: visible; diff --git a/packages/core/src/components/back-button/back-button.md.scss b/packages/core/src/components/back-button/back-button.md.scss index 1c59bcb284..2d5256300a 100644 --- a/packages/core/src/components/back-button/back-button.md.scss +++ b/packages/core/src/components/back-button/back-button.md.scss @@ -3,7 +3,7 @@ // MD Back Button // -------------------------------------------------- .back-button-md .back-button-inner { - @include margin(0, 6px, 0, 0); + @include margin(2px, 6px, 0, 0); @include padding(0, 5px); min-width: 44px; diff --git a/packages/core/src/components/back-button/back-button.scss b/packages/core/src/components/back-button/back-button.scss index 241786da08..b0e79993dd 100644 --- a/packages/core/src/components/back-button/back-button.scss +++ b/packages/core/src/components/back-button/back-button.scss @@ -7,6 +7,7 @@ display: none; } +.back-button.can-back-back, .back-button.show-back-button { display: inline-block; } @@ -40,6 +41,14 @@ font-smoothing: antialiased; -webkit-font-smoothing: antialiased; + + display: flex; + + flex-flow: row nowrap; + flex-shrink: 0; + align-items: center; + justify-content: center; + } .back-button .button-inner { diff --git a/packages/core/src/components/back-button/back-button.tsx b/packages/core/src/components/back-button/back-button.tsx index 51dc9606c8..c2dd1eab79 100644 --- a/packages/core/src/components/back-button/back-button.tsx +++ b/packages/core/src/components/back-button/back-button.tsx @@ -1,5 +1,6 @@ import { Component, Element, Prop } from '@stencil/core'; import { Config } from '../../index'; +import { openURL } from '../../utils/theme'; @Component({ tag: 'ion-back-button', @@ -13,8 +14,6 @@ import { Config } from '../../index'; }) export class BackButton { - private custom = true; - /** * The mode determines which platform styles to use. * Possible values are: `"ios"` or `"md"`. @@ -28,37 +27,45 @@ export class BackButton { */ @Prop() text: string|undefined; + @Prop() icon: string; + + @Prop() defaultHref: string; + @Prop({ context: 'config' }) config: Config; @Element() el: HTMLElement; - componentWillLoad() { - this.custom = this.el.childElementCount > 0; + + hostData() { + return { + class: { + 'show-back-button': !!this.defaultHref + } + }; + } + + private onClick(ev: Event) { + const nav = this.el.closest('ion-nav'); + if (nav && nav.canGoBack()) { + ev.preventDefault(); + nav.pop(); + } else if (this.defaultHref) { + openURL(this.defaultHref, ev); + } } render() { - const backButtonIcon = this.config.get('backButtonIcon', 'arrow-back'); - const defaultBackButtonText = this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : ''); - const backButtonText = this.text || defaultBackButtonText; + const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back'); + const backButtonText = this.text || this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : ''); - if (this.custom) { - return ( - - - - ); - } else { - return ( - - - - ); - } + return ( + + ); } } diff --git a/packages/core/src/components/back-button/readme.md b/packages/core/src/components/back-button/readme.md index 73ec78b516..820eab165a 100644 --- a/packages/core/src/components/back-button/readme.md +++ b/packages/core/src/components/back-button/readme.md @@ -15,18 +15,14 @@ add a back button to your view, all you need is: The back button component is smart enough to know what to render and what content to show. -If, however, you want more control over what is shown in the back button, you can pass your own button markup. +If, however, you want more control over what is shown in the back button, you use the +`text` and `icon` properties. ```html - - - Button Text - - - + @@ -39,11 +35,7 @@ Or no button text at all: - - - - - + @@ -55,6 +47,16 @@ Or no button text at all: ## Properties +#### defaultHref + +string + + +#### icon + +string + + #### mode @@ -74,6 +76,16 @@ default look-and-feel ## Attributes +#### default-href + +string + + +#### icon + +string + + #### mode diff --git a/packages/core/src/components/back-button/test/basic/index.html b/packages/core/src/components/back-button/test/basic/index.html index 920a74a4f4..53b3af5529 100644 --- a/packages/core/src/components/back-button/test/basic/index.html +++ b/packages/core/src/components/back-button/test/basic/index.html @@ -44,7 +44,7 @@ } async function goToPageTwo(nav) { - const firstPage = document.createElement('div'); + const secondPage = document.createElement('div'); secondPage.classList.add('second-page'); secondPage.innerHTML = ` @@ -78,12 +78,7 @@ - - - - Text! - - + Page Three diff --git a/packages/core/src/components/nav-pop/nav-pop.tsx b/packages/core/src/components/nav-pop/nav-pop.tsx index fe5dfbd042..2ae5b2c7e4 100644 --- a/packages/core/src/components/nav-pop/nav-pop.tsx +++ b/packages/core/src/components/nav-pop/nav-pop.tsx @@ -5,11 +5,11 @@ import { Component, Element, Listen } from '@stencil/core'; }) export class NavPop { - @Element() element: HTMLElement; + @Element() el: HTMLElement; @Listen('child:click') pop(): Promise { - const nav = this.element.closest('ion-nav') as HTMLIonNavElement; + const nav = this.el.closest('ion-nav'); if (nav) { return nav.pop(); } diff --git a/packages/core/src/components/nav-push/nav-push.tsx b/packages/core/src/components/nav-push/nav-push.tsx index 901dfdb7dc..9e5f15a822 100644 --- a/packages/core/src/components/nav-push/nav-push.tsx +++ b/packages/core/src/components/nav-push/nav-push.tsx @@ -6,14 +6,14 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; }) export class NavPush { - @Element() element: HTMLElement; + @Element() el: HTMLElement; @Prop() component: any; @Prop() url: string; @Prop() data: any; @Listen('child:click') push(): Promise { - const nav = this.element.closest('ion-nav') as HTMLIonNavElement; + const nav = this.el.closest('ion-nav'); if (nav) { const toPush = this.url || this.component; return nav.push(toPush, this.data); diff --git a/packages/core/src/components/nav-set-root/nav-set-root.tsx b/packages/core/src/components/nav-set-root/nav-set-root.tsx index 36abf7296e..8354f25ad2 100644 --- a/packages/core/src/components/nav-set-root/nav-set-root.tsx +++ b/packages/core/src/components/nav-set-root/nav-set-root.tsx @@ -5,14 +5,14 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; }) export class NavSetRoot { - @Element() element: HTMLElement; + @Element() el: HTMLElement; @Prop() component: any; @Prop() url: string; @Prop() data: any; @Listen('child:click') push(): Promise { - const nav = this.element.closest('ion-nav'); + const nav = this.el.closest('ion-nav'); if (nav) { const toPush = this.url || this.component; return nav.setRoot(toPush, this.data); diff --git a/packages/core/src/components/nav/animations/ios.transition.ts b/packages/core/src/components/nav/animations/ios.transition.ts index 8f6c77b9ae..938941ca72 100644 --- a/packages/core/src/components/nav/animations/ios.transition.ts +++ b/packages/core/src/components/nav/animations/ios.transition.ts @@ -8,7 +8,7 @@ const TRANSFORM = 'transform'; const TRANSLATEX = 'translateX'; const CENTER = '0%'; const OFF_OPACITY = 0.8; -const SHOW_BACK_BTN_CSS = 'show-back-button'; +const SHOW_BACK_BTN_CSS = 'can-back-back'; export default function iosTransitionAnimation(Animation: Animation, _: HTMLElement, opts: AnimationOptions): Promise { @@ -76,7 +76,7 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem enteringToolBarBg.addElement(enteringToolBarEle.querySelector('.toolbar-background')); const enteringBackButton = new Animation(); - enteringBackButton.addElement(enteringToolBarEle.querySelector('.back-button')); + enteringBackButton.addElement(enteringToolBarEle.querySelector('ion-back-button')); enteringToolBar .add(enteringTitle) diff --git a/packages/core/src/components/nav/animations/md.transition.ts b/packages/core/src/components/nav/animations/md.transition.ts index b4cec13e06..13913cebdb 100644 --- a/packages/core/src/components/nav/animations/md.transition.ts +++ b/packages/core/src/components/nav/animations/md.transition.ts @@ -4,7 +4,7 @@ import { isDef } from '../../../utils/helpers'; const TRANSLATEY = 'translateY'; const OFF_BOTTOM = '40px'; const CENTER = '0px'; -const SHOW_BACK_BTN_CSS = 'show-back-button'; +const SHOW_BACK_BTN_CSS = 'can-back-back'; export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: AnimationOptions): Promise { @@ -39,7 +39,7 @@ export default function mdTransitionAnimation(Animation: Animation, _: HTMLEleme rootTransition.add(enteringToolBar); const enteringBackButton = new Animation(); - enteringBackButton.addElement(enteringToolbarEle.querySelector('.back-button')); + enteringBackButton.addElement(enteringToolbarEle.querySelector('ion-back-button')); rootTransition.add(enteringBackButton); if (opts.enteringView.enableBack()) { enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);