{ "id": "143529", "key": "TIMOB-18474", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": null, "resolutiondate": null, "created": "2015-01-26T20:10:25.000+0000", "priority": null, "labels": [ "alphaChann", "ios", "opacity", "toolbar", "transparent" ], "versions": [ { "id": "16704", "description": "Release 3.5.0", "name": "Release 3.5.0", "archived": false, "released": true, "releaseDate": "2015-01-13" } ], "issuelinks": [ { "id": "56317", "type": { "id": "10003", "name": "Relates", "inward": "relates to", "outward": "relates to" }, "inwardIssue": { "id": "171103", "key": "TIMOB-25777", "fields": { "summary": "iOS: Cannot use semi-transparent bar colors", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "priority": { "name": "None", "id": "6" }, "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false } } } } ], "assignee": null, "updated": "2018-02-28T19:55:39.000+0000", "status": { "description": "The issue is open and ready for the assignee to start work on it.", "name": "Open", "id": "1", "statusCategory": { "id": 2, "key": "new", "colorName": "blue-gray", "name": "To Do" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "h2. Problem\r\n\r\nNot possible to make toolbars really transparent or with a specified alpha channel (translucent). \r\n\r\nIf barColor='transparent' (Test 1), toolbar is translucent (no control over opacity).\r\nIf barColor='#2fff' (Test 2), toolbar is completely opaque.\r\n\r\nh2. Test case 1\r\n\r\n{code:lang=javascript|title=ApplicationWindow.js}\r\n\r\n//Application Window Component Constructor\r\nfunction ApplicationWindow() {\r\n\t//load component dependencies\r\n\tvar FirstView = require('ui/common/FirstView');\r\n\r\n\t//create component instance\r\n\tvar self = Ti.UI.createWindow({\r\n\t\tbackgroundColor : '#0cf'\r\n\t});\r\n\r\n\t//construct UI\r\n\tvar firstView = new FirstView();\r\n\tself.add(firstView);\r\n\r\n\tvar button2 = Titanium.UI.createButton({\r\n\t\ttitle:'test',\r\n\t});\r\n\tvar toolbar = Titanium.UI.iOS.createToolbar({\r\n\t\titems : [button2],\r\n\t\tbarColor:'transparent',\r\n\t\tbottom : 0,\r\n\t\tborderTop : true,\r\n\t\tborderBottom : true\r\n\t});\r\n\tself.add(toolbar);\r\n\r\n\treturn self;\r\n}\r\n\r\n//make constructor function the public component interface\r\nmodule.exports = ApplicationWindow;\r\n\r\n{code}\r\n\r\nh2. Test case 2\r\n\r\n{code:lang=javascript|title=ApplicationWindow.js}\r\n\r\n//Application Window Component Constructor\r\nfunction ApplicationWindow() {\r\n\t//load component dependencies\r\n\tvar FirstView = require('ui/common/FirstView');\r\n\r\n\t//create component instance\r\n\tvar self = Ti.UI.createWindow({\r\n\t\tbackgroundColor : '#0cf'\r\n\t});\r\n\r\n\t//construct UI\r\n\tvar firstView = new FirstView();\r\n\tself.add(firstView);\r\n\r\n\tvar button2 = Titanium.UI.createButton({\r\n\t\ttitle:'test',\r\n\t});\r\n\tvar toolbar = Titanium.UI.iOS.createToolbar({\r\n\t\titems : [button2],\r\n\t\tbarColor:'#2fff',\r\n\t\tbottom : 0,\r\n\t\tborderTop : true,\r\n\t\tborderBottom : true\r\n\t});\r\n\tself.add(toolbar);\r\n\r\n\treturn self;\r\n}\r\n\r\n//make constructor function the public component interface\r\nmodule.exports = ApplicationWindow;\r\n\r\n{code}\r\n", "attachment": [ { "id": "53825", "filename": "iOS Simulator Screen Shot 26.01.2015 18.06.10.png", "author": { "name": "dkcarmo", "key": "dkcarmo", "displayName": "Daniel Kunzler", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-01-26T20:10:25.000+0000", "size": 24889, "mimeType": "image/png" }, { "id": "53826", "filename": "iOS Simulator Screen Shot 26.01.2015 18.09.47.png", "author": { "name": "dkcarmo", "key": "dkcarmo", "displayName": "Daniel Kunzler", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-01-26T20:10:25.000+0000", "size": 24946, "mimeType": "image/png" } ], "flagged": false, "summary": "IOS: Unable to make toolbar really transparent/with alpha channel", "creator": { "name": "dkcarmo", "key": "dkcarmo", "displayName": "Daniel Kunzler", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "dkcarmo", "key": "dkcarmo", "displayName": "Daniel Kunzler", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "Operating System\r\n Name = Mac OS X\r\n Version = 10.10.1\r\n Architecture = 64bit\r\n # CPUs = 2\r\n Memory = 8589934592\r\nNode.js\r\n Node.js Version = 0.10.13\r\n npm Version = 1.3.2\r\nTitanium CLI\r\n CLI Version = 3.4.1\r\nTitanium SDK\r\n SDK Version = 3.5.0.GA\r\n SDK Path = /Users/daniel/Library/Application Support/Titanium/mobilesdk/osx/3.5.0.GA\r\n Target Platform = iphone", "comment": { "comments": [ { "id": "341213", "author": { "name": "dkcarmo", "key": "dkcarmo", "displayName": "Daniel Kunzler", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I would expect to apply alpha channel to barColor property and make the toolbar completely background transparent. Instead, the SDK/API makes the toolbar completely opaque if barColor has an alpha channel, as can be seen on the second test case and screenshot I attached before (it becomes completely white, while it should be '#2fff\").\r\n\r\nIn the first test case / screenshot, if barColor is set to 'transparent', it actually becomes translucent black, not completely transparent.\r\n\r\nFor instance, native Weather iOS app has a completely transparent toolbar.\r\n\r\n", "updateAuthor": { "name": "dkcarmo", "key": "dkcarmo", "displayName": "Daniel Kunzler", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-01-29T16:40:35.000+0000", "updated": "2015-01-29T16:40:35.000+0000" } ], "maxResults": 1, "total": 1, "startAt": 0 } } }