{"action":"created","issue":{"url":"https://api.github.com/repos/buildbot/buildbot/issues/1626","labels_url":"https://api.github.com/repos/buildbot/buildbot/issues/1626/labels{/name}","comments_url":"https://api.github.com/repos/buildbot/buildbot/issues/1626/comments","events_url":"https://api.github.com/repos/buildbot/buildbot/issues/1626/events","html_url":"https://github.com/buildbot/buildbot/pull/1626","id":67400967,"number":1626,"title":"[WIP] Booting web UI in Material Design","user":{"login":"shanzi","id":557294,"avatar_url":"https://avatars.githubusercontent.com/u/557294?v=3","gravatar_id":"","url":"https://api.github.com/users/shanzi","html_url":"https://github.com/shanzi","followers_url":"https://api.github.com/users/shanzi/followers","following_url":"https://api.github.com/users/shanzi/following{/other_user}","gists_url":"https://api.github.com/users/shanzi/gists{/gist_id}","starred_url":"https://api.github.com/users/shanzi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shanzi/subscriptions","organizations_url":"https://api.github.com/users/shanzi/orgs","repos_url":"https://api.github.com/users/shanzi/repos","events_url":"https://api.github.com/users/shanzi/events{/privacy}","received_events_url":"https://api.github.com/users/shanzi/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/buildbot/buildbot/labels/needs%20work","name":"needs work","color":"fad8c7"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-04-09T16:35:36Z","updated_at":"2015-04-11T12:18:33Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/buildbot/buildbot/pulls/1626","html_url":"https://github.com/buildbot/buildbot/pull/1626","diff_url":"https://github.com/buildbot/buildbot/pull/1626.diff","patch_url":"https://github.com/buildbot/buildbot/pull/1626.patch"},"body":"Here is the initial work to build a web UI in Material Design for Buildbot.\r\n\r\nAfter some discussion with @tothandras , we believe our projects will not be conflict or entangled with each other at least during the early level of developing. I decided to build some base parts of the Web UI that won't concerns about displaying data from `buildbotService` first. \r\n\r\nI opened a new folder named `md_base` and the new Web UI will fake itself as the old `base` so that `master` need not to be modified. The basic front end structure is generated by `guanlecoja` and I added some dependencies according to my own consideration. I will explain some decisions below about the code by now to draw early feedback so that I can make it right as soon as possible.\r\n\r\nBefore the explanation is a screenshot showing the appearance now in browser:\r\n![material-design-early](https://cloud.githubusercontent.com/assets/557294/7070655/d8d594bc-df12-11e4-8f1c-5d94135477bd.png)\r\n\r\n### Some Explanations\r\nAs you can see in the code, I uses `guanlecoja` as the generator of this front end app. I added the dependencies of Angular Material directly in `guanlecoja/config.coffee`. \r\n\r\n`guanlecoja-ui` is not added as a dependency because I found it is kind of depending on bootstrap which is the framework we'd like to abandon. So some services such as the side nav bar and notification for the old web UI has not been migrated to the new one yet. I have managed to use side nav bar provided by Angular Material to achieve current effect. Whether to add these services to new web UI or not needs further evaluation. **Please give your advice about this**.\r\n\r\nAs I have said in the proposal, SVG icons will be an important advantage of the new UI compared with using icon font. I have already built the basic structures to use SVG icons. The SVG files are placed at `src/icons`. Under current configuration, a gulp plugin will merge all these icons into a single file in order to reduce HTTP request times. We no longer need several font files that contains hundreds of unused icons. Now just add icon files that is needed and we can even modify the shape of icon easily. \r\n\r\nCurrent SVG filles added are from [ionicons](http://ionicons.com) which is released under MIT license. I think it is compatible to buildbot's license.\r\n\r\nRouter frameworks has not been decided by now. The old UI is using router frameworks provided `angular.ui` but so far the official `ngRoute` should be enough.  @tothandras also recommended a [ngNewRouter](http://angular.github.io/router/getting-started). This part needs more discussion too.\r\n\r\nSome code convention problems should be settle down too. Especially the indention width for several language. So far, I write `jade` and `less` with indention width of 2 spaces and coffee script with indention width of 4 spaces.\r\n\r\nThis is a quite uncompleted start yet. I summed up some tasks to be done in one or two weeks.\r\n\r\n### TODOS\r\n- [x] basic page layout\r\n- [x] loading and displaying SVG icons\r\n- [x] figuring out which router frameworks to use\r\n- [ ] Using bower to include icons\r\n- [x] making menu items in side nav bar customizable by config so that we can mix in plugins such as water fall (half finished. still need to add `glMenuService`)\r\n- [x] highlighting selected menu item in the side nav\r\n- [ ] add test to sidenav directive (solve the problem of unexpected httpDataGet when getting icons)\r\n- [ ] adding a loading progress indicator at the top of page"},"comment":{"url":"https://api.github.com/repos/buildbot/buildbot/issues/comments/91836362","html_url":"https://github.com/buildbot/buildbot/pull/1626#issuecomment-91836362","issue_url":"https://api.github.com/repos/buildbot/buildbot/issues/1626","id":91836362,"user":{"login":"Stibbons","id":133498,"avatar_url":"https://avatars.githubusercontent.com/u/133498?v=3","gravatar_id":"","url":"https://api.github.com/users/Stibbons","html_url":"https://github.com/Stibbons","followers_url":"https://api.github.com/users/Stibbons/followers","following_url":"https://api.github.com/users/Stibbons/following{/other_user}","gists_url":"https://api.github.com/users/Stibbons/gists{/gist_id}","starred_url":"https://api.github.com/users/Stibbons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Stibbons/subscriptions","organizations_url":"https://api.github.com/users/Stibbons/orgs","repos_url":"https://api.github.com/users/Stibbons/repos","events_url":"https://api.github.com/users/Stibbons/events{/privacy}","received_events_url":"https://api.github.com/users/Stibbons/received_events","type":"User","site_admin":false},"created_at":"2015-04-11T12:18:33Z","updated_at":"2015-04-11T12:18:33Z","body":"+1"}}