From c8d03793a3f8fcfda94954dfca4216d99014dcbf Mon Sep 17 00:00:00 2001
From: Adam Bradley
Date: Fri, 24 Jul 2015 14:46:26 -0500
Subject: [PATCH] hairlines body css polyfill
---
ionic/components/action-menu/action-menu.scss | 32 ++++---------------
.../action-menu/extensions/ios.scss | 20 +++++-------
ionic/components/button/test/block/main.html | 5 ---
ionic/components/nav-bar/nav-bar.ts | 19 +++++++----
ionic/init.js | 17 ++++++++--
5 files changed, 42 insertions(+), 51 deletions(-)
diff --git a/ionic/components/action-menu/action-menu.scss b/ionic/components/action-menu/action-menu.scss
index d3db013992..b86c490403 100644
--- a/ionic/components/action-menu/action-menu.scss
+++ b/ionic/components/action-menu/action-menu.scss
@@ -52,8 +52,7 @@ $action-menu-options-border-color: #d1d3d6 !default;
width: auto;
overflow: hidden;
- button,
- [button] {
+ button {
display: block;
padding: 1px;
width: 100%;
@@ -69,8 +68,7 @@ $action-menu-options-border-color: #d1d3d6 !default;
}
}
- button.activated,
- [button].activated {
+ button.activated {
box-shadow: none;
border-color: $action-menu-options-border-color;
color: $action-menu-options-text-color;
@@ -94,12 +92,11 @@ $action-menu-options-border-color: #d1d3d6 !default;
background-color: #fff;
overflow: hidden;
- button,
- [button] {
+ button {
border-width: 1px 0px 0px 0px;
}
- button:first-child:last-child,
- [button]:first-child:last-child {
+
+ button:first-child:last-child {
border-width: 0;
}
}
@@ -108,21 +105,6 @@ $action-menu-options-border-color: #d1d3d6 !default;
background: $action-menu-options-bg-color;
}
-.action-menu-cancel {
- button,
- [button] {
- font-weight: 500;
- }
-}
-
-.action-menu-open {
- pointer-events: none;
-
- &.modal-open .modal {
- pointer-events: none;
- }
-
- .action-menu-backdrop {
- pointer-events: auto;
- }
+.action-menu-cancel button {
+ font-weight: 500;
}
diff --git a/ionic/components/action-menu/extensions/ios.scss b/ionic/components/action-menu/extensions/ios.scss
index c93e4f25b1..2d9c85b126 100644
--- a/ionic/components/action-menu/extensions/ios.scss
+++ b/ionic/components/action-menu/extensions/ios.scss
@@ -57,7 +57,7 @@ $action-menu-ios-icon-font-size: 1.4em !default;
background: $action-menu-ios-background-color;
font-weight: 400;
- @include hairline(bottom, $action-menu-ios-border-color);
+ border-bottom: 1px solid $action-menu-ios-border-color;
}
.action-menu-title {
@@ -86,15 +86,11 @@ $action-menu-ios-icon-font-size: 1.4em !default;
border-bottom-right-radius: $action-menu-ios-border-radius;
}
- .action-menu-container icon {
- display: flex;
- align-items: center;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- padding: 0 10px 2px;
- font-size: $action-menu-ios-icon-font-size;
- }
-
+}
+
+.hairlines .action-menu[mode="ios"] {
+ .action-menu-title,
+ .action-menu-option {
+ border-bottom-width: 0.5px;
+ }
}
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index ba97796b95..0a95f61edf 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -21,9 +21,4 @@
-
- a[button][block][full][danger]
-
-
diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts
index 6788a80d28..6f15057dee 100644
--- a/ionic/components/nav-bar/nav-bar.ts
+++ b/ionic/components/nav-bar/nav-bar.ts
@@ -1,4 +1,4 @@
-import {Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
+import {Directive, View, Parent, Optional, ElementRef, forwardRef} from 'angular2/angular2';
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
import {ToolbarBase} from '../toolbar/toolbar';
@@ -45,11 +45,16 @@ import {ViewItem} from '../view/view-item';
]
})
export class Navbar extends ToolbarBase {
- constructor(item: ViewItem, elementRef: ElementRef, config: IonicConfig, app: IonicApp) {
+ constructor(
+ elementRef: ElementRef,
+ config: IonicConfig,
+ app: IonicApp,
+ @Optional() item: ViewItem
+ ) {
super(elementRef, config);
this.app = app;
- item.navbarView(this);
+ item && item.navbarView(this);
this.bbClass = config.setting('backButtonIcon');
this.bbDefault = config.setting('backButtonText');
@@ -83,7 +88,7 @@ export class Navbar extends ToolbarBase {
}
})
class BackButton {
- constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) {
+ constructor(@Parent() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
this.item = item;
navbar.backButtonElement(elementRef);
}
@@ -91,7 +96,7 @@ class BackButton {
goBack(ev) {
ev.stopPropagation();
ev.preventDefault();
- this.item.viewCtrl.pop();
+ this.item && this.item.viewCtrl.pop();
}
}
@@ -132,7 +137,7 @@ class NavbarItem {
selector: 'template[navbar]'
})
export class NavbarTemplate {
- constructor(item: ViewItem, protoViewRef: ProtoViewRef) {
- item.addProtoViewRef('navbar', protoViewRef);
+ constructor(@Optional() item: ViewItem, protoViewRef: ProtoViewRef) {
+ item && item.addProtoViewRef('navbar', protoViewRef);
}
}
diff --git a/ionic/init.js b/ionic/init.js
index 4eec8dd9b4..65cd2adf21 100644
--- a/ionic/init.js
+++ b/ionic/init.js
@@ -1,5 +1,18 @@
-(function(){
+(function(document){
+
+ // hairline polyfill
+ if (window.devicePixelRatio >= 2) {
+ var harlineEle = document.createElement('div');
+ harlineEle.style.border = '.5px solid transparent';
+ document.body.appendChild(harlineEle);
+
+ if (harlineEle.offsetHeight == 1) {
+ document.body.classList.add('hairlines');
+ }
+ document.body.removeChild(harlineEle);
+ }
+
var ionicImport = System.import('ionic/components/app/app');
@@ -14,4 +27,4 @@
importApp(ele[i].getAttribute('module'));
}
-})();
+})(document);