javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(spinner): rename lines-sm to lines-small

Browse Source 
also adds this spinner class to the infinite scroll to override the
color
This commit is contained in:
Brandy Carney
2018-03-20 12:49:17 -04:00
parent f578122d15
commit b49e9eb027
15 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/infinite-scroll-content/infinite-scroll-content.ios.scss
View File

@ -6,7 +6,7 @@
} }
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line, .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-sm-ios line, .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle { .infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle {
stroke: $infinite-scroll-ios-loading-color; stroke: $infinite-scroll-ios-loading-color;
} }

2
core/src/components/infinite-scroll-content/infinite-scroll-content.md.scss
View File

@ -5,6 +5,8 @@
color: $infinite-scroll-md-loading-text-color; color: $infinite-scroll-md-loading-text-color;
} }
.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,
.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,
.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle { .infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
stroke: $infinite-scroll-md-loading-color; stroke: $infinite-scroll-md-loading-color;
} }

2
core/src/components/loading/loading.ios.scss
View File

@ -49,7 +49,7 @@
// ----------------------------------------- // -----------------------------------------
.loading-ios .spinner-lines-ios line, .loading-ios .spinner-lines-ios line,
.loading-ios .spinner-lines-sm-ios line { .loading-ios .spinner-lines-small-ios line {
stroke: $loading-ios-spinner-lines-color; stroke: $loading-ios-spinner-lines-color;
} }

2
core/src/components/loading/loading.md.scss
View File

@ -36,7 +36,7 @@
// ----------------------------------------- // -----------------------------------------
.loading-md .spinner-lines-md line, .loading-md .spinner-lines-md line,
.loading-md .spinner-lines-sm-md line { .loading-md .spinner-lines-small-md line {
stroke: $loading-md-spinner-lines-color; stroke: $loading-md-spinner-lines-color;
} }

2
core/src/components/loading/loading.tsx
View File

@ -77,7 +77,7 @@ export class Loading implements OverlayInterface {
@Prop() showBackdrop = true; @Prop() showBackdrop = true;
/** /**
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
* `"bubbles"`, `"circles"`, `"crescent"`. * `"bubbles"`, `"circles"`, `"crescent"`.
*/ */
@Prop() spinner: string; @Prop() spinner: string;

4
core/src/components/loading/readme.md
View File

@ -104,7 +104,7 @@ If true, a backdrop will be displayed behind the loading indicator. Defaults to
string string
The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
`"bubbles"`, `"circles"`, `"crescent"`. `"bubbles"`, `"circles"`, `"crescent"`.
@ -195,7 +195,7 @@ If true, a backdrop will be displayed behind the loading indicator. Defaults to
string string
The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
`"bubbles"`, `"circles"`, `"crescent"`. `"bubbles"`, `"circles"`, `"crescent"`.

2
core/src/components/refresher/refresher.ios.scss
View File

@ -15,7 +15,7 @@
} }
.refresher-ios .refresher-refreshing .spinner-lines-ios line, .refresher-ios .refresher-refreshing .spinner-lines-ios line,
.refresher-ios .refresher-refreshing .spinner-lines-sm-ios line, .refresher-ios .refresher-refreshing .spinner-lines-small-ios line,
.refresher-ios .refresher-refreshing .spinner-crescent circle { .refresher-ios .refresher-refreshing .spinner-crescent circle {
stroke: $refresher-ios-icon-color; stroke: $refresher-ios-icon-color;
} }

2
core/src/components/refresher/refresher.md.scss
View File

@ -15,7 +15,7 @@
} }
.refresher-md .refresher-refreshing .spinner-lines-md line, .refresher-md .refresher-refreshing .spinner-lines-md line,
.refresher-md .refresher-refreshing .spinner-lines-sm-md line, .refresher-md .refresher-refreshing .spinner-lines-small-md line,
.refresher-md .refresher-refreshing .spinner-crescent circle { .refresher-md .refresher-refreshing .spinner-crescent circle {
stroke: $refresher-md-icon-color; stroke: $refresher-md-icon-color;
} }

6
core/src/components/spinner/readme.md
View File

