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

inset lists, card updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-12 15:44:27 -05:00
parent 8e053f18de
commit db0413b2dd
27 changed files with 275 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/app/test/material/index.ts
View File

@ -30,18 +30,18 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
</ion-list> </ion-list>
<div class="padding"> <div class="padding">
<div class="card"> <ion-card>
<div class="card-header"> <ion-header>
New Post New Post
</div> </ion-header>
<div class="card-content"> <div class="card-content">
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
</div> </div>
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p4.png"> <img src="http://ionic-io-assets.s3.amazonaws.com/images/p4.png">
<div class="card-footer"> <ion-footer>
Posted 5 days ago Posted 5 days ago
</div> </ion-footer>
</div> </ion-card>
</div> </div>
` + ` +

32
ionic/components/app/test/sink/pages/card.ts
View File

@ -17,31 +17,25 @@ import {SinkPage} from '../sink-page';
Cards are great for displaying contextual information in a small space, Cards are great for displaying contextual information in a small space,
like a Tweet, todays weather report, or a photo. like a Tweet, todays weather report, or a photo.
</p> </p>
<div class="card">
<div class="item card-header"> <ion-card>
<div class="item-content">
<div class="item-label"> <ion-header>
Card Header Card Header
</div> </ion-header>
</div>
</div>
<div class="item"> <div class="item">
<div class="item-media"> <div class="item-media">
<img src="http://i.imgur.com/7BEPcGo.jpg"> <img src="http://i.imgur.com/7BEPcGo.jpg">
</div>
</div>
<div class="item card-footer">
<div class="item-content">
<div class="item-label">
Card Footer
</div>
</div> </div>
</div> </div>
</div> <ion-footer>
Card Footer
</ion-footer>
</ion-card>
</ion-content> </ion-content>
` `
}) })

8
ionic/components/app/test/sink/pages/list.ts
View File

@ -19,9 +19,9 @@ import {SinkPage} from '../sink-page';
<ion-list inset> <ion-list inset>
<ion-list-header> <ion-header>
List Header List Header
</ion-list-header> </ion-header>
<ion-item> <ion-item>
<input control="email" type="email" placeholder="Your email"> <input control="email" type="email" placeholder="Your email">
@ -35,9 +35,9 @@ import {SinkPage} from '../sink-page';
</div> </div>
<ion-item>Item</ion-item> <ion-item>Item</ion-item>
<ion-list-footer> <ion-footer>
List Footer List Footer
</ion-list-footer> </ion-footer>
</ion-list> </ion-list>
</ion-content> </ion-content>

14
ionic/components/app/test/snapcat/detail.html
View File

@ -1,13 +1,19 @@
<ion-navbar *navbar id="p2toolbar"><ion-title>Post</ion-title></ion-navbar> <ion-navbar *navbar id="p2toolbar"><ion-title>Post</ion-title></ion-navbar>
<ion-content> <ion-content>
<div class="card">
<ion-card>
<div class="card-content"> <div class="card-content">
{{post.text}} {{post.text}}
</div> </div>
<img src="{{post.image}}"> <img src="{{post.image}}">
<div class="card-footer">
<ion-footer>
Posted {{post.day}} ago Posted {{post.day}} ago
</div> </ion-footer>
</div>
</ion-card>
</ion-content> </ion-content>

2
ionic/components/aside/test/basic/main.html
View File

@ -1,7 +1,7 @@
<ion-view> <ion-view>
<ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu"> <ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
<ion-list inset> <ion-list>
<ion-item> <ion-item>
About About
</ion-item> </ion-item>

12
ionic/components/card/card.scss
View File

