Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-19960] Windows: background color/image for Ti.UI.Tab and TabGroup

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2016-05-03T14:51:41.000+0000
Affected Version/sRelease 5.1.0
Fix Version/sRelease 5.3.0
ComponentsWindows
Labelsqe-5.3.0
ReporterKota Iguchi
AssigneeKota Iguchi
Created2015-11-13T08:22:43.000+0000
Updated2016-05-04T17:33:04.000+0000

Description

Ti.UI.TabGroup and Ti.UI.Tab for Windows should be able to support background color/image such as backgroundColor and barColor.

Comments

  1. Kota Iguchi 2015-12-14

    https://github.com/appcelerator/titanium_mobile_windows/pull/498
  2. Kota Iguchi 2016-04-29

    For testing active tab selected color: 
       var tabGroup = Titanium.UI.createTabGroup();
   
   tabGroup.activeTabBackgroundColor = 'red';
   tabGroup.activeTabBackgroundSelectedColor = 'cyan';
   
   var win1 = Titanium.UI.createWindow({
       title: 'Tab 1',
       backgroundColor: '#fff'
   });
   var tab1 = Titanium.UI.createTab({
       icon: 'KS_nav_views.png',
       title: 'Tab 1',
       window: win1
   });
   
   var label1 = Titanium.UI.createLabel({
       color: '#999',
       text: 'I am Window 1',
       font: { fontSize: 20, fontFamily: 'Helvetica Neue' },
       textAlign: 'center',
       width: 'auto'
   });
   
   win1.add(label1);
   
   var win2 = Titanium.UI.createWindow({
       title: 'Tab 2',
       backgroundColor: '#fff'
   });
   var tab2 = Titanium.UI.createTab({
       title: 'Tab 2',
       window: win2
   });
   
   var label2 = Titanium.UI.createLabel({
       color: '#999',
       text: 'I am Window 2',
       font: { fontSize: 20, fontFamily: 'Helvetica Neue' },
       textAlign: 'center',
       width: 'auto'
   });
   
   win2.add(label2);
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   
   tabGroup.open();
    Some properties doesn't work because of platform component (Xaml::Control::PivotItem) limitation: - backgroundDisabledColor takes no effect for Tab because native component doesn't change its color if it's disabled - backgroundFocusedColor takes no effect for Tab because native component doesn't get focus event
  3. Josh Longton 2016-04-29

    [~kota] I am able to test these properties but the [docs](http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TabGroup-property-tabsBackgroundDisabledColor) state that they are all supported properties. ||Properties||Working|| |TabGroup.barColor| (/)| |TabGroup.tabsBackgroundColor| (/)| |TabGroup.tabsBackgroundImage| (/)| |TabGroup.tabsBackgroundDisabledColor|(x)| |TabGroup.tabsBackgroundDisabledImage|(x)| |TabGroup.tabsBackgroundFocusedColor|(x)| |TabGroup.tabsBackgroundFocusedImage|(x)| |TabGroup.tabsBackgroundSelectedColor|(x)| |TabGroup.tabsBackgroundSelectedImage|(x)| |TabGroup.activeTabBackgroundColor| (/)| |TabGroup.activeTabBackgroundImage| (/)| |TabGroup.activeTabBackgroundDisabledColor|(x)| |TabGroup.activeTabBackgroundDisabledImage|(x)| |TabGroup.activeTabBackgroundFocusedColor|(x)| |TabGroup.activeTabBackgroundFocusedImage|(x)| |TabGroup.activeTabBackgroundSelectedColor|(x)| |TabGroup.activeTabBackgroundSelectedImage|(x)| |Tab.backgroundDisabledColor|(x)| |Tab.backgroundDisabledImage|(x)| |Tab.backgroundFocusedColor|(x)| |Tab.backgroundFocusedImage|(x)| |Tab.backgroundImage| (/)| |Tab.backgroundSelectedImage|(x)| |Tab.backgroundColor| (/)|
  4. Wilson Luu 2016-04-29

    [~kota], I am fairly confused about the intent of this ticket. This ticket seems like it's a fix for Windows Tab/TabGroup background color/image, which Josh has shown above. However, as indicated by Josh's table, the PR contains implementation for disabled, focused, and selected color/image properties, but they do not work and contradicts what we have documented here: [doc](http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TabGroup-property-tabsBackgroundDisabledColor) Will reopen this ticket.
  5. Kota Iguchi 2016-05-03

    Yeah, so some properties doesn't work because of platform limitations. Documentation needs to be updated, will push soon.
  6. Kota Iguchi 2016-05-03

    [~jlongton] I think BackgroundSelectedColor/Image should work. Note that "selected color" works when you select Tab Window (tab content). What's confusing here I think is that background color is exclusive state, for example when tabsBackgroundSelectedColor and activeTabBackgroundSelectedColor are set, tabsBackgroundSelectedColor takes no effect on active tab because there's activeTabBackgroundSelectedColor. 
       var tabGroup = Titanium.UI.createTabGroup();
   
   var win1 = Titanium.UI.createWindow({
       title: 'Tab 1',
       backgroundColor: '#fff'
   });
   var tab1 = Titanium.UI.createTab({
       icon: 'KS_nav_views.png',
       title: 'Tab 1',
       window: win1
   });
   
   var label1 = Titanium.UI.createLabel({
       color: '#999',
       text: 'I am Window 1',
       font: { fontSize: 20, fontFamily: 'Helvetica Neue' },
       textAlign: 'center',
       width: 'auto'
   });
   
   win1.add(label1);
   
   var win2 = Titanium.UI.createWindow({
       title: 'Tab 2',
       backgroundColor: '#fff'
   });
   var tab2 = Titanium.UI.createTab({
       title: 'Tab 2',
       window: win2
   });
   
   var label2 = Titanium.UI.createLabel({
       color: '#999',
       text: 'I am Window 2',
       font: { fontSize: 20, fontFamily: 'Helvetica Neue' },
       textAlign: 'center',
       width: 'auto'
   });
   
   win2.add(label2);
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   
   //tabGroup.tabsBackgroundSelectedColor = 'blue';
   tabGroup.activeTabBackgroundColor    = 'red';
   tabGroup.activeTabBackgroundSelectedColor = 'cyan';
   
   tabGroup.open();
    As far as I see selected property does work, so final table goes like this: ||Properties||Working|| |TabGroup.barColor| (/)| |TabGroup.tabsBackgroundColor| (/)| |TabGroup.tabsBackgroundImage| (/)| |TabGroup.tabsBackgroundDisabledColor|(x)| |TabGroup.tabsBackgroundDisabledImage|(x)| |TabGroup.tabsBackgroundFocusedColor|(x)| |TabGroup.tabsBackgroundFocusedImage|(x)| |TabGroup.tabsBackgroundSelectedColor|(/)| |TabGroup.tabsBackgroundSelectedImage|(/)| |TabGroup.activeTabBackgroundColor| (/)| |TabGroup.activeTabBackgroundImage| (/)| |TabGroup.activeTabBackgroundDisabledColor|(x)| |TabGroup.activeTabBackgroundDisabledImage|(x)| |TabGroup.activeTabBackgroundFocusedColor|(x)| |TabGroup.activeTabBackgroundFocusedImage|(x)| |TabGroup.activeTabBackgroundSelectedColor|(/)| |TabGroup.activeTabBackgroundSelectedImage|(/)| |Tab.backgroundDisabledColor|(x)| |Tab.backgroundDisabledImage|(x)| |Tab.backgroundFocusedColor|(x)| |Tab.backgroundFocusedImage|(x)| |Tab.backgroundImage| (/)| |Tab.backgroundSelectedColor|(/)| |Tab.backgroundSelectedImage|(/)| |Tab.backgroundColor| (/)|
  7. Kota Iguchi 2016-05-03

    https://github.com/appcelerator/titanium_mobile_windows/pull/661 https://github.com/appcelerator/titanium_mobile_windows/pull/662
  8. Christopher Williams 2016-05-03

    Merged the doc-only PRs. They removed the *Disabled* and *Focused* Tab properties from our supported list.
  9. Josh Longton 2016-05-03

    Verified as fixed Tested on: Nokia Lumia 928 (8.1) Windows Simulator (8.1) Microsoft Lumia 640 (10) Windows Simulator (10) Windows 10 Studio: 4.6.0.201604290815 Ti SDK: 5.3.0.v20160502145620 Appc NPM: 4.2.5-5 App CLI: 5.3.0-42 Node v4.4.3 *Closing Ticket.*

JSON Source