diff --git a/tests/app/ui/page/page-tests-common.ts b/tests/app/ui/page/page-tests-common.ts index 0ffcaf6da..a74b2f768 100644 --- a/tests/app/ui/page/page-tests-common.ts +++ b/tests/app/ui/page/page-tests-common.ts @@ -24,6 +24,7 @@ import { Color } from "tns-core-modules/color"; import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view/tab-view"; import { _resetRootView } from "tns-core-modules/application"; import { Button } from "tns-core-modules/ui/button/button"; +import { ios } from "tns-core-modules/utils/utils"; export function addLabelToPage(page: Page, text?: string) { const label = new Label(); @@ -376,15 +377,18 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() { TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#0000FF"); } -export function test_page_backgroundColor_is_white() { +export function test_page_backgroundColor() { const page = new Page(); - page.id = "page_test_page_backgroundColor_is_white"; + page.id = "page_test_page_backgroundColor"; + const factory = () => page; helper.navigate(factory); - const whiteColor = new Color("white"); + if (isIOS) { - TKUnit.assertTrue(whiteColor.ios.CGColor.isEqual(page.nativeViewProtected.backgroundColor.CGColor), "page default backgroundColor should be white"); + const backgroundColor = ios.MajorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor; + TKUnit.assertEqual(page.nativeView.backgroundColor, backgroundColor, "page backgroundColor is wrong"); } else { + const whiteColor = new Color("white"); TKUnit.assertEqual(page.nativeViewProtected.getBackground().getColor(), whiteColor.android, "page default backgroundColor should be white"); } } diff --git a/tns-core-modules/application/application.ios.ts b/tns-core-modules/application/application.ios.ts index 60fd1fda8..33220468a 100644 --- a/tns-core-modules/application/application.ios.ts +++ b/tns-core-modules/application/application.ios.ts @@ -27,6 +27,7 @@ import { ios } from "../utils/utils"; const IOS_PLATFORM = "ios"; const getVisibleViewController = ios.getVisibleViewController; +const majorVersion = ios.MajorVersion; // NOTE: UIResponder with implementation of window - related to https://github.com/NativeScript/ios-runtime/issues/430 // TODO: Refactor the UIResponder to use Typescript extends when this issue is resolved: @@ -81,6 +82,7 @@ class CADisplayLinkTarget extends NSObject { } class IOSApplication implements IOSApplicationDefinition { + private _backgroundColor = majorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor; private _delegate: typeof UIApplicationDelegate; private _window: UIWindow; private _observers: Array; @@ -159,10 +161,9 @@ class IOSApplication implements IOSApplicationDefinition { this._window = UIWindow.alloc().initWithFrame(UIScreen.mainScreen.bounds); // TODO: Expose Window module so that it can we styled from XML & CSS - this._window.backgroundColor = UIColor.whiteColor; + this._window.backgroundColor = this._backgroundColor; this.notifyAppStarted(notification); - } public notifyAppStarted(notification?: NSNotification) { diff --git a/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts b/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts index 42b3b78a2..9ce1dfb51 100644 --- a/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts +++ b/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts @@ -2,11 +2,18 @@ import { ActivityIndicatorBase, busyProperty, colorProperty, Color } from "./act export * from "./activity-indicator-common"; +import { ios } from "../../utils/utils"; + +const majorVersion = ios.MajorVersion; + export class ActivityIndicator extends ActivityIndicatorBase { nativeViewProtected: UIActivityIndicatorView; + private _activityIndicatorViewStyle = majorVersion <= 12 ? UIActivityIndicatorViewStyle.Gray : UIActivityIndicatorViewStyle.Medium; + createNativeView() { - const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(UIActivityIndicatorViewStyle.Gray); + const viewStyle = this._activityIndicatorViewStyle; + const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(viewStyle); view.hidesWhenStopped = true; return view; diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts index fa9a8c59f..d021b75a3 100644 --- a/tns-core-modules/ui/page/page.ios.ts +++ b/tns-core-modules/ui/page/page.ios.ts @@ -282,11 +282,11 @@ class UIViewControllerImpl extends UIViewController { } } -const whiteColor = new Color("white").ios; export class Page extends PageBase { nativeViewProtected: UIView; viewController: UIViewControllerImpl; + private _backgroundColor = majorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor; private _ios: UIViewControllerImpl; public _presentedViewController: UIViewController; // used when our page present native viewController without going through our abstraction. @@ -294,7 +294,9 @@ export class Page extends PageBase { super(); const controller = UIViewControllerImpl.initWithOwner(new WeakRef(this)); this.viewController = this._ios = controller; - controller.view.backgroundColor = whiteColor; + + // Make transitions look good + controller.view.backgroundColor = this._backgroundColor; } createNativeView() { diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts index be26ca1b0..7e7c947fd 100644 --- a/tns-core-modules/ui/tabs/tabs.ios.ts +++ b/tns-core-modules/ui/tabs/tabs.ios.ts @@ -90,10 +90,20 @@ class UIPageViewControllerImpl extends UIPageViewController { } tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner)); - tabBar.tintColor = UIColor.blueColor; - tabBar.barTintColor = UIColor.whiteColor; - tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal); - tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected); + + if (majorVersion <= 12) { + tabBar.tintColor = UIColor.blueColor; + tabBar.barTintColor = UIColor.whiteColor; + tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal); + tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected); + } else { + tabBar.tintColor = UIColor.systemBlueColor; + tabBar.barTintColor = UIColor.systemBackgroundColor; + tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Normal); + tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Selected); + tabBar.inkColor = UIColor.clearColor; + } + tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin; tabBar.alignment = MDCTabBarAlignment.Leading; tabBar.sizeToFit(); diff --git a/tns-core-modules/ui/text-base/text-base.ios.ts b/tns-core-modules/ui/text-base/text-base.ios.ts index a20221e3b..c7c07218b 100644 --- a/tns-core-modules/ui/text-base/text-base.ios.ts +++ b/tns-core-modules/ui/text-base/text-base.ios.ts @@ -5,10 +5,14 @@ import { textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, lineHeightProperty, FormattedString, Span, Color, isBold, resetSymbol } from "./text-base-common"; -import { isString } from "../../utils/types"; export * from "./text-base-common"; +import { isString } from "../../utils/types"; +import { ios } from "../../utils/utils"; + +const majorVersion = ios.MajorVersion; + export class TextBase extends TextBaseCommon { public nativeViewProtected: UITextField | UITextView | UILabel | UIButton; @@ -194,8 +198,12 @@ export class TextBase extends TextBaseCommon { dict.set(NSParagraphStyleAttributeName, paragraphStyle); } - if (style.color && (dict.size > 0 || isTextView)) { - dict.set(NSForegroundColorAttributeName, style.color.ios); + if (dict.size > 0 || isTextView) { + if (style.color) { + dict.set(NSForegroundColorAttributeName, style.color.ios); + } else if (majorVersion >= 13) { + dict.set(NSForegroundColorAttributeName, UIColor.labelColor); + } } const text = this.text; diff --git a/tns-core-modules/ui/text-view/text-view.ios.ts b/tns-core-modules/ui/text-view/text-view.ios.ts index 293ebae83..a1411cffd 100644 --- a/tns-core-modules/ui/text-view/text-view.ios.ts +++ b/tns-core-modules/ui/text-view/text-view.ios.ts @@ -8,10 +8,13 @@ import { CSSType } from "../editable-text-base"; -import { profile } from "../../profiling"; - export * from "../editable-text-base"; +import { profile } from "../../profiling"; +import { ios } from "../../utils/utils"; + +const majorVersion = ios.MajorVersion; + class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate { public static ObjCProtocols = [UITextViewDelegate]; @@ -113,6 +116,9 @@ export class TextView extends EditableTextBase implements TextViewDefinition { private _isShowingHint: boolean; public _isEditing: boolean; + private _hintColor = majorVersion <= 12 ? UIColor.blackColor.colorWithAlphaComponent(0.22) : UIColor.placeholderTextColor; + private _textColor = majorVersion <= 12 ? null : UIColor.labelColor; + createNativeView() { const textView = NoScrollAnimationUITextView.new(); if (!textView.font) { @@ -173,7 +179,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition { // Use semi-transparent version of color for back-compatibility this.nativeTextViewProtected.textColor = color.ios.colorWithAlphaComponent(0.22); } else { - this.nativeTextViewProtected.textColor = UIColor.blackColor.colorWithAlphaComponent(0.22); + this.nativeTextViewProtected.textColor = this._hintColor; } } else { const color = this.style.color; @@ -182,8 +188,8 @@ export class TextView extends EditableTextBase implements TextViewDefinition { this.nativeTextViewProtected.textColor = color.ios; this.nativeTextViewProtected.tintColor = color.ios; } else { - this.nativeTextViewProtected.textColor = null; - this.nativeTextViewProtected.tintColor = null; + this.nativeTextViewProtected.textColor = this._textColor; + this.nativeTextViewProtected.tintColor = this._textColor; } } }