From a203534b27c86104313daacee8365b306dfcfbcb Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 11 Apr 2018 20:57:50 +0200 Subject: [PATCH] fix(fab): fix fab activation --- angular/BREAKING.md | 10 +-- core/src/components.d.ts | 20 +++--- core/src/components/fab-button/fab-button.tsx | 32 +++------- core/src/components/fab-button/readme.md | 10 --- core/src/components/fab-list/fab-list.scss | 8 +-- core/src/components/fab-list/fab-list.tsx | 9 ++- core/src/components/fab/fab.scss | 20 ------ core/src/components/fab/fab.tsx | 62 ++++++++++--------- core/src/components/fab/readme.md | 14 ++++- core/src/components/fab/test/basic/index.html | 25 ++------ .../components/fab/test/preview/index.html | 10 +-- .../components/fab/test/standalone/index.html | 10 +-- .../fab/test/translucent/index.html | 10 +-- 13 files changed, 95 insertions(+), 145 deletions(-) diff --git a/angular/BREAKING.md b/angular/BREAKING.md index b409ee7472..ce6df83f0b 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -305,7 +305,7 @@ Buttons inside of an `` container should now be written as an ` + @@ -334,8 +334,8 @@ The attributes to align the fab horizontally are now combined under the `horizon | Old Property | New Property | Property Behavior | |--------------|----------------------|-------------------------------------------------------------------------| -| left | `horizontal="left"` | Positions to the left of the viewport. | -| right | `horizontal="right"` | Positions to the right of the viewport. | +| left | Removed | | +| right | Removed | | | center | `horizontal="center"`| Positions to the center of the viewport. | | start | `horizontal="start"` | Positions to the left of the viewport in LTR, and to the right in RTL. | | end | `horizontal="end"` | Positions to the right of the viewport in LTR, and to the left in RTL. | @@ -360,7 +360,7 @@ _Note that `middle` has been changed to `center` for the vertical positioning._ **New Usage Example:** ```html - + @@ -387,7 +387,7 @@ The `` container was previously placed inside of the fixed content by d **New Usage Example:** ```html - + diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b0ff00e9e2..1d8fa330c0 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1635,13 +1635,12 @@ declare global { /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href': string; + 'href': string | undefined; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ 'mode': 'ios' | 'md'; 'show': boolean; - 'toggleActive': Function; /** * If true, the fab button will be translucent. Defaults to `false`. */ @@ -1679,13 +1678,12 @@ declare global { /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ 'mode'?: 'ios' | 'md'; 'show'?: boolean; - 'toggleActive'?: Function; /** * If true, the fab button will be translucent. Defaults to `false`. */ @@ -1704,7 +1702,7 @@ declare global { /** * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. */ - 'side': 'left' | 'right' | 'top' | 'bottom'; + 'side': 'start' | 'end' | 'top' | 'bottom'; } var HTMLIonFabListElement: { prototype: HTMLIonFabListElement; @@ -1730,7 +1728,7 @@ declare global { /** * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. */ - 'side'?: 'left' | 'right' | 'top' | 'bottom'; + 'side'?: 'start' | 'end' | 'top' | 'bottom'; } } } @@ -1738,6 +1736,7 @@ declare global { declare global { interface HTMLIonFabElement extends HTMLStencilElement { + 'activated': boolean; /** * Close an active FAB list container */ @@ -1747,9 +1746,9 @@ declare global { */ 'edge': boolean; /** - * Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. + * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. */ - 'horizontal': 'left' | 'right' | 'center' | 'start' | 'end'; + 'horizontal': 'start' | 'end' | 'center'; /** * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. */ @@ -1772,14 +1771,15 @@ declare global { } namespace JSXElements { export interface IonFabAttributes extends HTMLAttributes { + 'activated'?: boolean; /** * If true, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. */ 'edge'?: boolean; /** - * Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. + * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. */ - 'horizontal'?: 'left' | 'right' | 'center' | 'start' | 'end'; + 'horizontal'?: 'start' | 'end' | 'center'; /** * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. */ diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 21fb867adf..d3cc647820 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop, State } from '@stencil/core'; +import { Component, Element, Prop } from '@stencil/core'; import { createThemedClasses, getElementClassMap } from '../../utils/theme'; import { CssClassMap } from '../../index'; @@ -11,12 +11,11 @@ import { CssClassMap } from '../../index'; } }) export class FabButton { + + private inList = false; + @Element() private el: HTMLElement; - @State() private inContainer = false; - - @State() private inList = false; - /** * The color to use from your Sass `$colors` map. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -45,37 +44,26 @@ export class FabButton { * Contains a URL or a URL fragment that the hyperlink points to. * If this property is set, an anchor tag will be rendered. */ - @Prop() href: string; + @Prop() href: string | undefined; /** * If true, the fab button will be translucent. Defaults to `false`. */ @Prop() translucent = false; - @Prop() toggleActive: Function; - @Prop() show = false; - - componentDidLoad() { + componentWillLoad() { const parentNode = this.el.parentNode; const parentTag = parentNode ? parentNode.nodeName : null; this.inList = (parentTag === 'ION-FAB-LIST'); - this.inContainer = (parentTag === 'ION-FAB'); - } - - - clickedFab() { - if (this.inContainer) { - this.toggleActive(); - } } /** * Get the classes for fab buttons in lists */ - getFabClassMap(): CssClassMap { + private getFabClassMap(): CssClassMap { return { 'fab-button-in-list': this.inList, [`fab-button-${this.mode}-in-list`]: this.inList, @@ -89,10 +77,7 @@ export class FabButton { const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button'); const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {}; const hostClasses = getElementClassMap(this.el.classList); - - const TagType = this.href ? 'a' : 'button'; - const fabClasses = { ...this.getFabClassMap(), ...themedClasses, @@ -104,8 +89,7 @@ export class FabButton { + href={this.href}> diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index fe8057db25..f1dcb6a6ea 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -83,11 +83,6 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl boolean -#### toggleActive - - - - #### translucent boolean @@ -142,11 +137,6 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl boolean -#### toggle-active - - - - #### translucent boolean diff --git a/core/src/components/fab-list/fab-list.scss b/core/src/components/fab-list/fab-list.scss index 27bf1d8edf..a6fe47998e 100644 --- a/core/src/components/fab-list/fab-list.scss +++ b/core/src/components/fab-list/fab-list.scss @@ -38,8 +38,8 @@ ion-fab-list { transform: scale(1); } -.fab-list-side-left .fab-button-in-list, -.fab-list-side-right .fab-button-in-list { +.fab-list-side-start .fab-button-in-list, +.fab-list-side-end .fab-button-in-list { @include margin(0, 8px); } @@ -50,14 +50,14 @@ ion-fab-list { flex-direction: column-reverse; } -.fab-list-side-left { +.fab-list-side-start { @include margin(0, $fab-size + $fab-list-margin); @include position-horizontal(null, 0); flex-direction: row-reverse; } -.fab-list-side-right { +.fab-list-side-end { @include margin(0, $fab-size + $fab-list-margin); @include position(null, null, null, 0); diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx index 3629768918..4eb0e102b3 100644 --- a/core/src/components/fab-list/fab-list.tsx +++ b/core/src/components/fab-list/fab-list.tsx @@ -15,20 +15,19 @@ export class FabList { @Watch('activated') protected activatedChanged(activated: boolean) { - const fabs = this.el.querySelectorAll('ion-fab-button'); + const fabs = Array.from(this.el.querySelectorAll('ion-fab-button')); // if showing the fabs add a timeout, else show immediately const timeout = activated ? 30 : 0; - for (let i = 0; i < fabs.length; i++) { - const fab = fabs[i]; + fabs.forEach((fab, i) => { setTimeout(() => fab.show = activated, i * timeout); - } + }); } /** * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. */ - @Prop() side: 'left' | 'right' | 'top' | 'bottom' = 'bottom'; + @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom'; hostData() { diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss index 737806f667..d8a2e12f8f 100644 --- a/core/src/components/fab/fab.scss +++ b/core/src/components/fab/fab.scss @@ -12,26 +12,6 @@ ion-fab { // FAB Horizontal Positioning // -------------------------------------------------- -.fab-horizontal-left { - // scss-lint:disable PropertySpelling - @include multi-dir() { - left: $fab-content-margin; - - left: calc(#{$fab-content-margin} + constant(safe-area-inset-left)); - left: calc(#{$fab-content-margin} + env(safe-area-inset-left)); - } -} - -.fab-horizontal-right { - // scss-lint:disable PropertySpelling - @include multi-dir() { - right: $fab-content-margin; - - right: calc(#{$fab-content-margin} + constant(safe-area-inset-right)); - right: calc(#{$fab-content-margin} + env(safe-area-inset-right)); - } -} - .fab-horizontal-center { @include position(null, null, null, 50%); @include margin-horizontal(-$fab-size / 2, null); diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index f3d27152f2..4dfc891783 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Method, Prop, State } from '@stencil/core'; +import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core'; @Component({ @@ -6,29 +6,52 @@ import { Component, Element, Method, Prop, State } from '@stencil/core'; styleUrl: 'fab.scss' }) export class Fab { - @Element() private el: HTMLElement; - @State() activated = false; + @Element() private el: HTMLElement; /** * Where to align the fab horizontally in the viewport. - * Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. + * Possible values are: `"center"`, `"start"`, `"end"`. */ - @Prop() horizontal: 'left' | 'right' | 'center' | 'start' | 'end'; + @Prop() horizontal: 'start' | 'end' | 'center'; /** * Where to align the fab vertically in the viewport. * Possible values are: `"top"`, `"center"`, `"bottom"`. */ - @Prop() vertical: 'top' | 'center' | 'bottom'; + @Prop() vertical: 'top' | 'bottom' | 'center'; /** * If true, the fab will display on the edge of the header if * `vertical` is `"top"`, and on the edge of the footer if * it is `"bottom"`. Should be used with a `fixed` slot. */ - @Prop() edge: boolean; + @Prop() edge = false; + @Prop({mutable: true}) activated = false; + @Watch('activated') + activatedChanged() { + const activated = this.activated; + const fab = this.el.querySelector('ion-fab-button'); + if (fab) { + fab.activated = activated; + } + Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => { + list.activated = activated; + }); + } + + componentDidLoad() { + this.activatedChanged(); + } + + @Listen('click') + onClick() { + const hasList = !!this.el.querySelector('ion-fab-list'); + if (hasList) { + this.activated = !this.activated; + } + } /** * Close an active FAB list container @@ -38,35 +61,14 @@ export class Fab { this.activated = false; } - toggleActive = () => { - this.activated = !this.activated; - } - hostData() { return { class: { - [`fab-horizontal-${this.horizontal}`]: this.horizontal, - [`fab-vertical-${this.vertical}`]: this.vertical, + [`fab-horizontal-${this.horizontal}`]: !!this.horizontal, + [`fab-vertical-${this.vertical}`]: !!this.vertical, ['fab-edge']: this.edge } }; } - render() { - const fab = this.el.querySelector('ion-fab-button'); - if (fab) { - fab.toggleActive = this.toggleActive; - fab.activated = this.activated; - } - - const lists = this.el.querySelectorAll('ion-fab-list'); - for (let i = 0, length = lists.length; i < length; i += 1) { - lists[i].activated = this.activated; - } - - return ( - - ); - } - } diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md index b45dc3af12..54bbe7bf71 100644 --- a/core/src/components/fab/readme.md +++ b/core/src/components/fab/readme.md @@ -100,6 +100,11 @@ The fab should have one main fab button. Fabs can also contain fab lists which c ## Properties +#### activated + +boolean + + #### edge boolean @@ -114,7 +119,7 @@ it is `"bottom"`. Should be used with a `fixed` slot. string Where to align the fab horizontally in the viewport. -Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. +Possible values are: `"center"`, `"start"`, `"end"`. #### vertical @@ -127,6 +132,11 @@ Possible values are: `"top"`, `"center"`, `"bottom"`. ## Attributes +#### activated + +boolean + + #### edge boolean @@ -141,7 +151,7 @@ it is `"bottom"`. Should be used with a `fixed` slot. string Where to align the fab horizontally in the viewport. -Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. +Possible values are: `"center"`, `"start"`, `"end"`. #### vertical diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html index 298117e9b0..9fb7149ed1 100644 --- a/core/src/components/fab/test/basic/index.html +++ b/core/src/components/fab/test/basic/index.html @@ -23,7 +23,7 @@ Test FAB - + @@ -33,7 +33,7 @@ - + @@ -43,7 +43,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -79,7 +79,7 @@ - + @@ -115,26 +115,11 @@ function clickMainFAB(container) { let message = 'Clicked open social menu'; insertLog(message); - - toggleLists(container); } function openSocial(network, container) { let message = 'Share in ' + network; insertLog(message); - - toggleLists(container); - } - - function toggleLists(container) { - var fabButton = document.getElementById(container).querySelector('ion-fab-button'); - var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list'); - - fabButton.activated = !fabButton.activated; - - for (var i = 0; i < fabLists.length; i++) { - fabLists[i].activated = !fabLists[i].activated; - } } function closeLists() { diff --git a/core/src/components/fab/test/preview/index.html b/core/src/components/fab/test/preview/index.html index 14a5346d60..819b0bcd79 100644 --- a/core/src/components/fab/test/preview/index.html +++ b/core/src/components/fab/test/preview/index.html @@ -23,7 +23,7 @@ Test FAB - + @@ -33,7 +33,7 @@ - + @@ -43,7 +43,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -79,7 +79,7 @@ - + diff --git a/core/src/components/fab/test/standalone/index.html b/core/src/components/fab/test/standalone/index.html index 0c7fe63ccb..ed2699949e 100644 --- a/core/src/components/fab/test/standalone/index.html +++ b/core/src/components/fab/test/standalone/index.html @@ -13,7 +13,7 @@ FAB - + @@ -23,7 +23,7 @@ - + @@ -33,7 +33,7 @@ - + @@ -43,7 +43,7 @@ - + @@ -69,7 +69,7 @@ - + diff --git a/core/src/components/fab/test/translucent/index.html b/core/src/components/fab/test/translucent/index.html index 9f72003965..c8020778de 100644 --- a/core/src/components/fab/test/translucent/index.html +++ b/core/src/components/fab/test/translucent/index.html @@ -32,7 +32,7 @@ 
log
Test - + @@ -42,7 +42,7 @@ - + @@ -52,7 +52,7 @@ - + @@ -62,7 +62,7 @@ - + @@ -88,7 +88,7 @@ - +