@ -12,7 +12,7 @@ The default spinner to use is based on the platform. The default spinner for `io
<ion-spinner name="lines"></ion-spinner> <ion-spinner name="lines"></ion-spinner>
<!-- Lines Small --> <!-- Lines Small -->
<ion-spinner name="lines-sm"></ion-spinner> <ion-spinner name="lines-small"></ion-spinner>
<!-- Dots --> <!-- Dots -->
<ion-spinner name="dots"></ion-spinner> <ion-spinner name="dots"></ion-spinner>
@ -66,7 +66,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The name of the SVG spinner to use. If a name is not provided, the platform's default The name of the SVG spinner to use. If a name is not provided, the platform's default
spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`, spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
`"circles"`, `"crescent"`. `"circles"`, `"crescent"`.
@ -109,7 +109,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The name of the SVG spinner to use. If a name is not provided, the platform's default The name of the SVG spinner to use. If a name is not provided, the platform's default
spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`, spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
`"circles"`, `"crescent"`. `"circles"`, `"crescent"`.

2
core/src/components/spinner/spinner-configs.ts
View File

@ -21,7 +21,7 @@ export const SPINNERS: SpinnerConfigs = {
} }
}, },
'lines-sm': { 'lines-small': {
dur: 1000, dur: 1000,
lines: 12, lines: 12,
fn: (dur: number, index: number, total: number) => { fn: (dur: number, index: number, total: number) => {

4
core/src/components/spinner/spinner.ios.scss
View File

@ -5,7 +5,7 @@
// -------------------------------------------------- // --------------------------------------------------
.spinner-lines-ios line, .spinner-lines-ios line,
.spinner-lines-sm-ios line { .spinner-lines-small-ios line {
stroke: $spinner-ios-lines-color; stroke: $spinner-ios-lines-color;
} }
@ -35,7 +35,7 @@
.spinner-ios-#{$color-name} { .spinner-ios-#{$color-name} {
&.spinner-lines line, &.spinner-lines line,
&.spinner-lines-sm line, &.spinner-lines-small line,
&.spinner-crescent circle { &.spinner-crescent circle {
stroke: $color-base; stroke: $color-base;
} }

4
core/src/components/spinner/spinner.md.scss
View File

@ -5,7 +5,7 @@
// -------------------------------------------------- // --------------------------------------------------
.spinner-lines-md line, .spinner-lines-md line,
.spinner-lines-sm-md line { .spinner-lines-small-md line {
stroke: $spinner-md-lines-color; stroke: $spinner-md-lines-color;
} }
@ -35,7 +35,7 @@
.spinner-md-#{$color-name} { .spinner-md-#{$color-name} {
&.spinner-lines line, &.spinner-lines line,
&.spinner-lines-sm line, &.spinner-lines-small line,
&.spinner-crescent circle { &.spinner-crescent circle {
stroke: $color-base; stroke: $color-base;
} }

6
core/src/components/spinner/spinner.scss
View File

@ -27,17 +27,17 @@ ion-spinner.spinner-paused svg {
} }
// Spinner: lines / lines-sm // Spinner: lines / lines-small
// -------------------------------------------------- // --------------------------------------------------
.spinner-lines line, .spinner-lines line,
.spinner-lines-sm line { .spinner-lines-small line {
stroke-width: 4px; stroke-width: 4px;
stroke-linecap: round; stroke-linecap: round;
} }
.spinner-lines svg, .spinner-lines svg,
.spinner-lines-sm svg { .spinner-lines-small svg {
animation: spinner-fade-out 1s linear infinite; animation: spinner-fade-out 1s linear infinite;
} }

6
core/src/components/spinner/spinner.tsx
View File

@ -38,7 +38,7 @@ export class Spinner {
/** /**
* The name of the SVG spinner to use. If a name is not provided, the platform's default * The name of the SVG spinner to use. If a name is not provided, the platform's default
* spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`, * spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
* `"circles"`, `"crescent"`. * `"circles"`, `"crescent"`.
*/ */
@Prop() name: string; @Prop() name: string;
@ -65,8 +65,8 @@ export class Spinner {
name = 'lines'; name = 'lines';
} else if (name === 'ios-small') { } else if (name === 'ios-small') {
// deprecation warning, renamed in v4 // deprecation warning, renamed in v4
console.warn(`spinner "ios-small" has been renamed to "lines-sm"`); console.warn(`spinner "ios-small" has been renamed to "lines-small"`);
name = 'lines-sm'; name = 'lines-small';
} }
return name; return name;
} }

2
core/src/components/spinner/test/basic/index.html
View File

@ -29,7 +29,7 @@
Show Lines Show Lines
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="lines-sm"></ion-spinner> <ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small Show Lines Small
</ion-item> </ion-item>
<ion-item> <ion-item>