feat(action-bar): iosLargeTitle and iosShadow attributes (NativeScript#10694)

[skip ci]

Author: NathanWalker

apps/toolbox/src/app.css

@@ -10,7 +10,7 @@ Button {
 }
 .btn-view-demo {
   /* background-color: #65ADF1; */
-  border-radius: 5;
+  border-radius: 8;
   font-size: 17;
   padding: 15;
   font-weight: bold;

apps/toolbox/src/main-page.xml

@@ -1,11 +1,11 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
   <Page.actionBar>
-    <ActionBar title="Dev Toolbox" icon="" class="action-bar">
+    <ActionBar title="Dev Toolbox" icon="" class="action-bar" iosLargeTitle="true" iosShadow="false">
     </ActionBar>
   </Page.actionBar>
-  <StackLayout class="p-20">
+  <StackLayout>
     <ScrollView class="h-full">
-      <StackLayout>
+      <StackLayout class="p-20" paddingBottom="40" iosOverflowSafeArea="false">
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

apps/toolbox/src/pages/winter-tc.xml

@@ -1,6 +1,9 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
-
-   <StackLayout>
-            <Button text="Btoa y Atob" tap="encodeDecode" />
+    <Page.actionBar>
+        <ActionBar title="WinterTC" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+    <StackLayout>
+        <Button text="Btoa y Atob" tap="encodeDecode" />
     </StackLayout>
 </Page>

packages/core/ui/action-bar/action-bar-common.ts

@@ -18,6 +18,10 @@ export class ActionBarBase extends View implements ActionBarDefinition {
 	public title: string;
 	public flat: boolean;
 	public iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
+	// prefer large titles
+	public iosLargeTitle = false;
+	// show bottom border shadow (always defaulted to true)
+	public iosShadow = true;
 
 	public effectiveContentInsetLeft: number;
 	public effectiveContentInsetRight: number;
@@ -387,6 +391,12 @@ function convertToContentInset(this: void, value: string | CoreTypes.LengthType)
 export const iosIconRenderingModeProperty = new Property<ActionBarBase, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>({ name: 'iosIconRenderingMode', defaultValue: 'alwaysOriginal' });
 iosIconRenderingModeProperty.register(ActionBarBase);
 
+export const iosLargeTitleProperty = new Property<ActionBarBase, boolean>({ name: 'iosLargeTitle', defaultValue: false, valueConverter: booleanConverter });
+iosLargeTitleProperty.register(ActionBarBase);
+
+export const iosShadowProperty = new Property<ActionBarBase, boolean>({ name: 'iosShadow', defaultValue: true, valueConverter: booleanConverter });
+iosShadowProperty.register(ActionBarBase);
+
 export const textProperty = new Property<ActionItemBase, string>({
 	name: 'text',
 	defaultValue: '',

packages/core/ui/action-bar/index.ios.ts

@@ -1,5 +1,5 @@
 import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from '.';
-import { ActionItemBase, ActionBarBase, isVisible, flatProperty, iosIconRenderingModeProperty, traceMissingIcon } from './action-bar-common';
+import { ActionItemBase, ActionBarBase, isVisible, flatProperty, iosIconRenderingModeProperty, traceMissingIcon, iosShadowProperty, iosLargeTitleProperty } from './action-bar-common';
 import { View } from '../core/view';
 import { Color } from '../../color';
 import { ios as iosBackground } from '../styling/background';
@@ -8,6 +8,7 @@ import { colorProperty, backgroundInternalProperty, backgroundColorProperty, bac
 import { ios as iosViewUtils } from '../utils';
 import { ImageSource } from '../../image-source';
 import { layout, iOSNativeHelper, isFontIconURI } from '../../utils';
+import { SDK_VERSION } from '../../utils/constants';
 import { accessibilityHintProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityValueProperty } from '../../accessibility/accessibility-properties';
 
 export * from './action-bar-common';
@@ -533,7 +534,7 @@ export class ActionBar extends ActionBarBase {
 				if (navBar.standardAppearance) {
 					// Not flat and never been set do nothing.
 					const appearance = navBar.standardAppearance;
-					appearance.shadowColor = UINavigationBarAppearance.new().shadowColor;
+					appearance.shadowColor = this.iosShadow ? UINavigationBarAppearance.new().shadowColor : UIColor.clearColor;
 					this._updateAppearance(navBar, appearance);
 				}
 			} else {
@@ -644,9 +645,8 @@ export class ActionBar extends ActionBarBase {
 	[backgroundInternalProperty.getDefault](): UIColor {
 		return null;
 	}
-	[backgroundInternalProperty.setNative](value: UIColor) {
-		// tslint:disable-line
-	}
+	// @ts-ignore
+	[backgroundInternalProperty.setNative](value: UIColor) {}
 
 	[flatProperty.setNative](value: boolean) {
 		const navBar = this.navBar;
@@ -661,4 +661,13 @@ export class ActionBar extends ActionBarBase {
 	[iosIconRenderingModeProperty.setNative](value: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate') {
 		this.update();
 	}
+
+	[iosLargeTitleProperty.setNative](value: boolean) {
+		if (!this.navBar) {
+			return;
+		}
+		if (SDK_VERSION >= 11) {
+			this.navBar.prefersLargeTitles = value;
+		}
+	}
 }

packages/core/ui/animation/animation-interfaces.ts

@@ -61,7 +61,7 @@ export interface AnimationDefinition {
 	scale?: Pair;
 	height?: CoreTypes.PercentLengthType | string;
 	width?: CoreTypes.PercentLengthType | string;
-	rotate?: Point3D;
+	rotate?: number | Point3D;
 	duration?: number;
 	delay?: number;
 	iterations?: number;