{"action":"created","issue":{"url":"https://api.github.com/repos/bryphe/revery/issues/119","repository_url":"https://api.github.com/repos/bryphe/revery","labels_url":"https://api.github.com/repos/bryphe/revery/issues/119/labels{/name}","comments_url":"https://api.github.com/repos/bryphe/revery/issues/119/comments","events_url":"https://api.github.com/repos/bryphe/revery/issues/119/events","html_url":"https://github.com/bryphe/revery/issues/119","id":392764161,"node_id":"MDU6SXNzdWUzOTI3NjQxNjE=","number":119,"title":"UI Styles: Implement 'border' styling","user":{"login":"bryphe","id":13532591,"node_id":"MDQ6VXNlcjEzNTMyNTkx","avatar_url":"https://avatars1.githubusercontent.com/u/13532591?v=4","gravatar_id":"","url":"https://api.github.com/users/bryphe","html_url":"https://github.com/bryphe","followers_url":"https://api.github.com/users/bryphe/followers","following_url":"https://api.github.com/users/bryphe/following{/other_user}","gists_url":"https://api.github.com/users/bryphe/gists{/gist_id}","starred_url":"https://api.github.com/users/bryphe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bryphe/subscriptions","organizations_url":"https://api.github.com/users/bryphe/orgs","repos_url":"https://api.github.com/users/bryphe/repos","events_url":"https://api.github.com/users/bryphe/events{/privacy}","received_events_url":"https://api.github.com/users/bryphe/received_events","type":"User","site_admin":false},"labels":[{"id":1062424723,"node_id":"MDU6TGFiZWwxMDYyNDI0NzIz","url":"https://api.github.com/repos/bryphe/revery/labels/good%20first%20issue","name":"good first issue","color":"7057ff","default":true},{"id":1062424722,"node_id":"MDU6TGFiZWwxMDYyNDI0NzIy","url":"https://api.github.com/repos/bryphe/revery/labels/help%20wanted","name":"help wanted","color":"008672","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-12-19T20:24:55Z","updated_at":"2018-12-19T21:37:54Z","closed_at":null,"author_association":"OWNER","body":"To have a useful UI - we should have parity with what the browser supports for the `border` styles: <https://developer.mozilla.org/en-US/docs/Web/CSS/border>\r\n\r\nWe should decide on our API surface. Perhaps something like this?\r\n- 2-pixel red border around entire element: `<view style={Style.make(~border=Border(Colors.red, 2), ())} />`  \r\n- 1-pixel blue border on the left and right: `<view style={Style.make(~borderHorizontal=Border(Colors.blue, 1)} />`\r\n\r\nFor the initial implementation, only implementing the `solid` style seems reasonable. We can always add other styles down the road - supporting the `border-width` and `border-color` are important, though!\r\n\r\nThere are a few things we'll have to do to support this\r\n\r\n__Part 1: Style properties__\r\n- `Style.re` - Add the `border` properties to our style type: https://github.com/bryphe/revery/blob/711a90a0b19af2f39dd984cb1570a1231e745365/src/UI/Style.re#L25\r\n- `Style.re` - Add the properties to our `make` function: https://github.com/bryphe/revery/blob/711a90a0b19af2f39dd984cb1570a1231e745365/src/UI/Style.re#L36\r\n- `Style.re` - Add the sizes to our `toLayoutNode` function, so that layout handles it correctly: https://github.com/bryphe/revery/blob/711a90a0b19af2f39dd984cb1570a1231e745365/src/UI/Style.re#L103\r\n\r\n__Part 2: Rendering quads__\r\n\r\nFor the core border rendering, we need to render a quad that spans the width (in the case of border-top/border-bottom) or the height (in the case of border-left or border-right), and positioned correctly in relationship to the node's layout.\r\n\r\nThis logic can live in `ViewNode`, and it's quite similiar to the logic we have today for drawing the background - the only difference really is the _color_ and _dimensions_ of the quad.\r\n\r\nhttps://github.com/bryphe/revery/blob/711a90a0b19af2f39dd984cb1570a1231e745365/src/UI/ViewNode.re#L22\r\n\r\n__Part 3: Rendering Junctions__\r\n\r\nThe trickiest piece of this work that will need to be handled with the rendering is where borders meet up. For example, if I have a top-border and a left-border, we need to render triangles potentially where these meet. This is dependent on us having a triangle primitive in #120 \r\n\r\nFor example, if I had a div like this: \r\n```\r\n<div style=\"border-left: 10px solid red; border-top: 20px solid yellow; width: 100px; height:100px;\">\r\n```\r\nIt would look something like this:\r\n![image](https://user-images.githubusercontent.com/13532591/50245890-8f87fb80-0388-11e9-9fdb-103a7d2b879b.png)\r\n\r\nOnce we get Part 3 completed, though, we'll have a pretty usable `border` story 💯 \r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/bryphe/revery/issues/comments/448752711","html_url":"https://github.com/bryphe/revery/issues/119#issuecomment-448752711","issue_url":"https://api.github.com/repos/bryphe/revery/issues/119","id":448752711,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0ODc1MjcxMQ==","user":{"login":"bryphe","id":13532591,"node_id":"MDQ6VXNlcjEzNTMyNTkx","avatar_url":"https://avatars1.githubusercontent.com/u/13532591?v=4","gravatar_id":"","url":"https://api.github.com/users/bryphe","html_url":"https://github.com/bryphe","followers_url":"https://api.github.com/users/bryphe/followers","following_url":"https://api.github.com/users/bryphe/following{/other_user}","gists_url":"https://api.github.com/users/bryphe/gists{/gist_id}","starred_url":"https://api.github.com/users/bryphe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bryphe/subscriptions","organizations_url":"https://api.github.com/users/bryphe/orgs","repos_url":"https://api.github.com/users/bryphe/repos","events_url":"https://api.github.com/users/bryphe/events{/privacy}","received_events_url":"https://api.github.com/users/bryphe/received_events","type":"User","site_admin":false},"created_at":"2018-12-19T21:37:54Z","updated_at":"2018-12-19T21:37:54Z","author_association":"OWNER","body":"> One quick question, is there any specific order that the borders should be resolved in? \r\n\r\nThat is a good question! My expectation would be that the more-specific border overrides the previous settings - so in the `<view style=Style.make(~border=Border.make(~width=1, ()), ~borderLeft=Border.make(~width=2, ()), ())/>` case, we'd end up with a top/right/bottom border of width 1, and a left border of width 2."}}
{"actor":{"display_login":"bryphe"}}