Skip to content

Commit 11d5e54

Browse files
NathanWalkerNathanWalker
authored
feat(action-bar): iosLargeTitle and iosShadow attributes (#10694)
[skip ci]
1 parent adaa796 commit 11d5e54

File tree

6 files changed

+35
-13
lines changed

6 files changed

+35
-13
lines changed

‎apps/toolbox/src/app.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Button {
1010
}
1111
.btn-view-demo {
1212
/* background-color: #65ADF1; */
13-
border-radius: 5;
13+
border-radius: 8;
1414
font-size: 17;
1515
padding: 15;
1616
font-weight: bold;

‎apps/toolbox/src/main-page.xml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
22
<Page.actionBar>
3-
<ActionBar title="Dev Toolbox" icon="" class="action-bar">
3+
<ActionBar title="Dev Toolbox" icon="" class="action-bar" iosLargeTitle="true" iosShadow="false">
44
</ActionBar>
55
</Page.actionBar>
6-
<StackLayout class="p-20">
6+
<StackLayout>
77
<ScrollView class="h-full">
8-
<StackLayout>
8+
<StackLayout class="p-20" paddingBottom="40" iosOverflowSafeArea="false">
99
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1010
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1111
<Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
2-
3-
<StackLayout>
4-
<Button text="Btoa y Atob" tap="encodeDecode" />
2+
<Page.actionBar>
3+
<ActionBar title="WinterTC" class="action-bar">
4+
</ActionBar>
5+
</Page.actionBar>
6+
<StackLayout>
7+
<Button text="Btoa y Atob" tap="encodeDecode" />
58
</StackLayout>
69
</Page>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ export class ActionBarBase extends View implements ActionBarDefinition {
1818
public title: string;
1919
public flat: boolean;
2020
public iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
21+
// prefer large titles
22+
public iosLargeTitle = false;
23+
// show bottom border shadow (always defaulted to true)
24+
public iosShadow = true;
2125

2226
public effectiveContentInsetLeft: number;
2327
public effectiveContentInsetRight: number;
@@ -387,6 +391,12 @@ function convertToContentInset(this: void, value: string | CoreTypes.LengthType)
387391
export const iosIconRenderingModeProperty = new Property<ActionBarBase, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>({ name: 'iosIconRenderingMode', defaultValue: 'alwaysOriginal' });
388392
iosIconRenderingModeProperty.register(ActionBarBase);
389393

394+
export const iosLargeTitleProperty = new Property<ActionBarBase, boolean>({ name: 'iosLargeTitle', defaultValue: false, valueConverter: booleanConverter });
395+
iosLargeTitleProperty.register(ActionBarBase);
396+
397+
export const iosShadowProperty = new Property<ActionBarBase, boolean>({ name: 'iosShadow', defaultValue: true, valueConverter: booleanConverter });
398+
iosShadowProperty.register(ActionBarBase);
399+
390400
export const textProperty = new Property<ActionItemBase, string>({
391401
name: 'text',
392402
defaultValue: '',

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from '.';
2-
import { ActionItemBase, ActionBarBase, isVisible, flatProperty, iosIconRenderingModeProperty, traceMissingIcon } from './action-bar-common';
2+
import { ActionItemBase, ActionBarBase, isVisible, flatProperty, iosIconRenderingModeProperty, traceMissingIcon, iosShadowProperty, iosLargeTitleProperty } from './action-bar-common';
33
import { View } from '../core/view';
44
import { Color } from '../../color';
55
import { ios as iosBackground } from '../styling/background';
@@ -8,6 +8,7 @@ import { colorProperty, backgroundInternalProperty, backgroundColorProperty, bac
88
import { ios as iosViewUtils } from '../utils';
99
import { ImageSource } from '../../image-source';
1010
import { layout, iOSNativeHelper, isFontIconURI } from '../../utils';
11+
import { SDK_VERSION } from '../../utils/constants';
1112
import { accessibilityHintProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityValueProperty } from '../../accessibility/accessibility-properties';
1213

1314
export * from './action-bar-common';
@@ -533,7 +534,7 @@ export class ActionBar extends ActionBarBase {
533534
if (navBar.standardAppearance) {
534535
// Not flat and never been set do nothing.
535536
const appearance = navBar.standardAppearance;
536-
appearance.shadowColor = UINavigationBarAppearance.new().shadowColor;
537+
appearance.shadowColor = this.iosShadow ? UINavigationBarAppearance.new().shadowColor : UIColor.clearColor;
537538
this._updateAppearance(navBar, appearance);
538539
}
539540
} else {
@@ -644,9 +645,8 @@ export class ActionBar extends ActionBarBase {
644645
[backgroundInternalProperty.getDefault](): UIColor {
645646
return null;
646647
}
647-
[backgroundInternalProperty.setNative](value: UIColor) {
648-
// tslint:disable-line
649-
}
648+
// @ts-ignore
649+
[backgroundInternalProperty.setNative](value: UIColor) {}
650650

651651
[flatProperty.setNative](value: boolean) {
652652
const navBar = this.navBar;
@@ -661,4 +661,13 @@ export class ActionBar extends ActionBarBase {
661661
[iosIconRenderingModeProperty.setNative](value: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate') {
662662
this.update();
663663
}
664+
665+
[iosLargeTitleProperty.setNative](value: boolean) {
666+
if (!this.navBar) {
667+
return;
668+
}
669+
if (SDK_VERSION >= 11) {
670+
this.navBar.prefersLargeTitles = value;
671+
}
672+
}
664673
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export interface AnimationDefinition {
6161
scale?: Pair;
6262
height?: CoreTypes.PercentLengthType | string;
6363
width?: CoreTypes.PercentLengthType | string;
64-
rotate?: Point3D;
64+
rotate?: number | Point3D;
6565
duration?: number;
6666
delay?: number;
6767
iterations?: number;

0 commit comments

Comments
 (0)