Skip to content

Commit 57a8605

Browse files
bundyomanoldonev
bundyo
authored and
manoldonev
committed
feat(action-bar-android): add properties to control the titleView content insets (#7805)
1 parent 2146ac9 commit 57a8605

5 files changed

Lines changed: 147 additions & 7 deletions

File tree

‎tns-core-modules/ui/action-bar/action-bar-common.ts‎

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,20 @@ import { profile } from "../../profiling";
1010
export * from "../core/view";
1111

1212
import {
13-
View, ViewBase, Property,
14-
unsetValue, booleanConverter,
13+
View,
14+
ViewBase,
15+
Property,
16+
unsetValue,
17+
booleanConverter,
1518
horizontalAlignmentProperty,
16-
verticalAlignmentProperty, CSSType,
17-
traceWrite, traceCategories, traceMessageType
19+
verticalAlignmentProperty,
20+
CSSType,
21+
traceWrite,
22+
traceCategories,
23+
traceMessageType, Color
1824
} from "../core/view";
25+
import { ShorthandProperty, CssProperty, Style } from "../core/properties/properties";
26+
import { Length } from "../core/view";
1927

2028
export module knownCollections {
2129
export const actionItems = "actionItems";
@@ -31,6 +39,9 @@ export class ActionBarBase extends View implements ActionBarDefinition {
3139
public flat: boolean;
3240
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
3341

42+
public effectiveContentInsetLeft: number;
43+
public effectiveContentInsetRight: number;
44+
3445
get navigationButton(): NavigationButton {
3546
return this._navigationButton;
3647
}
@@ -90,6 +101,27 @@ export class ActionBarBase extends View implements ActionBarDefinition {
90101
}
91102
}
92103

104+
public get androidContentInset(): string | Length {
105+
return this.style.androidContentInset;
106+
}
107+
public set androidContentInset(value: string | Length) {
108+
this.style.androidContentInset = value;
109+
}
110+
111+
public get androidContentInsetLeft(): Length {
112+
return this.style.androidContentInsetLeft;
113+
}
114+
public set androidContentInsetLeft(value: Length) {
115+
this.style.androidContentInsetLeft = value;
116+
}
117+
118+
public get androidContentInsetRight(): Length {
119+
return this.style.androidContentInsetRight;
120+
}
121+
public set androidContentInsetRight(value: Length) {
122+
this.style.androidContentInsetRight = value;
123+
}
124+
93125
get ios(): any {
94126
return undefined;
95127
}
@@ -351,6 +383,23 @@ export function traceMissingIcon(icon: string) {
351383
traceMessageType.error);
352384
}
353385

386+
function convertToContentInset(this: void, value: string | Length): [CssProperty<any, any>, any][] {
387+
if (typeof value === "string" && value !== "auto") {
388+
let insets = value.split(/[ ,]+/);
389+
390+
return [
391+
[androidContentInsetLeftProperty, Length.parse(insets[0])],
392+
[androidContentInsetRightProperty, Length.parse(insets[1] || insets[0])]
393+
];
394+
}
395+
else {
396+
return [
397+
[androidContentInsetLeftProperty, value],
398+
[androidContentInsetRightProperty, value]
399+
];
400+
}
401+
}
402+
354403
export const iosIconRenderingModeProperty = new Property<ActionBarBase, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "alwaysOriginal" });
355404
iosIconRenderingModeProperty.register(ActionBarBase);
356405

@@ -365,3 +414,44 @@ visibilityProperty.register(ActionItemBase);
365414

366415
export const flatProperty = new Property<ActionBarBase, boolean>({ name: "flat", defaultValue: false, valueConverter: booleanConverter });
367416
flatProperty.register(ActionBarBase);
417+
418+
const androidContentInsetProperty = new ShorthandProperty<Style, string | Length>({
419+
name: "androidContentInset", cssName: "android-content-inset",
420+
getter: function (this: Style) {
421+
if (Length.equals(this.androidContentInsetLeft, this.androidContentInsetRight)) {
422+
return this.androidContentInsetLeft;
423+
}
424+
425+
return `${Length.convertToString(this.androidContentInsetLeft)} ${Length.convertToString(this.androidContentInsetRight)}`;
426+
},
427+
converter: convertToContentInset
428+
});
429+
androidContentInsetProperty.register(Style);
430+
431+
export const androidContentInsetLeftProperty = new CssProperty<Style, Length>({
432+
name: "androidContentInsetLeft", cssName: "android-content-inset-left",
433+
defaultValue: "auto", equalityComparer: Length.equals,
434+
valueChanged: (target, oldValue, newValue) => {
435+
const view = <ActionBarBase>target.viewRef.get();
436+
if (view) {
437+
view.effectiveContentInsetLeft = Length.toDevicePixels(newValue);
438+
} else {
439+
traceWrite(`${newValue} not set to view's property because ".viewRef" is cleared`, traceCategories.Style, traceMessageType.warn);
440+
}
441+
}, valueConverter: Length.parse
442+
});
443+
androidContentInsetLeftProperty.register(Style);
444+
445+
export const androidContentInsetRightProperty = new CssProperty<Style, Length>({
446+
name: "androidContentInsetRight", cssName: "android-content-inset-right",
447+
defaultValue: "auto", equalityComparer: Length.equals,
448+
valueChanged: (target, oldValue, newValue) => {
449+
const view = <ActionBarBase>target.viewRef.get();
450+
if (view) {
451+
view.effectiveContentInsetRight = Length.toDevicePixels(newValue);
452+
} else {
453+
traceWrite(`${newValue} not set to view's property because ".viewRef" is cleared`, traceCategories.Style, traceMessageType.warn);
454+
}
455+
}, valueConverter: Length.parse
456+
});
457+
androidContentInsetRightProperty.register(Style);

