diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index b65db33b06..6d35bf4382 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -314,6 +314,7 @@ declare global { namespace JSXElements { export interface IonBackButtonAttributes extends HTMLAttributes { mode?: 'ios' | 'md'; + text?: string; } } } diff --git a/packages/core/src/components/back-button/back-button.ios.scss b/packages/core/src/components/back-button/back-button.ios.scss new file mode 100644 index 0000000000..4d55bb0601 --- /dev/null +++ b/packages/core/src/components/back-button/back-button.ios.scss @@ -0,0 +1,43 @@ +@import "./back-button"; +@import "./back-button.ios.vars"; + +// iOS Back Button +// -------------------------------------------------- + +.back-button-ios .back-button-inner-default { + @include padding(0, 4px); + @include margin(0); + + z-index: $back-button-ios-button-z-index; + overflow: visible; + min-height: 32px; + border: 0; + font-size: 17px; + line-height: 1; + color: $back-button-ios-button-color; + background-color: transparent; + transform: translateZ(0); + + &.activated { + opacity: 0.4; + } +} + +.back-button-ios ion-icon { + @include padding-horizontal(null, 0.3em); + @include margin(-1px, 0, 0, 0); + + display: inherit; + min-width: 18px; + font-size: 34px; + font-size: 1.4em; + line-height: 0.67; + pointer-events: none; +} +.back-button .button-text { + letter-spacing: -0.01em; +} + +.enable-hover .back-button-ios:hover { + color: $back-button-ios-button-color; +} diff --git a/packages/core/src/components/back-button/back-button.ios.vars.scss b/packages/core/src/components/back-button/back-button.ios.vars.scss new file mode 100644 index 0000000000..3caed53c2a --- /dev/null +++ b/packages/core/src/components/back-button/back-button.ios.vars.scss @@ -0,0 +1,5 @@ +@import "../../themes/ionic.globals.ios"; + +$back-button-ios-button-color: ion-color($colors-ios, primary, base, ios) !default; + +$back-button-ios-button-z-index: $z-index-toolbar-buttons !default; \ No newline at end of file diff --git a/packages/core/src/components/back-button/back-button.md.scss b/packages/core/src/components/back-button/back-button.md.scss new file mode 100644 index 0000000000..5baceafdc0 --- /dev/null +++ b/packages/core/src/components/back-button/back-button.md.scss @@ -0,0 +1,43 @@ +@import "./back-button"; +@import "./back-button.md.vars"; + +// MD Back Button +// -------------------------------------------------- +.back-button-md .back-button-inner-default { + @include margin(0, 6px, 0, 0); + @include padding(0, 5px); + + min-width: 44px; + height: 32px; + border: 0; + font-size: 14px; + font-weight: 500; + text-transform: uppercase; + color: $back-button-md-button-color; + background-color: transparent; + box-shadow: none; + + &.activated { + opacity: 0.4; + } +} + +.back-button-md ion-icon { + @include padding-horizontal(null, 0.3em); + + @include margin(0); + @include padding(0, 6px); + @include text-align(start); + + font-size: 24px; + font-weight: normal; + + + line-height: 0.67; + + pointer-events: none; +} + +.enable-hover .back-button-md:hover { + color: $back-button-md-button-color; +} diff --git a/packages/core/src/components/back-button/back-button.md.vars.scss b/packages/core/src/components/back-button/back-button.md.vars.scss new file mode 100644 index 0000000000..42cf120c91 --- /dev/null +++ b/packages/core/src/components/back-button/back-button.md.vars.scss @@ -0,0 +1,4 @@ +@import "../../themes/ionic.globals.md"; + +$back-button-md-button-color: $toolbar-md-text-color !default; + diff --git a/packages/core/src/components/back-button/back-button.scss b/packages/core/src/components/back-button/back-button.scss index d7877913d4..fc26bb94eb 100644 --- a/packages/core/src/components/back-button/back-button.scss +++ b/packages/core/src/components/back-button/back-button.scss @@ -1,3 +1,4 @@ +@import "../../themes/ionic.globals"; // Back Button // -------------------------------------------------- @@ -10,6 +11,50 @@ display: inline-block; } +.back-button button { + @include text-align(center); + @include appearance(none); + + position: relative; + z-index: 0; + display: inline-block; + + border: 0; + + line-height: 1; + + text-decoration: none; + text-overflow: ellipsis; + text-transform: none; + + white-space: nowrap; + cursor: pointer; + vertical-align: top; // the better option for most scenarios + vertical-align: -webkit-baseline-middle; // the best for those that support it + + transition: background-color, opacity 100ms linear; + + font-kerning: none; + user-select: none; + + contain: content; + + font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; +} + +.back-button .button-inner { + display: flex; + + flex-flow: row nowrap; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; +} + .back-button-text { display: flex; diff --git a/packages/core/src/components/back-button/back-button.tsx b/packages/core/src/components/back-button/back-button.tsx index bd7f2eb017..5c7c70b1fb 100644 --- a/packages/core/src/components/back-button/back-button.tsx +++ b/packages/core/src/components/back-button/back-button.tsx @@ -3,7 +3,10 @@ import { Config } from '../../index'; @Component({ tag: 'ion-back-button', - styleUrl: 'back-button.scss', + styleUrls: { + ios: 'back-button.ios.scss', + md: 'back-button.md.scss' + }, host: { theme: 'back-button' } @@ -19,6 +22,12 @@ export class BackButton { */ @Prop() mode: 'ios' | 'md'; + /** + * The text property is used to provide custom text for the back button while using the + * default look-and-feel + */ + @Prop() text: string = null; + @Prop({ context: 'config' }) config: Config; @Element() el: HTMLElement; @@ -26,10 +35,11 @@ export class BackButton { componentWillLoad() { this.custom = this.el.childElementCount > 0; } + render() { const backButtonIcon = this.config.get('backButtonIcon', 'arrow-back'); - const backButtonText = this.config.get('backButtonText', 'Back'); - const buttonColor = this.mode === 'ios' ? 'primary' : ''; + const defaultBackButtonText = this.config.get('backButtonText', 'Back'); + const backButtonText = this.text || defaultBackButtonText; if (this.custom) { return ( @@ -37,17 +47,18 @@ export class BackButton { ); - } else if (!this.custom) { + } else { return ( - - - {backButtonText} - + ); - } else { - return undefined; } } } diff --git a/packages/core/src/components/back-button/readme.md b/packages/core/src/components/back-button/readme.md index 6e740a8fc2..1719f7e417 100644 --- a/packages/core/src/components/back-button/readme.md +++ b/packages/core/src/components/back-button/readme.md @@ -70,6 +70,14 @@ Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). +#### text + +string + +The text property is used to provide custom text for the back button while using the +default look-and-feel + + ## Attributes #### mode @@ -81,6 +89,14 @@ Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). +#### text + +string + +The text property is used to provide custom text for the back button while using the +default look-and-feel + + ---------------------------------------------- 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 f5ea15d7b1..3e79a837b4 100644 --- a/packages/core/src/components/back-button/test/basic/index.html +++ b/packages/core/src/components/back-button/test/basic/index.html @@ -10,19 +10,6 @@ - - - - - - - - + \ No newline at end of file diff --git a/packages/core/src/components/back-button/test/host-element/index.html b/packages/core/src/components/back-button/test/host-element/index.html new file mode 100644 index 0000000000..ac54d5fe8d --- /dev/null +++ b/packages/core/src/components/back-button/test/host-element/index.html @@ -0,0 +1,115 @@ + + + + + Back Button + + + + + + + + + + + diff --git a/packages/core/src/components/back-button/test/standalone/index.html b/packages/core/src/components/back-button/test/standalone/index.html new file mode 100644 index 0000000000..35fc582818 --- /dev/null +++ b/packages/core/src/components/back-button/test/standalone/index.html @@ -0,0 +1,16 @@ + + + + + + Back Button + + + + + + + + + + diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx index 44bc5a5a33..1734b89185 100644 --- a/packages/core/src/components/nav/nav.tsx +++ b/packages/core/src/components/nav/nav.tsx @@ -974,54 +974,12 @@ export function attachViewToDom(nav: Nav, enteringView: ViewController, ti: Tran ti.mountingData = mountingData; Object.assign(enteringView, mountingData); enteringView.state = STATE_ATTACHED; - }).then(() => { - return waitForNewlyAttachedViewElementsToHydate(enteringView.element); }); } // it's in the wrong state, so don't attach and just return return Promise.resolve(); } -export function waitForNewlyAttachedViewElementsToHydate(element: HTMLElement) { - // the element may or may not be a Stencil element - // so check if it has an ``, ``, and `` for - // hydration - const promises: Promise[] = []; - if ((element as any).componentOnReady) { - // it's a stencil element - promises.push((element as any).componentOnReady()); - } - - const navs = element.querySelectorAll('ion-nav'); - for (let i = 0; i < navs.length; i++) { - const nav = navs.item(i); - promises.push((nav as any).componentOnReady()); - } - - // check for headers - const headers = element.querySelectorAll('ion-header'); - for (let i = 0; i < headers.length; i++) { - const header = headers.item(i); - promises.push((header as any).componentOnReady()); - } - - // check for contents - const contents = element.querySelectorAll('ion-content'); - for (let i = 0; i < contents.length; i++) { - const content = contents.item(i); - promises.push((content as any).componentOnReady()); - } - - // check for back buttons - const backButtons = element.querySelectorAll('ion-back-button'); - for (let i = 0; i < backButtons.length; i++) { - const backButton = backButtons.item(i); - promises.push((backButton as any).componentOnReady()); - } - - return Promise.all(promises); -} - export function initializeViewBeforeTransition(ti: TransitionInstruction): Promise { let leavingView: ViewController = null; let enteringView: ViewController = null; diff --git a/packages/core/src/components/nav/test/basic/index.html b/packages/core/src/components/nav/test/basic/index.html index d22c826553..5f2685543d 100644 --- a/packages/core/src/components/nav/test/basic/index.html +++ b/packages/core/src/components/nav/test/basic/index.html @@ -79,37 +79,6 @@ customElements.define('page-two', PageTwo); customElements.define('page-three', PageThree); - function regularElement() { - const start = Date.now(); - const element = document.createElement('page-three'); - document.body.appendChild(element); - const end = Date.now(); - console.log(`It took ${end - start} millis to create the custom element, add it to the DOM`); - return Promise.resolve().then(() => { - - }).then(() => { - - }).then(() => { - const endTwo = Date.now(); - console.log(`It took ${endTwo - start} millis after the promise blocks bro`); - }); - } - - function stencilElement() { - const start = Date.now(); - const element = document.createElement('ion-nav'); - document.body.appendChild(element); - const end = Date.now(); - console.log(`It took ${end - start} millis to create the stencil element, add it to the DOM`); - return element.componentOnReady().then(() => { - - }).then(() => { - - }).then(() => { - const endTwo = Date.now(); - console.log(`It took ${endTwo - start} millis after the promise blocks bro`); - }); - } diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss index 4427cf6aa8..c96dca08fb 100644 --- a/packages/core/src/components/toolbar/toolbar.ios.scss +++ b/packages/core/src/components/toolbar/toolbar.ios.scss @@ -296,38 +296,6 @@ } -// iOS Toolbar Back Button -// -------------------------------------------------- - -// .back-button-ios { -// @include margin(0); -// -// z-index: $z-index-toolbar-buttons; -// overflow: visible; -// -// order: map-get($toolbar-order-ios, back-button); -// -// min-height: 32px; -// -// line-height: 1; -// transform: translateZ(0); -// } -// -// .back-button-icon-ios { -// @include margin(-1px, 0, 0, 0); -// -// display: inherit; -// -// min-width: 18px; -// -// font-size: 34px; -// } -// -// .back-button-text-ios { -// letter-spacing: -.01em; -// } - - // iOS Toolbar Menu Toggle // -------------------------------------------------- diff --git a/packages/core/src/components/toolbar/toolbar.md.scss b/packages/core/src/components/toolbar/toolbar.md.scss index 56aa3ece1a..ce48a6eae1 100644 --- a/packages/core/src/components/toolbar/toolbar.md.scss +++ b/packages/core/src/components/toolbar/toolbar.md.scss @@ -299,27 +299,6 @@ } -// Material Design Toolbar Back Button -// -------------------------------------------------- - -.back-button-md { - @include margin(0, 6px); - - min-width: 44px; - - box-shadow: none; -} - -.back-button-icon-md { - @include margin(0); - @include padding(0, 6px); - @include text-align(start); - - font-size: 24px; - font-weight: normal; -} - - // Material Design Toolbar Menu Toggle // --------------------------------------------------