From 63b7c1449297aaecc632f9ad6750a26fd7323cb7 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 2 Sep 2015 20:44:28 -0500 Subject: [PATCH] toolbar button updates --- ionic/components/button/button-icon.scss | 22 +- ionic/components/button/button.scss | 2 +- ionic/components/button/modes/material.scss | 2 +- ionic/components/icon/icon.ts | 4 +- ionic/components/nav-bar/modes/ios.scss | 1 + ionic/components/radio/test/basic/main.html | 18 +- ionic/components/toolbar/modes/ios.scss | 8 +- ionic/components/toolbar/modes/material.scss | 10 +- .../toolbar/test/scenarios/main.html | 210 ++++++++++++++++-- ionic/components/toolbar/toolbar-buttons.scss | 44 ---- ionic/components/toolbar/toolbar.scss | 10 +- ionic/components/toolbar/toolbar.ts | 1 + ionic/gestures/gesture.ts | 4 +- ionic/ionic.core.scss | 1 - 14 files changed, 244 insertions(+), 93 deletions(-) delete mode 100644 ionic/components/toolbar/toolbar-buttons.scss diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss index 61ce0c2121..a70368f8e1 100644 --- a/ionic/components/button/button-icon.scss +++ b/ionic/components/button/button-icon.scss @@ -6,14 +6,21 @@ button, [button] { + icon { + font-size: 1.4em; + background: none; + border: none; + pointer-events: none; + } + &.icon-left icon { - margin-left: -0.2em; - padding-right: 0.4em; + margin-left: -0.3em; + padding-right: 0.3em; } &.icon-right icon { margin-right: -0.2em; - padding-left: 0.3em; + padding-left: 0.4em; } &.icon-only { @@ -21,16 +28,11 @@ button, min-width: 0.9em; icon { - padding: 0 0.9em; + padding: 0 0.5em; + font-size: 1.8em; } } - icon { - background: none; - border: none; - pointer-events: none; - } - &[small] icon { margin-left: 0; margin-right: 0; diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 2319e5b20e..7623de2dff 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- $button-font-size: 1.6rem !default; -$button-margin: 0.4rem 0 !default; +$button-margin: 0.4rem 0.2rem !default; $button-padding: 0 1em !default; $button-height: 2.8em !default; $button-border-radius: 4px !default; diff --git a/ionic/components/button/modes/material.scss b/ionic/components/button/modes/material.scss index 9a98e42ef6..63a5f6bce2 100644 --- a/ionic/components/button/modes/material.scss +++ b/ionic/components/button/modes/material.scss @@ -4,7 +4,7 @@ $button-md-font-size: 1.4rem !default; $button-md-min-height: 3.6rem !default; -$button-md-padding: 0 1.2em !default; +$button-md-padding: 0 1.1em !default; $button-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !default; $button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default; $button-md-border-radius: 2px !default; diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index c59ad20649..9926b160b4 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -63,8 +63,10 @@ export class Icon { this.name = this.md; } else if (!this.name) { + // looping through native dom attributes, eww + // https://github.com/angular/angular/issues/3961 for (let i = 0, l = ele.attributes.length; i < l; i++) { - if (ele.attributes[i].value === '' && /_|item-|is-active|class/.test(ele.attributes[i].name) !== true) { + if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) { this.name = ele.attributes[i].name; break; } diff --git a/ionic/components/nav-bar/modes/ios.scss b/ionic/components/nav-bar/modes/ios.scss index b963f8a134..2d48752b92 100644 --- a/ionic/components/nav-bar/modes/ios.scss +++ b/ionic/components/nav-bar/modes/ios.scss @@ -23,6 +23,7 @@ $navbar-ios-height: 4.4rem !default; } .back-button-icon { + display: inherit; font-size: 3.2rem; padding-right: 7px; } diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html index 6786ca50cf..5ba4bde7da 100644 --- a/ionic/components/radio/test/basic/main.html +++ b/ionic/components/radio/test/basic/main.html @@ -30,15 +30,17 @@ -

- fruits.dirty: {{fruitsForm.controls.fruits.dirty}}
- fruits.value: {{fruitsForm.controls.fruits.value}}
-

- - - - + + +

+ fruits.dirty: {{fruitsForm.controls.fruits.dirty}}
+ fruits.value: {{fruitsForm.controls.fruits.value}}
+

diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index d4b509fcc5..7a8c98daef 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/ionic/components/toolbar/modes/ios.scss @@ -52,11 +52,9 @@ $toolbar-ios-title-font-size: 1.7rem !default; button, [button] { - font-size: $toolbar-ios-button-font-size; - } - - [icon] { - font-size: 2.5rem; + margin-top: 0; + margin-bottom: 0; + min-height: 32px; } .back-button-icon { diff --git a/ionic/components/toolbar/modes/material.scss b/ionic/components/toolbar/modes/material.scss index 84871d1f20..bd040b66a9 100644 --- a/ionic/components/toolbar/modes/material.scss +++ b/ionic/components/toolbar/modes/material.scss @@ -2,7 +2,7 @@ // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-height: 5.6rem !default; +$toolbar-md-height: 5.6rem !default; $toolbar-md-title-font-size: 2rem !default; $toolbar-md-button-font-size: 1.4rem !default; @@ -25,8 +25,12 @@ $toolbar-md-button-font-size: 1.4rem !default; } button, - [button] { - font-size: $toolbar-md-button-font-size; + [button], + button.activated, + [button].activated { + margin-top: 0; + margin-bottom: 0; + box-shadow: none; } } diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html index 0021ab883a..d1ce624544 100644 --- a/ionic/components/toolbar/test/scenarios/main.html +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -1,13 +1,16 @@ - This is the title that never ends. It just goes on and on my friend. + + aside-toggle left. This is the title that never ends. It just goes on and on my friend. Defaults.hover + + + + + + + + + Defaults.hover + -Defaults.activated + + + + + + + + + Defaults.activated + -Clear + + + + + + Clear + + + + -Clear + + + + + + Clear + + + + -Clear + + + + + + Clear + + + + -Outline + + + + + + + + + Outline + -Outline.hover + + + + + + + + + Outline.hover + -Outline.activated + + + + + + + + + Outline.activated + -ColorAttr + + + + + + + + ColorAttr + -ColorAttr.hover + + + + + + + + ColorAttr.hover + -ColorAttr.activated + + + + + + + + ColorAttr.activated + -Icon/Color Attr + + + + + + + + Icon/Color Attr + diff --git a/ionic/components/toolbar/toolbar-buttons.scss b/ionic/components/toolbar/toolbar-buttons.scss deleted file mode 100644 index 5d2af5e0a9..0000000000 --- a/ionic/components/toolbar/toolbar-buttons.scss +++ /dev/null @@ -1,44 +0,0 @@ - -// Toolbar Buttons -// -------------------------------------------------- - - -.toolbar ion-nav-items { - display: block; - - button, - [button] { - margin: 0 4px; - padding: 0 5px; - - min-width: 2.8rem; - min-height: 2.8rem; - - box-shadow: none; - - &.icon-only icon { - padding: 0 0.4rem; - } - - &.icon-left icon { - margin-left: -0.2rem; - } - - &.icon-right icon { - margin-right: -0.2rem; - } - - &[clear] { - padding: 0 3px; - - icon { - margin-right: 0; - margin-left: 0; - } - } - } - - icon { - font-size: 2.2rem; - } -} diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 9f8af76295..287afe1e5d 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -79,20 +79,24 @@ ion-title { .toolbar [aside-toggle] { margin: 0; padding: 0; - min-height: 32px; - min-width: 32px; + min-width: 48px; order: map-get($toolbar-order, 'aside-toggle'); box-shadow: none; } .toolbar [aside-toggle] icon { - padding: 0 0.9em; + padding: 0 14px; } .toolbar-item { transform: translateZ(0px); } +ion-nav-items { + display: block; + margin: 0 0.2rem; +} + .toolbar-primary-item { order: map-get($toolbar-order, primary); } diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 2ad33dd4e0..b369a107b8 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -110,6 +110,7 @@ export class ToolbarBase extends Ion { @View({ template: `
+
diff --git a/ionic/gestures/gesture.ts b/ionic/gestures/gesture.ts index cd358fb1f1..6f510d16c9 100644 --- a/ionic/gestures/gesture.ts +++ b/ionic/gestures/gesture.ts @@ -43,14 +43,14 @@ export class Gesture { } unlisten() { - this.hammertime.destroy(); - this.hammertime = null; for (let type in this._callbacks) { for (let i = 0; i < this._callbacks[type].length; i++) { //this.element.removeEventListener(type, this._callbacks[type][i]); this.hammertime.off(type, this._callbacks[type]); } } + this.hammertime.destroy(); + this.hammertime = null; this._callbacks = {} } diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 774de005b4..ad968bf58a 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -13,7 +13,6 @@ // Core Components @import "components/toolbar/toolbar", - "components/toolbar/toolbar-buttons", "components/action-menu/action-menu", "components/aside/aside", "components/badge/badge",