diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index df52b4a5a..8185d2435 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -690,6 +690,9 @@ + + + @@ -1519,16 +1522,6 @@ - - - stylers.d.ts - - - stylers.d.ts - - - stylers.d.ts - utils.d.ts diff --git a/apps/tests/app/style_props.ts b/apps/tests/app/style_props.ts index fd5fe5335..a94b19a69 100644 --- a/apps/tests/app/style_props.ts +++ b/apps/tests/app/style_props.ts @@ -1,4 +1,4 @@ -import styles = require("ui/styling"); +import style = require("ui/styling/style"); import observable = require("ui/core/dependency-observable"); import styleProperty = require("ui/styling/style-property"); import view = require("ui/core/view"); @@ -9,7 +9,7 @@ import stackLayoutDef = require("ui/layouts/stack-layout"); export var fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family", new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.AffectsLayout)); -export class MyTextViewStyler implements styles.stylers.Styler { +export class MyTextViewStyler implements style.Styler { public static setFontFamilyProperty(view: view.View, newValue: any) { if (view.android) { (view.android).setTypeface(android.graphics.Typeface.create(newValue, android.graphics.Typeface.NORMAL)); @@ -41,7 +41,7 @@ export class MyTextViewStyler implements styles.stylers.Styler { } public static registerHandlers() { - styles.stylers.registerHandler(fontFamilyProperty, new styles.stylers.StylePropertyChangedHandler( + style.registerHandler(fontFamilyProperty, new style.StylePropertyChangedHandler( MyTextViewStyler.setFontFamilyProperty, MyTextViewStyler.resetFontFamilyProperty, MyTextViewStyler.getNativeFontFamilyValue), "MyButton"); diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts index 8a09d416a..3446ec5d0 100644 --- a/apps/tests/ui/style/style-tests.ts +++ b/apps/tests/ui/style/style-tests.ts @@ -724,8 +724,8 @@ export function test_styling_visualStates_are_defined() { } export function test_styling_stylers_are_defined() { - TKUnit.assert(types.isFunction(styling.stylers.registerHandler), "registerHandler function is not defined"); - TKUnit.assert(types.isFunction(styling.stylers.StylePropertyChangedHandler), "StylePropertyChangedHandler class is not defined"); + TKUnit.assert(types.isFunction(styleModule.registerHandler), "registerHandler function is not defined"); + TKUnit.assert(types.isFunction(styleModule.StylePropertyChangedHandler), "StylePropertyChangedHandler class is not defined"); } export function test_styling_classes_are_defined() { diff --git a/tsconfig.json b/tsconfig.json index b352f0d50..c989fedb6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -622,10 +622,6 @@ "ui/styling/style-scope.ts", "ui/styling/style.d.ts", "ui/styling/style.ts", - "ui/styling/stylers-common.ts", - "ui/styling/stylers.android.ts", - "ui/styling/stylers.d.ts", - "ui/styling/stylers.ios.ts", "ui/styling/styling.d.ts", "ui/styling/styling.ts", "ui/styling/visual-state-constants.d.ts", @@ -639,6 +635,9 @@ "ui/tab-view/tab-view.android.ts", "ui/tab-view/tab-view.d.ts", "ui/tab-view/tab-view.ios.ts", + "ui/text-base/text-base-styler.android.ts", + "ui/text-base/text-base-styler.d.ts", + "ui/text-base/text-base-styler.ios.ts", "ui/text-base/text-base.d.ts", "ui/text-base/text-base.ts", "ui/text-field/text-field-common.ts", diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts index f7e8aa55a..3bdead63e 100644 --- a/ui/action-bar/action-bar.android.ts +++ b/ui/action-bar/action-bar.android.ts @@ -8,6 +8,9 @@ import view = require("ui/core/view"); import * as traceModule from "trace"; import * as utilsModule from "utils/utils"; import * as imageSourceModule from "image-source"; +import style = require("ui/styling/style"); +import font = require("ui/styling/font"); +import styling = require("ui/styling"); const R_ID_HOME = 0x0102002c; const ACTION_ITEM_ID_OFFSET = 1000; @@ -366,4 +369,29 @@ function getIconVisibility(iconVisibility: string): boolean { function getSystemResourceId(systemIcon: string): number { return android.content.res.Resources.getSystem().getIdentifier(systemIcon, "drawable", "android"); -} \ No newline at end of file +} + +export class ActionBarStyler implements style.Styler { + // color + private static setColorProperty(v: view.View, newValue: any) { + var toolbar = (v._nativeView); + toolbar.setTitleTextColor(newValue); + + } + + private static resetColorProperty(v: view.View, nativeValue: any) { + // there is no toolbar.getTitleTextColor - so default to black + if (types.isNullOrUndefined(nativeValue)) { + nativeValue = android.graphics.Color.BLACK; + } + (v._nativeView).setTitleTextColor(nativeValue); + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( + ActionBarStyler.setColorProperty, + ActionBarStyler.resetColorProperty), "ActionBar"); + } +} + +ActionBarStyler.registerHandlers(); diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts index b04613735..52c9a1be1 100644 --- a/ui/action-bar/action-bar.ios.ts +++ b/ui/action-bar/action-bar.ios.ts @@ -6,6 +6,10 @@ import enums = require("ui/enums"); import view = require("ui/core/view"); import utils = require("utils/utils"); import types = require("utils/types"); +import style = require("ui/styling/style"); +import font = require("ui/styling/font"); +import styling = require("ui/styling"); +import frame = require("ui/frame"); global.moduleMerge(common, exports); @@ -243,3 +247,55 @@ class TapBarItemHandlerImpl extends NSObject { "tap": { returns: interop.types.void, params: [interop.types.id] } }; } + +export class ActionBarStyler implements style.Styler { + // color + private static setColorProperty(v: view.View, newValue: any) { + var topFrame = frame.topmost(); + if (topFrame) { + var navBar = topFrame.ios.controller.navigationBar; + navBar.titleTextAttributes = { [NSForegroundColorAttributeName]: newValue }; + navBar.tintColor = newValue; + } + } + + private static resetColorProperty(v: view.View, nativeValue: any) { + var topFrame = frame.topmost(); + if (topFrame) { + var navBar = topFrame.ios.controller.navigationBar; + navBar.titleTextAttributes = null; + navBar.tintColor = null; + } + } + + // background-color + private static setBackgroundColorProperty(v: view.View, newValue: any) { + var topFrame = frame.topmost(); + if (topFrame) { + var navBar = topFrame.ios.controller.navigationBar; + navBar.barTintColor = newValue; + } + } + + private static resetBackgroundColorProperty(v: view.View, nativeValue: any) { + var topFrame = frame.topmost(); + if (topFrame) { + var navBar = topFrame.ios.controller.navigationBar; + navBar.barTintColor = null; + } + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( + ActionBarStyler.setColorProperty, + ActionBarStyler.resetColorProperty), "ActionBar"); + + style.registerHandler(style.backgroundColorProperty, new style.StylePropertyChangedHandler( + ActionBarStyler.setBackgroundColorProperty, + ActionBarStyler.resetBackgroundColorProperty), "ActionBar"); + + style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "ActionBar"); + } +} + +ActionBarStyler.registerHandlers(); diff --git a/ui/activity-indicator/activity-indicator.android.ts b/ui/activity-indicator/activity-indicator.android.ts index 3fca5407f..37d8c1943 100644 --- a/ui/activity-indicator/activity-indicator.android.ts +++ b/ui/activity-indicator/activity-indicator.android.ts @@ -1,7 +1,10 @@ import aiCommon = require("./activity-indicator-common"); import dependencyObservable = require("ui/core/dependency-observable"); import proxy = require("ui/core/proxy"); -import * as enumsModule from "ui/enums"; +import enums = require("ui/enums"); +import styling = require("ui/styling"); +import style = require("ui/styling/style"); +import view = require("ui/core/view"); function onBusyPropertyChanged(data: dependencyObservable.PropertyChangeData) { var indicator = data.object; @@ -9,8 +12,6 @@ function onBusyPropertyChanged(data: dependencyObservable.PropertyChangeData) { return; } - var enums: typeof enumsModule = require("ui/enums"); - if (indicator.visibility === enums.Visibility.visible) { indicator.android.setVisibility(data.newValue ? android.view.View.VISIBLE : android.view.View.INVISIBLE); } @@ -34,3 +35,45 @@ export class ActivityIndicator extends aiCommon.ActivityIndicator { return this._android; } } + +export class ActivityIndicatorStyler implements style.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var bar = view._nativeView; + bar.getIndeterminateDrawable().setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN); + } + + private static resetColorProperty(view: view.View, nativeValue: number) { + var bar = view._nativeView; + bar.getIndeterminateDrawable().clearColorFilter(); + } + + //Visibility methods + public static setActivityIndicatorVisibilityProperty(view: view.View, newValue: any) { + ActivityIndicatorStyler.setIndicatorVisibility((view).busy, newValue, view._nativeView); + } + + public static resetActivityIndicatorVisibilityProperty(view: view.View, nativeValue: any) { + ActivityIndicatorStyler.setIndicatorVisibility((view).busy, enums.Visibility.visible, view._nativeView); + } + + public static setIndicatorVisibility(isBusy: boolean, visibility: string, nativeView: android.view.View) { + if (visibility === enums.Visibility.collapsed || visibility === enums.Visibility.collapse) { + nativeView.setVisibility(android.view.View.GONE); + } + else { + nativeView.setVisibility(isBusy ? android.view.View.VISIBLE : android.view.View.INVISIBLE); + } + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( + ActivityIndicatorStyler.setColorProperty, + ActivityIndicatorStyler.resetColorProperty), "ActivityIndicator"); + + style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler( + ActivityIndicatorStyler.setActivityIndicatorVisibilityProperty, + ActivityIndicatorStyler.resetActivityIndicatorVisibilityProperty), "ActivityIndicator"); + } +} + +ActivityIndicatorStyler.registerHandlers(); \ No newline at end of file diff --git a/ui/activity-indicator/activity-indicator.ios.ts b/ui/activity-indicator/activity-indicator.ios.ts index fbd097270..5b2e103bc 100644 --- a/ui/activity-indicator/activity-indicator.ios.ts +++ b/ui/activity-indicator/activity-indicator.ios.ts @@ -1,6 +1,9 @@ import aiCommon = require("./activity-indicator-common"); import dependencyObservable = require("ui/core/dependency-observable"); import proxy = require("ui/core/proxy"); +import styling = require("ui/styling"); +import style = require("ui/styling/style"); +import view = require("ui/core/view"); function onBusyPropertyChanged(data: dependencyObservable.PropertyChangeData) { var indicator = data.object; @@ -32,3 +35,29 @@ export class ActivityIndicator extends aiCommon.ActivityIndicator { return this._ios; } } + +export class ActivityIndicatorStyler implements style.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var bar = view.ios; + bar.color = newValue; + } + + private static resetColorProperty(view: view.View, nativeValue: any) { + var bar = view.ios; + bar.color = nativeValue; + } + + private static getNativeColorValue(view: view.View): any { + var bar = view.ios; + return bar.color; + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( + ActivityIndicatorStyler.setColorProperty, + ActivityIndicatorStyler.resetColorProperty, + ActivityIndicatorStyler.getNativeColorValue), "ActivityIndicator"); + } +} + +ActivityIndicatorStyler.registerHandlers(); \ No newline at end of file diff --git a/ui/button/button.ios.ts b/ui/button/button.ios.ts index 7e8172ba6..ae98a5708 100644 --- a/ui/button/button.ios.ts +++ b/ui/button/button.ios.ts @@ -1,5 +1,11 @@ import common = require("./button-common"); import stateChanged = require("ui/core/control-state-change"); +import style = require("ui/styling/style"); +import font = require("ui/styling/font"); +import styling = require("ui/styling"); +import view = require("ui/core/view"); +import utils = require("utils/utils"); +import enums = require("ui/enums"); class TapHandlerImpl extends NSObject { private _owner: WeakRef