{"action":"created","issue":{"url":"https://api.github.com/repos/cappuccino/cappuccino/issues/2613","repository_url":"https://api.github.com/repos/cappuccino/cappuccino","labels_url":"https://api.github.com/repos/cappuccino/cappuccino/issues/2613/labels{/name}","comments_url":"https://api.github.com/repos/cappuccino/cappuccino/issues/2613/comments","events_url":"https://api.github.com/repos/cappuccino/cappuccino/issues/2613/events","html_url":"https://github.com/cappuccino/cappuccino/pull/2613","id":310271096,"number":2613,"title":"NEW: Add CSS theming support","user":{"login":"didierkorthoudt","id":2394110,"avatar_url":"https://avatars1.githubusercontent.com/u/2394110?v=4","gravatar_id":"","url":"https://api.github.com/users/didierkorthoudt","html_url":"https://github.com/didierkorthoudt","followers_url":"https://api.github.com/users/didierkorthoudt/followers","following_url":"https://api.github.com/users/didierkorthoudt/following{/other_user}","gists_url":"https://api.github.com/users/didierkorthoudt/gists{/gist_id}","starred_url":"https://api.github.com/users/didierkorthoudt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/didierkorthoudt/subscriptions","organizations_url":"https://api.github.com/users/didierkorthoudt/orgs","repos_url":"https://api.github.com/users/didierkorthoudt/repos","events_url":"https://api.github.com/users/didierkorthoudt/events{/privacy}","received_events_url":"https://api.github.com/users/didierkorthoudt/received_events","type":"User","site_admin":false},"labels":[{"id":3780,"url":"https://api.github.com/repos/cappuccino/cappuccino/labels/%23needs-review","name":"#needs-review","color":"fff37a","default":false},{"id":26071819,"url":"https://api.github.com/repos/cappuccino/cappuccino/labels/Theme","name":"Theme","color":"e102d8","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/cappuccino/cappuccino/milestones/3","html_url":"https://github.com/cappuccino/cappuccino/milestone/3","labels_url":"https://api.github.com/repos/cappuccino/cappuccino/milestones/3/labels","id":56652,"number":3,"title":"1.0","description":"","creator":{"login":"aparajita","id":22218,"avatar_url":"https://avatars0.githubusercontent.com/u/22218?v=4","gravatar_id":"","url":"https://api.github.com/users/aparajita","html_url":"https://github.com/aparajita","followers_url":"https://api.github.com/users/aparajita/followers","following_url":"https://api.github.com/users/aparajita/following{/other_user}","gists_url":"https://api.github.com/users/aparajita/gists{/gist_id}","starred_url":"https://api.github.com/users/aparajita/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aparajita/subscriptions","organizations_url":"https://api.github.com/users/aparajita/orgs","repos_url":"https://api.github.com/users/aparajita/repos","events_url":"https://api.github.com/users/aparajita/events{/privacy}","received_events_url":"https://api.github.com/users/aparajita/received_events","type":"User","site_admin":false},"open_issues":21,"closed_issues":73,"state":"open","created_at":"2011-11-18T08:44:04Z","updated_at":"2018-04-17T07:16:14Z","due_on":"2014-12-01T08:00:00Z","closed_at":null},"comments":12,"created_at":"2018-03-31T20:49:30Z","updated_at":"2018-04-24T10:10:20Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/cappuccino/cappuccino/pulls/2613","html_url":"https://github.com/cappuccino/cappuccino/pull/2613","diff_url":"https://github.com/cappuccino/cappuccino/pull/2613.diff","patch_url":"https://github.com/cappuccino/cappuccino/pull/2613.patch"},"body":"This first PR adds support for CSS theming. Aristo3 will be build upon this system.\r\n\r\nThe CSS theming proposed system is designed to be 100% compatible with current theming system. It is then possible to switch from a classic theme (like Aristo2) to a CSS theme (like Aristo3).\r\n\r\nThe main idea is to extend CPColor and CPImage with CSS components, and then add support for these components in low level UI components : CPImageView, CPView, _CPImageAndTextView.\r\n\r\nCPTheme, CPThemeBlend and _CPObject+Theme are also adapted in order to provide supporting functionalities.\r\n\r\nTo create a CPColor that uses CSS, simply : \r\n```\r\nbuttonCssColor = [CPColor colorWithCSSDictionary:@{\r\n                                                       @\"background-color\": A3ColorBackgroundWhite,\r\n                                                       @\"border-color\": A3ColorActiveBorder,\r\n                                                       @\"border-style\": @\"solid\",\r\n                                                       @\"border-width\": @\"1px\",\r\n                                                       @\"border-radius\": @\"3px\",\r\n                                                       @\"box-sizing\": @\"border-box\"\r\n                                                       }\r\n                                    beforeDictionary:@{\r\n                                                       @\"background-color\": @\"rgb(225,225,225)\",\r\n                                                       @\"bottom\": @\"3px\",\r\n                                                       @\"content\": @\"''\",\r\n                                                       @\"position\": @\"absolute\",\r\n                                                       @\"right\": @\"21px\",\r\n                                                       @\"top\": @\"3px\",\r\n                                                       @\"width\": @\"1px\"\r\n                                                       }\r\n                                     afterDictionary:@{\r\n                                                       @\"content\": @\"''\",\r\n                                                       @\"bottom\": @\"3px\",\r\n                                                       @\"right\": @\"6px\",\r\n                                                       @\"top\": @\"1px\",\r\n                                                       @\"position\": @\"absolute\",\r\n                                                       @\"height\": @\"14px\",\r\n                                                       @\"width\": @\"9px\",\r\n                                                       @\"margin\": @\"2px 0px 2px 0px\",\r\n                                                       @\"background-image\": @\"url(%%packed.png)\",\r\n                                                       @\"background-position\": @\"0px -64px\",\r\n                                                       @\"background-repeat\": @\"no-repeat\",\r\n                                                       @\"background-size\": @\"100px 400px\"\r\n                                                       }];\r\n```\r\nAs you can see, you can also deal with the after and before pseudo-elements. If you don't need them, just use ``buttonCssColor = [CPColor colorWithCSSDictionary:@{ xxx }];``.\r\n\r\nThe exact same principle is used for CPImage but, of course, you have to specify a size : \r\n```\r\n    imageSearch = [CPImage imageWithCSSDictionary:@{\r\n                                                    @\"background-image\": @\"url(%%packed.png)\",\r\n                                                    @\"background-position\": @\"-16px -32px\",\r\n                                                    @\"background-repeat\": @\"no-repeat\",\r\n                                                    @\"background-size\": @\"100px 400px\"\r\n                                                    }\r\n                                             size:CGSizeMake(16,16)];\r\n```\r\n\r\nIn this example, you see a typical usage of a CSS based CPImage : using an image contained in a single packed image (thus reducing image loading overhead). Please note the URL of the single image : ``url(%%packed.png)``. The ``%%`` will be replaced at theme loading by the path to the theme blend resources folder.\r\n\r\nOf course, a CSS based CPImage can be anything else, like : \r\n```\r\n    regularImageNormal = [CPImage imageWithCSSDictionary:@{\r\n                                                           @\"border-color\": A3ColorActiveBorder,\r\n                                                           @\"border-style\": @\"solid\",\r\n                                                           @\"border-width\": @\"1px\",\r\n                                                           @\"border-radius\": @\"50%\",\r\n                                                           @\"box-sizing\": @\"border-box\",\r\n                                                           @\"background-color\": A3ColorBackgroundWhite,\r\n                                                           @\"transition-duration\": @\"0.35s\",\r\n                                                           @\"transition-property\": @\"all\",\r\n                                                           @\"transition-timing-function\": @\"ease\"\r\n                                                           }\r\n                                                    size:CGSizeMake(16,16)];\r\n```\r\n(one of the objectives of Aristo3 is to use as few images as possible)\r\n\r\nTo be considered and treated as CSS based, a theme must set to YES the attribute \"css-based\" for CPView in the themeDescriptor (default value is NO) : \r\n```\r\n+ (CPView)themedView\r\n{\r\n    var view = [[CPView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];\r\n\r\n    [self registerThemeValues:[[@\"css-based\", YES]] forView:view];\r\n\r\n    return view;\r\n}\r\n```\r\n\r\nYou can use the method ``(BOOL)isCSSBased`` on a CPTheme, CPColor or CPImage object to determine how to cope with it in your own code.\r\n\r\nPlease note that other UI widgets must be adapted in order to optimize CSS based theme usage (for example, to reduce the number of used DIV's). Those modifications will be part of subsequent PR's.\r\n"},"comment":{"url":"https://api.github.com/repos/cappuccino/cappuccino/issues/comments/383878473","html_url":"https://github.com/cappuccino/cappuccino/pull/2613#issuecomment-383878473","issue_url":"https://api.github.com/repos/cappuccino/cappuccino/issues/2613","id":383878473,"user":{"login":"theredhead","id":328712,"avatar_url":"https://avatars0.githubusercontent.com/u/328712?v=4","gravatar_id":"","url":"https://api.github.com/users/theredhead","html_url":"https://github.com/theredhead","followers_url":"https://api.github.com/users/theredhead/followers","following_url":"https://api.github.com/users/theredhead/following{/other_user}","gists_url":"https://api.github.com/users/theredhead/gists{/gist_id}","starred_url":"https://api.github.com/users/theredhead/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/theredhead/subscriptions","organizations_url":"https://api.github.com/users/theredhead/orgs","repos_url":"https://api.github.com/users/theredhead/repos","events_url":"https://api.github.com/users/theredhead/events{/privacy}","received_events_url":"https://api.github.com/users/theredhead/received_events","type":"User","site_admin":false},"created_at":"2018-04-24T10:10:20Z","updated_at":"2018-04-24T10:10:20Z","author_association":"NONE","body":"@mrcarlberg that confirms my suspicion and means I'm not crazy, or at least not entirely 😀. Hope we can have Aristo 3 soon!"}}
{"actor":{"display_login":"theredhead"}}