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

Merge branch 'master' into v4

Browse Source 
# Conflicts:
#	.scss-lint.yml
#	README.md
#	scripts/gulp/tasks/e2e.dev.ts
#	scripts/gulp/util.ts
#	src/components/action-sheet/action-sheet-component.ts
#	src/components/card/card.ios.scss
#	src/components/card/card.md.scss
#	src/components/card/card.wp.scss
#	src/components/card/test/map/main.html
#	src/components/card/test/social/main.html
#	src/components/slides/slides.scss
#	src/components/slides/slides.ts
#	src/components/toggle/toggle.ios.scss
#	src/components/toggle/toggle.ts
#	src/themes/ionic.mixins.scss
This commit is contained in:
Brandy Carney
2017-06-12 13:33:33 -04:00
parent 11f48cba26 3e0d43e7dc
commit 4cd5834cfd
195 changed files with 2991 additions and 1421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.github/CONTRIBUTING.md vendored
View File

@ -5,7 +5,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
## Contributing Etiquette
Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
## Creating an Issue
@ -18,16 +18,16 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs reply" and receives no further replies from the author of the issue for more than 5 days, it will be closed.
* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
* Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
* Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
## Creating a Pull Request
* We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
### Setup
@ -85,9 +85,9 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
```
where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder.
2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build
2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/ionic-team/ionic-site#local-build
3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update.
4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues
#### Adding Demos
@ -106,12 +106,12 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
```
3. Run `gulp watch.demos` to watch for changes to the demo
4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it.
5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues
## Commit Message Format
We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
`type(scope): subject`
@ -143,4 +143,4 @@ The subject contains succinct description of the change:
## License
By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license.
By contributing your code to the ionic-team/ionic GitHub Repository, you agree to license your contribution under the MIT license.

2
.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,5 +1,5 @@
**Ionic version:** (check one with "x")
[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] **2.x**
[ ] **3.x**

2
.scss-lint.yml
View File

@ -17,7 +17,7 @@ linters:
enabled: false
DefaultRule:
enabled: false
enabled: true
DuplicateProperty:
enabled: false

18
.scss-linters/default_rule.rb Normal file
View File

@ -0,0 +1,18 @@
module SCSSLint
# Reports the use of !default at the end of variable declarations.
class Linter::DefaultRule < Linter
include LinterRegistry
def visit_function(node)
return true
end
def visit_variable(node)
return if source_from_range(node.source_range).include?('!default')
return unless node_ancestor(node, 2).nil?
add_lint(node, '!default should be used')
end
end
end

1498
CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

4
demos/src/button/pages/page-one/page-one.html
View File

@ -39,12 +39,12 @@
<h4>Icons</h4>
<button ion-button icon-left color="dark">
<button ion-button icon-start color="dark">
<ion-icon name="star"></ion-icon>
Left Icon
</button>
<button ion-button icon-right color="dark">
<button ion-button icon-end color="dark">
Right Icon
<ion-icon name="star"></ion-icon>
</button>

6
demos/src/item-sliding/pages/page-one/page-one.html
View File

@ -67,7 +67,7 @@
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
<ion-item-options (ionSwipe)="download(item)" icon-left>
<ion-item-options (ionSwipe)="download(item)" icon-start>
<button ion-button color="dark" (click)="more(item)">
<ion-icon name="volume-off"></ion-icon>
Mute
@ -85,7 +85,7 @@
</ion-content>
<style>
/* TODO: spinner is dropping classes so we have to use ids: https://github.com/driftyco/ionic/issues/7087 */
/* TODO: spinner is dropping classes so we have to use ids: https://github.com/ionic-team/ionic/issues/7087 */
#archive-spinner,
#download-spinner,
.archiving .expand-hide,
@ -93,7 +93,7 @@
display: none;
}
/* TODO: spinner doesn't have a good way to do this yet: https://github.com/driftyco/ionic/issues/7087 */
/* TODO: spinner doesn't have a good way to do this yet: https://github.com/ionic-team/ionic/issues/7087 */
#archive-spinner.spinner-ios line,
#archive-spinner.spinner-crescent circle {
stroke: #fff;

2
demos/src/loading/pages/page-one/page-one.html
View File

@ -58,7 +58,7 @@
<ion-toolbar>
<ion-buttons end>
<button ion-button icon-right (click)="goToPage2()">
<button ion-button icon-end (click)="goToPage2()">
Show Loading and Navigate
<ion-icon name="arrow-forward"></ion-icon>
</button>

4
demos/src/navbar/pages/page-one/page-one.html
View File

@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>

4
demos/src/tabs/pages/page-one/page-one.html
View File

@ -41,7 +41,7 @@
<!-- Icons right of text -->
<ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
<ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@ -49,7 +49,7 @@
<!-- Icons left of text -->
<ion-tabs tabs-only tabsLayout="icon-left" color="dark">
<ion-tabs tabs-only tabsLayout="icon-start" color="dark">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

4
demos/src/title/pages/page-one/page-one.html
View File

@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>

4
demos/src/toolbar/pages/page-one/page-one.html
View File

@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>

16
scripts/README.md
View File

