Skip to content

Commit

Permalink
feat(ios-dark-mode): adapt dynamic system colors (#7826)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vchimev
vchimev committed Oct 4, 2019
1 parent 82f2ccb commit f82cf08
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 20 deletions.
12 changes: 8 additions & 4 deletions tests/app/ui/page/page-tests-common.ts
View file
Expand Up @@ -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();
Expand Down Expand Up @@ -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");
}
}
Expand Down
5 changes: 3 additions & 2 deletions tns-core-modules/application/application.ios.ts
View file
Expand Up @@ -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:
Expand Down Expand Up @@ -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<NotificationObserver>;
Expand Down Expand Up @@ -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) {
Expand Down
9 changes: 8 additions & 1 deletion tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts
View file
Expand Up @@ -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;
Expand Down
6 changes: 4 additions & 2 deletions tns-core-modules/ui/page/page.ios.ts
View file
Expand Up @@ -282,19 +282,21 @@ 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.

constructor() {
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() {
Expand Down
18 changes: 14 additions & 4 deletions tns-core-modules/ui/tabs/tabs.ios.ts
View file
Expand Up @@ -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();
Expand Down
14 changes: 11 additions & 3 deletions tns-core-modules/ui/text-base/text-base.ios.ts
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
14 changes: 10 additions & 4 deletions tns-core-modules/ui/text-view/text-view.ios.ts
View file
Expand Up @@ -8,9 +8,12 @@ import {
CSSType
} from "../editable-text-base";

export * from "../editable-text-base";

import { profile } from "../../profiling";
import { ios } from "../../utils/utils";

export * from "../editable-text-base";
const majorVersion = ios.MajorVersion;

class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
public static ObjCProtocols = [UITextViewDelegate];
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
}
Expand Down

0 comments on commit f82cf08

Please sign in to comment.