{ "id": "133601", "key": "AC-3180", "fields": { "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false }, "project": { "id": "12217", "key": "AC", "name": "Appcelerator - INBOX", "projectCategory": { "id": "10000", "description": "", "name": "Customer Service" } }, "resolution": { "id": "3", "description": "The problem is a duplicate of an existing issue.", "name": "Duplicate" }, "resolutiondate": "2015-02-11T22:04:13.000+0000", "created": "2014-07-23T07:50:21.000+0000", "labels": [ "TCSupportTriage", "alloy", "dynamic", "orientation", "styling", "tss" ], "versions": [], "issuelinks": [ { "id": "45855", "type": { "id": "10003", "name": "Relates", "inward": "relates to", "outward": "relates to" }, "outwardIssue": { "id": "105760", "key": "ALOY-405", "fields": { "summary": "'orientation' device query", "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" } }, "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": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "updated": "2016-03-08T07:57:34.000+0000", "status": { "description": "A resolution has been taken, and it is awaiting verification by reporter. From here issues are either reopened, or are closed.", "name": "Resolved", "id": "5", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "14544", "name": "Alloy", "description": "Please enter tickets related to the Alloy here." }, { "id": "14548", "name": "Titanium SDK & CLI", "description": "Please enter tickets related to the MobileSDK here." } ], "description": "Hello,\r\n\r\nWith using Alloy for a while now, I would like to know if it's possible to add a feature to the titanium style sheets to base styling on orientation.\r\n\r\nFor example now we have a platform or formFactor we can add to an element to define specific styling. Like this:\r\n\r\n\"Label[platform=ios]\": {\r\n width: \"90%\"\r\n},\r\n\"Label[formFactor=tablet]\": {\r\n width: \"40%\"\r\n}\r\n\r\nIs it possible to add orientation to this? For example:\r\n\"Label[orientation=portrait]\" {\r\n ..\r\n}\r\n\r\n\"Label[orientation=upside_portrait]\" {\r\n ..\r\n}\r\n\r\n\"Label[orientation=landscape_left]\" {\r\n ..\r\n}\r\n\r\n\"Label[orientation=landscape_right]\" {\r\n ..\r\n}\r\n\r\nOr even shortcuts for both portraits and landscapes:\r\n\"Label[orientation=portrait]\": {\r\n ..\r\n}\r\n\"Label[orientation=landscape]\": {\r\n ..\r\n}\r\n\r\nThis would be an awesome feature without having to change the style of elements on an orientationchange event every time.\r\n\r\nI hope you will be able to work it out.\r\n\r\nSincerely,\r\nPatrick van Vuuren", "attachment": [], "flagged": false, "summary": "Orientation based styling like platform & formFactor in TSS", "creator": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "All Alloy supported OS", "comment": { "comments": [ { "id": "316818", "author": { "name": "mrahman", "key": "mrahman", "displayName": "Mostafizur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "body": "Hi,\r\n\r\nThis option is possible using [Custom Query Styles|http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-CustomQueryStyles].\r\n\r\nSince Alloy 1.4, you can create custom queries to select which styles to apply in both the TSS and XML files. These query statements must return a boolean value. Custom query styles override all styles, that is, class, id, and markup element styles, except the ones defined as attributes in the XML file.\r\n \r\nThanks ", "updateAuthor": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "created": "2014-08-04T09:37:44.000+0000", "updated": "2014-08-07T02:34:42.000+0000" }, { "id": "317446", "author": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "body": "Hello [~Serfenia]! \r\n\r\nDoes the last suggestion from [~mrahman] solve the issue? \r\n\r\nBest Regards! ", "updateAuthor": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "created": "2014-08-07T02:35:31.000+0000", "updated": "2014-08-07T02:35:31.000+0000" }, { "id": "317824", "author": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Hello Mauro,\r\n\r\nThat solves the issue for most of it, but a nicer implementation in my opinion would be as I suggested. Now I have to change the boolean value on the orientationchange event every time, and the styles will change accordingly. If something like that could happen automatically it would've been nicer.\r\n\r\nRegards,\r\nPatrick van Vuuren", "updateAuthor": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-08-09T14:33:55.000+0000", "updated": "2014-08-09T14:33:55.000+0000" }, { "id": "317922", "author": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Just tried your solution, for some reason it doesn't work.\r\n\r\nIn the orientationchange event I edit my custom Alloy.Globals.IS_PORTRAIT or Alloy.Globals.IS_LANDSCAPE variables, but it doesn't update the views when the orientation is changed. Does the custom query style function detect changes of those variables during runtime of the application?\r\n\r\nAlso when specifying, it always seems to pick the last defined style with or without a query style. Both my variables are false and still picks the style from the landscape variable.\r\n\r\nDefined like:\r\n\".day\": {\r\n\tbackgroundRepeat:\ttrue,\r\n height: \t\t\tTi.UI.FILL,\r\n\twidth:\t\t\t\tTi.UI.SIZE,\r\n\tlayout: \t\t\t'horizontal'\r\n},\r\n\".day[if=Alloy.Globals.IS_PORTRAIT]\":{\r\n\twidth:\t\t\t150\t\r\n},\r\n\".day[if=Alloy.Globals.IS_LANDSCAPE]\":{\r\n\twidth:\t\t\t300\r\n},\r\n\r\nRegards,\r\nPatrick van Vuuren ", "updateAuthor": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-08-11T07:36:22.000+0000", "updated": "2014-08-11T07:38:49.000+0000" }, { "id": "327761", "author": { "name": "tvfoodmaps", "key": "tvfoodmaps", "displayName": "Frank Apap", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I have a similar issue:\r\nhttp://developer.appcelerator.com/question/178351/alloy-responding-to-orientation-change-in-current-view\r\n", "updateAuthor": { "name": "tvfoodmaps", "key": "tvfoodmaps", "displayName": "Frank Apap", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-10-12T01:36:12.000+0000", "updated": "2014-10-12T01:36:12.000+0000" }, { "id": "342974", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "Alloy does not support this feature currently. I've added a linked ticket, which I'm afraid has been open for a while. Please watch that ticket. I'm not sure when we'll get a chance to prioritize this new feature. But the more watchers the more likely it will get bumped to the top.", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2015-02-11T22:04:13.000+0000", "updated": "2015-02-11T22:04:13.000+0000" } ], "maxResults": 11, "total": 11, "startAt": 0 } } }