@ -7,7 +7,7 @@ All of these commands require you to run `npm install` first. To see a full list
### Committing
Please follow the commit message format in [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
Please follow the commit message format in [CONTRIBUTING.md](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
### Installing Nightly Version
@ -110,6 +110,12 @@ It does not work for windows, linux, or non retina macs.
- `--dev` runs a dev build when building the e2e tests. This build takes much less time than a production build, so it is advisable to use this when doing quick validation.
#### Errors
If you are having getting an error running snapshot such as `SessionNotCreatedError: session not created exception` or `UnknownError: Connection refused` the solution is to download the chromedriver from here: http://chromedriver.storage.googleapis.com/index.html?path=2.24/ and then move it into your `protractor/selenium` folder
Running `webdriver-manager help` should show you what directory the webdriver is at under the options. For example, yours may be at `/usr/local/lib/node_modules/protractor/selenium` or if you use nvm `/Users/{username}/.nvm/versions/node/v7.5.0/lib/node_modules/protractor/selenium`.
### Running Tests
1. `gulp validate`
@ -119,7 +125,7 @@ It does not work for windows, linux, or non retina macs.
**Requires Ruby. Skip this step entirely if you are unable to install Ruby.**
1. See the [Sass Guidelines](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
1. See the [Sass Guidelines](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
2. Install the linter: `gem install scss_lint`
3. Run `gulp lint.sass` and fix any linter errors.
@ -160,13 +166,13 @@ It does not work for windows, linux, or non retina macs.
### Releasing Component Demos
Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/driftyco/ionic-preview-app). No action is necessary.
Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/ionic-team/ionic-preview-app). No action is necessary.
If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/driftyco/ionic-preview-app#running-locally-on-the-site).
If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/ionic-team/ionic-preview-app#running-locally-on-the-site).
### Releasing API Demos
Ionic API demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit. No action is necessary.
If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/driftyco/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.
If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/ionic-team/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.

4
scripts/demos/copy.config.js
View File

@ -4,7 +4,7 @@ var path = require('path');
module.exports = {
copyAssets: {
src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
dest: '{{WWW}}/assets'
dest: path.join('{{WWW}}', 'assets')
},
copyIndexContent: {
src: [path.join(process.cwd(), 'scripts', 'demos', 'index.html')],
@ -12,7 +12,7 @@ module.exports = {
},
copyFonts: {
src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
dest: '{{WWW}}/assets/fonts'
dest: path.join('{{WWW}}', 'assets', 'fonts')
},
copyPolyfills: {
src: [path.join(process.cwd(), 'dist', 'demos', 'polyfills', 'polyfills.js')],

4
scripts/demos/watch.config.js
View File

@ -1,6 +1,6 @@
var path = require('path');
var watch = require('../../node_modules/@ionic/app-scripts/dist/watch');
var watch = require(path.join('..', '..', 'node_modules', '@ionic', 'app-scripts', 'dist', 'watch'));
var entryPointDirectory = path.dirname(process.env.IONIC_APP_ENTRY_POINT)
@ -9,7 +9,7 @@ module.exports = {
paths: [path.join(entryPointDirectory, '..', '**', '*.(ts|html|s(c|a)ss)')],
options: { ignored: [path.join(entryPointDirectory, '..', '**', '*.spec.ts'),
path.join(entryPointDirectory, '..', '**', '*.e2e.ts'),
'**/*.DS_Store'] },
path.join('**', '*.DS_Store')] },
callback: watch.buildUpdate
}
}

4
scripts/docs/deploy.sh
View File

@ -63,10 +63,10 @@ function run {
# if no changes, don't commit
if [[ "$CHANGES" == "" ]]; then
echo "-- No changes detected for the following commit, docs not updated."
echo "https://github.com/driftyco/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
echo "https://github.com/ionic-team/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
else
git add -A
git commit -am "Automated build of ionic v$VERSION driftyco/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
git commit -am "Automated build of ionic v$VERSION ionic-team/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
# in case a different commit was pushed to ionic-site during doc/demo gen,
# try to rebase around it before pushing
git fetch

4
scripts/docs/gulp-tasks.js
View File

@ -87,8 +87,8 @@ module.exports = function(gulp, flags) {
}));
callback();
}).on('end', function() {
gutil.log("Writing to file at", gutil.colors.cyan("/driftyco/ionic/" + outputFile));
gutil.log("Place this file in", gutil.colors.cyan("/driftyco/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
gutil.log("Writing to file at", gutil.colors.cyan("/ionic-team/ionic/" + outputFile));
gutil.log("Place this file in", gutil.colors.cyan("/ionic-team/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
mkdirp.sync('tmp');
fs.writeFileSync(outputFile, JSON.stringify(variables));
}));

2
scripts/docs/templates/common.template.html vendored
View File

@ -225,7 +225,7 @@ Delegate: <$ doc.delegate $>
</h1>
<a class="improve-v2-docs" href="http://github.com/driftyco/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
<a class="improve-v2-docs" href="http://github.com/ionic-team/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
Improve this doc
</a>

6
scripts/e2e/copy.config.js
View File

@ -4,15 +4,15 @@ var path = require('path');
module.exports = {
copyAssets: {
src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
dest: '{{WWW}}/assets'
dest: path.join('{{WWW}}', 'assets')
},
copyIndexContent: {
src: [path.join(process.cwd(), 'scripts', 'e2e', 'index.html')],
dest: '{{WWW}}'
},
copyFonts: {
src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
dest: '{{WWW}}/assets/fonts'
src: [path.join(process.cwd(), 'node_modules', 'ionicons', 'dist', 'fonts', '**', '*'), path.join(process.cwd(), 'src', 'fonts', '**', '*')],
dest: path.join('{{WWW}}', 'assets', 'fonts')
},
copyPolyfills: {
src: [path.join(process.cwd(), 'dist', 'e2e', 'polyfills', 'polyfills.ng.js')],

10
scripts/e2e/e2e-publish.js
View File

@ -4,7 +4,7 @@ module.exports = function(options) {
var fs = require('fs');
var path = require('path');
var request = require('request');
var inputDir = path.join(__dirname, '../../dist/e2e/tests');
var inputDir = path.join(__dirname, '..', '..' , 'dist', 'e2e', 'tests');
var uploadQueue = [];
var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
@ -13,15 +13,15 @@ module.exports = function(options) {
fs.readdir(dir, function(err, list) {
list.forEach(function(file) {
var url = urlPath + '/' + file;
var url = path.join(urlPath, file);
fs.stat(dir + '/' + file, function(err, stat) {
fs.stat(path.join(dir, file), function(err, stat) {
if (stat && stat.isDirectory()) {
uploadFiles(dir + '/' + file, urlPath + '/' + file);
uploadFiles(path.join(dir, file), path.join(urlPath, file);
} else {
if ( shouldProcessPath (url) ){
uploadFile(url, dir + '/' + file);
uploadFile(url, path.join(dir, file));
}
}
});

10
scripts/e2e/variables.scss
View File

@ -31,7 +31,15 @@ $colors: (
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
bright: #ffc125
bright: #ffc125,
greyYellow: (
base:#49606e,
contrast:#fbb636
),
greyWhite: (
base:#49606e,
contrast:#fff
)
);

2
scripts/git/clone.sh
View File

@ -17,7 +17,7 @@ function run {
git config --global user.email "hi@ionicframework.com"
git config --global user.name "Ionitron"
git clone git@github.com:driftyco/$REPOSITORY.git $DIRECTORY $ARGS
git clone git@github.com:ionic-team/$REPOSITORY.git $DIRECTORY $ARGS
cd $DIRECTORY
git fetch origin --tags
cd ../

4
scripts/gulp/constants.ts
View File

@ -20,7 +20,7 @@ export const BUNDLES = 'bundles';
export const SITE_NAME = 'ionic-site';
// File Paths
export const PROJECT_ROOT = join(__dirname, '../..');
export const PROJECT_ROOT = join(__dirname, '..', '..');
export const DEMOS_ROOT = join(PROJECT_ROOT, DEMOS_NAME);
export const DEMOS_SRC_ROOT = join(DEMOS_ROOT, SRC_NAME);
export const DIST_ROOT = join(PROJECT_ROOT, DIST_NAME);
@ -45,7 +45,7 @@ export const WORKERS_SRC = join(SCRIPTS_ROOT, 'workers');
// NPM
export const NPM_VENDOR_FILES = [
'@angular', 'core-js/client', 'rxjs', 'systemjs/dist', 'zone.js/dist'
'@angular', join('core-js', 'client'), 'rxjs', join('systemjs', 'dist'), join('zone.js', 'dist')
];

17
scripts/gulp/tasks/build.ts
View File

@ -1,4 +1,5 @@
import { task } from 'gulp';
import { join } from 'path';
import { DIST_BUILD_ROOT, DIST_BUILD_ES2015_ROOT, DIST_BUILD_UMD_ROOT, ES5, ES_2015, PROJECT_ROOT, UMD_MODULE } from '../constants';
import { copySourceToDest, createTempTsConfig, deleteFiles, runNgc, runTsc } from '../util';
@ -7,8 +8,8 @@ export function buildIonicAngularUmd(excludeSpec: boolean, stripDebug: boolean,
const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
stream.on('end', () => {
// the source files are copied, copy over a tsconfig from
createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
runNgc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
runNgc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
if (err) {
done(err);
return;
@ -27,8 +28,8 @@ export function buildIonicAngularUmdTsc(excludeSpec: boolean, stripDebug: boolea
const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
stream.on('end', () => {
// the source files are copied, copy over a tsconfig from
createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
runTsc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
runTsc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
if (err) {
done(err);
return;
@ -48,8 +49,8 @@ export function buildIonicAngularEsm(stripDebug: boolean, done: Function) {
const stream = copySourceToDest(DIST_BUILD_ROOT, true, true, stripDebug);
stream.on('end', () => {
// the source files are copied, copy over a tsconfig from
createTempTsConfig(['./**/*.ts'], ES5, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ROOT}/tsconfig.json`);
runNgc(`${DIST_BUILD_ROOT}/tsconfig.json`, (err) => {
createTempTsConfig([join('.', '**', '*.ts')], ES5, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ROOT, 'tsconfig.json'));
runNgc(join(DIST_BUILD_ROOT, 'tsconfig.json'), (err) => {
if (err) {
done(err);
return;
@ -67,8 +68,8 @@ export function buildIonicPureEs6(stripDebug: boolean, done: Function) {
const stream = copySourceToDest(DIST_BUILD_ES2015_ROOT, true, true, stripDebug);
stream.on('end', () => {
// the source files are copied, copy over a tsconfig from
createTempTsConfig(['./**/*.ts'], ES_2015, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ES2015_ROOT}/tsconfig.json`);
runNgc(`${DIST_BUILD_ES2015_ROOT}/tsconfig.json`, (err) => {
createTempTsConfig([join('.', '**', '*.ts')], ES_2015, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'));
runNgc(join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'), (err) => {
if (err) {
done(err);
return;

4
scripts/gulp/tasks/docs.ts
View File

@ -132,8 +132,8 @@ task('docs.sassVariables', () => {
callback();
}).on('end', () => {
const config = require('../../config.json');
console.log(`Writing to file at /driftyco/ionic/${outputFile}`);
console.log(`Place this file in /driftyco/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
console.log(`Writing to file at /ionic-team/ionic/${outputFile}`);
console.log(`Place this file in /ionic-team/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
mkdirp.sync('tmp');
writeFileSync(outputFile, JSON.stringify(variables));
}));

2
scripts/gulp/tasks/e2e.dev.ts
View File

@ -49,5 +49,5 @@ function serveTest(folderInfo: any) {
const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts');
const distDir = join(distTestRoot, 'www');
return runAppScriptsServe(testOrDemoName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, coreCompilerFilePath, coreDir, sassConfigPath, copyConfigPath, null);
return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
}

19
scripts/gulp/tasks/e2e.prod.ts
View File

@ -21,7 +21,7 @@ task('e2e.prepare', (done: Function) => {
task('e2e.prepareSass', (done: Function) => {
const version = `E2E-${createTimestamp()}`;
writeFileSync(join(SRC_ROOT, 'themes/version.scss'), `$ionic-version: "${version}";`);
writeFileSync(join(SRC_ROOT, 'themes', 'version.scss'), `$ionic-version: "${version}";`);
done();
});
@ -41,7 +41,7 @@ task('e2e.prod', ['e2e.prepare', 'core'], (done: Function) => {
});
function e2eComponentExists(folderInfo: any): boolean {
let componentPath = `${SRC_COMPONENTS_ROOT}/${folderInfo.componentName}/test/${folderInfo.componentTest}/app`;
let componentPath = join(SRC_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'app');
try {
accessSync(componentPath);
@ -62,11 +62,11 @@ function filterE2eTestfiles() {
const folderInfo = getFolderInfo();
if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
if (!e2eComponentExists(folderInfo)) {
console.log(`Can't find E2E test "${folderInfo.componentName}/test/${folderInfo.componentTest}". Make sure that the test exists and you are passing the correct folder.`);
console.log('Cannot find E2E test ', join(folderInfo.componentName, 'test', folderInfo.componentTest), '. Make sure that the test exists and you are passing the correct folder.');
return [];
}
const filtered = entryPoints.filter(entryPoint => {
return entryPoint.indexOf(`${folderInfo.componentName}/test/${folderInfo.componentTest}`) >= 0;
return entryPoint.indexOf(join(folderInfo.componentName, 'test', folderInfo.componentTest)) >= 0;
});
return filtered;
}
@ -123,7 +123,7 @@ function buildTest(filePath: string) {
const coreCompilerFilePath = join(PROJECT_ROOT, '..', 'ionic-core', 'dist', 'compiler');
const coreDir = join(PROJECT_ROOT, '..', 'ionic-core', 'dist', 'compiled-ionic-angular');
const includeGlob = [ join(ionicAngularDir, '**', '*.ts')];
const includeGlob = [join(ionicAngularDir, '**', '*.ts')];
const pathToWriteFile = join(distTestRoot, 'tsconfig.json');
const pathToReadFile = join(PROJECT_ROOT, 'tsconfig.json');
@ -156,7 +156,7 @@ function copyProtractorTestContent(filePaths: string[]): Promise<any> {
}
function applyTemplate(filePathContent: Map<string, string>) {
const buildConfig = require('../../build/config');
const buildConfig = require(join('..', '..', 'build', 'config'));
const templateFileContent = readFileSync(join(SCRIPTS_ROOT, 'e2e', 'e2e.template.js'));
const templater = template(templateFileContent.toString());
const modifiedMap = new Map<string, string>();
@ -237,7 +237,7 @@ task('e2e.polyfill', (done: Function) => {
return done();
}
writePolyfills('dist/e2e/polyfills').then(() => {
writePolyfills(join('dist', 'e2e', 'polyfills')).then(() => {
done();
}).catch(err => {
done(err);
@ -251,9 +251,8 @@ task('e2e.openProd', (done: Function) => {
task('e2e.open', (done: Function) => {
const folderInfo = getFolderInfo();
if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
const filePath = `${folderInfo.componentName}/test/${folderInfo.componentTest}/www/index.html`;
const fullPath = join(DIST_E2E_COMPONENTS_ROOT, filePath);
const spawnedCommand = spawn('open', [fullPath]);
const filePath = join(DIST_E2E_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'www', 'index.html');
const spawnedCommand = spawn('open', [filePath]);
spawnedCommand.on('close', (code: number) => {
done();

3
scripts/gulp/tasks/polyfill.source.ts
View File

@ -1,9 +1,10 @@
import { task } from 'gulp';
import { writePolyfills } from '../util';
import { join } from 'path';
task('src.polyfill', (done: Function) => {
writePolyfills('scripts/polyfill').then(() => {
writePolyfills(join('scripts', 'polyfills')).then(() => {
done();
}).catch(err => {
done(err);

7
scripts/gulp/tasks/polyfill.ts
View File

@ -1,10 +1,11 @@
import { task, src, dest } from 'gulp';
import { writePolyfills } from '../util';
import { join } from 'path';
task('polyfill', ['polyfill.copy-readme', 'polyfill.write']);
task('polyfill.write', (done: Function) => {
writePolyfills('dist/ionic-angular/polyfills').then(() => {
writePolyfills(join('dist', 'ionic-angular', 'polyfills')).then(() => {
done();
}).catch(err => {
done(err);
@ -12,6 +13,6 @@ task('polyfill.write', (done: Function) => {
});
task('polyfill.copy-readme', (done: Function) => {
return src('scripts/polyfill/readme.md')
.pipe(dest('dist/ionic-angular/polyfills/'), done);
return src(join('scripts', 'polyfill', 'readme.md'))
.pipe(dest(join('dist', 'ionic-angular', 'polyfills')), done);
});

2
scripts/gulp/tasks/release.ts
View File

@ -86,7 +86,7 @@ task('release.publishGithubRelease', (done: Function) => {
})
.pipe(obj(function(file, enc, cb){
github.releases.createRelease({
owner: 'driftyco',
owner: 'ionic-team',
repo: 'ionic',
target_commitish: 'master',
tag_name: 'v' + packageJSON.version,

4
scripts/gulp/tasks/snapshot.ts
View File

@ -77,7 +77,9 @@ function protractor(callback, args, testId: string) {
console.log(`Serving ${process.cwd()} on http://localhost:${buildConfig.protractorPort}`);
const child = spawn('protractor', args, {
let spawnCommand = process.platform === 'win32' ? 'protractor.cmd' : 'protractor';
const child = spawn(spawnCommand, args, {
stdio: [process.stdin, process.stdout, 'pipe']
});

10
scripts/gulp/util.ts
View File

@ -79,7 +79,9 @@ export function createTempTsConfig(includeGlob: string[], target: string, module
config.compilerOptions = Object.assign(config.compilerOptions, overrideCompileOptions);
}
// TS represents paths internally with '/' and expects the tsconfig path to be in this format
let json = JSON.stringify(config, null, 2);
json = json.replace(/\\\\/g, '/');
const dirToCreate = dirname(pathToWriteFile);
ensureDirSync(dirToCreate);
@ -238,9 +240,11 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
}
return new Promise((resolve, reject) => {
const args = ['./node_modules/.bin/ionic-app-scripts'].concat(scriptArgs);
console.log(`node ${args.join(' ')}`);
const spawnedCommand = spawn('node', args, {stdio: 'inherit'});
let pathToAppScripts = join(NODE_MODULES_ROOT, '.bin', 'ionic-app-scripts');
pathToAppScripts = process.platform === 'win32' ? pathToAppScripts + '.cmd' : pathToAppScripts;
const spawnedCommand = spawn(pathToAppScripts, scriptArgs, {stdio: 'inherit'});
console.log(`${pathToAppScripts} ${scriptArgs.join(' ')}`);
spawnedCommand.on('close', (code: number) => {
if (code === 0) {

2
scripts/npm/package.json
View File

@ -5,7 +5,7 @@
"keywords": [],
"repository": {
"type": "git",
"url": "https://github.com/driftyco/ionic.git"
"url": "https://github.com/ionic-team/ionic.git"
},
"license": "MIT",
"main": "umd/index.js",

2
scripts/polyfill/readme.md
View File

@ -38,7 +38,7 @@ weak maps / weak sets
## polyfills.ng.js
Only the required polyfill for Angular 2. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular 2 to work correctly.
Only the required polyfill for Angular. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular to work correctly.
### Targets:

4
scripts/templates/component/module.ts.tmpl
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { IonicModule } from 'ionic-angular';
import { $CLASSNAME } from './$FILENAME';
@NgModule({
@ -7,7 +7,7 @@ import { $CLASSNAME } from './$FILENAME';
$CLASSNAME,
],
imports: [
IonicPageModule.forChild($CLASSNAME),
IonicModule,
],
exports: [
$CLASSNAME

2
scripts/templates/provider/ts.tmpl
View File

@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
Generated class for the $CLASSNAME provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
for more info on providers and Angular DI.
*/
@Injectable()
export class $CLASSNAME {

6
src/components/action-sheet/action-sheet-component.ts
View File

@ -22,13 +22,13 @@ import { ViewController } from '../../navigation/view-controller';
'<div class="action-sheet-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<ion-button type="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
'<ion-button type="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
'{{b.text}}' +
'</ion-button>' +
'</div>' +
'<div class="action-sheet-group" *ngIf="d.cancelButton">' +
'<ion-button type="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
'<div class="action-sheet-group" *ngIf="cancelButton">' +
'<ion-button type="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
'<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
'{{cancelButton.text}}' +
'</ion-button>' +

7
src/components/action-sheet/action-sheet.ios.scss
View File

@ -97,16 +97,15 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
.action-sheet-ios .action-sheet-group {
@include border-radius($action-sheet-ios-border-radius);
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
overflow: hidden;
margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
background: $action-sheet-ios-background;
}
.action-sheet-ios .action-sheet-group:last-child {
margin-bottom: $action-sheet-ios-group-margin-bottom;
@include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
}
.action-sheet-ios .action-sheet-title {
@ -137,7 +136,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
}
.action-sheet-ios .action-sheet-button.activated {
margin-top: -$action-sheet-ios-button-border-width;
@include margin(-$action-sheet-ios-button-border-width, null, null, null);
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
border-bottom-color: $action-sheet-ios-button-background-activated;

3
src/components/action-sheet/action-sheet.scss
View File

@ -24,6 +24,7 @@ ion-action-sheet {
.action-sheet-wrapper {
@include position(null, 0, 0, 0);
@include margin(auto);
@include transform(translate3d(0, 100%, 0));
position: absolute;
z-index: $z-index-overlay-wrapper;
@ -31,8 +32,6 @@ ion-action-sheet {
width: $action-sheet-width;
max-width: $action-sheet-max-width;
transform: translate3d(0, 100%, 0);
}
.action-sheet-button {

5
src/components/alert/alert-component.ts
View File

@ -316,6 +316,11 @@ export class AlertCmp {
return this.d.inputs.filter(i => i.checked).map(i => i.value);
}
if (this.d.inputs.length === 0) {
// this is an alert without any options/inputs at all
return undefined;
}
// this is an alert with text inputs
// return an object of all the values with the input name as the key
const values: {[k: string]: string} = {};

14
src/components/alert/alert.ios.scss
View File

@ -193,8 +193,10 @@ $alert-ios-radio-min-width: 30px !default;
/// @prop - Top of the icon in the radio alert
$alert-ios-radio-icon-top: -7px !default;
/// @prop - Left of the icon in the radio alert
// deprecated
$alert-ios-radio-icon-left: 7px !default;
/// @prop - Start of the icon in the radio alert
$alert-ios-radio-icon-start: $alert-ios-radio-icon-left !default;
/// @prop - Width of the icon in the radio alert
$alert-ios-radio-icon-width: 6px !default;
@ -277,8 +279,10 @@ $alert-ios-checkbox-background-color-on: color($colors-ios, primary) !def
/// @prop - Top of the icon in the checkbox alert
$alert-ios-checkbox-icon-top: 4px !default;
/// @prop - Left of the icon in the checkbox alert
// deprecated
$alert-ios-checkbox-icon-left: 7px !default;
/// @prop - Start of the icon in the checkbox alert
$alert-ios-checkbox-icon-start: $alert-ios-checkbox-icon-left !default;
/// @prop - Width of the icon in the checkbox alert
$alert-ios-checkbox-icon-width: 4px !default;
@ -324,7 +328,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
}
.alert-ios .alert-title {
margin-top: $alert-ios-title-margin-top;
@include margin($alert-ios-title-margin-top, null, null, null);
font-size: $alert-ios-title-font-size;
font-weight: $alert-ios-title-font-weight;
@ -446,7 +450,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
// -----------------------------------------
.alert-ios [aria-checked=true] .alert-radio-inner {
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left);
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
position: absolute;
@ -519,7 +523,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
// -----------------------------------------
.alert-ios [aria-checked=true] .alert-checkbox-inner {
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left);
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
position: absolute;

16
src/components/alert/alert.md.scss
View File

@ -117,7 +117,7 @@ $alert-md-input-margin-bottom: 5px !default;
// deprecated
$alert-md-input-margin-left: 0 !default;
/// @prop - Margin start of the alert input
$alert-md-input-margin-start: $alert-md-input-margin-left;
$alert-md-input-margin-start: $alert-md-input-margin-left !default;
/// @prop - Flex wrap of the alert button group
$alert-md-button-group-flex-wrap: wrap-reverse !default;
@ -249,8 +249,10 @@ $alert-md-radio-border-color-on: $alert-md-button-text-color !defau
/// @prop - Top of the icon in the alert radio
$alert-md-radio-icon-top: 2px !default;
/// @prop - Left of the icon in the alert radio
// deprecated
$alert-md-radio-icon-left: 2px !default;
/// @prop - Start of the icon in the radio alert
$alert-md-radio-icon-start: $alert-md-radio-icon-left !default;
/// @prop - Width of the icon in the alert radio
$alert-md-radio-icon-width: 8px !default;
@ -323,8 +325,10 @@ $alert-md-checkbox-border-color-on: $alert-md-button-text-color !defau
/// @prop - Top of the icon in the checkbox alert
$alert-md-checkbox-icon-top: 0 !default;
/// @prop - Left of the icon in the checkbox alert
// deprecated
$alert-md-checkbox-icon-left: 3px !default;
/// @prop - Start of the icon in the checkbox alert
$alert-md-checkbox-icon-start: $alert-md-checkbox-icon-left !default;
/// @prop - Width of the icon in the checkbox alert
$alert-md-checkbox-icon-width: 6px !default;
@ -410,7 +414,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
}
.alert-md .alert-input:focus {
margin-bottom: $alert-md-input-margin-bottom - 1;
@include margin(null, null, $alert-md-input-margin-bottom - 1, null);
border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
}
@ -481,7 +485,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
// ---------------------------------------------------
.alert-md .alert-radio-inner {
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left);
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
@include border-radius($alert-md-radio-icon-border-radius);
position: absolute;
@ -559,7 +563,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
}
.alert-md [aria-checked=true] .alert-checkbox-inner {
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left);
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
position: absolute;

4
src/components/alert/alert.scss
View File

@ -35,9 +35,9 @@ ion-alert {
}
ion-alert.alert-top {
align-items: flex-start;
@include padding(50px, null, null, null);
padding-top: 50px;
align-items: flex-start;
}
ion-alert input {

14
src/components/alert/alert.wp.scss
View File

@ -262,8 +262,10 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
/// @prop - Top of the icon in the radio alert
$alert-wp-radio-icon-top: 2px !default;
/// @prop - Left of the icon in the radio alert
// deprecated
$alert-wp-radio-icon-left: 2px !default;
/// @prop - Start of the icon in the radio alert
$alert-wp-radio-icon-start: $alert-wp-radio-icon-left !default;
/// @prop - Width of the icon in the radio alert
$alert-wp-radio-icon-width: 8px !default;
@ -328,8 +330,10 @@ $alert-wp-checkbox-background-on: color($colors-wp, primary) !defau
/// @prop - Top of the icon in the checkbox alert
$alert-wp-checkbox-icon-top: -2px !default;
/// @prop - Left of the icon in the checkbox alert
// deprecated
$alert-wp-checkbox-icon-left: 3px !default;
/// @prop - Start of the icon in the checkbox alert
$alert-wp-checkbox-icon-start: $alert-wp-checkbox-icon-left !default;
/// @prop - Width of the icon in the checkbox alert
$alert-wp-checkbox-icon-width: 6px !default;
@ -495,7 +499,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// ---------------------------------------------------
.alert-wp .alert-radio-inner {
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left);
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
@include border-radius($alert-wp-radio-icon-border-radius);
position: absolute;
@ -575,7 +579,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// --------------------------------------------------
.alert-wp [aria-checked=true] .alert-checkbox-inner {
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left);
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
position: absolute;
@ -604,7 +608,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
}
.alert-wp .alert-button-group-vertical .alert-button {
margin-top: $alert-wp-button-group-vertical-margin-top;
@include margin($alert-wp-button-group-vertical-margin-top, null, null, null);
width: $alert-wp-button-group-vertical-width;
}

31
src/components/app/app.scss
View File

@ -145,8 +145,7 @@ h3,
h4,
h5,
h6 {
margin-top: 1.6rem;
margin-bottom: 1rem;
@include margin(1.6rem, null, 1rem, null);
font-weight: $headings-font-weight;
line-height: $headings-line-height;
@ -160,7 +159,7 @@ h6 {
h5,
h6 {
&:first-child {
margin-top: -.3rem;
@include margin(-.3rem, null, null, null);
}
}
}
@ -168,17 +167,17 @@ h6 {
h1 + h2,
h1 + h3,
h2 + h3 {
margin-top: -.3rem;
@include margin(-.3rem, null, null, null);
}
h1 {
margin-top: 2rem;
@include margin(2rem, null, null, null);
font-size: $h1-font-size;
}
h2 {
margin-top: 1.8rem;
@include margin(1.8rem, null, null, null);
font-size: $h2-font-size;
}
@ -412,31 +411,19 @@ ion-footer {
// Provide `[float-{bp}]` attributes for floating the element based
// on the breakpoint
[float#{$infix}-left] {
// scss-lint:disable ImportantRule, PropertySpelling
float: left !important;
@include float(left, !important);
}
[float#{$infix}-right] {
// scss-lint:disable ImportantRule, PropertySpelling
float: right !important;
@include float(right, !important);
}
[float#{$infix}-start] {
// scss-lint:disable ImportantRule, PropertySpelling
float: left !important;
@include rtl() {
float: right !important;
}
@include float(start, !important);
}
[float#{$infix}-end] {
// scss-lint:disable ImportantRule, PropertySpelling
float: right !important;
@include rtl() {
float: left !important;
}
@include float(end, !important);
}
}
}

4
src/components/app/menu-controller.ts
View File

@ -6,7 +6,7 @@ import { removeArrayItem, assert } from '../../util/util';
/**
* @name MenuController
* @description
* The MenuController is a provider which makes it easy to control a [Menu](../Menu).
* The MenuController is a provider which makes it easy to control a [Menu](../../Menu/Menu/).
* Its methods can be used to display the menu, enable the menu, toggle the menu, and more.
* The controller will grab a reference to the menu by the `side`, `id`, or, if neither
* of these are passed to it, it will grab the first menu it finds.
@ -14,7 +14,7 @@ import { removeArrayItem, assert } from '../../util/util';
*
* @usage
*
* Add a basic menu component to start with. See the [Menu](../Menu) API docs
* Add a basic menu component to start with. See the [Menu](../../Menu/Menu/) API docs
* for more information on adding menu components.
*
* ```html

60
src/components/app/test/utilities/pages/root-page/root-page.html
View File

@ -60,51 +60,51 @@
</ion-row>
<div class="float-elements-row">
<div pull-left>pull-left</div>
<div pull-sm-left>pull-sm-left</div>
<div pull-md-left>pull-md-left</div>
<div pull-lg-left>pull-lg-left</div>
<div pull-xl-left>pull-xl-left</div>
<div float-left>float-left</div>
<div float-sm-left>float-sm-left</div>
<div float-md-left>float-md-left</div>
<div float-lg-left>float-lg-left</div>
<div float-xl-left>float-xl-left</div>
</div>
<div class="float-elements-row">
<div pull-right>pull-right</div>
<div pull-sm-right>pull-sm-right</div>
<div pull-md-right>pull-md-right</div>
<div pull-lg-right>pull-lg-right</div>
<div pull-xl-right>pull-xl-right</div>
<div float-right>float-right</div>
<div float-sm-right>float-sm-right</div>
<div float-md-right>float-md-right</div>
<div float-lg-right>float-lg-right</div>
<div float-xl-right>float-xl-right</div>
</div>
<div class="float-elements-row">
<div pull-start>pull-start</div>
<div pull-sm-start>pull-sm-start</div>
<div pull-md-start>pull-md-start</div>
<div pull-lg-start>pull-lg-start</div>
<div pull-xl-start>pull-xl-start</div>
<div float-start>float-start</div>
<div float-sm-start>float-sm-start</div>
<div float-md-start>float-md-start</div>
<div float-lg-start>float-lg-start</div>
<div float-xl-start>float-xl-start</div>
</div>
<div class="float-elements-row">
<div pull-end>pull-end</div>
<div pull-sm-end>pull-sm-end</div>
<div pull-md-end>pull-md-end</div>
<div pull-lg-end>pull-lg-end</div>
<div pull-xl-end>pull-xl-end</div>
<div float-end>float-end</div>
<div float-sm-end>float-sm-end</div>
<div float-md-end>float-md-end</div>
<div float-lg-end>float-lg-end</div>
<div float-xl-end>float-xl-end</div>
</div>
<div class="float-elements-row" dir="rtl">
<div pull-start>pull-start</div>
<div pull-sm-start>pull-sm-start</div>
<div pull-md-start>pull-md-start</div>
<div pull-lg-start>pull-lg-start</div>
<div pull-xl-start>pull-xl-start</div>
<div float-start>float-start</div>
<div float-sm-start>float-sm-start</div>
<div float-md-start>float-md-start</div>
<div float-lg-start>float-lg-start</div>
<div float-xl-start>float-xl-start</div>
</div>
<div class="float-elements-row" dir="rtl">
<div pull-end>pull-end</div>
<div pull-sm-end>pull-sm-end</div>
<div pull-md-end>pull-md-end</div>
<div pull-lg-end>pull-lg-end</div>
<div pull-xl-end>pull-xl-end</div>
<div float-end>float-end</div>
<div float-sm-end>float-sm-end</div>
<div float-md-end>float-md-end</div>
<div float-lg-end>float-lg-end</div>
<div float-xl-end>float-xl-end</div>
</div>
</ion-content>

6
src/components/button/button-icon.scss
View File

@ -11,13 +11,15 @@
pointer-events: none;
}
[icon-left] ion-icon {
[icon-left] ion-icon, // deprecated
[icon-start] ion-icon {
@include button-icon;
@include padding-horizontal(null, .3em);
}
[icon-right] ion-icon {
[icon-right] ion-icon, // deprecated
[icon-end] ion-icon {
@include button-icon;
@include padding-horizontal(.4em, null);

10
src/components/button/button.md.scss
View File

@ -470,8 +470,8 @@ $button-md-strong-font-weight: bold !default;
// it's display none, and .md sets to display block.
.button-effect {
@include position(0, null, null, 0);
@include border-radius(50%);
@include transform-origin(center, center);
position: absolute;
z-index: 0;
@ -480,10 +480,16 @@ $button-md-strong-font-weight: bold !default;
background-color: $button-md-ripple-background-color;
opacity: .2;
transform-origin: center center;
transition-timing-function: ease-in-out;
pointer-events: none;
@include multi-dir() {
// scss-lint:disable PropertySpelling
top: 0;
left: 0;
}
}
.md .button-effect {

4
src/components/button/button.ts
View File

@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util';
* <button ion-button round outline>Outline + Round</button>
*
* <!-- Icons -->
* <button ion-button icon-left>
* <button ion-button icon-start>
* <ion-icon name="star"></ion-icon>
* Left Icon
* </button>
*
* <button ion-button icon-right>
* <button ion-button icon-end>
* Right Icon
* <ion-icon name="star"></ion-icon>
* </button>

4
src/components/button/test/block/pages/page-one/page-one.html
View File

@ -15,8 +15,8 @@
</p>
<p>
<a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
<button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
<a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
<button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
</p>
<p>

4
src/components/button/test/full/pages/page-one/page-one.html
View File

@ -15,11 +15,11 @@
</p>
<p>
<a ion-button full href="#" icon-left>
<a ion-button full href="#" icon-start>
<ion-icon name="help-circle"></ion-icon>
a[ion-button][full] + icon
</a>
<button ion-button full icon-left>
<button ion-button full icon-start>
<ion-icon name="help-circle"></ion-icon>
button[ion-button][full] + icon
</button>

24
src/components/button/test/icons/pages/page-one/page-one.html
View File

@ -10,22 +10,22 @@
<ion-content padding>
<div>
<button ion-button icon-left>
<button ion-button icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
<a ion-button icon-left>
<a ion-button icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</a>
</div>
<div>
<button ion-button icon-right>
<button ion-button icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
<a ion-button icon-right>
<a ion-button icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</a>
@ -41,22 +41,22 @@
</div>
<div>
<button ion-button large icon-left>
<button ion-button large icon-start>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</button>
<a ion-button large icon-left>
<a ion-button large icon-start>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</a>
</div>
<div>
<button ion-button large icon-right>
<button ion-button large icon-end>
Right, Large
<ion-icon name="settings"></ion-icon>
</button>
<a ion-button large icon-right>
<a ion-button large icon-end>
Right, Large
<ion-icon name="settings"></ion-icon>
</a>
@ -72,22 +72,22 @@
</div>
<div>
<button ion-button small icon-left>
<button ion-button small icon-start>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</button>
<a ion-button small icon-left>
<a ion-button small icon-start>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</a>
</div>
<div>
<button ion-button small icon-right>
<button ion-button small icon-end>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</button>
<a ion-button small icon-right>
<a ion-button small icon-end>
Right, Small
<ion-icon name="arrow-forward"></ion-icon>
</a>

14
src/components/card/test/advanced/pages/root-page/root-page.html
View File

@ -28,13 +28,13 @@
<ion-grid>
<ion-row>
<ion-col no-padding>
<button ion-button icon-left clear small>
<button ion-button icon-start clear small>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-col>
<ion-col no-padding text-right>
<button ion-button icon-left clear small class="activated">
<button ion-button icon-start clear small class="activated">
<ion-icon name="share"></ion-icon>
Activated
</button>
@ -66,13 +66,13 @@
<ion-grid>
<ion-row>
<ion-col no-padding>
<button ion-button icon-left clear small>
<button ion-button icon-start clear small>
<ion-icon name="star"></ion-icon>
Favorite
</button>
</ion-col>
<ion-col no-padding text-center>
<button ion-button icon-left clear small>
<button ion-button icon-start clear small>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
@ -99,20 +99,20 @@
<ion-grid>
<ion-row>
<ion-col no-padding>
<button ion-button icon-left clear small dark>
<button ion-button icon-start clear small dark>
<ion-icon name="star"></ion-icon>
Favorite
</button>
</ion-col>
<ion-col no-padding text-center>
<button ion-button icon-left clear small dark>
<button ion-button icon-start clear small dark>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
</ion-col>
<ion-col no-padding text-right>
<button ion-button icon-left clear small dark>
<button ion-button icon-start clear small dark>
<ion-icon name="share-alt"></ion-icon>
Share
</button>

4
src/components/card/test/colors/pages/root-page/root-page.html
View File

@ -71,13 +71,13 @@
<ion-grid>
<ion-row>
<ion-col no-padding>
<button ion-button icon-left clear small color="danger">
<button ion-button icon-start clear small color="danger">
<ion-icon name="star"></ion-icon>
Danger
</button>
</ion-col>
<ion-col no-padding text-right>
<button ion-button icon-left clear small color="dark">
<button ion-button icon-start clear small color="dark">
<ion-icon name="share"></ion-icon>
Dark
</button>

18
src/components/card/test/map/main.html
View File

@ -29,9 +29,9 @@
</ion-item>
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button ion-button icon-left primary clear item-right>
<span item-start>18 min</span>
<span item-start>(2.6 mi)</span>
<button ion-button icon-start primary clear item-end>
<ion-icon name="navigate"></ion-icon>
Start
</button>
@ -59,9 +59,9 @@
</ion-item>
<ion-item>
<span item-left>3 hr</span>
<span item-left>(4.8 mi)</span>
<button ion-button icon-left danger clear item-right>
<span item-start>3 hr</span>
<span item-start>(4.8 mi)</span>
<button ion-button icon-start danger clear item-end>
<ion-icon name="navigate"></ion-icon>
Start
</button>
@ -89,9 +89,9 @@
</ion-item>
<ion-item>
<span item-left secondary>26 min</span>
<span item-left>(8.1 mi)</span>
<button ion-button icon-left secondary clear item-right>
<span item-start secondary>26 min</span>
<span item-start>(8.1 mi)</span>
<button ion-button icon-start secondary clear item-end>
<ion-icon name="navigate"></ion-icon>
Start
</button>

12
src/components/card/test/social/main.html
View File

@ -26,11 +26,11 @@
</ion-card-content>
<ion-item>
<button ion-button icon-left primary clear item-left>
<button ion-button icon-start primary clear item-start>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
<button ion-button icon-left primary clear item-left>
<button ion-button icon-start primary clear item-start>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
@ -59,11 +59,11 @@
</ion-card-content>
<ion-item>
<button ion-button icon-left primary clear item-left>
<button ion-button icon-start primary clear item-start>
<ion-icon name="thumbs-up"></ion-icon>
<div>30 Likes</div>
</button>
<button ion-button icon-left primary clear item-left>
<button ion-button icon-start primary clear item-start>
<ion-icon name="text"></ion-icon>
<div>64 Comments</div>
</button>
@ -91,11 +91,11 @@
</ion-card-content>
<ion-item>
<button ion-button icon-left primary clear item-left>
<button ion-button icon-start primary clear item-start>
<ion-icon name="thumbs-up"></ion-icon>
<div>46 Likes</div>
</button>
<button ion-button icon-left primary clear item-left>
<button ion-button icon-start primary clear item-start>
<ion-icon name="text"></ion-icon>
<div>66 Comments</div>
</button>

4
src/components/checkbox/checkbox.ts
View File

@ -15,7 +15,7 @@ import { Item } from '../item/item';
* The Checkbox is a simple component styled based on the mode. It can be
* placed in an `ion-item` or used as a stand-alone checkbox.
*
* See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
* See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html)
* for more info on forms and inputs.
*
*
@ -65,7 +65,7 @@ import { Item } from '../item/item';
* cucumber: boolean;
*
* updateCucumber() {
* console.log("Cucumbers new state:" + this.cucumber);
* console.log('Cucumbers new state:' + this.cucumber);
* }
* }
* ```

2
src/components/chip/chip.ts
View File

@ -41,7 +41,7 @@ import { Ion } from '../ion';
*
* <ion-chip>
* <ion-avatar>
* <img src="img/my-img.png">
* <img src="assets/img/my-img.png">
* </ion-avatar>
* <ion-label>Default</ion-label>
* </ion-chip>

18
src/components/content/content.scss
View File

@ -58,6 +58,10 @@ ion-content.js-scroll > .scroll-content {
touch-action: none;
}
ion-content.has-refresher > .scroll-content {
background-color: inherit;
}
// Fixed Content (ion-fixed and ion-fab)
// --------------------------------------------------
@ -94,7 +98,7 @@ ion-app [no-padding] .scroll-content {
ion-app.#{$mode} [padding-top],
ion-app.#{$mode} [padding-top] .scroll-content {
padding-top: $content-padding;
@include padding($content-padding, null, null, null);
}
ion-app.#{$mode} [padding-left],
@ -109,13 +113,12 @@ ion-app [no-padding] .scroll-content {
ion-app.#{$mode} [padding-bottom],
ion-app.#{$mode} [padding-bottom] .scroll-content {
padding-bottom: $content-padding;
@include padding(null, null, $content-padding, null);
}
ion-app.#{$mode} [padding-vertical],
ion-app.#{$mode} [padding-vertical] .scroll-content {
padding-top: $content-padding;
padding-bottom: $content-padding;
@include padding($content-padding, null, $content-padding, null);
}
ion-app.#{$mode} [padding-horizontal],
@ -141,7 +144,7 @@ ion-app [no-margin] .scroll-content {
ion-app.#{$mode} [margin-top],
ion-app.#{$mode} [margin-top] .scroll-content {
margin-top: $content-margin;
@include margin($content-margin, null, null, null);
}
ion-app.#{$mode} [margin-left],
@ -168,13 +171,12 @@ ion-app [no-margin] .scroll-content {
ion-app.#{$mode} [margin-bottom],
ion-app.#{$mode} [margin-bottom] .scroll-content {
margin-bottom: $content-margin;
@include margin(null, null, $content-margin, null);
}
ion-app.#{$mode} [margin-vertical],
ion-app.#{$mode} [margin-vertical] .scroll-content {
margin-top: $content-margin;
margin-bottom: $content-margin;
@include margin($content-margin, null, $content-margin, null);
}
ion-app.#{$mode} [margin-horizontal],

39
src/components/content/content.ts
View File

@ -63,7 +63,44 @@ export class EventEmitterProxy<T> extends EventEmitter<T> {
*
* @advanced
*
* Resizing the content. If the height of `ion-header`, `ion-footer` or `ion-tabbar`
* ### Sroll Events
*
* Scroll events happen outside of Angular's Zones. This is for performance reasons. So
* if you're trying to bind a value to any scroll event, it will need to be wrapped in
* a `zone.run()`
*
* ```ts
* import { Component, NgZone } from '@angular/core';
* @Component({
* template: `
* <ion-header>
* <ion-navbar>
* <ion-title>{{scrollAmount}}</ion-title>
* </ion-navbar>
* </ion-header>
* <ion-content (ionScroll)="scrollHandler($event)">
* <p> Some realllllllly long content </p>
* </ion-content>
* `})
* class E2EPage {
* public scrollAmount = 0;
* constructor( public zone: NgZone){}
* scrollHandler(event) {
* console.log(`ScrollEvent: ${event}`)
* this.zone.run(()=>{
* // since scrollAmount is data-binded,
* // the update needs to happen in zone
* this.scrollAmount++
* })
* }
* }
* ```
*
* This goes for any scroll event, not just `ionScroll`.
*
* ### Resizing the content
*
* If the height of `ion-header`, `ion-footer` or `ion-tabbar`
* changes dynamically, `content.resize()` has to be called in order to update the
* layout of `Content`.
*

2
src/components/content/test/basic/pages/page-five/page-five.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Page 4</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="tabsPage">
<button ion-button icon-end [navPush]="tabsPage">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/basic/pages/page-four/page-four.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Page 3</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="page4">
<button ion-button icon-end [navPush]="page4">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/basic/pages/page-one/page-one.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Main</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="page1">
<button ion-button icon-end [navPush]="page1">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/basic/pages/page-three/page-three.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Page 2</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="page3">
<button ion-button icon-end [navPush]="page3">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/fullscreen/pages/page-five/page-five.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Page 4</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="tabsPage">
<button ion-button icon-end [navPush]="tabsPage">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/fullscreen/pages/page-four/page-four.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Page 3</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="page4">
<button ion-button icon-end [navPush]="page4">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/fullscreen/pages/page-one/page-one.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Main</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="page1">
<button ion-button icon-end [navPush]="page1">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

2
src/components/content/test/fullscreen/pages/page-three/page-three.html
View File

@ -2,7 +2,7 @@
<ion-navbar style="opacity: 0.8">
<ion-title>Page 2</ion-title>
<ion-buttons right>
<button ion-button icon-right [navPush]="page3">
<button ion-button icon-end [navPush]="page3">
Next
<ion-icon name="arrow-forward"></ion-icon>
</button>

4
src/components/datetime/datetime.ios.scss
View File

@ -9,7 +9,7 @@ $datetime-ios-padding-top: $item-ios-padding-top !default;
// deprecated
$datetime-ios-padding-right: ($item-ios-padding-end / 2) !default;
/// @prop - Padding end of the DateTime component
$datetime-ios-padding-end: $datetime-ios-padding-right;
$datetime-ios-padding-end: $datetime-ios-padding-right !default;
/// @prop - Padding bottom of the DateTime component
$datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
@ -17,7 +17,7 @@ $datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
// deprecated
$datetime-ios-padding-left: $item-ios-padding-start !default;
/// @prop - Padding start of the DateTime component
$datetime-ios-padding-start: $datetime-ios-padding-left;
$datetime-ios-padding-start: $datetime-ios-padding-left !default;
/// @prop - Color of the DateTime placeholder
$datetime-ios-placeholder-color: #999 !default;

4
src/components/datetime/datetime.md.scss
View File

@ -9,7 +9,7 @@ $datetime-md-padding-top: $item-md-padding-top !default;
// deprecated
$datetime-md-padding-right: ($item-md-padding-end / 2) !default;
/// @prop - Padding end of the DateTime component
$datetime-md-padding-end: $datetime-md-padding-right;
$datetime-md-padding-end: $datetime-md-padding-right !default;
/// @prop - Padding bottom of the DateTime component
$datetime-md-padding-bottom: $item-md-padding-bottom !default;
@ -17,7 +17,7 @@ $datetime-md-padding-bottom: $item-md-padding-bottom !default;
// deprecated
$datetime-md-padding-left: $item-md-padding-start !default;
/// @prop - Padding start of the DateTime component
$datetime-md-padding-start: $datetime-md-padding-left;
$datetime-md-padding-start: $datetime-md-padding-left !default;
/// @prop - Color of the DateTime placeholder
$datetime-md-placeholder-color: #999 !default;

6
src/components/datetime/datetime.wp.scss
View File

@ -12,7 +12,7 @@ $datetime-wp-padding-top: $item-wp-padding-top !default;
// deprecated
$datetime-wp-padding-right: ($item-wp-padding-end / 2) !default;
/// @prop - Padding end of the DateTime component
$datetime-wp-padding-end: $datetime-wp-padding-right;
$datetime-wp-padding-end: $datetime-wp-padding-right !default;
/// @prop - Padding bottom of the DateTime component
$datetime-wp-padding-bottom: $item-wp-padding-bottom !default;
@ -20,7 +20,7 @@ $datetime-wp-padding-bottom: $item-wp-padding-bottom !default;
// deprecated
$datetime-wp-padding-left: $item-wp-padding-start !default;
/// @prop - Padding start of the DateTime component
$datetime-wp-padding-start: $datetime-wp-padding-left;
$datetime-wp-padding-start: $datetime-wp-padding-left !default;
/// @prop - Border width of the DateTime component
$datetime-wp-border-width: 2px !default;
@ -48,7 +48,7 @@ $datetime-wp-placeholder-color: $input-wp-border-color !default;
}
.item-datetime .datetime-wp ion-label[floating] {
transform: translate3d(8px, 41px, 0);
@include transform(translate3d(8px, 41px, 0));
}
.datetime-wp .datetime-placeholder {

13
src/components/fab/fab.scss
View File

@ -79,14 +79,13 @@ ion-fab {
&[center] {
@include position(null, null, null, 50%);
@include margin-horizontal(-$fab-size / 2, null);
}
&[middle] {
top: 50%;
@include margin(-$fab-size / 2, null, null, null);
margin-top: -$fab-size / 2;
top: 50%;
}
&[top] {
@ -95,7 +94,9 @@ ion-fab {
&[right] {
// scss-lint:disable PropertySpelling
right: $fab-content-margin;
@include multi-dir() {
right: $fab-content-margin;
}
}
&[end] {
@ -108,7 +109,9 @@ ion-fab {
&[left] {
// scss-lint:disable PropertySpelling
left: $fab-content-margin;
@include multi-dir() {
left: $fab-content-margin;
}
}
&[start] {

2
src/components/icon/test/basic/main.html
View File

@ -119,7 +119,7 @@
</ion-list>
<p>
<button ion-button icon-left (click)="updateIcon()">
<button ion-button icon-start (click)="updateIcon()">
<ion-icon [name]="btnIcon"></ion-icon>
Update icon
</button>

2
src/components/icon/test/basic/pages/root-page/root-page.html
View File

@ -119,7 +119,7 @@
</ion-list>
<p>
<button ion-button icon-left (click)="updateIcon()">
<button ion-button icon-start (click)="updateIcon()">
<ion-icon [name]="btnIcon"></ion-icon>
Update icon
</button>

2
src/components/input/input.ios.scss
View File

@ -20,7 +20,7 @@ $text-input-ios-margin-bottom: $item-ios-padding-bottom !default;
// deprecated
$text-input-ios-margin-left: 0 !default;
/// @prop - Margin start of the input
$text-input-ios-margin-start: $text-input-ios-margin-left;
$text-input-ios-margin-start: $text-input-ios-margin-left !default;
/// @prop - Width of the icon used to clear the input
$text-input-ios-input-clear-icon-width: 30px !default;

2
src/components/input/input.scss
View File

@ -154,6 +154,7 @@ input.text-input:-webkit-autofill {
.text-input-clear-icon {
@include margin(0);
@include padding(0);
@include background-position(center);
position: absolute;
top: 0;
@ -162,7 +163,6 @@ input.text-input:-webkit-autofill {
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
// TODO remove all uses of input-has-focus in v4

5
src/components/item/item-reorder.scss
View File

@ -4,6 +4,8 @@
// --------------------------------------------------
ion-reorder {
@include transform(translate3d(160%, 0, 0));
display: none;
flex: 1;
@ -16,7 +18,6 @@ ion-reorder {
font-size: 1.7em;
opacity: .25;
transform: translate3d(160%, 0, 0);
transition: transform 140ms ease-in;
@ -33,7 +34,7 @@ ion-reorder ion-icon {
}
.reorder-visible ion-reorder {
transform: translate3d(0, 0, 0);
@include transform(translate3d(0, 0, 0));
}
.reorder-list-active .item,

94
src/components/item/item-sliding.scss
View File

@ -17,26 +17,53 @@ ion-item-sliding .item {
}
ion-item-options {
@include position(0, 0, null, null);
position: absolute;
z-index: $z-index-item-options;
display: none;
justify-content: flex-end;
height: 100%;
font-size: 14px;
visibility: hidden;
@include multi-dir() {
// scss-lint:disable PropertySpelling
top: 0;
right: 0;
}
@include ltr() {
justify-content: flex-end;
}
@include rtl() {
justify-content: flex-start;
&:not([side=right]) {
justify-content: flex-end;
// scss-lint:disable PropertySpelling
right: auto;
left: 0;
}
}
}
ion-item-options[side=left] {
@include position-horizontal(0, auto);
@include multi-dir() {
// scss-lint:disable PropertySpelling
right: auto;
left: 0;
}
justify-content: flex-start;
@include ltr() {
justify-content: flex-start;
}
@include rtl() {
justify-content: flex-end;
}
}
ion-item-options .button {
@ -51,7 +78,8 @@ ion-item-options .button {
box-sizing: content-box;
}
ion-item-options:not([icon-left]) .button:not([icon-only]) {
ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
ion-item-options:not([icon-start]) .button:not([icon-only]) {
.button-inner {
flex-direction: column;
}
@ -62,6 +90,13 @@ ion-item-options:not([icon-left]) .button:not([icon-only]) {
}
ion-item-sliding.active-slide {
@include rtl() {
&.active-options-left ion-item-options:not([side=right]) {
width: 100%;
visibility: visible;
}
}
.item,
.item.activated {
@ -80,12 +115,7 @@ ion-item-sliding.active-slide {
display: flex;
}
&.active-options-left ion-item-options[side=left] {
width: 100%;
visibility: visible;
}
&.active-options-left ion-item-options[side=left],
&.active-options-right ion-item-options:not([side=left]) {
width: 100%;
@ -105,19 +135,37 @@ button[expandable] {
}
ion-item-sliding.active-swipe-right button[expandable] {
@include padding-horizontal(90%, null);
order: 1;
transition-duration: .6s;
transition-property: padding-left;
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-left: 90%;
}
@include ltr() {
order: 1;
}
@include rtl() {
order: -1;
}
}
ion-item-sliding.active-swipe-left button[expandable] {
@include padding-horizontal(null, 90%);
order: -1;
transition-duration: .6s;
transition-property: padding-right;
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-right: 90%;
}
@include ltr() {
order: -1;
}
@include rtl() {
order: 1;
}
}

21
src/components/item/item-sliding.ts
View File

@ -91,11 +91,11 @@ const enum SlidingState {
* ### Button Layout
* If an icon is placed with text in the option button, by default it will
* display the icon on top of the text. This can be changed to display the icon
* to the left of the text by setting `icon-left` as an attribute on the
* to the left of the text by setting `icon-start` as an attribute on the
* `<ion-item-options>` element.
*
* ```html
* <ion-item-options icon-left>
* <ion-item-options icon-start>
* <button ion-button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
@ -104,6 +104,23 @@ const enum SlidingState {
*
* ```
*
* ### Expandable Options
*
* Options can be expanded to take up the full width of the item if you swipe past
* a certain point. This can be combined with the `ionSwipe` event to call methods
* on the class.
*
* ```html
*
* <ion-item-sliding (ionSwipe)="delete(item)">
* <ion-item>Item</ion-item>
* <ion-item-options>
* <button ion-button expandable (click)="delete(item)">Delete</button>
* </ion-item-options>
* </ion-item-sliding>
* ```
*
* We can call `delete` by either clicking the button, or by doing a full swipe on the item.
*
* @demo /docs/demos/src/item-sliding/
* @see {@link /docs/components#lists List Component Docs}

19
src/components/item/item.ios.scss
View File

@ -60,10 +60,10 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios {
@include padding-horizontal($item-ios-padding-start, null);
@include border-radius(0);
position: relative;
border-radius: 0;
font-size: $item-ios-body-text-font-size;
color: $list-ios-text-color;
background-color: $list-ios-background-color;
@ -119,7 +119,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios h5:last-child,
.item-ios h6:last-child,
.item-ios p:last-child {
margin-bottom: 0;
@include margin(null, null, 0, null);
}
.item-ios.item-block .item-inner {
@ -187,12 +187,12 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios ion-avatar ion-img,
.item-ios ion-avatar img {
width: $item-ios-avatar-size;
height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-border-radius;
@include border-radius($item-ios-avatar-border-radius);
overflow: hidden;
width: $item-ios-avatar-size;
height: $item-ios-avatar-size;
}
@ -219,12 +219,11 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios[detail-push] .item-inner,
button.item-ios:not([detail-none]) .item-inner,
a.item-ios:not([detail-none]) .item-inner {
@include svg-background-image($item-ios-detail-push-svg);
@include svg-background-image($item-ios-detail-push-svg, true);
@include padding-horizontal(null, 32px);
@include background-position(end, $item-ios-padding-end - 2, center);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-end - 2) center;
background-size: 14px 14px;
}
}
@ -274,7 +273,7 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner {
}
&.activated {
background-color: color-shade($color-base);
background-color: color-shade($color-base);
}
}
}

24
src/components/item/item.md.scss
View File

@ -98,10 +98,10 @@ $item-md-sliding-content-background: $list-md-background-color !default;
}
.item-md p {
overflow: inherit;
@include margin(0, 0, 2px);
overflow: inherit;
font-size: 1.4rem;
line-height: normal;
text-overflow: inherit;
@ -123,12 +123,11 @@ $item-md-sliding-content-background: $list-md-background-color !default;
.item-md[detail-push] .item-inner,
button.item-md:not([detail-none]) .item-inner,
a.item-md:not([detail-none]) .item-inner {
@include svg-background-image($item-md-detail-push-svg);
@include svg-background-image($item-md-detail-push-svg, true);
@include padding-horizontal(null, 32px);
@include background-position(end, $item-md-padding-end - 2, center);
background-repeat: no-repeat;
background-position: right ($item-md-padding-end - 2) center;
background-size: 14px 14px;
}
}
@ -196,12 +195,12 @@ $item-md-sliding-content-background: $list-md-background-color !default;
.item-md ion-avatar ion-img,
.item-md ion-avatar img {
width: $item-md-avatar-size;
height: $item-md-avatar-size;
border-radius: $item-md-avatar-border-radius;
@include border-radius($item-md-avatar-border-radius);
overflow: hidden;
width: $item-md-avatar-size;
height: $item-md-avatar-size;
}
@ -239,11 +238,10 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner {
.item-divider-md {
@include padding-horizontal($item-md-padding-start, null);
color: $item-md-divider-color;
background-color: $item-md-divider-background;
border-bottom: $item-md-divider-border-bottom;
font-size: $item-md-divider-font-size;
color: $item-md-divider-color;
background-color: $item-md-divider-background;
}
@ -267,7 +265,7 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner {
}
&.activated {
background-color: color-shade($color-base);
background-color: color-shade($color-base);
}
}
}

5
src/components/item/item.wp.scss
View File

@ -128,12 +128,11 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
.item-wp[detail-push] .item-inner,
button.item-wp:not([detail-none]) .item-inner,
a.item-wp:not([detail-none]) .item-inner {
@include svg-background-image($item-wp-detail-push-svg);
@include svg-background-image($item-wp-detail-push-svg, true);
@include padding-horizontal(null, 32px);
@include background-position(end, $item-wp-padding-end - 2, center);
background-repeat: no-repeat;
background-position: right ($item-wp-padding-end - 2) center;
background-size: 14px 14px;
}
}

12
src/components/item/test/buttons/pages/root-page/root-page.html
View File

@ -40,24 +40,24 @@
</ion-item>
<button ion-item disabled>
<button ion-button item-start icon-left (click)="testClick($event)">
<button ion-button item-start icon-start (click)="testClick($event)">
<ion-icon name="home"></ion-icon>
Left Icon
</button>
disabled left icon buttons
<button ion-button outline item-end icon-left (click)="testClick($event)">
<button ion-button outline item-end icon-start (click)="testClick($event)">
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</button>
<ion-item>
<button ion-button item-start icon-right (click)="testClick($event)">
<button ion-button item-start icon-end (click)="testClick($event)">
Right Icon
<ion-icon name="home"></ion-icon>
</button>
right icon buttons
<button ion-button outline item-end icon-right (click)="testClick($event)">
<button ion-button outline item-end icon-end (click)="testClick($event)">
Right Icon
<ion-icon name="star"></ion-icon>
</button>
@ -75,14 +75,14 @@
<a ion-item disabled>
a ion-item disabled right icon/text button large
<button ion-button item-end large icon-left (click)="testClick($event)">
<button ion-button item-end large icon-start (click)="testClick($event)">
<ion-icon name="refresh"></ion-icon>
Refresh
</button>
</a>
<ion-item>
<button ion-button clear item-start small icon-left (click)="testClick($event)">
<button ion-button clear item-start small icon-start (click)="testClick($event)">
<ion-icon name="settings"></ion-icon>
Settings
</button>

8
src/components/item/test/colors/pages/root-page/root-page.html
View File

@ -44,7 +44,7 @@
</ion-item>
<button ion-item color="dark">
<button ion-button item-start icon-left>
<button ion-button item-start icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
@ -53,7 +53,7 @@
</button>
<button ion-item disabled color="dark">
<button ion-button item-start icon-left>
<button ion-button item-start icon-start>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
@ -62,12 +62,12 @@
</button>
<ion-item color="light">
<button ion-button item-start icon-right>
<button ion-button item-start icon-end>
Right Icon
<ion-icon name="home"></ion-icon>
</button>
right icon buttons
<button ion-button outline item-end icon-right>
<button ion-button outline item-end icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</button>

2
src/components/item/test/reorder/pages/root-page/root-page.html
View File

@ -24,7 +24,7 @@
<button ion-item (click)="clickedButton(item)">
<h2>Sliding item {{item}}</h2>
</button>
<ion-item-options side="right" icon-left>
<ion-item-options side="right" icon-start>
<button ion-button color='danger'>
<ion-icon name="trash"></ion-icon>
Remove

10
src/components/item/test/sliding/pages/root-page/root-page.html
View File

@ -139,13 +139,13 @@
<h2>RIGHT/LEFT side - icons (item-start)</h2>
<p>I think I figured out how to get more Mountain Dew</p>
</ion-item>
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
<ion-item-options side="left" icon-start (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
<button ion-button color="secondary" expandable (click)="unread(item3)">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</button>
</ion-item-options>
<ion-item-options icon-left (ionSwipe)="del(item3)">
<ion-item-options icon-start (ionSwipe)="del(item3)">
<button ion-button color="primary" (click)="archive(item3)">
<ion-icon name="mail"></ion-icon>Archive
</button>
@ -161,7 +161,7 @@
<ion-icon name="mail" item-start></ion-icon>
One Line w/ Icon, div only text
</ion-item>
<ion-item-options icon-left (ionSwipe)="archive($event)">
<ion-item-options icon-start (ionSwipe)="archive($event)">
<button ion-button color="primary" (click)="archive(item4)" expandable *ngIf="slidingEnabled">
<ion-icon name="archive"></ion-icon>Archive
</button>
@ -192,9 +192,9 @@
<ion-item-sliding #item7>
<ion-item>
One Line, dynamic icon-left option
One Line, dynamic icon-start option
</ion-item>
<ion-item-options icon-left>
<ion-item-options icon-start>
<button ion-button color="primary">
<ion-icon name="more"></ion-icon>
{{ moreText }}

17
src/components/label/label.ios.scss
View File

@ -60,38 +60,33 @@ $label-ios-margin-start: 0 !default;
// --------------------------------------------------
.label-ios[stacked] {
margin-bottom: 4px;
@include margin(null, null, 4px, null);
font-size: 1.2rem;
}
.label-ios[floating] {
margin-bottom: 0;
@include margin(null, null, 0, null);
@include transform(translate3d(0, 27px, 0));
@include transform-origin(start, top);
transform: translate3d(0, 27px, 0);
transform-origin: left top;
transition: transform 150ms ease-in-out;
}
[dir="rtl"] .label-ios[floating] {
transform-origin: right top;
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus .label-ios[floating],
.input-has-focus .label-ios[floating],
.item-input-has-value .label-ios[floating],
.input-has-value .label-ios[floating] {
transform: translate3d(0, 0, 0) scale(.8);
@include transform(translate3d(0, 0, 0), scale(.8));
}
.item-ios.item-label-stacked [item-right], // deprecated
.item-ios.item-label-floating [item-right], // deprecated
.item-ios.item-label-stacked [item-end],
.item-ios.item-label-floating [item-end] {
margin-top: $item-ios-padding-media-top - 2;
margin-bottom: $item-ios-padding-media-bottom - 2;
@include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null);
}
.item-input-has-focus .label-ios[stacked],

14
src/components/label/label.md.scss
View File

@ -56,13 +56,10 @@ $label-md-margin-start: 0 !default;
}
.label-md[floating] {
transform: translate3d(0, 27px, 0);
transform-origin: left top;
transition: transform 150ms ease-in-out;
}
@include transform(translate3d(0, 27px, 0));
@include transform-origin(start, top);
[dir="rtl"] .label-md[floating] {
transform-origin: right top;
transition: transform 150ms ease-in-out;
}
.label-md[stacked],
@ -83,15 +80,14 @@ $label-md-margin-start: 0 !default;
.input-has-focus .label-md[floating],
.item-input-has-value .label-md[floating],
.input-has-value .label-md[floating] {
transform: translate3d(0, 0, 0) scale(.8);
@include transform(translate3d(0, 0, 0), scale(.8));
}
.item-md.item-label-stacked [item-right], // deprecated
.item-md.item-label-floating [item-right], // deprecated
.item-md.item-label-stacked [item-end],
.item-md.item-label-floating [item-end] {
margin-top: $item-md-padding-media-top - 2;
margin-bottom: $item-md-padding-media-bottom - 2;
@include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null);
}

2
src/components/label/label.scss
View File

@ -50,7 +50,7 @@ ion-label[fixed] {
ion-label[stacked],
ion-label[floating] {
margin-bottom: 0;
@include margin(null, null, 0, null);
}
.item-label-stacked .input-wrapper,

14
src/components/label/label.wp.scss
View File

@ -36,13 +36,8 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default;
}
.label-wp[floating] {
transform: translate3d(8px, 34px, 0);
transform-origin: left top;
}
[dir="rtl"] .label-wp[floating] {
transform: translate3d(-8px, 34px, 0);
transform-origin: right top;
@include transform(translate3d(8px, 34px, 0));
@include transform-origin(start, top);
}
.label-wp[stacked],
@ -63,15 +58,14 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default;
.input-has-focus .label-wp[floating],
.item-input-has-value .label-wp[floating],
.input-has-value .label-wp[floating] {
transform: translate3d(0, 0, 0) scale(.8);
@include transform(translate3d(0, 0, 0), scale(.8));
}
.item-wp.item-label-stacked [item-right], // deprecated
.item-wp.item-label-floating [item-right], // deprecated
.item-wp.item-label-stacked [item-end],
.item-wp.item-label-floating [item-end] {
margin-top: $item-wp-padding-media-top + 4;
margin-bottom: $item-wp-padding-media-top + 4;
@include margin($item-wp-padding-media-top + 4, null, $item-wp-padding-media-top + 4, null);
}

17
src/components/list/list.ios.scss
View File

@ -41,7 +41,7 @@ $list-inset-ios-border-radius: 4px !default;
// deprecated
$list-ios-header-padding-left: $item-ios-padding-start !default;
/// @prop - Padding start of the header in a list
$list-ios-header-padding-start: $list-ios-header-padding-left;
$list-ios-header-padding-start: $list-ios-header-padding-left !default;
/// @prop - Border bottom of the header in a list
$list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default;
@ -103,17 +103,17 @@ $list-ios-header-background-color: transparent !default;
}
.list-ios ion-item-options .button {
@include margin(0);
@include border-radius(0);
display: inline-flex;
align-items: center;
@include margin(0);
height: 100%;
min-height: 100%;
border: 0;
border-radius: 0;
box-sizing: border-box;
}
@ -123,8 +123,8 @@ $list-ios-header-background-color: transparent !default;
}
.list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header {
margin-top: -$list-ios-margin-top;
padding-top: 0;
@include margin(-$list-ios-margin-top, null, null, null);
@include padding(0, null, null, null);
}
@ -133,8 +133,7 @@ $list-ios-header-background-color: transparent !default;
.list-ios[inset] {
@include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start);
border-radius: $list-inset-ios-border-radius;
@include border-radius($list-inset-ios-border-radius);
}
.list-ios[inset] ion-list-header {
@ -160,7 +159,7 @@ $list-ios-header-background-color: transparent !default;
}
.list-ios[inset] + ion-list[inset] {
margin-top: 0;
@include margin(0, null, null, null);
}

9
src/components/list/list.md.scss
View File

@ -44,7 +44,7 @@ $list-md-header-margin-bottom: 13px !default;
// deprecated
$list-md-header-padding-left: $item-md-padding-start !default;
/// @prop - Padding start of the header in a list
$list-md-header-padding-start: $list-md-header-padding-left;
$list-md-header-padding-start: $list-md-header-padding-left !default;
/// @prop - Minimum height of the header in a list
$list-md-header-min-height: 4.5rem !default;
@ -116,7 +116,7 @@ $list-md-header-color: #757575 !default;
}
.list-md + ion-list ion-list-header {
margin-top: -$list-md-margin-top;
@include margin(-$list-md-margin-top, null, null, null);
}
@ -145,7 +145,7 @@ $list-md-header-color: #757575 !default;
}
.list-md[inset] + ion-list[inset] {
margin-top: 0;
@include margin(0, null, null, null);
}
.list-md[inset] ion-list-header {
@ -168,8 +168,7 @@ $list-md-header-color: #757575 !default;
.list-header-md {
@include padding-horizontal($list-md-header-padding-start, null);
margin-bottom: $list-md-header-margin-bottom;
@include margin(null, null, $list-md-header-margin-bottom, null);
min-height: $list-md-header-min-height;

8
src/components/list/list.wp.scss
View File

@ -41,7 +41,7 @@ $list-inset-wp-border-radius: 2px !default;
// deprecated
$list-wp-header-padding-left: $item-wp-padding-start !default;
/// @prop - Padding start of the header in a list
$list-wp-header-padding-start: $list-wp-header-padding-left;
$list-wp-header-padding-start: $list-wp-header-padding-left !default;
/// @prop - Border bottom of the header in a list
$list-wp-header-border-bottom: 1px solid $list-wp-border-color !default;
@ -115,8 +115,8 @@ $list-wp-header-color: $list-wp-text-color !default;
}
.list-wp + ion-list ion-list-header {
margin-top: -$list-wp-margin-top;
padding-top: 0;
@include margin(-$list-wp-margin-top, null, null, null);
@include padding(0, null, null, null);
}
@ -145,7 +145,7 @@ $list-wp-header-color: $list-wp-text-color !default;
}
.list-wp[inset] + ion-list[inset] {
margin-top: 0;
@include margin(0, null, null, null);
}
.list-wp[inset] ion-list-header {

12
src/components/list/test/header-scenarios/pages/main/main.html
View File

@ -30,24 +30,24 @@
</ion-list-header>
<ion-list-header disabled>
<button ion-button icon-left item-start (click)="testClick($event)">
<button ion-button icon-start item-start (click)="testClick($event)">
<ion-icon name="home"></ion-icon>
Left Icon
</button>
disabled left icon buttons
<button ion-button icon-left outline item-end (click)="testClick($event)">
<button ion-button icon-start outline item-end (click)="testClick($event)">
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</ion-list-header>
<ion-list-header color="dark">
<button ion-button icon-right item-start (click)="testClick($event)">
<button ion-button icon-end item-start (click)="testClick($event)">
Right Icon
<ion-icon name="home"></ion-icon>
</button>
Dark right icon buttons
<button ion-button icon-right outline item-end (click)="testClick($event)">
<button ion-button icon-end outline item-end (click)="testClick($event)">
Right Icon
<ion-icon name="star"></ion-icon>
</button>
@ -65,14 +65,14 @@
<ion-list-header>
ion-list-header right icon/text button large
<button ion-button item-end icon-left large (click)="testClick($event)">
<button ion-button item-end icon-start large (click)="testClick($event)">
<ion-icon name="refresh"></ion-icon>
Refresh
</button>
</ion-list-header>
<ion-list-header>
<button ion-button clear item-start icon-left small (click)="testClick($event)">
<button ion-button clear item-start icon-start small (click)="testClick($event)">
<ion-icon name="settings"></ion-icon>
Settings
</button>

18
src/components/loading/loading-component.ts
View File

@ -1,8 +1,9 @@
import { Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
import { Config } from '../../config/config';
import { GestureController, BlockerDelegate, BLOCK_ALL } from '../../gestures/gesture-controller';
import { isDefined, isUndefined, assert } from '../../util/util';
import { KEY_ESCAPE } from '../../platform/key';
import { LoadingOptions } from './loading-options';
import { NavParams } from '../../navigation/nav-params';
import { Platform } from '../../platform/platform';
@ -14,7 +15,7 @@ import { ViewController } from '../../navigation/view-controller';
@Component({
selector: 'ion-loading',
template:
'<ion-backdrop [hidden]="!d.showBackdrop"></ion-backdrop>' +
'<ion-backdrop [hidden]="!d.showBackdrop" (click)="bdClick()" [class.backdrop-no-tappable]="!d.enableBackdropDismiss"></ion-backdrop>' +
'<div class="loading-wrapper">' +
'<div *ngIf="showSpinner" class="loading-spinner">' +
'<ion-spinner [name]="d.spinner"></ion-spinner>' +
@ -87,6 +88,19 @@ export class LoadingCmp {
}
@HostListener('body:keyup', ['$event'])
keyUp(ev: KeyboardEvent) {
if (this._viewCtrl.isLast() && ev.keyCode === KEY_ESCAPE) {
this.bdClick();
}
}
bdClick() {
if (this.d.enableBackdropDismiss) {
this.dismiss('backdrop');
}
}
dismiss(role: string): Promise<any> {
if (this.durationTimeout) {
clearTimeout(this.durationTimeout);

1
src/components/loading/loading-controller.ts
View File

@ -107,6 +107,7 @@ import { LoadingOptions } from './loading-options';
* | content |`string` | The html content for the loading indicator. |
* | cssClass |`string` | Additional classes for custom styles, separated by spaces. |
* | showBackdrop |`boolean` | Whether to show the backdrop. Default true. |
* | enableBackdropDismiss | `boolean` | Whether the loading indicator should be dismissed by tapping the backdrop. Default false. |
* | dismissOnPageChange |`boolean` | Whether to dismiss the indicator when navigating to a new page. Default false. |
* | duration |`number` | How many milliseconds to wait before hiding the indicator. By default, it will show until `dismiss()` is called. |
*

1
src/components/loading/loading-options.ts
View File

@ -4,6 +4,7 @@ export interface LoadingOptions {
content?: string;
cssClass?: string;
showBackdrop?: boolean;
enableBackdropDismiss?: boolean;
dismissOnPageChange?: boolean;
duration?: number;
}

5
src/components/loading/loading.ios.scss
View File

@ -36,6 +36,9 @@ $loading-ios-background: #f8f8f8 !default;
/// @prop - Font weight of the loading content
$loading-ios-content-font-weight: bold !default;
/// @prop - Margin start of the loading content next to a spinner
$loading-ios-content-margin-start: $content-ios-margin !default;
/// @prop - Color of the loading spinner
$loading-ios-spinner-color: #69717d !default;
@ -78,7 +81,7 @@ $loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
}
.loading-ios .loading-spinner + .loading-content {
@include margin-horizontal(16px, null);
@include margin-horizontal($loading-ios-content-margin-start, null);
}

5
src/components/loading/loading.md.scss
View File

@ -39,6 +39,9 @@ $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
/// @prop - Box shadow of the loading wrapper
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
/// @prop - Margin start of the loading content next to a spinner
$loading-md-content-margin-start: $content-md-margin !default;
/// @prop - Color of the loading spinner
$loading-md-spinner-color: color($colors-md, primary) !default;
@ -79,7 +82,7 @@ $loading-md-spinner-dots-color: $loading-md-spinner-color !default;
// -----------------------------------------
.loading-md .loading-spinner + .loading-content {
@include margin-horizontal(16px, null);
@include margin-horizontal($loading-md-content-margin-start, null);
}

Some files were not shown because too many files have changed in this diff Show More