javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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

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>
<!-- Lines Small -->
<ion-spinner name="lines-sm"></ion-spinner>
<ion-spinner name="lines-small"></ion-spinner>
<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>
@ -66,7 +66,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string
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"`.
@ -109,7 +109,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string
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"`.

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

@ -21,7 +21,7 @@ export const SPINNERS: SpinnerConfigs = {
}
},
'lines-sm': {
'lines-small': {
dur: 1000,
lines: 12,
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-sm-ios line {
.spinner-lines-small-ios line {
stroke: $spinner-ios-lines-color;
}
@ -35,7 +35,7 @@
.spinner-ios-#{$color-name} {
&.spinner-lines line,
&.spinner-lines-sm line,
&.spinner-lines-small line,
&.spinner-crescent circle {
stroke: $color-base;
}

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

@ -5,7 +5,7 @@
// --------------------------------------------------
.spinner-lines-md line,
.spinner-lines-sm-md line {
.spinner-lines-small-md line {
stroke: $spinner-md-lines-color;
}
@ -35,7 +35,7 @@
.spinner-md-#{$color-name} {
&.spinner-lines line,
&.spinner-lines-sm line,
&.spinner-lines-small line,
&.spinner-crescent circle {
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-sm line {
.spinner-lines-small line {
stroke-width: 4px;
stroke-linecap: round;
}
.spinner-lines svg,
.spinner-lines-sm svg {
.spinner-lines-small svg {
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
* 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"`.
*/
@Prop() name: string;
@ -65,8 +65,8 @@ export class Spinner {
name = 'lines';
} else if (name === 'ios-small') {
// deprecation warning, renamed in v4
console.warn(`spinner "ios-small" has been renamed to "lines-sm"`);
name = 'lines-sm';
console.warn(`spinner "ios-small" has been renamed to "lines-small"`);
name = 'lines-small';
}
return name;
}

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

@ -29,7 +29,7 @@
Show Lines
</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
</ion-item>
<ion-item>