mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 11:42:04 +08:00
Merge pull request #999 from NativeScript/feature/action-tab-colors
Feature/action tab colors
This commit is contained in:
Alexander Vakrilov
@ -189,7 +189,39 @@
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\tests\pages\tab-view.xml" />
|
||||
<Content Include="apps\ui-tests-app\segmented-bar\all.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\action-bar\all.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\action-bar\clean.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\tab-view\background.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\tab-view\all.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\tab-view\tabsBackground.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\tab-view\selected.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\tab-view\color.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\action-bar\background.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\action-bar\color.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\app.css" />
|
||||
<TypeScriptCompile Include="apps\ui-tests-app\action-bar\all.ts" />
|
||||
<TypeScriptCompile Include="apps\ui-tests-app\action-bar\color.ts" />
|
||||
<TypeScriptCompile Include="apps\ui-tests-app\nordic\nordic.ts">
|
||||
<DependentUpon>nordic.xml</DependentUpon>
|
||||
</TypeScriptCompile>
|
||||
@ -995,6 +1027,9 @@
|
||||
<Content Include="apps\ui-tests-app\layouts\wrap.xml" />
|
||||
<Content Include="apps\ui-tests-app\css\background.xml" />
|
||||
<Content Include="apps\ui-tests-app\image-view\roundbtn.xml" />
|
||||
<Content Include="apps\ui-tests-app\mainPage.xml">
|
||||
<SubType>Designer</SubType>
|
||||
</Content>
|
||||
<Content Include="apps\ui-tests-app\nordic\nordic.xml" />
|
||||
<Content Include="apps\ui-tests-app\pages\handlers.xml" />
|
||||
<Content Include="apps\ui-tests-app\pages\htmlview.xml" />
|
||||
|
||||
5
apps/ui-tests-app/action-bar/all.ts
Normal file
5
apps/ui-tests-app/action-bar/all.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import frame = require("ui/frame");
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("action-bar/clean");
|
||||
}
|
||||
13
apps/ui-tests-app/action-bar/all.xml
Normal file
13
apps/ui-tests-app/action-bar/all.xml
Normal file
@ -0,0 +1,13 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title" style="background-color: blue; color: yellow;">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" />
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
13
apps/ui-tests-app/action-bar/background.xml
Normal file
13
apps/ui-tests-app/action-bar/background.xml
Normal file
@ -0,0 +1,13 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title" style="background-color: green;">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" />
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="do nothing"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
13
apps/ui-tests-app/action-bar/clean.xml
Normal file
13
apps/ui-tests-app/action-bar/clean.xml
Normal file
@ -0,0 +1,13 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" />
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="do nothing"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
5
apps/ui-tests-app/action-bar/color.ts
Normal file
5
apps/ui-tests-app/action-bar/color.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import frame = require("ui/frame");
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("action-bar/clean");
|
||||
}
|
||||
13
apps/ui-tests-app/action-bar/color.xml
Normal file
13
apps/ui-tests-app/action-bar/color.xml
Normal file
@ -0,0 +1,13 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title" style="color: green;">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" />
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@ -1,48 +1,91 @@
|
||||
import button = require("ui/button");
|
||||
import dialogs = require("ui/dialogs");
|
||||
import frame = require("ui/frame");
|
||||
import gridModule = require("ui/layouts/grid-layout");
|
||||
import pages = require("ui/page");
|
||||
import text = require("ui/text-view");
|
||||
import fs = require("file-system");
|
||||
import trace = require("trace");
|
||||
import observable = require("data/observable");
|
||||
import view = require("ui/core/view");
|
||||
import dialogs = require("ui/dialogs");
|
||||
|
||||
trace.enable();
|
||||
trace.setCategories(trace.categories.Test);
|
||||
|
||||
var list: string[] = ["pages", "bindings", "css", "dialogs", "image-view", "layouts", "modal-view", "nordic", "web-view"];
|
||||
|
||||
// basePath is auto-changed when building multiple apps
|
||||
var basePath = "";
|
||||
export function createPage() {
|
||||
var txtInput = new text.TextView();
|
||||
var btn = new button.Button();
|
||||
btn.text = "Run";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var filePath, fileName, i = 0;
|
||||
while (i < list.length) {
|
||||
filePath = fs.path.join(__dirname, list[i], txtInput.text);
|
||||
if ((fs.File.exists(filePath + ".xml") || (fs.File.exists(filePath + ".js")))) {
|
||||
fileName = basePath + list[i] + "/" + txtInput.text;
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
if (i < list.length) {
|
||||
frame.topmost().navigate(fileName);
|
||||
} else {
|
||||
dialogs.alert("Cannot find page: " + txtInput.text);
|
||||
}
|
||||
});
|
||||
var VM = new observable.Observable();
|
||||
var examples = new Map<string, string>();
|
||||
|
||||
var grid = new gridModule.GridLayout();
|
||||
grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
|
||||
grid.addRow(new gridModule.ItemSpec());
|
||||
gridModule.GridLayout.setRow(txtInput, 1);
|
||||
grid.addChild(btn);
|
||||
grid.addChild(txtInput);
|
||||
export function pageLoaded(args) {
|
||||
var page = <pages.Page>args.object;
|
||||
page.bindingContext = VM;
|
||||
|
||||
var page = new pages.Page();
|
||||
page.content = grid;
|
||||
return page;
|
||||
}
|
||||
}
|
||||
|
||||
export function selectExample() {
|
||||
var ex: string = VM.get("selected");
|
||||
if (examples.has(ex)) {
|
||||
frame.topmost().navigate(basePath + examples.get(ex));
|
||||
}
|
||||
else {
|
||||
dialogs.alert("Cannot find example: " + ex);
|
||||
}
|
||||
}
|
||||
|
||||
examples.set("basics", "bindings/basics");
|
||||
|
||||
examples.set("actColor", "action-bar/color");
|
||||
examples.set("actBG", "action-bar/background");
|
||||
examples.set("actStyle", "action-bar/all");
|
||||
|
||||
examples.set("tabColor", "tab-view/color");
|
||||
examples.set("tabBG", "tab-view/background");
|
||||
examples.set("tabTabsBG", "tab-view/tabsBackground");
|
||||
examples.set("tabSelected", "tab-view/selected");
|
||||
examples.set("tabStyle", "tab-view/all");
|
||||
|
||||
examples.set("segmentedStyle", "segmented-bar/all");
|
||||
|
||||
examples.set("basics", "bindings/basics");
|
||||
examples.set("xmlbasics", "bindings/xmlbasics");
|
||||
|
||||
examples.set("background", "css/background");
|
||||
examples.set("import", "css/import");
|
||||
examples.set("radius", "css/radius");
|
||||
examples.set("styles", "css/styles");
|
||||
|
||||
examples.set("dialogs", "dialogs/dialogs");
|
||||
examples.set("view-model", "dialogs/view-model");
|
||||
|
||||
examples.set("roundbtn", "image-view/roundbtn");
|
||||
|
||||
examples.set("absolute", "layouts/absolute");
|
||||
examples.set("dock", "layouts/dock");
|
||||
examples.set("grid", "layouts/grid");
|
||||
examples.set("myview", "layouts/myview");
|
||||
examples.set("stack", "layouts/stack");
|
||||
examples.set("wrap", "layouts/wrap");
|
||||
|
||||
examples.set("login-page", "modal-view/login-page");
|
||||
examples.set("modalview", "modal-view/modalview");
|
||||
|
||||
examples.set("nordic", "nordic/nordic");
|
||||
|
||||
examples.set("text", "pages/text");
|
||||
examples.set("background", "pages/background");
|
||||
examples.set("console", "pages/console");
|
||||
examples.set("gestures", "pages/gestures");
|
||||
examples.set("handlers", "pages/handlers");
|
||||
examples.set("htmlview", "pages/htmlview");
|
||||
examples.set("i61", "pages/i61");
|
||||
examples.set("i73", "pages/i73");
|
||||
examples.set("i86", "pages/i86");
|
||||
examples.set("listview_binding", "pages/listview_binding");
|
||||
examples.set("switchandprogress", "pages/switchandprogress");
|
||||
examples.set("textfield", "pages/textfield");
|
||||
|
||||
examples.set("webview", "web-view/webview");
|
||||
examples.set("webviewhtmlwithimages", "web-view/webviewhtmlwithimages");
|
||||
examples.set("webviewlocalfile", "web-view/webviewlocalfile");
|
||||
|
||||
//VM.set("selected", "tabAll");
|
||||
7
apps/ui-tests-app/mainPage.xml
Normal file
7
apps/ui-tests-app/mainPage.xml
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<GridLayout rows="auto, *">
|
||||
<Button text="Run" tap="selectExample" />
|
||||
<TextView row="1" text="{{ selected }}"/>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
10
apps/ui-tests-app/segmented-bar/all.xml
Normal file
10
apps/ui-tests-app/segmented-bar/all.xml
Normal file
@ -0,0 +1,10 @@
|
||||
<Page>
|
||||
<GridLayout rows="auto, *">
|
||||
<SegmentedBar style="color: green; background-color: yellow; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace;">
|
||||
<SegmentedBar.items>
|
||||
<SegmentedBarItem title="Item 1" />
|
||||
<SegmentedBarItem title="Item 2" />
|
||||
</SegmentedBar.items>
|
||||
</SegmentedBar>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
20
apps/ui-tests-app/tab-view/all.xml
Normal file
20
apps/ui-tests-app/tab-view/all.xml
Normal file
@ -0,0 +1,20 @@
|
||||
<Page>
|
||||
<TabView style="color: yellow; background-color: green;" selectedColor="red" tabsBackgroundColor="blue">
|
||||
<TabView.items>
|
||||
<TabViewItem title="First">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem title="Second">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
20
apps/ui-tests-app/tab-view/background.xml
Normal file
20
apps/ui-tests-app/tab-view/background.xml
Normal file
@ -0,0 +1,20 @@
|
||||
<Page>
|
||||
<TabView style="background-color: green;">
|
||||
<TabView.items>
|
||||
<TabViewItem title="First">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem title="Second">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
20
apps/ui-tests-app/tab-view/color.xml
Normal file
20
apps/ui-tests-app/tab-view/color.xml
Normal file
@ -0,0 +1,20 @@
|
||||
<Page>
|
||||
<TabView style="color: green;">
|
||||
<TabView.items>
|
||||
<TabViewItem title="First">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem title="Second">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
20
apps/ui-tests-app/tab-view/selected.xml
Normal file
20
apps/ui-tests-app/tab-view/selected.xml
Normal file
@ -0,0 +1,20 @@
|
||||
<Page>
|
||||
<TabView selectedColor="green">
|
||||
<TabView.items>
|
||||
<TabViewItem title="First">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem title="Second">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
20
apps/ui-tests-app/tab-view/tabsBackground.xml
Normal file
20
apps/ui-tests-app/tab-view/tabsBackground.xml
Normal file
@ -0,0 +1,20 @@
|
||||
<Page>
|
||||
<TabView tabsBackgroundColor="blue">
|
||||
<TabView.items>
|
||||
<TabViewItem title="First">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem title="Second">
|
||||
<TabViewItem.view>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
5
ui/action-bar/action-bar.d.ts
vendored
5
ui/action-bar/action-bar.d.ts
vendored
@ -203,4 +203,9 @@ declare module "ui/action-bar" {
|
||||
export class NavigationButton extends ActionItemBase {
|
||||
|
||||
}
|
||||
|
||||
//@private
|
||||
export function _setNavBarColor(navBar: UINavigationBar, color: UIColor);
|
||||
export function _setNavBarBackgroundColor(navBar: UINavigationBar, color: UIColor);
|
||||
//@endprivate
|
||||
}
|
||||
@ -80,6 +80,9 @@ export class ActionBar extends common.ActionBar {
|
||||
|
||||
// Populate action items
|
||||
this.populateMenuItems(navigationItem);
|
||||
|
||||
// update colors explicitly - they may have to be cleared form a previous page
|
||||
this.updateColors(navigationBar);
|
||||
}
|
||||
|
||||
private populateMenuItems(navigationItem: UINavigationItem) {
|
||||
@ -129,6 +132,21 @@ export class ActionBar extends common.ActionBar {
|
||||
return barButtonItem;
|
||||
}
|
||||
|
||||
private updateColors(navBar: UINavigationBar) {
|
||||
var color = this.color;
|
||||
if (color) {
|
||||
navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: color.ios };
|
||||
navBar.tintColor = color.ios;
|
||||
}
|
||||
else {
|
||||
navBar.titleTextAttributes = null;
|
||||
navBar.tintColor = null;
|
||||
}
|
||||
|
||||
var bgColor = this.backgroundColor;
|
||||
navBar.barTintColor = bgColor ? bgColor.ios : null;
|
||||
}
|
||||
|
||||
public _onTitlePropertyChanged() {
|
||||
if (!this.page) {
|
||||
return;
|
||||
|
||||
@ -766,6 +766,7 @@ export class ActionBarStyler implements definition.stylers.Styler {
|
||||
private static setColorProperty(view: view.View, newValue: any) {
|
||||
var toolbar = (<android.support.v7.widget.Toolbar>view._nativeView);
|
||||
toolbar.setTitleTextColor(newValue);
|
||||
|
||||
}
|
||||
|
||||
private static resetColorProperty(view: view.View, nativeValue: any) {
|
||||
|
||||
@ -16,6 +16,14 @@ interface TextUIView {
|
||||
textColor: UIColor;
|
||||
}
|
||||
|
||||
var ignorePropertyHandler = new stylersCommon.StylePropertyChangedHandler(
|
||||
(view, val) => {
|
||||
// empty
|
||||
},
|
||||
(view, val) => {
|
||||
// empty
|
||||
});
|
||||
|
||||
export class DefaultStyler implements definition.stylers.Styler {
|
||||
//Background methods
|
||||
private static setBackgroundInternalProperty(view: view.View, newValue: any) {
|
||||
@ -537,13 +545,13 @@ export class SwitchStyler implements definition.stylers.Styler {
|
||||
SwitchStyler.resetColorProperty,
|
||||
SwitchStyler.getNativeColorValue), "Switch");
|
||||
|
||||
var bkgHandler = new stylersCommon.StylePropertyChangedHandler(
|
||||
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
|
||||
SwitchStyler.setBackgroundColorProperty,
|
||||
SwitchStyler.resetBackgroundColorProperty,
|
||||
SwitchStyler.getBackgroundColorProperty);
|
||||
SwitchStyler.getBackgroundColorProperty), "Switch");
|
||||
|
||||
style.registerHandler(style.backgroundColorProperty, bkgHandler, "Switch");
|
||||
style.registerHandler(style.backgroundInternalProperty, bkgHandler, "Switch");
|
||||
// Ignore the default backgroundInternalProperty handler
|
||||
style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Switch");
|
||||
}
|
||||
}
|
||||
|
||||
@ -634,16 +642,35 @@ export class ActionBarStyler implements definition.stylers.Styler {
|
||||
private static setColorProperty(view: view.View, newValue: any) {
|
||||
var topFrame = frame.topmost();
|
||||
if (topFrame) {
|
||||
var bar = topFrame.ios.controller.navigationBar;
|
||||
(<any>bar).titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
|
||||
var navBar = topFrame.ios.controller.navigationBar;
|
||||
navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: newValue };
|
||||
navBar.tintColor = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
private static resetColorProperty(view: view.View, nativeValue: any) {
|
||||
var topFrame = frame.topmost();
|
||||
if (topFrame) {
|
||||
var bar = topFrame.ios.controller.navigationBar;
|
||||
(<any>bar).titleTextAttributes = null;
|
||||
var navBar = topFrame.ios.controller.navigationBar;
|
||||
navBar.titleTextAttributes = null;
|
||||
navBar.tintColor = null;
|
||||
}
|
||||
}
|
||||
|
||||
// background-color
|
||||
private static setBackgroundColorProperty(view: view.View, newValue: any) {
|
||||
var topFrame = frame.topmost();
|
||||
if (topFrame) {
|
||||
var navBar = topFrame.ios.controller.navigationBar;
|
||||
navBar.barTintColor = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
|
||||
var topFrame = frame.topmost();
|
||||
if (topFrame) {
|
||||
var navBar = topFrame.ios.controller.navigationBar;
|
||||
navBar.barTintColor = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -651,6 +678,12 @@ export class ActionBarStyler implements definition.stylers.Styler {
|
||||
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
|
||||
ActionBarStyler.setColorProperty,
|
||||
ActionBarStyler.resetColorProperty), "ActionBar");
|
||||
|
||||
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
|
||||
ActionBarStyler.setBackgroundColorProperty,
|
||||
ActionBarStyler.resetBackgroundColorProperty), "ActionBar");
|
||||
|
||||
style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "ActionBar");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -58,6 +58,7 @@ var TAB_VIEW = "TabView";
|
||||
var ITEMS = "items";
|
||||
var SELECTED_INDEX = "selectedIndex";
|
||||
var SELECTED_COLOR = "selectedColor";
|
||||
var TABS_BACKGROUND_COLOR = "tabsBackgroundColor";
|
||||
|
||||
export module knownCollections {
|
||||
export var items = "items";
|
||||
@ -83,6 +84,13 @@ var selectedColorProperty = new dependencyObservable.Property(
|
||||
undefined,
|
||||
dependencyObservable.PropertyMetadataSettings.None));
|
||||
|
||||
var tabsBackgroundColorProperty = new dependencyObservable.Property(
|
||||
TABS_BACKGROUND_COLOR,
|
||||
TAB_VIEW,
|
||||
new proxy.PropertyMetadata(
|
||||
undefined,
|
||||
dependencyObservable.PropertyMetadataSettings.None));
|
||||
|
||||
(<proxy.PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
|
||||
var tabView = <TabView>data.object;
|
||||
tabView._onSelectedIndexPropertyChangedSetNativeValue(data);
|
||||
@ -97,6 +105,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
|
||||
public static itemsProperty = itemsProperty;
|
||||
public static selectedIndexProperty = selectedIndexProperty;
|
||||
public static selectedColorProperty = selectedColorProperty;
|
||||
public static tabsBackgroundColorProperty = tabsBackgroundColorProperty;
|
||||
public static selectedIndexChangedEvent = "selectedIndexChanged";
|
||||
|
||||
public _addArrayFromBuilder(name: string, value: Array<any>) {
|
||||
@ -177,6 +186,14 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
|
||||
value instanceof color.Color ? value : new color.Color(<any>value));
|
||||
}
|
||||
|
||||
get tabsBackgroundColor(): color.Color {
|
||||
return this._getValue(TabView.tabsBackgroundColorProperty);
|
||||
}
|
||||
set tabsBackgroundColor(value: color.Color) {
|
||||
this._setValue(TabView.tabsBackgroundColorProperty,
|
||||
value instanceof color.Color ? value : new color.Color(<any>value));
|
||||
}
|
||||
|
||||
public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
|
||||
var index = this.selectedIndex;
|
||||
if (types.isUndefined(index)) {
|
||||
|
||||
@ -150,6 +150,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
|
||||
}
|
||||
(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
|
||||
|
||||
function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
|
||||
var tabLayout = (<TabView>data.object)._getAndroidTabView();
|
||||
if (tabLayout && data.newValue instanceof color.Color) {
|
||||
tabLayout.setBackgroundColor(data.newValue.android);
|
||||
}
|
||||
}
|
||||
(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
|
||||
|
||||
export class TabView extends common.TabView {
|
||||
private _grid: org.nativescript.widgets.GridLayout;
|
||||
private _tabLayout: org.nativescript.widgets.TabLayout;
|
||||
|
||||
5
ui/tab-view/tab-view.d.ts
vendored
5
ui/tab-view/tab-view.d.ts
vendored
@ -66,6 +66,11 @@ declare module "ui/tab-view" {
|
||||
*/
|
||||
selectedColor: color.Color;
|
||||
|
||||
/**
|
||||
* Gets or sets the color used for background of the tab items.
|
||||
*/
|
||||
tabsBackgroundColor: color.Color;
|
||||
|
||||
/**
|
||||
* Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
|
||||
*/
|
||||
|
||||
@ -105,6 +105,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
|
||||
}
|
||||
(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
|
||||
|
||||
function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
|
||||
var tabView = <TabView>data.object;
|
||||
if (data.newValue instanceof color.Color) {
|
||||
tabView.ios.tabBar.barTintColor = data.newValue.ios;
|
||||
}
|
||||
}
|
||||
(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
|
||||
|
||||
export class TabView extends common.TabView {
|
||||
private _ios: UITabBarControllerImpl;
|
||||
private _delegate: UITabBarControllerDelegateImpl;
|
||||
@ -179,6 +187,8 @@ export class TabView extends common.TabView {
|
||||
var newControllers: NSMutableArray = NSMutableArray.alloc().initWithCapacity(length);
|
||||
var newController: UIViewController;
|
||||
|
||||
var states = getTitleAttributesForStates(this);
|
||||
|
||||
for (i = 0; i < length; i++) {
|
||||
item = <TabViewItem>newItems[i];
|
||||
|
||||
@ -205,6 +215,9 @@ export class TabView extends common.TabView {
|
||||
(<any>tabBarItem).titlePositionAdjustment = { horizontal: 0, vertical: -20 };
|
||||
}
|
||||
}
|
||||
tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
|
||||
tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
|
||||
|
||||
newController.tabBarItem = tabBarItem;
|
||||
newControllers.addObject(newController);
|
||||
}
|
||||
@ -311,6 +324,8 @@ export class TabView extends common.TabView {
|
||||
}
|
||||
|
||||
var tabBar = this.ios.tabBar;
|
||||
|
||||
tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null;
|
||||
var states = getTitleAttributesForStates(this);
|
||||
|
||||
for (var i = 0; i < this.items.length; i++) {
|
||||
|
||||
Reference in New Issue
Block a user