From db0413b2dd11a4bd90cf973bdd26fe018ddcbff4 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 12 Aug 2015 15:44:27 -0500 Subject: [PATCH] inset lists, card updates --- ionic/components/app/test/material/index.ts | 12 ++-- ionic/components/app/test/sink/pages/card.ts | 32 ++++----- ionic/components/app/test/sink/pages/list.ts | 8 +-- ionic/components/app/test/snapcat/detail.html | 14 ++-- ionic/components/aside/test/basic/main.html | 2 +- ionic/components/card/card.scss | 12 ++-- ionic/components/card/modes/ios.scss | 22 ++++-- ionic/components/card/modes/material.scss | 26 +++++-- ionic/components/card/test/basic/main.html | 25 +++++-- ionic/components/card/test/links/main.html | 4 +- ionic/components/form/label.scss | 1 + ionic/components/item/item.scss | 68 ------------------- ionic/components/item/item.ts | 32 ++------- ionic/components/item/modes/ios.scss | 20 +++++- ionic/components/list/list.scss | 24 +++++-- ionic/components/list/list.ts | 2 +- ionic/components/list/modes/ios.scss | 10 ++- ionic/components/list/modes/material.scss | 4 +- .../list/test/headers-footers/main.html | 20 +++--- ionic/components/list/test/inset/e2e.ts | 1 + ionic/components/list/test/inset/index.ts | 7 ++ ionic/components/list/test/inset/main.html | 67 ++++++++++++++++++ ionic/components/radio/test/basic/main.html | 4 +- .../text-input/test/inset-inputs/e2e.ts | 1 + .../text-input/test/inset-inputs/index.ts | 7 ++ .../text-input/test/inset-inputs/main.html | 35 ++++++++++ ionic/ionic.core.scss | 2 +- 27 files changed, 275 insertions(+), 187 deletions(-) create mode 100644 ionic/components/list/test/inset/e2e.ts create mode 100644 ionic/components/list/test/inset/index.ts create mode 100644 ionic/components/list/test/inset/main.html create mode 100644 ionic/components/text-input/test/inset-inputs/e2e.ts create mode 100644 ionic/components/text-input/test/inset-inputs/index.ts create mode 100644 ionic/components/text-input/test/inset-inputs/main.html diff --git a/ionic/components/app/test/material/index.ts b/ionic/components/app/test/material/index.ts index 9d74b1edcd..2753ff3348 100644 --- a/ionic/components/app/test/material/index.ts +++ b/ionic/components/app/test/material/index.ts @@ -30,18 +30,18 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
-
-
+ + New Post -
+
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.
-
+ Posted 5 days ago -
-
+ +
` + diff --git a/ionic/components/app/test/sink/pages/card.ts b/ionic/components/app/test/sink/pages/card.ts index c70eb8815f..9c2deaaa2e 100644 --- a/ionic/components/app/test/sink/pages/card.ts +++ b/ionic/components/app/test/sink/pages/card.ts @@ -17,31 +17,25 @@ import {SinkPage} from '../sink-page'; Cards are great for displaying contextual information in a small space, like a Tweet, todays weather report, or a photo.

-
-
-
-
- Card Header -
-
-
+ + + + Card Header +
-
- -
-
- -
-
-
- Card Footer -
+
+
-
+ + Card Footer + + + + ` }) diff --git a/ionic/components/app/test/sink/pages/list.ts b/ionic/components/app/test/sink/pages/list.ts index 0f4b784d30..2a1ad389af 100644 --- a/ionic/components/app/test/sink/pages/list.ts +++ b/ionic/components/app/test/sink/pages/list.ts @@ -19,9 +19,9 @@ import {SinkPage} from '../sink-page'; - + List Header - + @@ -35,9 +35,9 @@ import {SinkPage} from '../sink-page';
Item - + List Footer - + diff --git a/ionic/components/app/test/snapcat/detail.html b/ionic/components/app/test/snapcat/detail.html index 5aef7b90d2..4e7f697e43 100644 --- a/ionic/components/app/test/snapcat/detail.html +++ b/ionic/components/app/test/snapcat/detail.html @@ -1,13 +1,19 @@ Post -
+ + +
{{post.text}}
+ -
+ + Posted {{post.day}} ago -
-
+ + + + diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/aside/test/basic/main.html index bdff01a8e0..8716017aa7 100644 --- a/ionic/components/aside/test/basic/main.html +++ b/ionic/components/aside/test/basic/main.html @@ -1,7 +1,7 @@ - + About diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index 30c45aae33..0e7393daf9 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -2,22 +2,18 @@ // Card // -------------------------------------------------- +$card-inset-margin: $list-inset-margin !default; + .card.card { - margin: 10px; + margin: $card-inset-margin; } .card { + display: block; img { width: 100%; } } - -.card-header, -.card-footer { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 04c65cc729..111d9d1c87 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -2,7 +2,7 @@ // 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-border-radius: 2px !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[mode=ios] { +.card.list[mode=ios] { background: $card-ios-background-color; box-shadow: $card-ios-box-shadow; border-radius: $card-ios-border-radius; font-size: $card-ios-font-size; - .item::before, - .item::after { - left: 0; + .item { + + &:last-child { + margin-bottom: -1px; + } + + &:before, + &:after { + left: 0; + } + } .item:first-child:before { border: none; } - .card-header { + ion-header { padding: $card-ios-header-padding; background-color: $card-ios-footer-background-color; } - .card-footer { + ion-footer { padding: $card-ios-footer-padding; background-color: $card-ios-footer-background-color; } diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss index 177d08f6cf..fca0794aec 100644 --- a/ionic/components/card/modes/material.scss +++ b/ionic/components/card/modes/material.scss @@ -2,7 +2,7 @@ // 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-border-radius: 2px !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[mode=md] { +.card.list[mode=md] { background: $card-md-background-color; box-shadow: $card-md-box-shadow; border-radius: $card-md-border-radius; font-size: $card-md-font-size; - .item::before, - .item::after { - left: 0; + .item { + + &:last-child { + margin-bottom: -1px; + } + + &:before, + &:after { + left: 0; + } + + } + + .item:first-child { + margin-top: 1px; } .item:first-child:before { border: none; } - .card-header { + ion-header { padding: $card-md-header-padding; background-color: $card-md-footer-background-color; } - .card-footer { + ion-footer { padding: $card-md-footer-padding; background-color: $card-md-footer-background-color; } diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html index e1e169ba66..8e52aaa931 100644 --- a/ionic/components/card/test/basic/main.html +++ b/ionic/components/card/test/basic/main.html @@ -3,17 +3,21 @@ -
+ + Card Header -
+ +
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.
-
+ + Card Footer -
+ + @@ -49,8 +53,19 @@ -
+ Card Footer + + + + + + + +
+
+ Card, no header or footer +
diff --git a/ionic/components/card/test/links/main.html b/ionic/components/card/test/links/main.html index e3fe102f90..074ea809da 100644 --- a/ionic/components/card/test/links/main.html +++ b/ionic/components/card/test/links/main.html @@ -41,9 +41,9 @@ -
+ Card Header -
+ diff --git a/ionic/components/form/label.scss b/ionic/components/form/label.scss index fd825e049e..159d25df63 100644 --- a/ionic/components/form/label.scss +++ b/ionic/components/form/label.scss @@ -29,6 +29,7 @@ $input-label-color: #888 !default; .input-label { align-self: stretch; + margin-bottom: 0; max-width: 100%; } diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 43b04e8935..e0d3d418ec 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -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; -} -*/ diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index d10e95d48c..d6e10b8923 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -12,34 +12,10 @@ import {dom} from 'ionic/util'; } }) @View({ - template: ` - -
-
-
-
- -
-
- -
-
- - ` - /* - directives: [ - ItemPrimarySwipeButtons, - // ItemSecondarySwipeButtons, - // ItemPrimaryOptions, - // ItemSecondaryOptions - ] - */ + template: + '
' + + ''+ + '
' }) export class Item { constructor(elementRef: ElementRef) { diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 3dd0810ef1..5ee14cb7ed 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -42,6 +42,17 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; left: $item-ios-padding-left; border-top: 1px solid $item-ios-border-color; } + + &:last-child { + margin-bottom: -1px; + } + } + + &[inset] .item { + &:before, + &:after { + left: 0; + } } .input-label, @@ -55,8 +66,8 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; } .text-input { - margin: 0 $item-ios-padding-right 0 $item-ios-padding-left; - padding: $item-ios-padding-top 0 $item-ios-padding-bottom 0; + margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; + padding: 0; } .item-note { @@ -109,10 +120,13 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; .hairlines .list[mode=ios] .item { margin-top: -0.5px; + &:last-child { + margin-bottom: -0.5px; + } + &:before, &:after { border-top-width: 0.5px; } - } diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index 537622e818..96d0095936 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -2,18 +2,30 @@ // List // -------------------------------------------------- +$list-inset-margin: 10px !default; + .list { display: block; margin: 0; padding: 0; list-style-type: none; + + ion-header, + ion-footer { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } -ion-list-header, -ion-list-footer { - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; +.list[inset] { + margin: $list-inset-margin; + + border: 1px solid $list-border-color; +} + +.hairlines .list[inset] { + border-width: 0.5px; } diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index 2c21f864a8..d09268d686 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -45,7 +45,7 @@ export class List extends Ion { @Directive({ - selector: 'ion-list-header', + selector: 'ion-header', properties: [ 'id' ], diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 657d285675..d15ccd9fe5 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -8,7 +8,7 @@ $list-ios-header-font-weight: 500 !default; $list-ios-header-letter-spacing: 0.1rem !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-weight: 500 !default; $list-ios-footer-letter-spacing: 0.1rem !default; @@ -17,7 +17,7 @@ $list-ios-footer-color: #333 !default; .list[mode=ios] { - ion-list-header { + ion-header { padding: $list-ios-header-padding; font-size: $list-ios-header-font-size; font-weight: $list-ios-header-font-weight; @@ -26,7 +26,7 @@ $list-ios-footer-color: #333 !default; color: $list-ios-header-color; } - ion-list-footer { + ion-footer { padding: $list-ios-footer-padding; font-size: $list-ios-footer-font-size; font-weight: $list-ios-footer-font-weight; @@ -35,4 +35,8 @@ $list-ios-footer-color: #333 !default; color: $list-ios-footer-color; } + &[inset] ion-header { + padding-top: 10px; + } + } diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss index 8c7e503624..934f4aa066 100644 --- a/ionic/components/list/modes/material.scss +++ b/ionic/components/list/modes/material.scss @@ -13,14 +13,14 @@ $list-md-footer-color: #8f8f94 !default; .list[mode=md] { - ion-list-header { + ion-header { padding: $list-md-header-padding; font-size: $list-md-header-font-size; text-transform: uppercase; color: $list-md-header-color; } - ion-list-footer { + ion-footer { padding: $list-md-footer-padding; font-size: $list-md-footer-font-size; text-transform: uppercase; diff --git a/ionic/components/list/test/headers-footers/main.html b/ionic/components/list/test/headers-footers/main.html index 5c5e578b49..54f40d0f9b 100644 --- a/ionic/components/list/test/headers-footers/main.html +++ b/ionic/components/list/test/headers-footers/main.html @@ -2,9 +2,9 @@ - + List Header - +
@@ -30,9 +30,9 @@ - + List Header - +
@@ -44,17 +44,17 @@
- + List Footer - + - + List Header with text that is too long to fit inside the list header - +
@@ -76,8 +76,8 @@
- + List Footer with text that is also too long why do you do this all the time plz stop its too long! - + diff --git a/ionic/components/list/test/inset/e2e.ts b/ionic/components/list/test/inset/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/list/test/inset/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/list/test/inset/index.ts b/ionic/components/list/test/inset/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/list/test/inset/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html new file mode 100644 index 0000000000..bd23045a56 --- /dev/null +++ b/ionic/components/list/test/inset/main.html @@ -0,0 +1,67 @@ + +Inset List + + + + + Inset List Header + +
+
+ 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. +
+
+ + List Footer + + + + + + +
+ +
+ All Out Inset List +
+ +
+ +
+
+ This is a multiline content within a list that should + take up multiple lines and stuff. +
+
+ +
+
+ + 255 +
+
+ + Reply +
+
+ + Forward +
+
+ + + list Footer + + + + + + + +
+
+ Inset List, no header or footer +
+
+ + diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html index adf0ee71bc..6786ca50cf 100644 --- a/ionic/components/radio/test/basic/main.html +++ b/ionic/components/radio/test/basic/main.html @@ -8,9 +8,9 @@ - + Fruits - + Apple diff --git a/ionic/components/text-input/test/inset-inputs/e2e.ts b/ionic/components/text-input/test/inset-inputs/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/text-input/test/inset-inputs/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/text-input/test/inset-inputs/index.ts b/ionic/components/text-input/test/inset-inputs/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/text-input/test/inset-inputs/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html new file mode 100644 index 0000000000..9953f93a3c --- /dev/null +++ b/ionic/components/text-input/test/inset-inputs/main.html @@ -0,0 +1,35 @@ + +Inset Inputs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index d06d59e444..13f6094534 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -23,7 +23,6 @@ "components/button/button-size", "components/button/button-icon", "components/button/button-fab", - "components/card/card", "components/checkbox/checkbox", "components/content/content", "components/item/item", @@ -31,6 +30,7 @@ "components/form/label", "components/text-input/text-input", "components/list/list", + "components/card/card", "components/modal/modal", "components/nav-bar/nav-bar", "components/popup/popup",