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

refactor(list): removed absolutely positioned borders, changed to an inner div

Browse Source 
references #437
This commit is contained in:
Brandy Carney
2015-11-05 14:15:09 -05:00
parent 9df5b5982f
commit f6bf079878
5 changed files with 174 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,6 @@
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
@ -31,7 +30,7 @@
font-weight: 500;
width: 100%;
z-index: 1000;
&.sticky {
position: -webkit-sticky;
position: sticky;
@ -56,6 +55,12 @@ button.item.item {
will-change: initial;
}
.item-inner {
height: 100%;
width: 100%;
display: flex;
}
ion-item-content {
margin: 0;
flex: 1;

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

@ -21,10 +21,12 @@ import {Component} from 'angular2/angular2';
selector: 'ion-item,[ion-item]',
template:
'<ng-content select="[item-left]"></ng-content>' +
'<ng-content select="[item-right]"></ng-content>' +
'<ion-item-content>' +
'<ng-content></ng-content>'+
'</ion-item-content>',
'<div class="item-inner">' +
'<ng-content select="[item-right]"></ng-content>' +
'<ion-item-content>' +
'<ng-content></ng-content>'+
'</ion-item-content>' +
'</div>',
host: {
'[class.item]': 'isItem'
}

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

@ -40,68 +40,69 @@ ion-note {
color: $item-ios-note-color;
}
.list {
.item-group {
ion-item-group-title {
border-bottom: 1px solid $item-ios-border-color;
}
.item-group {
// Make sure the first and last items don't have borders
> .item:first-of-type:before {
border-top: none !important;
}
> .item:last-of-type:after {
border-top: none !important;
.item:first-child {
.item-inner {
border-top-width: 0;
}
}
}
.list {
.item {
margin-top: -1px;
padding-right: ($item-ios-padding-right / 2);
padding-left: ($item-ios-padding-left / 2);
padding-left: $item-ios-padding-left;
font-size: $item-ios-font-size;
&:before {
position: absolute;
top: 0;
right: 0;
left: $item-ios-padding-left;
&:first-child {
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
.item-inner {
border-top-width: 0;
}
}
&:after {
position: absolute;
right: 0;
bottom: 0;
left: $item-ios-padding-left;
&:last-child {
border-bottom: 1px solid $item-ios-border-color;
}
.item-inner {
padding-right: ($item-ios-padding-right / 2);
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
}
&:first-child:before,
&:last-child:after {
left: 0;
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
}
}
ion-header + .item:first-of-type:before {
left: 0;
}
// If the item has the no-lines attribute we want to remove the border from it
// and the border from the next item if there is one
.item[no-lines] {
border-width: 0;
&[inset] .item {
&:before,
&:after {
left: 0;
.item-inner {
border-width: 0;
}
+ .item {
.item-inner {
border-width: 0;
}
}
}
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
[item-left] {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 0;
}
[item-left],
[item-right] {
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
}
icon[item-left],
@ -224,7 +225,7 @@ ion-card {
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
margin-right: 32px;
}
ion-item-sliding[detail-push] {
@ -234,11 +235,12 @@ ion-card {
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
margin-right: 32px;
}
}
}
// Hairlines for iOS need to be set at 0.55px to show on iPhone 6 and 6 Plus
&.hairlines .list {
ion-item-options {
@ -255,28 +257,26 @@ ion-card {
margin-bottom: 0.55px;
}
ion-header + .item {
border-top-width: 0.55px;
.item-inner {
border-width: 0;
}
}
.item {
margin-top: -0.55px;
border-width: 0.55px;
&:last-child {
margin-bottom: -0.55px;
.item-inner {
border-width: 0.55px;
}
&:before,
&:after {
border-top-width: 0.55px;
&:first-child {
.item-inner {
border-top-width: 0px;
}
}
}
}
.item[no-lines] {
&:before,
&:after {
border-width: 0;
}
+ .item:before {
border-width: 0;
}
}

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

@ -31,25 +31,18 @@ $list-ios-header-color: #333 !default;
letter-spacing: $list-ios-header-letter-spacing;
text-transform: uppercase;
color: $list-ios-header-color;
}
&:after {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
ion-header + .item {
border-top: 1px solid $item-ios-border-color;
.item-inner {
border-top-width: 0;
}
}
}
&.hairlines .list ion-header:after {
border-top-width: 0.55px;
}
.list + .list {
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
}
@ -63,24 +56,22 @@ $list-ios-header-color: #333 !default;
margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
border-radius: $list-inset-ios-border-radius;
ion-header {
border-radius: inherit;
}
.item:first-child {
margin-top: 0;
border-top-right-radius: $list-inset-ios-border-radius;
border-top-left-radius: $list-inset-ios-border-radius;
&:before {
border-top: none;
}
border-top: none;
}
.item:last-child {
margin-bottom: 0;
border-bottom-right-radius: $list-inset-ios-border-radius;
border-bottom-left-radius: $list-inset-ios-border-radius;
&:after {
border-top: none;
}
border-bottom: none;
}
}
@ -90,9 +81,8 @@ $list-ios-header-color: #333 !default;
&.hairlines .list[no-lines],
.list[no-lines] {
ion-header:after,
.item:before,
.item:after {
.item,
.item .item-inner {
border-width: 0;
}
}

90
ionic/components/list/test/no-lines/main.html
View File

@ -27,4 +27,94 @@
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-header>
List With No Lines First Item
</ion-header>
<ion-item no-lines>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-header>
List With No Lines Middle Item
</ion-header>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item no-lines>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-header>
List With No Lines Last Item
</ion-header>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item no-lines>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>