From 05ae712d59e777d0af885e9bdea2c5c3cf720a89 Mon Sep 17 00:00:00 2001 From: EinfachHans Date: Tue, 27 Oct 2020 21:58:42 +0100 Subject: [PATCH 1/2] feat(spinner): updated styles for latest iOS --- core/src/components/spinner/spinner-configs.ts | 12 ++++++------ core/src/components/spinner/spinner.scss | 2 +- core/src/components/spinner/spinner.tsx | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts index 632842f47a7..c5a0a476654 100644 --- a/core/src/components/spinner/spinner-configs.ts +++ b/core/src/components/spinner/spinner-configs.ts @@ -82,14 +82,14 @@ const spinners = { 'lines': { dur: 1000, - lines: 12, + lines: 8, fn: (dur: number, index: number, total: number) => { - const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`; + const transform = `rotate(${ (360 / total) * index + (index < (total / 2) ? 180 : -180) }deg)`; const animationDelay = `${ (dur * index / total) - dur }ms`; return { - y1: 17, - y2: 29, + y1: 14, + y2: 26, style: { 'transform': transform, 'animation-delay': animationDelay, @@ -100,9 +100,9 @@ const spinners = { 'lines-small': { dur: 1000, - lines: 12, + lines: 8, fn: (dur: number, index: number, total: number) => { - const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`; + const transform = `rotate(${(360 / total) * index + (index < (total / 2) ? 180 : -180)}deg)`; const animationDelay = `${ (dur * index / total) - dur }ms`; return { y1: 12, diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss index eddfb393c81..40aab5e2783 100644 --- a/core/src/components/spinner/spinner.scss +++ b/core/src/components/spinner/spinner.scss @@ -41,7 +41,7 @@ svg { :host(.spinner-lines) line, :host(.spinner-lines-small) line { - stroke-width: 4px; + stroke-width: 7px; stroke-linecap: round; stroke: currentColor; } diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index dd8211c371f..278bd4c24fb 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/core/src/components/spinner/spinner.tsx @@ -70,7 +70,7 @@ export class Spinner implements ComponentInterface { class={createColorClasses(self.color, { [mode]: true, [`spinner-${spinnerName}`]: true, - 'spinner-paused': !!self.paused || config.getBoolean('_testing') + 'spinner-paused': self.paused || config.getBoolean('_testing') })} role="progressbar" style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}} @@ -104,7 +104,7 @@ const buildLine = (spinner: SpinnerConfig, duration: number, index: number, tota return ( - + ); }; From b1b014eb9e671c3ef336d0a6c0dc30b4d501a729 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 11 Feb 2021 13:28:54 -0500 Subject: [PATCH 2/2] update spinner code, add lines-sharp --- core/api.txt | 8 ++--- .../infinite-scroll-content/readme.md | 8 ++--- core/src/components/loading/readme.md | 28 +++++++-------- .../components/refresher-content/readme.md | 12 +++---- core/src/components/spinner/readme.md | 12 +++---- .../src/components/spinner/spinner-configs.ts | 35 +++++++++++++++++++ core/src/components/spinner/spinner.scss | 17 +++++++-- core/src/components/spinner/spinner.tsx | 2 +- .../components/spinner/test/basic/index.html | 16 +++++++++ 9 files changed, 101 insertions(+), 37 deletions(-) diff --git a/core/api.txt b/core/api.txt index 19dfb8f1083..a85f22fe4d1 100644 --- a/core/api.txt +++ b/core/api.txt @@ -446,7 +446,7 @@ ion-infinite-scroll,method,complete,complete() => Promise ion-infinite-scroll,event,ionInfinite,void,true ion-infinite-scroll-content,none -ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false +ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false ion-input,scoped @@ -626,7 +626,7 @@ ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undef ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-loading,prop,mode,"ios" | "md",undefined,false,false ion-loading,prop,showBackdrop,boolean,true,false,false -ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false +ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false ion-loading,prop,translucent,boolean,false,false,false ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise ion-loading,method,onDidDismiss,onDidDismiss() => Promise> @@ -918,7 +918,7 @@ ion-refresher,event,ionStart,void,true ion-refresher-content,none ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false ion-refresher-content,prop,pullingText,IonicSafeString | string | undefined,undefined,false,false -ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false +ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false ion-reorder,shadow @@ -1145,7 +1145,7 @@ ion-slides,css-prop,--scroll-bar-background-active ion-spinner,shadow ion-spinner,prop,color,string | undefined,undefined,false,false ion-spinner,prop,duration,number | undefined,undefined,false,false -ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false +ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false ion-spinner,prop,paused,boolean,false,false,false ion-spinner,css-prop,--color diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md index a0573fb8f7f..04210ff3722 100644 --- a/core/src/components/infinite-scroll-content/readme.md +++ b/core/src/components/infinite-scroll-content/readme.md @@ -104,10 +104,10 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | -| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` | +| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | ## Dependencies diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 84f29b9a4d2..f301f6d370d 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -303,20 +303,20 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | -| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | +| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/refresher-content/readme.md b/core/src/components/refresher-content/readme.md index 1bc410ffb6f..08043d8750b 100644 --- a/core/src/components/refresher-content/readme.md +++ b/core/src/components/refresher-content/readme.md @@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` | -| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | -| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | -| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` | +| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | +| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` | +| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | ## Dependencies diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md index dff3da5c039..5197a7c83a6 100644 --- a/core/src/components/spinner/readme.md +++ b/core/src/components/spinner/readme.md @@ -160,12 +160,12 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | -| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number \| undefined` | `undefined` | -| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` | -| `paused` | `paused` | If `true`, the spinner's animation will be paused. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | +| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number \| undefined` | `undefined` | +| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| undefined` | `undefined` | +| `paused` | `paused` | If `true`, the spinner's animation will be paused. | `boolean` | `false` | ## CSS Custom Properties diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts index c5a0a476654..fe386958a5e 100644 --- a/core/src/components/spinner/spinner-configs.ts +++ b/core/src/components/spinner/spinner-configs.ts @@ -113,6 +113,41 @@ const spinners = { } }; } + }, + + 'lines-sharp': { + dur: 1000, + lines: 12, + fn: (dur: number, index: number, total: number) => { + const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`; + const animationDelay = `${ (dur * index / total) - dur }ms`; + + return { + y1: 17, + y2: 29, + style: { + 'transform': transform, + 'animation-delay': animationDelay, + } + }; + } + }, + + 'lines-sharp-small': { + dur: 1000, + lines: 12, + fn: (dur: number, index: number, total: number) => { + const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`; + const animationDelay = `${ (dur * index / total) - dur }ms`; + return { + y1: 12, + y2: 20, + style: { + 'transform': transform, + 'animation-delay': animationDelay, + } + }; + } } }; diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss index 40aab5e2783..b9191a4b1f2 100644 --- a/core/src/components/spinner/spinner.scss +++ b/core/src/components/spinner/spinner.scss @@ -36,18 +36,31 @@ svg { } -// Spinner: lines / lines-small +// Spinner: lines / lines-small / lines-sharp / lines-sharp-small // -------------------------------------------------- :host(.spinner-lines) line, :host(.spinner-lines-small) line { stroke-width: 7px; +} + +:host(.spinner-lines-sharp) line, +:host(.spinner-lines-sharp-small) line { + stroke-width: 4px; +} + +:host(.spinner-lines) line, +:host(.spinner-lines-small) line, +:host(.spinner-lines-sharp) line, +:host(.spinner-lines-sharp-small) line { stroke-linecap: round; stroke: currentColor; } :host(.spinner-lines) svg, -:host(.spinner-lines-small) svg { +:host(.spinner-lines-small) svg, +:host(.spinner-lines-sharp) svg, +:host(.spinner-lines-sharp-small) svg { animation: spinner-fade-out 1s linear infinite; } diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index 278bd4c24fb..5a89f01a16c 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/core/src/components/spinner/spinner.tsx @@ -104,7 +104,7 @@ const buildLine = (spinner: SpinnerConfig, duration: number, index: number, tota return ( - + ); }; diff --git a/core/src/components/spinner/test/basic/index.html b/core/src/components/spinner/test/basic/index.html index 524a31d4edd..12c71ca5d7e 100644 --- a/core/src/components/spinner/test/basic/index.html +++ b/core/src/components/spinner/test/basic/index.html @@ -39,6 +39,14 @@ lines-small + + + lines-sharp + + + + lines-sharp-small + circular @@ -74,6 +82,14 @@ lines-small + + + lines-sharp + + + + lines-sharp-small + circular