‎tns-core-modules/ui/action-bar/action-bar.android.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { AndroidActionBarSettings as AndroidActionBarSettingsDefinition, AndroidActionItemSettings } from ".";
22
import {
33
ActionItemBase, ActionBarBase, isVisible,
4-
View, layout, colorProperty, flatProperty,
5-
Color, traceMissingIcon
4+
View, layout, colorProperty, flatProperty, Color,
5+
traceMissingIcon, androidContentInsetLeftProperty, androidContentInsetRightProperty, Length
66
} from "./action-bar-common";
77
import { RESOURCE_PREFIX, isFontIconURI } from "../../utils/utils";
88
import { fromFileOrResource, fromFontIconCode } from "../../image-source";
@@ -34,6 +34,8 @@ function initializeMenuItemClickListener(): void {
3434
return;
3535
}
3636

37+
apiLevel = android.os.Build.VERSION.SDK_INT;
38+
3739
AppCompatTextView = androidx.appcompat.widget.AppCompatTextView;
3840

3941
@Interfaces([androidx.appcompat.widget.Toolbar.OnMenuItemClickListener])
@@ -55,6 +57,8 @@ function initializeMenuItemClickListener(): void {
5557
appResources = application.android.context.getResources();
5658
}
5759

60+
let apiLevel: number;
61+
5862
export class ActionItem extends ActionItemBase {
5963
private _androidPosition: AndroidActionItemSettings = {
6064
position: "actionBar",
@@ -433,6 +437,18 @@ export class ActionBar extends ActionBarBase {
433437
}
434438
}
435439
}
440+
441+
[androidContentInsetLeftProperty.setNative]() {
442+
if (apiLevel >= 21) {
443+
this.nativeViewProtected.setContentInsetsAbsolute(this.effectiveContentInsetLeft, this.effectiveContentInsetRight);
444+
}
445+
}
446+
447+
[androidContentInsetRightProperty.setNative]() {
448+
if (apiLevel >= 21) {
449+
this.nativeViewProtected.setContentInsetsAbsolute(this.effectiveContentInsetLeft, this.effectiveContentInsetRight);
450+
}
451+
}
436452
}
437453

438454
function getAppCompatTextView(toolbar: androidx.appcompat.widget.Toolbar): typeof AppCompatTextView {

‎tns-core-modules/ui/action-bar/action-bar.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ export class ActionBar extends View {
5555
*/
5656
iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
5757

58+
public effectiveContentInsetLeft: number;
59+
public effectiveContentInsetRight: number;
60+
5861
/**
5962
* Updates the action bar.
6063
*/

‎tns-core-modules/ui/styling/style/style.d.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,39 @@ export class Style extends Observable {
132132
// ListView-specific props
133133
public separatorColor: Color;
134134

135-
//SegmentedBar-specific props
135+
// SegmentedBar-specific props
136136
public selectedBackgroundColor: Color;
137137

138138
// Page-specific props
139139
public statusBarStyle: "light" | "dark";
140140
public androidStatusBarBackground: Color;
141141

142+
// Android ActionBar specific props
143+
144+
/**
145+
* Gets or sets the content inset for the android actionbar.
146+
* The content inset affects the valid area for ActionBar content; insets can be used to effectively align ActionBar content along well-known gridlines.
147+
*
148+
* This property is effective on Android API level 21 or later.
149+
*/
150+
public androidContentInset: string | Length;
151+
152+
/**
153+
* Gets or sets the left content inset for the android actionbar.
154+
* The content inset affects the valid area for ActionBar content; insets can be used to effectively align ActionBar content along well-known gridlines.
155+
*
156+
* This property is effective on Android API level 21 or later.
157+
*/
158+
public androidContentInsetLeft: Length;
159+
160+
/**
161+
* Gets or sets the right content inset for the android actionbar.
162+
* The content inset affects the valid area for ActionBar content; insets can be used to effectively align ActionBar content along well-known gridlines.
163+
*
164+
* This property is effective on Android API level 21 or later.
165+
*/
166+
public androidContentInsetRight: Length;
167+
142168
constructor(ownerView: ViewBase | WeakRef<ViewBase>);
143169
public viewRef: WeakRef<ViewBase>;
144170

‎tns-core-modules/ui/styling/style/style.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,11 @@ export class Style extends Observable implements StyleDefinition {
172172
public statusBarStyle: "light" | "dark";
173173
public androidStatusBarBackground: Color;
174174

175+
// ActionBar-specific props
176+
public androidContentInset: string | Length;
177+
public androidContentInsetLeft: Length;
178+
public androidContentInsetRight: Length;
179+
175180
//flexbox layout properties
176181
public flexDirection: FlexDirection;
177182
public flexWrap: FlexWrap;

0 commit comments

Comments
 (0)