{ "id": "172455", "key": "TIMOB-26461", "fields": { "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "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": [ { "id": "19882", "name": "Release 8.0.0", "archived": false, "released": true, "releaseDate": "2019-03-14" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2018-12-07T20:19:48.000+0000", "created": "2018-10-18T05:30:11.000+0000", "priority": { "name": "High", "id": "2" }, "labels": [ "iOS", "parity", "qe-testadded", "safearea", "window" ], "versions": [], "issuelinks": [ { "id": "56919", "type": { "id": "10001", "name": "Cloners", "inward": "is cloned into", "outward": "is cloned from" }, "outwardIssue": { "id": "172382", "key": "TIMOB-26427", "fields": { "summary": "Android: Add \"safeAreaPadding\" property to Ti.UI.Window", "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": "High", "id": "2" }, "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false } } } }, { "id": "56920", "type": { "id": "10003", "name": "Relates", "inward": "relates to", "outward": "relates to" }, "inwardIssue": { "id": "172458", "key": "TIMOB-26464", "fields": { "summary": "Windows: Add Ti.UI.Window property \"safeAreaPadding\"", "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": "Medium", "id": "3" }, "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false } } } } ], "assignee": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2019-04-10T22:44:57.000+0000", "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" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "On iOS add read-only property \"safeAreaPadding\" to {{Ti.UI.Window}}. This property will return a Titanium [ViewPadding|https://docs.appcelerator.com/platform/latest/#!/api/ViewPadding] dictionary providing the left, top, right, and bottom padding needed to show content safely within the window without overlap. If there are no insets or if \"extendSafeArea\" is set {{false}}, then this property is expected to return all zeros for the padding.\r\n\r\nThe idea is that the app developer will then be able to set up their own safe area view and use it as a container as shown below.\r\n{code:javascript}\r\nvar window = Ti.UI.createWindow({\r\n\textendSafeArea: true,\r\n});\r\nvar safeAreaView = Ti.UI.createView({\r\n\tbackgroundColor: \"green\",\r\n\tborderWidth: \"4dp\",\r\n\tborderColor: \"blue\",\r\n});\r\nwindow.add(safeAreaView);\r\nwindow.addEventListener(\"postlayout\", function() {\r\n\t// Padding's left/top/right/bottom can be used as pin positions for the view.\r\n\tsafeAreaView.applyProperties(window.safeAreaPadding);\r\n});\r\nwindow.open();\r\n{code}\r\n\r\n*Note:*\r\nWe should do the same on iOS to handle the following:\r\n* iPhone X top notch and bottom home indicator.\r\n* Translucent status bar on all other iOS devices. (Safe area should be beneath status bar.)\r\n\r\n*Safe-Area Container Example:*\r\nTest code [^ExtendSafeAreaContainerTest.js] shows how to create a safe-area view container for other child views, guaranteed to always make child content tappable without overlap. The green rectangle with the blue border is the safe-area view within the root white window using an orange border. Note that the safe-area padding compensates for the status bar on all iOS versions and the iPhone X notch and rounded corners.\r\n !ExtendSafeAreaContainerPortraitX.png|thumbnail! !ExtendSafeAreaContainerLandscapeRightX.png|thumbnail! !ExtendSafeAreaContainerLandscapeLeftX.png|thumbnail! \r\n !ExtendSafeAreaContainerPortrait.png|thumbnail! !ExtendSafeAreaContainerLandscapeRight.png|thumbnail! !ExtendSafeAreaContainerLandscapeLeft.png|thumbnail! \r\n\r\n*Safe-Area ScrollView Example:*\r\nTest code [^ExtendSafeAreaScrollViewTest.js] shows how to pad a ScrollView. It allows its contents to scroll beneath a translucent status bar and iPhone X notch/home-indicator, but pads the top and bottom so that the top-most view and bottom-most view can be scrolled within the safe-area, making them tappable. it also pads around the iPhone X rounded corners too.\r\n !ExtendSafeAreaScrollPortraitTop.png|thumbnail! !ExtendSafeAreaScrollPortraitBottom.png|thumbnail! !ExtendSafeAreaScrollLandscapeRightTop.png|thumbnail! !ExtendSafeAreaScrollLandscapeRightBottom.png|thumbnail! \r\n\r\n*Safe-Area TabGroup Example:*\r\nTest code [^ExtendSafeAreaTabsTest.js] shows how to extend tabs under an iPhone X notch and rounded corners. The safe-area padding reported lies within the {{TabGroup}} container where content is normally displayed when \"extendSafeArea\" is set to {{false}}.\r\n !ExtendSafeAreaTab1Portrait.png|thumbnail! !ExtendSafeAreaTab1LandscapeRight.png|thumbnail! !ExtendSafeAreaTab1LandscapeLeft.png|thumbnail! \r\n", "attachment": [ { "id": "65918", "filename": "ExtendSafeAreaContainerLandscapeLeft.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 84028, "mimeType": "image/png" }, { "id": "65919", "filename": "ExtendSafeAreaContainerLandscapeLeftX.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 84138, "mimeType": "image/png" }, { "id": "65916", "filename": "ExtendSafeAreaContainerLandscapeRight.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 85284, "mimeType": "image/png" }, { "id": "65917", "filename": "ExtendSafeAreaContainerLandscapeRightX.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 84343, "mimeType": "image/png" }, { "id": "65914", "filename": "ExtendSafeAreaContainerPortrait.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 102181, "mimeType": "image/png" }, { "id": "65915", "filename": "ExtendSafeAreaContainerPortraitX.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 103596, "mimeType": "image/png" }, { "id": "65913", "filename": "ExtendSafeAreaContainerTest.js", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T01:34:26.000+0000", "size": 844, "mimeType": "application/x-javascript" }, { "id": "65908", "filename": "ExtendSafeAreaScrollLandscapeRightBottom.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T00:28:58.000+0000", "size": 89209, "mimeType": "image/png" }, { "id": "65907", "filename": "ExtendSafeAreaScrollLandscapeRightTop.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T00:28:58.000+0000", "size": 88761, "mimeType": "image/png" }, { "id": "65906", "filename": "ExtendSafeAreaScrollPortraitBottom.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T00:28:58.000+0000", "size": 117714, "mimeType": "image/png" }, { "id": "65905", "filename": "ExtendSafeAreaScrollPortraitTop.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T00:28:58.000+0000", "size": 116932, "mimeType": "image/png" }, { "id": "65904", "filename": "ExtendSafeAreaScrollViewTest.js", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T00:28:53.000+0000", "size": 1801, "mimeType": "application/x-javascript" }, { "id": "65923", "filename": "ExtendSafeAreaTab1LandscapeLeft.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T02:07:56.000+0000", "size": 83742, "mimeType": "image/png" }, { "id": "65922", "filename": "ExtendSafeAreaTab1LandscapeRight.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T02:07:56.000+0000", "size": 83988, "mimeType": "image/png" }, { "id": "65921", "filename": "ExtendSafeAreaTab1Portrait.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T02:07:56.000+0000", "size": 103146, "mimeType": "image/png" }, { "id": "65920", "filename": "ExtendSafeAreaTabsTest.js", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-27T02:07:56.000+0000", "size": 1955, "mimeType": "application/x-javascript" } ], "flagged": false, "summary": "iOS: Add \"safeAreaPadding\" property to Ti.UI.Window", "creator": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "environment": null, "comment": { "comments": [ { "id": "443011", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "+1 for this, I hope it can make it into 7.5.0 for parity with Android! Explicitly, we need the tab-group safe-area insets to lay out a custom tab-view.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2018-10-27T21:46:11.000+0000", "updated": "2018-10-27T21:47:38.000+0000" }, { "id": "443451", "author": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "body": "PR - https://github.com/appcelerator/titanium_mobile/pull/10440", "updateAuthor": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-11-09T00:25:33.000+0000", "updated": "2018-11-09T00:25:33.000+0000" }, { "id": "444339", "author": { "name": "lchoudhary", "key": "lchoudhary", "displayName": "Lokesh Choudhary", "active": true, "timeZone": "America/Los_Angeles" }, "body": "FR Passed.\r\nPR Merged.", "updateAuthor": { "name": "lchoudhary", "key": "lchoudhary", "displayName": "Lokesh Choudhary", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-12-07T20:19:44.000+0000", "updated": "2018-12-07T20:19:44.000+0000" }, { "id": "444420", "author": { "name": "smohammed", "key": "smohammed", "displayName": "Samir Mohammed", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Closing ticket, Improvement verified in SDK version 8.0.0.v20181207122537.\r\n\r\nTest and other information can be found at: \r\nhttps://github.com/appcelerator/titanium_mobile/pull/10440", "updateAuthor": { "name": "smohammed", "key": "smohammed", "displayName": "Samir Mohammed", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-12-10T14:34:38.000+0000", "updated": "2018-12-10T14:34:38.000+0000" } ], "maxResults": 4, "total": 4, "startAt": 0 } } }