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

Merge branch 'master' of github.com:driftyco/ionic2

Browse Source
This commit is contained in:
jbavari
2015-10-30 17:45:10 -06:00
parent 5c0bc6ebc3 4148ca5636
commit 25b672dabe
25 changed files with 379 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demos/component-docs/app.scss
View File

@ -1,3 +1,17 @@
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
energized: #ffc527,
royal: #7e60ff,
);
$font-path: '../../dist/fonts';
@import "../../ionic/ionic";
body, body:hover, body a, body button, body media-switch {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
@ -330,5 +344,3 @@ body.ios button[fab].fab-map {
body.md button[fab].fab-map {
top: 220px;
}

6
demos/component-docs/inputs/checkbox.html
View File

@ -35,11 +35,11 @@
Khal Drogo
</ion-checkbox>
<ion-checkbox dark>
<ion-checkbox energized checked="true" dark>
Cersei Lannister
</ion-checkbox>
<ion-checkbox primary checked="true">
<ion-checkbox royal checked="true">
Stannis Baratheon
</ion-checkbox>
@ -55,7 +55,7 @@
Catelyn Stark
</ion-checkbox>
<ion-checkbox primary>
<ion-checkbox royal>
Bronn
</ion-checkbox>

10
demos/component-docs/inputs/switch.html
View File

@ -14,7 +14,7 @@
Frodo Baggins
</ion-switch>
<ion-switch light>
<ion-switch energized>
Sam
</ion-switch>
@ -22,7 +22,7 @@
Éowyn
</ion-switch>
<ion-switch secondary checked="true">
<ion-switch royal checked="true">
Legolas
</ion-switch>
@ -34,7 +34,7 @@
Saruman
</ion-switch>
<ion-switch light checked="true">
<ion-switch energized checked="true">
Gandalf
</ion-switch>
@ -46,7 +46,7 @@
Treebeard
</ion-switch>
<ion-switch primary>
<ion-switch royal>
Boromir
</ion-switch>
@ -54,7 +54,7 @@
Gollum
</ion-switch>
<ion-switch light>
<ion-switch energized>
Galadriel
</ion-switch>

4
gulpfile.js
View File

@ -459,12 +459,14 @@ gulp.task('build.demos', function(){
gulp.task('sass.demos:docs', function() {
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
return gulp.src([
'demos/component-docs/app.scss'
'demos/component-docs/app.scss',
])
.pipe(sass()
.on('error', sass.logError)
)
.pipe(concat('app.css'))
.pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/demos/component-docs/'));
});

8
ionic/components/card/modes/ios.scss
View File

@ -40,6 +40,14 @@ ion-card {
border-radius: $card-ios-border-radius;
overflow: hidden;
.list {
margin-bottom: 0;
ion-item-content {
padding: 0;
}
}
.item {
padding-right: ($card-ios-padding-right / 2);
padding-left: ($card-ios-padding-left / 2);

8
ionic/components/card/modes/md.scss
View File

@ -43,6 +43,14 @@ ion-card {
border-radius: $card-md-border-radius;
overflow: hidden;
.list {
margin-bottom: 0;
ion-item-content {
padding: 0;
}
}
.item {
padding-right: ($card-md-padding-right / 2);
padding-left: ($card-md-padding-left / 2);

0
ionic/components/card/test/list/e2e.ts Normal file
View File

7
ionic/components/card/test/list/index.ts Normal file
View File

@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {}

103
ionic/components/card/test/list/main.html Normal file
View File

@ -0,0 +1,103 @@
<ion-toolbar><ion-title>List Cards</ion-title></ion-toolbar>
<ion-content class="outer-content">
<ion-card>
<ion-list>
<ion-header>
Card List
</ion-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
</ion-list>
</ion-card>
<ion-card>
<ion-list no-lines>
<ion-header>
Card List Without Lines
</ion-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
</ion-list>
</ion-card>
<ion-card>
<ion-card-header>
Card With Items (No List)
</ion-card-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
</ion-card>
</ion-content>

9
ionic/components/item/item.scss
View File

@ -129,15 +129,6 @@ ion-input.item {
align-items: flex-start;
}
.item.item.item.no-border-bottom:after,
.item.item.item.no-border-bottom + .item:before {
border: none;
}
.item.item.item.no-border-bottom + .item {
margin-top: -13px;
}
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.

25
ionic/components/item/modes/ios.scss
View File

@ -238,21 +238,23 @@ ion-card {
}
}
&.hairlines .list ion-item-options {
&.hairlines .list {
ion-item-options {
button, [button] {
min-height: calc(100% - 1px);
height: calc(100% - 1px);
margin-top: 0.55px;
margin-bottom: 0.55px;
}
}
}
&.hairlines .list ion-item-sliding-content {
ion-item-sliding-content {
margin-top: 0.55px;
margin-bottom: 0.55px;
}
}
&.hairlines .list .item {
.item {
margin-top: -0.55px;
&:last-child {
@ -263,4 +265,17 @@ ion-card {
&:after {
border-top-width: 0.55px;
}
}
}
.item[no-lines] {
&:before,
&:after {
border-width: 0;
}
+ .item:before {
border-width: 0;
}
}

11
ionic/components/item/modes/md.scss
View File

@ -254,3 +254,14 @@ button.item {
box-shadow: none;
}
}
.item[no-lines] {
&:before,
&:after {
border-width: 0;
}
+ .item:before {
border-width: 0;
}
}

6
ionic/components/item/test/text/main.html
View File

@ -12,9 +12,13 @@
Single line text that should have ellipses when it doesn't all fit in the item
</ion-item>
<ion-item no-lines>
Single line item with no lines
</ion-item>
<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item. Class on .item
to fit on one line in the item. Attribute on .item
</ion-item>
<ion-item text-wrap>

9
ionic/components/list/modes/ios.scss
View File

@ -87,3 +87,12 @@ $list-ios-header-color: #333 !default;
.list[inset] + .list[inset] {
margin-top: 0;
}
&.hairlines .list[no-lines],
.list[no-lines] {
ion-header:after,
.item:before,
.item:after {
border-width: 0;
}
}

11
ionic/components/list/modes/md.scss
View File

@ -66,3 +66,14 @@ $list-md-header-color: #858585 !default;
.list[inset] + .list[inset] {
margin-top: 0;
}
.list[no-lines] {
ion-header + .item:before {
border-width: 1px;
}
.item:before,
.item:after {
border-width: 0;
}
}

0
ionic/components/list/test/no-lines/e2e.ts Normal file
View File

7
ionic/components/list/test/no-lines/index.ts Normal file
View File

@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {}

30
ionic/components/list/test/no-lines/main.html Normal file
View File

@ -0,0 +1,30 @@
<ion-toolbar><ion-title>List No Lines</ion-title></ion-toolbar>
<ion-content class="outer-content">
<ion-list no-lines>
<ion-header>
List Header
</ion-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
</ion-list>
</ion-content>

9
ionic/components/menu/test/basic/index.ts
View File

@ -37,12 +37,13 @@ class E2EApp {
}
openPage(page) {
// close the menu when clicking a link from the menu
this.app.getComponent('leftMenu').close();
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
nav.setRoot(page.component).then(() => {
// wait for the root page to be completely loaded
// then close the menu
this.app.getComponent('leftMenu').close();
});
}
}

3
ionic/components/nav/nav-controller.ts
View File

@ -181,9 +181,11 @@ export class NavController extends Ion {
// add the view to the stack
this._add(enteringView);
if (opts.preCleanup !== false) {
raf(() => {
this._cleanup(enteringView);
});
}
if (this.router) {
// notify router of the state change
@ -363,6 +365,7 @@ export class NavController extends Ion {
// if animate has not been set then default to false
opts.animate = opts.animate || false;
opts.preCleanup = false;
// ensure leaving views are not cached, and should be destroyed
opts.cacheLeavingView = false;

108
ionic/components/nav/test/nested/index.ts Normal file
View File

@ -0,0 +1,108 @@
import {App, NavController} from 'ionic/ionic';
import {Page, Config, IonicApp} from 'ionic/ionic';
import {NavParams, NavController, ViewController} from 'ionic/ionic';
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Login</ion-title>
</ion-navbar>
<ion-content style="text-align:center;" padding>
<button (click)="goToAccount()">Login</button>
</ion-content>
`
})
export class Login {
constructor(nav: NavController) {
this.nav = nav;
}
goToAccount() {
this.nav.push(Account);
}
}
@Page({
template: `
<ion-menu [content]="content">
<ion-toolbar secondary>
<ion-title>Account Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item (click)="goToProfile()">
Profile
</button>
<button ion-item (click)="goToDashboard()">
Dashboard
</button>
<button ion-item detail-none (click)="logOut()">
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="account-nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
`
})
export class Account {
constructor(app: IonicApp) {
this.app = app;
this.rootPage = Dashboard;
}
goToProfile() {
this.app.getComponent('account-nav').setRoot(Profile).then(() => {
this.app.getComponent('menu').close();
});
}
goToDashboard() {
this.app.getComponent('account-nav').setRoot(Dashboard).then(() => {
this.app.getComponent('menu').close();
});
}
logOut() {
this.app.getComponent('root-nav').setRoot(Login);
}
}
@Page({
template: `
<ion-navbar *navbar primary>
<ion-title>Account Dashboard</ion-title>
</ion-navbar>
<ion-content padding>
Dashboard
</ion-content>
`
})
export class Dashboard {}
@Page({
template: `
<ion-navbar *navbar danger>
<ion-title>Account Profile</ion-title>
</ion-navbar>
<ion-content padding>
Profile
</ion-content>
`
})
export class Profile {}
@App({
template: `<ion-nav id="root-nav" [root]="rootPage" swipe-back-enabled="false"></ion-nav>`
})
class E2EApp {
constructor() {
this.rootPage = Login;
}
}

2
ionic/fonts/ionicons.scss
View File

@ -2,7 +2,7 @@
// Ionicons
// --------------------------
$ionicons-font-path: "../fonts" !default;
$ionicons-font-path: $font-path !default;
$ionicons-font-family: "Ionicons" !default;
$ionicons-version: "3.0.0" !default;

9
ionic/fonts/roboto.scss
View File

@ -5,31 +5,32 @@
http://www.apache.org/licenses/LICENSE-2.0.html
*/
$roboto-font-path: $font-path !default;
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/roboto-light.ttf) format('truetype'), url(../fonts/roboto-light.woff) format('woff');
src: local('Roboto Light'), local('Roboto-Light'), url('#{$roboto-font-path}/roboto-light.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-light.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto-regular.ttf) format('truetype'), url(../fonts/roboto-regular.woff) format('woff');
src: local('Roboto'), local('Roboto-Regular'), url('#{$roboto-font-path}/roboto-regular.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto-medium.ttf) format('truetype'), url(../fonts/roboto-medium.woff) format('woff');
src: local('Roboto Medium'), local('Roboto-Medium'), url('#{$roboto-font-path}/roboto-medium.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-medium.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.ttf) format('truetype'), url(../fonts/roboto-bold.woff) format('woff');
src: local('Roboto Bold'), local('Roboto-Bold'), url('#{$roboto-font-path}/roboto-bold.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-bold.woff') format('woff');
}

1
ionic/ionic.core.scss
View File

@ -49,6 +49,7 @@
// Ionicons
$font-path: "../fonts" !default;
$ionicons: true !default;
@if ($ionicons) {
@import "fonts/ionicons";

1
scripts/demos/docs.index.template.html
View File

@ -5,7 +5,6 @@
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="/css/v2-demos/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
</head>