diff --git a/tns-core-modules/ui/action-bar/action-bar-common.ts b/tns-core-modules/ui/action-bar/action-bar-common.ts index 6eda5e9e5..b3a04066d 100644 --- a/tns-core-modules/ui/action-bar/action-bar-common.ts +++ b/tns-core-modules/ui/action-bar/action-bar-common.ts @@ -6,7 +6,7 @@ NavigationButton } from "ui/action-bar"; import { Page } from "ui/page"; -import { View, ViewBase, Bindable, Property, unsetValue, horizontalAlignmentProperty, verticalAlignmentProperty } from "ui/core/view"; +import { View, ViewBase, Bindable, Property, unsetValue, horizontalAlignmentProperty, verticalAlignmentProperty, HorizontalAlignment, VerticalAlignment } from "ui/core/view"; export * from "ui/core/view"; @@ -62,8 +62,8 @@ export class ActionBarBase extends View implements ActionBarDefinition { this._titleView = value; if (this._titleView) { - this._titleView.style[horizontalAlignmentProperty.cssName] = "center"; - this._titleView.style[verticalAlignmentProperty.cssName] = "center"; + this._titleView.style[horizontalAlignmentProperty.cssName] = HorizontalAlignment.CENTER; + this._titleView.style[verticalAlignmentProperty.cssName] = VerticalAlignment.MIDDLE; this._addView(this._titleView); } @@ -304,8 +304,8 @@ export class ActionItemBase extends ViewBase implements ActionItemDefinition { private _addActionViewToActionBar() { if (this._actionView && !this._actionView._isAddedToNativeVisualTree && this._actionBar) { - this._actionView.style[horizontalAlignmentProperty.cssName] = "center"; - this._actionView.style[verticalAlignmentProperty.cssName] = "center"; + this._actionView.style[horizontalAlignmentProperty.cssName] = HorizontalAlignment.CENTER; + this._actionView.style[verticalAlignmentProperty.cssName] = VerticalAlignment.MIDDLE; this._actionBar._addView(this._actionView); } } diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts index 3c25e6613..7133ef20e 100644 --- a/tns-core-modules/ui/core/view-common.ts +++ b/tns-core-modules/ui/core/view-common.ts @@ -382,17 +382,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.marginBottom = value; } - get horizontalAlignment(): "left" | "center" | "middle" | "right" | "stretch" { + get horizontalAlignment(): HorizontalAlignment { return this.style.horizontalAlignment; } - set horizontalAlignment(value: "left" | "center" | "middle" | "right" | "stretch") { + set horizontalAlignment(value: HorizontalAlignment) { this.style.horizontalAlignment = value; } - get verticalAlignment(): "top" | "center" | "middle" | "bottom" | "stretch" { + get verticalAlignment(): VerticalAlignment { return this.style.verticalAlignment; } - set verticalAlignment(value: "top" | "center" | "middle" | "bottom" | "stretch") { + set verticalAlignment(value: VerticalAlignment) { this.style.verticalAlignment = value; } @@ -595,9 +595,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { let effectiveMarginTop = childStyle.effectiveMarginTop; let effectiveMarginBottom = childStyle.effectiveMarginBottom; - let vAlignment: string; - if (childStyle.effectiveHeight >= 0 && childStyle.verticalAlignment === "stretch") { - vAlignment = "center"; + let vAlignment: VerticalAlignment; + if (childStyle.effectiveHeight >= 0 && childStyle.verticalAlignment === VerticalAlignment.STRETCH) { + vAlignment = VerticalAlignment.MIDDLE; } else { vAlignment = childStyle.verticalAlignment; @@ -609,20 +609,19 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { let marginRight = childStyle.marginRight; switch (vAlignment) { - case "top": + case VerticalAlignment.TOP: childTop = top + effectiveMarginTop; break; - case "center": - case "middle": + case VerticalAlignment.MIDDLE: childTop = top + (bottom - top - childHeight + (effectiveMarginTop - effectiveMarginBottom)) / 2; break; - case "bottom": + case VerticalAlignment.BOTTOM: childTop = bottom - childHeight - effectiveMarginBottom; break; - case "stretch": + case VerticalAlignment.STRETCH: default: childTop = top + effectiveMarginTop; childHeight = bottom - top - (effectiveMarginTop + effectiveMarginBottom); @@ -632,29 +631,28 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { let effectiveMarginLeft = childStyle.effectiveMarginLeft; let effectiveMarginRight = childStyle.effectiveMarginRight; - let hAlignment: string; - if (childStyle.effectiveWidth >= 0 && childStyle.horizontalAlignment === "stretch") { - hAlignment = "center"; + let hAlignment: HorizontalAlignment; + if (childStyle.effectiveWidth >= 0 && childStyle.horizontalAlignment === HorizontalAlignment.STRETCH) { + hAlignment = HorizontalAlignment.CENTER; } else { hAlignment = childStyle.horizontalAlignment; } switch (hAlignment) { - case "left": + case HorizontalAlignment.LEFT: childLeft = left + effectiveMarginLeft; break; - case "center": - case "middle": + case HorizontalAlignment.CENTER: childLeft = left + (right - left - childWidth + (effectiveMarginLeft - effectiveMarginRight)) / 2; break; - case "right": + case HorizontalAlignment.RIGHT: childLeft = right - childWidth - effectiveMarginRight; break; - case "stretch": + case HorizontalAlignment.STRETCH: default: childLeft = left + effectiveMarginLeft; childWidth = right - left - (effectiveMarginLeft + effectiveMarginRight); @@ -692,8 +690,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { let horizontalMargins = style.effectiveMarginLeft + style.effectiveMarginRight; let verticalMargins = style.effectiveMarginTop + style.effectiveMarginRight; - let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, style.effectiveWidth, style.horizontalAlignment === "stretch"); - let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, style.effectiveHeight, style.verticalAlignment === "stretch"); + let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, style.effectiveWidth, style.horizontalAlignment === HorizontalAlignment.STRETCH); + let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, style.effectiveHeight, style.verticalAlignment === VerticalAlignment.STRETCH); if (traceEnabled) { traceWrite(child.parent + " :measureChild: " + child + " " + layout.measureSpecToString(childWidthMeasureSpec) + ", " + layout.measureSpecToString(childHeightMeasureSpec), traceCategories.Layout); @@ -1190,12 +1188,32 @@ export const paddingBottomProperty = new CssProperty({ }); paddingBottomProperty.register(Style); -export const verticalAlignmentProperty = new CssProperty({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: "stretch", affectsLayout: isIOS }); -verticalAlignmentProperty.register(Style); +export type HorizontalAlignment = "left" | "center" | "right" | "stretch"; +export namespace HorizontalAlignment { + export const LEFT: "left" = "left"; + export const CENTER: "center" = "center"; + export const RIGHT: "right" = "right"; + export const STRETCH: "stretch" = "stretch"; + export const isValid = makeValidator(LEFT, CENTER, RIGHT, STRETCH); + export const parse = makeParser(isValid, STRETCH); +} -export const horizontalAlignmentProperty = new CssProperty({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: "stretch", affectsLayout: isIOS }); +export const horizontalAlignmentProperty = new CssProperty({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: HorizontalAlignment.STRETCH, affectsLayout: isIOS, valueConverter: HorizontalAlignment.parse }); horizontalAlignmentProperty.register(Style); +export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch"; +export namespace VerticalAlignment { + export const TOP: "top" = "top"; + export const MIDDLE: "middle" = "middle"; + export const BOTTOM: "bottom" = "bottom"; + export const STRETCH: "stretch" = "stretch"; + export const isValid = makeValidator(TOP, MIDDLE, BOTTOM, STRETCH); + export const parse = makeParser(isValid, STRETCH); +} + +export const verticalAlignmentProperty = new CssProperty({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: VerticalAlignment.STRETCH, affectsLayout: isIOS, valueConverter: VerticalAlignment.parse }); +verticalAlignmentProperty.register(Style); + interface Thickness { top: string, right: string, diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts index 9450b9743..717d345a3 100644 --- a/tns-core-modules/ui/core/view.android.ts +++ b/tns-core-modules/ui/core/view.android.ts @@ -8,7 +8,7 @@ import { rotateProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, Background, GestureTypes, GestureEventData, applyNativeSetters, Property, - traceEnabled, traceWrite, traceCategories, traceNotifyEvent, Visibility + traceEnabled, traceWrite, traceCategories, traceNotifyEvent, Visibility, HorizontalAlignment, VerticalAlignment } from "./view-common"; export * from "./view-common"; @@ -561,17 +561,17 @@ export class View extends ViewCommon { } } - get [horizontalAlignmentProperty.native](): string { - return org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeView); + get [horizontalAlignmentProperty.native](): HorizontalAlignment { + return org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeView); } - set [horizontalAlignmentProperty.native](value: string) { + set [horizontalAlignmentProperty.native](value: HorizontalAlignment) { org.nativescript.widgets.ViewHelper.setHorizontalAlignment(this.nativeView, value); } - get [verticalAlignmentProperty.native](): string { - return org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeView); + get [verticalAlignmentProperty.native](): VerticalAlignment { + return org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeView); } - set [verticalAlignmentProperty.native](value: string) { + set [verticalAlignmentProperty.native](value: VerticalAlignment) { org.nativescript.widgets.ViewHelper.setVerticalAlignment(this.nativeView, value); } diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts index e64b642cd..6b0175b02 100644 --- a/tns-core-modules/ui/core/view.d.ts +++ b/tns-core-modules/ui/core/view.d.ts @@ -273,12 +273,12 @@ declare module "ui/core/view" { /** * Gets or sets the alignment of this view within its parent along the Horizontal axis. */ - horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch"; + horizontalAlignment: HorizontalAlignment; /** * Gets or sets the alignment of this view within its parent along the Vertical axis. */ - verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch"; + verticalAlignment: VerticalAlignment; /** * Gets or sets the visibility of the view. @@ -754,8 +754,8 @@ declare module "ui/core/view" { export const paddingTopProperty: CssProperty; export const paddingBottomProperty: CssProperty; - export const verticalAlignmentProperty: CssProperty; - export const horizontalAlignmentProperty: CssProperty; + export const horizontalAlignmentProperty: CssProperty; + export const verticalAlignmentProperty: CssProperty; export const fontSizeProperty: InheritedCssProperty; export const fontFamilyProperty: InheritedCssProperty; @@ -783,4 +783,24 @@ declare module "ui/core/view" { export function isValid(value: any): boolean; export function parse(value: string): Visibility; } + + export type HorizontalAlignment = "left" | "center" | "right" | "stretch"; + export namespace HorizontalAlignment { + export const LEFT: "left"; + export const CENTER: "center"; + export const RIGHT: "right"; + export const STRETCH: "stretch"; + export function isValid(value: any): boolean; + export function parse(value: string): HorizontalAlignment; + } + + export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch"; + export namespace VerticalAlignment { + export const TOP: "top"; + export const MIDDLE: "middle"; + export const BOTTOM: "bottom"; + export const STRETCH: "stretch"; + export function isValid(value: any): boolean; + export function parse(value: string): VerticalAlignment; + } } \ No newline at end of file diff --git a/tns-core-modules/ui/enums/enums.ts b/tns-core-modules/ui/enums/enums.ts index 145d5eb79..71e5dac81 100644 --- a/tns-core-modules/ui/enums/enums.ts +++ b/tns-core-modules/ui/enums/enums.ts @@ -58,7 +58,6 @@ export module HorizontalAlignment { export module VerticalAlignment { export var top = "top"; - export var center = "center"; export var middle = "middle"; export var bottom = "bottom"; export var stretch = "stretch"; diff --git a/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts b/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts index 27b23aba7..920a0f7c7 100644 --- a/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts +++ b/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts @@ -1,4 +1,4 @@ -import { StackLayoutBase, orientationProperty, View, layout } from "./stack-layout-common"; +import { StackLayoutBase, orientationProperty, View, layout, VerticalAlignment, HorizontalAlignment } from "./stack-layout-common"; export * from "./stack-layout-common"; @@ -104,17 +104,16 @@ export class StackLayout extends StackLayoutBase { let childRight = right - left - paddingRight; switch (this.verticalAlignment) { - case "center": - case "middle": + case VerticalAlignment.MIDDLE: childTop = (bottom - top - this._totalLength) / 2 + paddingTop - paddingBottom; break; - case "bottom": + case VerticalAlignment.BOTTOM: childTop = bottom - top - this._totalLength + paddingTop - paddingBottom; break; - case "top": - case "stretch": + case VerticalAlignment.TOP: + case VerticalAlignment.STRETCH: default: childTop = paddingTop; break; @@ -141,16 +140,16 @@ export class StackLayout extends StackLayoutBase { let childBottom = bottom - top - paddingBottom; switch (this.horizontalAlignment) { - case "center": + case HorizontalAlignment.CENTER: childLeft = (right - left - this._totalLength) / 2 + paddingLeft - paddingRight; break; - case "right": + case HorizontalAlignment.RIGHT: childLeft = right - left - this._totalLength + paddingLeft - paddingRight; break; - case "left": - case "stretch": + case HorizontalAlignment.LEFT: + case HorizontalAlignment.STRETCH: default: childLeft = paddingLeft; break; diff --git a/tns-core-modules/ui/page/page.android.ts b/tns-core-modules/ui/page/page.android.ts index a5333c5f7..bcef2ef9b 100644 --- a/tns-core-modules/ui/page/page.android.ts +++ b/tns-core-modules/ui/page/page.android.ts @@ -1,4 +1,4 @@ -import { View, PageBase, Color, actionBarHiddenProperty, enableSwipeBackNavigationProperty, statusBarStyleProperty, androidStatusBarBackgroundProperty } from "./page-common"; +import { View, PageBase, Color, actionBarHiddenProperty, enableSwipeBackNavigationProperty, statusBarStyleProperty, androidStatusBarBackgroundProperty, HorizontalAlignment, VerticalAlignment } from "./page-common"; import { ActionBar } from "ui/action-bar"; import { GridLayout } from "ui/layouts/grid-layout"; import { DIALOG_FRAGMENT_TAG } from "./constants"; @@ -36,8 +36,8 @@ function ensureDialogFragmentClass() { dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE); // Hide actionBar and adjust alignment based on _fullscreen value. - this._owner.horizontalAlignment = this._fullscreen ? "stretch" : "center"; - this._owner.verticalAlignment = this._fullscreen ? "stretch" : "center"; + this._owner.horizontalAlignment = this._fullscreen ? HorizontalAlignment.STRETCH : HorizontalAlignment.CENTER; + this._owner.verticalAlignment = this._fullscreen ? VerticalAlignment.STRETCH : VerticalAlignment.MIDDLE; this._owner.actionBarHidden = true; dialog.setContentView(this._owner._nativeView, this._owner._nativeView.getLayoutParams()); diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index f80b263cc..5ba357d51 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/tns-core-modules/ui/styling/style.d.ts @@ -1,5 +1,5 @@ declare module "ui/styling/style" { - import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat, Visibility} from "ui/core/view"; + import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment} from "ui/core/view"; import { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from "ui/text-base"; import { FontStyle, FontWeight } from "ui/styling/font"; @@ -34,8 +34,8 @@ declare module "ui/styling/style" { rightMarginPercent: number; bottomMarginPercent: number; - horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch"; - verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch"; + horizontalAlignment: HorizontalAlignment; + verticalAlignment: VerticalAlignment; } export class Style extends Observable { @@ -106,8 +106,8 @@ declare module "ui/styling/style" { public paddingTop: Length; public paddingRight: Length; public paddingBottom: Length; - public horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch"; - public verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch"; + public horizontalAlignment: HorizontalAlignment; + public verticalAlignment: VerticalAlignment; // TabView-specific props public tabTextColor: Color; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index 9808c50bd..1f735628d 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -1,5 +1,5 @@ import { Style as StyleDefinition } from "ui/styling/style"; -import { Length, PercentLength, Color, Background, Font, ViewBase, BackgroundRepeat, Visibility } from "ui/core/view"; +import { Length, PercentLength, Color, Background, Font, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment } from "ui/core/view"; import { Observable } from "data/observable"; import { resetStyleProperties } from "ui/core/properties"; @@ -85,8 +85,8 @@ export class Style extends Observable implements StyleDefinition { public paddingTop: Length; public paddingRight: Length; public paddingBottom: Length; - public horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch"; - public verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch"; + public horizontalAlignment: HorizontalAlignment; + public verticalAlignment: VerticalAlignment; // TabView-specific props public tabTextColor: Color;