@ -2,22 +2,18 @@
// Card // Card
// -------------------------------------------------- // --------------------------------------------------
$card-inset-margin: $list-inset-margin !default;
.card.card { .card.card {
margin: 10px; margin: $card-inset-margin;
} }
.card { .card {
display: block;
img { img {
width: 100%; width: 100%;
} }
} }
.card-header,
.card-footer {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

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

@ -2,7 +2,7 @@
// iOS Card // iOS Card
// -------------------------------------------------- // --------------------------------------------------
$card-ios-background-color: #fff !default; $card-ios-background-color: $list-background-color !default;
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-ios-border-radius: 2px !default; $card-ios-border-radius: 2px !default;
$card-ios-font-size: 1.4rem !default; $card-ios-font-size: 1.4rem !default;
@ -13,27 +13,35 @@ $card-ios-footer-background-color: $card-ios-background-color !default;
$card-ios-footer-padding: 10px; $card-ios-footer-padding: 10px;
.card[mode=ios] { .card.list[mode=ios] {
background: $card-ios-background-color; background: $card-ios-background-color;
box-shadow: $card-ios-box-shadow; box-shadow: $card-ios-box-shadow;
border-radius: $card-ios-border-radius; border-radius: $card-ios-border-radius;
font-size: $card-ios-font-size; font-size: $card-ios-font-size;
.item::before, .item {
.item::after {
left: 0; &:last-child {
margin-bottom: -1px;
}
&:before,
&:after {
left: 0;
}
} }
.item:first-child:before { .item:first-child:before {
border: none; border: none;
} }
.card-header { ion-header {
padding: $card-ios-header-padding; padding: $card-ios-header-padding;
background-color: $card-ios-footer-background-color; background-color: $card-ios-footer-background-color;
} }
.card-footer { ion-footer {
padding: $card-ios-footer-padding; padding: $card-ios-footer-padding;
background-color: $card-ios-footer-background-color; background-color: $card-ios-footer-background-color;
} }

26
ionic/components/card/modes/material.scss
View File

@ -2,7 +2,7 @@
// Material Design Card // Material Design Card
// -------------------------------------------------- // --------------------------------------------------
$card-md-background-color: #fff !default; $card-md-background-color: $list-background-color !default;
$card-md-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; $card-md-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-md-border-radius: 2px !default; $card-md-border-radius: 2px !default;
$card-md-font-size: 1.4rem !default; $card-md-font-size: 1.4rem !default;
@ -13,27 +13,39 @@ $card-md-footer-background-color: $card-md-background-color !default;
$card-md-footer-padding: 10px; $card-md-footer-padding: 10px;
.card[mode=md] { .card.list[mode=md] {
background: $card-md-background-color; background: $card-md-background-color;
box-shadow: $card-md-box-shadow; box-shadow: $card-md-box-shadow;
border-radius: $card-md-border-radius; border-radius: $card-md-border-radius;
font-size: $card-md-font-size; font-size: $card-md-font-size;
.item::before, .item {
.item::after {
left: 0; &:last-child {
margin-bottom: -1px;
}
&:before,
&:after {
left: 0;
}
}
.item:first-child {
margin-top: 1px;
} }
.item:first-child:before { .item:first-child:before {
border: none; border: none;
} }
.card-header { ion-header {
padding: $card-md-header-padding; padding: $card-md-header-padding;
background-color: $card-md-footer-background-color; background-color: $card-md-footer-background-color;
} }
.card-footer { ion-footer {
padding: $card-md-footer-padding; padding: $card-md-footer-padding;
background-color: $card-md-footer-background-color; background-color: $card-md-footer-background-color;
} }

25
ionic/components/card/test/basic/main.html
View File

@ -3,17 +3,21 @@
<ion-card> <ion-card>
<div class="card-header">
<ion-header>
Card Header Card Header
</div> </ion-header>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<div class="item-content"> <div class="item-content">
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
</div> </div>
</div> </div>
<div class="card-footer">
<ion-footer>
Card Footer Card Footer
</div> </ion-footer>
</ion-card> </ion-card>
@ -49,8 +53,19 @@
</div> </div>
</div> </div>
<div class="card-footer"> <ion-footer>
Card Footer Card Footer
</ion-footer>
</ion-card>
<ion-card>
<div class="item">
<div class="item-content">
Card, no header or footer
</div>
</div> </div>
</ion-card> </ion-card>

4
ionic/components/card/test/links/main.html
View File

@ -41,9 +41,9 @@
<ion-card> <ion-card>
<div class="card-header"> <ion-header>
Card Header Card Header
</div> </ion-header>
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>

1
ionic/components/form/label.scss
View File

@ -29,6 +29,7 @@ $input-label-color: #888 !default;
.input-label { .input-label {
align-self: stretch; align-self: stretch;
margin-bottom: 0;
max-width: 100%; max-width: 100%;
} }

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

@ -186,71 +186,3 @@ button.item.item {
} }
} }
/*
.item-group-title {
display: block;
padding: $item-padding;
padding-top: ceil($item-padding / 2);
padding-bottom: ceil($item-padding / 2);
min-height: 30px;
background-color: $item-divider-bg;
color: $item-divider-color;
font-weight: 500;
width: 100%;
z-index: 100;
&.sticky {
position: -webkit-sticky;
top: 0;
}
}
ion-primary-swipe-buttons,
.item-content {
transition: transform 0.3s;
}
ion-primary-swipe-buttons {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
transform: translate3d(-100%,0,0);
&:not(.open):not(.changing) {
display: none;
}
&.open {
transform: translate3d(100%, 0, 0);
}
}
// Some testing things
.item-media-placeholder {
width: 40px;
height: 40px;
border-radius: 50%;
background: #aaa;
margin-right: 16px;
}
.item-label h3 {
margin: 0;
font-size: 16px;
margin: 0 0 6px;
line-height: .75em;
color: #222;
font-weight: normal;
}
.item-label h4 {
margin: 10px 0 0px;
font-size: 14px;
line-height: 14px;
color: #858585;
}
*/

32
ionic/components/item/item.ts
View File

@ -12,34 +12,10 @@ import {dom} from 'ionic/util';
} }
}) })
@View({ @View({
template: ` template:
<!-- '<div class="item-content">' +
<ng-content select="ion-primary-options"></ng-content> '<ng-content></ng-content>'+
<ng-content select="ion-primary-swipe-buttons"></ng-content> '</div>'
-->
<div class="item-content">
<div class="item-media">
</div>
<div class="item-accessory">
<!--<ng-content select="ion-item-accessory"></ng-content>-->
</div>
<div class="item-label">
<ng-content></ng-content>
</div>
</div>
<!--
<ng-content select="ion-secondary-options"></ng-content>
<ng-content select="ion-secondary-swipe-buttons"></ng-content>
-->
`
/*
directives: [
ItemPrimarySwipeButtons,
// ItemSecondarySwipeButtons,
// ItemPrimaryOptions,
// ItemSecondaryOptions
]
*/
}) })
export class Item { export class Item {
constructor(elementRef: ElementRef) { constructor(elementRef: ElementRef) {

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

@ -42,6 +42,17 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
left: $item-ios-padding-left; left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color; border-top: 1px solid $item-ios-border-color;
} }
&:last-child {
margin-bottom: -1px;
}
}
&[inset] .item {
&:before,
&:after {
left: 0;
}
} }
.input-label, .input-label,
@ -55,8 +66,8 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
} }
.text-input { .text-input {
margin: 0 $item-ios-padding-right 0 $item-ios-padding-left; margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
padding: $item-ios-padding-top 0 $item-ios-padding-bottom 0; padding: 0;
} }
.item-note { .item-note {
@ -109,10 +120,13 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
.hairlines .list[mode=ios] .item { .hairlines .list[mode=ios] .item {
margin-top: -0.5px; margin-top: -0.5px;
&:last-child {
margin-bottom: -0.5px;
}
&:before, &:before,
&:after { &:after {
border-top-width: 0.5px; border-top-width: 0.5px;
} }
} }

24
ionic/components/list/list.scss
View File

@ -2,18 +2,30 @@
// List // List
// -------------------------------------------------- // --------------------------------------------------
$list-inset-margin: 10px !default;
.list { .list {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
ion-header,
ion-footer {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
ion-list-header, .list[inset] {
ion-list-footer { margin: $list-inset-margin;
display: block;
overflow: hidden; border: 1px solid $list-border-color;
white-space: nowrap; }
text-overflow: ellipsis;
.hairlines .list[inset] {
border-width: 0.5px;
} }

2
ionic/components/list/list.ts
View File

@ -45,7 +45,7 @@ export class List extends Ion {
@Directive({ @Directive({
selector: 'ion-list-header', selector: 'ion-header',
properties: [ properties: [
'id' 'id'
], ],

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

@ -8,7 +8,7 @@ $list-ios-header-font-weight: 500 !default;
$list-ios-header-letter-spacing: 0.1rem !default; $list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default; $list-ios-header-color: #333 !default;
$list-ios-footer-padding: 10px $item-ios-padding-right 0 $item-ios-padding-left !default; $list-ios-footer-padding: 10px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-footer-font-size: 1.2rem !default; $list-ios-footer-font-size: 1.2rem !default;
$list-ios-footer-font-weight: 500 !default; $list-ios-footer-font-weight: 500 !default;
$list-ios-footer-letter-spacing: 0.1rem !default; $list-ios-footer-letter-spacing: 0.1rem !default;
@ -17,7 +17,7 @@ $list-ios-footer-color: #333 !default;
.list[mode=ios] { .list[mode=ios] {
ion-list-header { ion-header {
padding: $list-ios-header-padding; padding: $list-ios-header-padding;
font-size: $list-ios-header-font-size; font-size: $list-ios-header-font-size;
font-weight: $list-ios-header-font-weight; font-weight: $list-ios-header-font-weight;
@ -26,7 +26,7 @@ $list-ios-footer-color: #333 !default;
color: $list-ios-header-color; color: $list-ios-header-color;
} }
ion-list-footer { ion-footer {
padding: $list-ios-footer-padding; padding: $list-ios-footer-padding;
font-size: $list-ios-footer-font-size; font-size: $list-ios-footer-font-size;
font-weight: $list-ios-footer-font-weight; font-weight: $list-ios-footer-font-weight;
@ -35,4 +35,8 @@ $list-ios-footer-color: #333 !default;
color: $list-ios-footer-color; color: $list-ios-footer-color;
} }
&[inset] ion-header {
padding-top: 10px;
}
} }

4
ionic/components/list/modes/material.scss
View File

@ -13,14 +13,14 @@ $list-md-footer-color: #8f8f94 !default;
.list[mode=md] { .list[mode=md] {
ion-list-header { ion-header {
padding: $list-md-header-padding; padding: $list-md-header-padding;
font-size: $list-md-header-font-size; font-size: $list-md-header-font-size;
text-transform: uppercase; text-transform: uppercase;
color: $list-md-header-color; color: $list-md-header-color;
} }
ion-list-footer { ion-footer {
padding: $list-md-footer-padding; padding: $list-md-footer-padding;
font-size: $list-md-footer-font-size; font-size: $list-md-footer-font-size;
text-transform: uppercase; text-transform: uppercase;

20
ionic/components/list/test/headers-footers/main.html
View File

@ -2,9 +2,9 @@
<ion-list> <ion-list>
<ion-list-header> <ion-header>
List Header List Header
</ion-list-header> </ion-header>
<div class="item"> <div class="item">
<icon name="ion-wifi"></icon> <icon name="ion-wifi"></icon>
@ -30,9 +30,9 @@
<ion-list> <ion-list>
<ion-list-header> <ion-header>
List Header List Header
</ion-list-header> </ion-header>
<div class="item"> <div class="item">
<icon name="ion-wand"></icon> <icon name="ion-wand"></icon>
@ -44,17 +44,17 @@
</div> </div>
</div> </div>
<ion-list-footer> <ion-footer>
List Footer List Footer
</ion-list-footer> </ion-footer>
</ion-list> </ion-list>
<ion-list> <ion-list>
<ion-list-header> <ion-header>
List Header with text that is too long to fit inside the list header List Header with text that is too long to fit inside the list header
</ion-list-header> </ion-header>
<div class="item"> <div class="item">
<icon name="ion-pizza"></icon> <icon name="ion-pizza"></icon>
@ -76,8 +76,8 @@
</div> </div>
</div> </div>
<ion-list-footer> <ion-footer>
List Footer with text that is also too long why do you do this all the time plz stop its too long! List Footer with text that is also too long why do you do this all the time plz stop its too long!
</ion-list-footer> </ion-footer>
</ion-list> </ion-list>

1
ionic/components/list/test/inset/e2e.ts Normal file
View File

@ -0,0 +1 @@

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

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

67
ionic/components/list/test/inset/main.html Normal file
View File

@ -0,0 +1,67 @@
<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar>
<ion-list inset>
<ion-header>
Inset List Header
</ion-header>
<div class="item item-text-wrap">
<div class="item-content">
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
</div>
</div>
<ion-footer>
List Footer
</ion-footer>
</ion-list>
<ion-list inset>
<div class="item">
<icon name="ion-location"></icon>
<div class="item-content">
All Out Inset List
</div>
<button outline>View</button>
</div>
<div class="item item-text-wrap">
<div class="item-content">
This is a multiline content within a list that should
take up multiple lines and stuff.
</div>
</div>
<div class="item">
<div class="item-content">
<icon small name="ion-star"></icon>
<span>255</span>
</div>
<div class="item-content">
<icon small name="ion-reply"></icon>
<span>Reply</span>
</div>
<div class="item-content">
<icon small name="ion-forward"></icon>
Forward
</div>
</div>
<ion-footer>
list Footer
</ion-footer>
</ion-list>
<ion-list inset>
<div class="item">
<div class="item-content">
Inset List, no header or footer
</div>
</div>
</ion-list>

4
ionic/components/radio/test/basic/main.html
View File

@ -8,9 +8,9 @@
<ion-radio-group ng-control="fruits"> <ion-radio-group ng-control="fruits">
<ion-list-header> <ion-header>
Fruits Fruits
</ion-list-header> </ion-header>
<ion-radio value="apple" checked="true"> <ion-radio value="apple" checked="true">
Apple Apple

1
ionic/components/text-input/test/inset-inputs/e2e.ts Normal file
View File

@ -0,0 +1 @@

7
ionic/components/text-input/test/inset-inputs/index.ts Normal file
View File

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

35
ionic/components/text-input/test/inset-inputs/main.html Normal file
View File

@ -0,0 +1,35 @@
<ion-toolbar><ion-title>Inset Inputs</ion-title></ion-toolbar>
<ion-content>
<ion-list>
<ion-input inset>
<icon name="ion-home"></icon>
<input value="Inset text input inside a list" type="text">
</ion-input>
<ion-input inset>
<input value="Inset text input inside a list" type="text">
</ion-input>
</ion-list>
<ion-card>
<ion-input>
<input value="Text input inside a card" type="text">
<icon name="ion-home"></icon>
</ion-input>
<ion-input>
<input value="Text input inside a card" type="text">
<icon name="ion-star"></icon>
</ion-input>
</ion-card>
</ion-content>

2
ionic/ionic.core.scss
View File

@ -23,7 +23,6 @@
"components/button/button-size", "components/button/button-size",
"components/button/button-icon", "components/button/button-icon",
"components/button/button-fab", "components/button/button-fab",
"components/card/card",
"components/checkbox/checkbox", "components/checkbox/checkbox",
"components/content/content", "components/content/content",
"components/item/item", "components/item/item",
@ -31,6 +30,7 @@
"components/form/label", "components/form/label",
"components/text-input/text-input", "components/text-input/text-input",
"components/list/list", "components/list/list",
"components/card/card",
"components/modal/modal", "components/modal/modal",
"components/nav-bar/nav-bar", "components/nav-bar/nav-bar",
"components/popup/popup", "components/popup/popup",