From 7f40df0a5fda821dcf7c8e061ebab92d1f63e241 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sun, 26 Jul 2015 00:21:41 -0500 Subject: [PATCH] list/item scss wip --- ionic/components/button/button.scss | 2 +- ionic/components/form/form.scss | 4 +- ionic/components/icon/icon.ts | 21 ++- ionic/components/item/extensions/ios.scss | 100 ++++++++++++- ionic/components/item/item.scss | 134 +++++++++++++++++- .../components/item/test/accessories/index.ts | 11 -- .../item/test/accessories/main.html | 121 ---------------- ionic/components/item/test/basic/index.ts | 11 -- ionic/components/item/test/basic/main.html | 19 --- .../test/basic => item/test/buttons}/e2e.ts | 0 .../test/basic => item/test/buttons}/index.ts | 0 ionic/components/item/test/buttons/main.html | 104 ++++++++++++++ ionic/components/item/test/icons/e2e.ts | 1 + ionic/components/item/test/icons/index.ts | 7 + ionic/components/item/test/icons/main.html | 81 +++++++++++ ionic/components/item/test/media/e2e.ts | 1 + ionic/components/item/test/media/index.ts | 7 + ionic/components/item/test/media/main.html | 58 ++++++++ ionic/components/item/test/text/e2e.ts | 1 + ionic/components/item/test/text/index.ts | 7 + ionic/components/item/test/text/main.html | 53 +++++++ ionic/components/list/extensions/ios.scss | 4 +- ionic/components/list/list.scss | 12 +- ionic/components/list/test/basic/main.html | 91 ------------ ionic/platform/registry.ts | 3 + 25 files changed, 576 insertions(+), 277 deletions(-) delete mode 100644 ionic/components/item/test/accessories/index.ts delete mode 100644 ionic/components/item/test/accessories/main.html delete mode 100644 ionic/components/item/test/basic/index.ts delete mode 100644 ionic/components/item/test/basic/main.html rename ionic/components/{list/test/basic => item/test/buttons}/e2e.ts (100%) rename ionic/components/{list/test/basic => item/test/buttons}/index.ts (100%) create mode 100644 ionic/components/item/test/buttons/main.html create mode 100644 ionic/components/item/test/icons/e2e.ts create mode 100644 ionic/components/item/test/icons/index.ts create mode 100644 ionic/components/item/test/icons/main.html create mode 100644 ionic/components/item/test/media/e2e.ts create mode 100644 ionic/components/item/test/media/index.ts create mode 100644 ionic/components/item/test/media/main.html create mode 100644 ionic/components/item/test/text/e2e.ts create mode 100644 ionic/components/item/test/text/index.ts create mode 100644 ionic/components/item/test/text/main.html delete mode 100644 ionic/components/list/test/basic/main.html diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 8b97c1ced7..4d89275a31 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -36,7 +36,7 @@ button, will-change: transform; margin: $button-margin; - line-height: 1.1; + line-height: 1; @include appearance(none); diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss index b67ee786bf..95a2d51d1d 100644 --- a/ionic/components/form/form.scss +++ b/ionic/components/form/form.scss @@ -76,7 +76,7 @@ textarea { align-items: center; position: relative; overflow: hidden; - padding: ($item-padding / 3) * 2; + //padding: ($item-padding / 3) * 2; } .item-input-wrapper { @@ -97,7 +97,7 @@ textarea { } .item-input-wrapper ~ .button { - margin-left: ($item-padding / 3) * 2; + //margin-left: ($item-padding / 3) * 2; } diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index f85aa123df..512421aab5 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -1,4 +1,4 @@ -import {Directive, View, CSSClass, ElementRef, Optional, Parent} from 'angular2/angular2'; +import {Directive, View, CSSClass, ElementRef, Optional, Parent, Attribute} from 'angular2/angular2'; import {IonicConfig} from '../../config/config'; import {IonicComponent} from '../../config/annotations'; @@ -64,20 +64,30 @@ Custom Font Icon } }) export class IconDirective { - constructor(elementRef: ElementRef, @Optional() @Parent() parentButton: Button) { - var ele = this.ele = elementRef.nativeElement; + constructor( + elementRef: ElementRef, + @Optional() @Parent() parentButton: Button, + @Attribute('forward') forward: string, + config: IonicConfig + ) { + let ele = this.ele = elementRef.nativeElement; this.iconLeft = this.iconRight = this.iconOnly = false; this.ariaHidden = true; + if (forward !== null) { + this.fwdIcon = config.setting('forwardIcon'); + } + if (parentButton) { // this icon is within a button this.withinButton = true; // check if there is a sibling element (that's not aria hidden) + let hasPreviousSiblingElement = !!ele.previousElementSibling; let hasNextSiblingElement = ele.nextElementSibling && ele.nextElementSibling.getAttribute('aria-hidden') !== 'true'; - if (!hasNextSiblingElement) { + if (!hasPreviousSiblingElement && !hasNextSiblingElement) { // this icon is within a button, and doesn't have a sibling element // check for text nodes to the right and left of this icon element this.iconLeft = (ele.nextSibling && ele.nextSibling.textContent || '').trim() !== ''; @@ -92,6 +102,9 @@ export class IconDirective { } onInit() { + if (this.fwdIcon) { + this.name = this.fwdIcon; + } if (!this.name) return; // add the css class to show the icon font diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss index a10a8a2131..44fd8f1650 100644 --- a/ionic/components/item/extensions/ios.scss +++ b/ionic/components/item/extensions/ios.scss @@ -2,13 +2,102 @@ // iOS Item // -------------------------------------------------- -$item-ios-background-color: #fff !default; -$item-ios-min-height: 44px !default; -$item-ios-padding-left: 15px !default; -$item-ios-accessory-color: #8e8e93 !default; -$item-ios-border-color: $list-ios-border-color !default; +$item-ios-font-size: 1.6rem !default; + +$item-ios-padding-top: 13px !default; +$item-ios-padding-right: 15px !default; +$item-ios-padding-bottom: 14px !default; +$item-ios-padding-left: 15px !default; + +$item-ios-border-color: $list-ios-border-color !default; +$item-ios-avatar-size: 4rem; +$item-ios-thumbnail-size: 8rem; +.list[mode="ios"] { + + .item { + font-size: $item-ios-font-size; + margin-top: -1px; + + &:before { + position: absolute; + content: ''; + top: 0; + right: 0; + left: $item-ios-padding-left; + border-top: 1px solid $item-ios-border-color; + } + + &:after { + position: absolute; + content: ''; + right: 0; + bottom: 0; + left: $item-ios-padding-left; + border-top: 1px solid $item-ios-border-color; + } + + &:last-child:after { + left: 0; + } + } + + .item-media, + .item-content, + .item-note { + margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; + } + + .item-note { + color: #999; + } + + .item > icon { + margin-left: $item-ios-padding-left; + margin-right: $item-ios-padding-right; + } + + icon[forward] { + font-size: 2rem; + color: #cfcfcf; + } + + button { + margin: 0 $item-ios-padding-right 0 $item-ios-padding-left; + padding: 2px 6px; + min-height: 26px; + } + + .badge { + margin-right: $item-ios-padding-right; + } + + .avatar { + max-width: $item-ios-avatar-size; + max-height: $item-ios-avatar-size; + border-radius: $item-ios-avatar-size / 2; + } + + .thumbnail { + max-width: $item-ios-thumbnail-size; + max-height: $item-ios-thumbnail-size; + } + + .vertical-align-top { + button, + [button] { + margin-top: $item-ios-padding-top; + } + > icon { + margin-top: $item-ios-padding-top / 2; + } + } + +} + + +/* .list[mode="ios"] { margin-top: -1px; @@ -50,3 +139,4 @@ $item-ios-border-color: $list-ios-border-color !default; } } +*/ diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 7f32f8e6a1..811c211ae8 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -1,16 +1,135 @@ // Item // -------------------------------------------------- - -$item-min-height: 44px !default; -$item-padding: 15px !default; - -$item-divider-bg: #f5f5f5 !default; -$item-divider-color: #222 !default; -$item-divider-padding: 5px 15px !default; +// Core structure only, dimensions belong in platform specific extensions +.item { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + border: 0; + min-height: 4.4rem; + text-align: initial; +} + +a.item, +button.item { + border-radius: 0; + margin: 0; + color: inherit; + text-decoration: none; + width: 100%; + line-height: normal; + justify-content: inherit; +} + +.item-content { + margin: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.item-text-wrap, +.item-text-wrap .item-content { + white-space: normal; +} + +.list .item { + border-radius: 0; + + icon:first-child { + min-width: 26px; + text-align: center; + } + + &.activated { + background-color: #d9d9d9; + } + +} + +.list .item.item { + + .item-content + button, + .item-content + [button], + button + .item-content, + [button] + .item-content, + icon + icon, + icon + .item-content, + .item-content + icon, + .item-media + .item-content, + .item-content + .item-media { + margin-left: 0; + } + +} + +.list a.item.item, +.list button.item.item { + margin-left: 0; + margin-right: 0; + padding: 0; +} + +.list .item button.icon-only, +.item button.icon-only icon { + padding: 0; +} + +.item > button.icon-left icon, +.item > button.icon-right icon { + font-size: 1.2em; + margin: 0; + padding: 0; +} + +.item { + + h2 { + margin: 0 0 2px; + font-size: 1.6rem; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + line-height: normal; + margin: 0 0 3px 0; + font-size: 1.4rem; + } + + p { + line-height: normal; + color: #666; + font-size: 1.4rem; + margin: 0 0 2px; + } + + h2:last-child, + h3:last-child, + h4:last-child, + h5:last-child, + h6:last-child, + p:last-child { + margin-bottom: 0; + } + +} + +.vertical-align-top { + align-items: flex-start; +} + +/* .item { position: relative; @@ -192,3 +311,4 @@ ion-primary-swipe-buttons { line-height: 14px; color: #858585; } +*/ diff --git a/ionic/components/item/test/accessories/index.ts b/ionic/components/item/test/accessories/index.ts deleted file mode 100644 index 0a28867b95..0000000000 --- a/ionic/components/item/test/accessories/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {App} from 'ionic/ionic'; - - -@App({ - templateUrl: 'main.html' -}) -class IonicApp { - constructor() { - this.items = [1, 2, 3, 4, 5] - } -} diff --git a/ionic/components/item/test/accessories/main.html b/ionic/components/item/test/accessories/main.html deleted file mode 100644 index ff81a77e9d..0000000000 --- a/ionic/components/item/test/accessories/main.html +++ /dev/null @@ -1,121 +0,0 @@ - - - - -
-
-
- Item Label -
-
- Item Note -
-
-
- -
- -
-
- Icon Left, outside item-content -
-
-
- -
-
- -
- Icon Left, inside item-content -
-
-
- -
-
-
- Icon Right -
- -
-
- -
-
-
- I tried to picture clusters of information - as they moved through the computer. - What do they look like? - Ships, motorcycles? - - With the circuits like freeways. - I kept dreaming of a world - I thought I'd never see. - - And then, one day, - I got in. -
-
-
- 5 -
-
-
-
- -
-
-
-
-
- Red Balloons -
-
-
- 99 -
-
-
-
- -
-
- -
-
-
- Avatar Left, item-label -
-
-
- -
-
-
- Avatar Right, item-label -
-
- -
-
-
- -
-
- -
-
-
-

- Avatar Right, h2 header, p content -

-

- Your mother was a hamster and your father smelt of elderberries! -

-
-
-
- - - - diff --git a/ionic/components/item/test/basic/index.ts b/ionic/components/item/test/basic/index.ts deleted file mode 100644 index 0a28867b95..0000000000 --- a/ionic/components/item/test/basic/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {App} from 'ionic/ionic'; - - -@App({ - templateUrl: 'main.html' -}) -class IonicApp { - constructor() { - this.items = [1, 2, 3, 4, 5] - } -} diff --git a/ionic/components/item/test/basic/main.html b/ionic/components/item/test/basic/main.html deleted file mode 100644 index 64c159b3de..0000000000 --- a/ionic/components/item/test/basic/main.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - List Header - - - - - -
-
- - - Item {{item}} - - - - - diff --git a/ionic/components/list/test/basic/e2e.ts b/ionic/components/item/test/buttons/e2e.ts similarity index 100% rename from ionic/components/list/test/basic/e2e.ts rename to ionic/components/item/test/buttons/e2e.ts diff --git a/ionic/components/list/test/basic/index.ts b/ionic/components/item/test/buttons/index.ts similarity index 100% rename from ionic/components/list/test/basic/index.ts rename to ionic/components/item/test/buttons/index.ts diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html new file mode 100644 index 0000000000..40d76f2772 --- /dev/null +++ b/ionic/components/item/test/buttons/main.html @@ -0,0 +1,104 @@ +Items as Links/Buttons + + + + +
+ a.item +
+ + + + +
+ a.item.activated +
+ + + + + + + +
+ +
+ div.item left button[primary] +
+
+ +
+
+ div.item right button[outline][secondary] +
+ +
+ +
+
+ div.item icon only button +
+ +
+ +
+
+ div.item right icon/text button +
+ +
+ +
+ +
+ div.item left clear button +
+
+ +
+
+ div.item right clear button +
+ +
+ +
+
+ This is multiline text that has a + long description of about how the text is really long. +
+ +
+ + + + + + diff --git a/ionic/components/item/test/icons/e2e.ts b/ionic/components/item/test/icons/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/item/test/icons/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/item/test/icons/index.ts b/ionic/components/item/test/icons/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/item/test/icons/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html new file mode 100644 index 0000000000..782048af20 --- /dev/null +++ b/ionic/components/item/test/icons/main.html @@ -0,0 +1,81 @@ +Item Icons + + + +
+
+ Div with forward icon +
+ +
+ + +
+ Link with forward icon +
+ + + + + + +
+ Link with right side icon +
+ + + + + + + + +
+ Link with two right side icons +
+ + + + + + + + + + + + diff --git a/ionic/components/item/test/media/e2e.ts b/ionic/components/item/test/media/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/item/test/media/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/item/test/media/index.ts b/ionic/components/item/test/media/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/item/test/media/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/item/test/media/main.html b/ionic/components/item/test/media/main.html new file mode 100644 index 0000000000..79bf75456f --- /dev/null +++ b/ionic/components/item/test/media/main.html @@ -0,0 +1,58 @@ +Item Media + + + + + + +
+ Media/Thumbnail right side, a.item +
+
+
+
+ + +
+
+
+
+
+

Media w/ Multiline

+

Button on right

+

Vertically align top

+
+ +
+ + + + + + diff --git a/ionic/components/item/test/text/e2e.ts b/ionic/components/item/test/text/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/item/test/text/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/item/test/text/index.ts b/ionic/components/item/test/text/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/item/test/text/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/item/test/text/main.html b/ionic/components/item/test/text/main.html new file mode 100644 index 0000000000..aa154a8c55 --- /dev/null +++ b/ionic/components/item/test/text/main.html @@ -0,0 +1,53 @@ +Item Text + + + +
+
+ Plain Ol' div with some text +
+
+ +
+
+ Single line text that should have ellipses when it doesn't all fit in the item +
+
+ +
+
+ Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item-content +
+
+ +
+
+ Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item +
+
+ +
+
+

H2 Title Text

+

Paragraph line 1

+
+
+ +
+
+

H3 Title Text

+

Paragraph line 1

+

Paragraph line 2

+
+
+ +
+
+

H4 Title Text

+

Paragraph line 1

+

Paragraph line 2

+

Paragraph line 3

+
+
+ + diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss index 8f758ae0ed..e1b612bd59 100644 --- a/ionic/components/list/extensions/ios.scss +++ b/ionic/components/list/extensions/ios.scss @@ -15,7 +15,7 @@ $list-ios-footer-color: #8f8f94 !default; .list[mode="ios"] { - +/* .list-header { position: relative; margin: $list-ios-header-margin; @@ -35,5 +35,5 @@ $list-ios-footer-color: #8f8f94 !default; font-size: $list-ios-footer-font-size; color: $list-ios-footer-color; } - +*/ } diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index fdd2774f83..4fe48305c8 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -2,12 +2,17 @@ // List // -------------------------------------------------- -$list-margin-top: 0px !default; -$list-margin-bottom: 0px !default; + +.list { + display: block; + margin: 0; + padding: 0; + list-style-type: none; +} +/* .list-header { - position: relative; margin-top: $list-margin-top; margin-bottom: $list-margin-bottom; overflow: hidden; @@ -42,3 +47,4 @@ $list-margin-bottom: 0px !default; .list-header + .list { margin-top: 0; } +*/ diff --git a/ionic/components/list/test/basic/main.html b/ionic/components/list/test/basic/main.html deleted file mode 100644 index 4ce9063bfa..0000000000 --- a/ionic/components/list/test/basic/main.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - -
- I'm a header! -
- - - - - - - - -
- List Header -
- -
-
-
- Item -
-
-
-
- List Footer -
- - - -
- List Header -
-
-
-
- Item -
- A really cool item -
-
-
-
- - - - - -
- List Header -
- - -
-
-
- Item -
-
-
- - - - - -
-
-
- Item -
-
-
- -
-
-
- Item -
-
-
- - - - - - - diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index 1d0db59257..406e040d8c 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -6,6 +6,7 @@ Platform.register({ settings: { backButtonText: 'Back', backButtonIcon: 'ion-ios-arrow-back', + forwardIcon: 'ion-ios-arrow-forward', mode: 'ios', iconMode: 'ios', viewTransition: 'ios' @@ -53,6 +54,7 @@ Platform.register({ settings: { backButtonText: '', backButtonIcon: 'ion-android-arrow-back', + forwardIcon: '', mode: 'md', iconMode: 'md', type: 'overlay', @@ -82,6 +84,7 @@ Platform.register({ settings: { backButtonText: 'Back', backButtonIcon: 'ion-ios-arrow-back', + forwardIcon: 'ion-ios-arrow-forward', mode: 'ios', iconMode: 'ios', tapPolyfill: true,