{"action":"created","issue":{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/136","labels_url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/136/labels{/name}","comments_url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/136/comments","events_url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/136/events","html_url":"https://github.com/andersevenrud/OS.js-v2/issues/136","id":97515488,"number":136,"title":"[UI] Next-Generation UI","user":{"login":"andersevenrud","id":161548,"avatar_url":"https://avatars.githubusercontent.com/u/161548?v=3","gravatar_id":"","url":"https://api.github.com/users/andersevenrud","html_url":"https://github.com/andersevenrud","followers_url":"https://api.github.com/users/andersevenrud/followers","following_url":"https://api.github.com/users/andersevenrud/following{/other_user}","gists_url":"https://api.github.com/users/andersevenrud/gists{/gist_id}","starred_url":"https://api.github.com/users/andersevenrud/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andersevenrud/subscriptions","organizations_url":"https://api.github.com/users/andersevenrud/orgs","repos_url":"https://api.github.com/users/andersevenrud/repos","events_url":"https://api.github.com/users/andersevenrud/events{/privacy}","received_events_url":"https://api.github.com/users/andersevenrud/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/labels/enhancement","name":"enhancement","color":"84b6eb"},{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/labels/feature","name":"feature","color":"5319e7"},{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/labels/open%20for%20suggestions","name":"open for suggestions","color":"bfe5bf"},{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/labels/refactor","name":"refactor","color":"f7c6c7"}],"state":"open","locked":false,"assignee":{"login":"andersevenrud","id":161548,"avatar_url":"https://avatars.githubusercontent.com/u/161548?v=3","gravatar_id":"","url":"https://api.github.com/users/andersevenrud","html_url":"https://github.com/andersevenrud","followers_url":"https://api.github.com/users/andersevenrud/followers","following_url":"https://api.github.com/users/andersevenrud/following{/other_user}","gists_url":"https://api.github.com/users/andersevenrud/gists{/gist_id}","starred_url":"https://api.github.com/users/andersevenrud/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andersevenrud/subscriptions","organizations_url":"https://api.github.com/users/andersevenrud/orgs","repos_url":"https://api.github.com/users/andersevenrud/repos","events_url":"https://api.github.com/users/andersevenrud/events{/privacy}","received_events_url":"https://api.github.com/users/andersevenrud/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/milestones/1","html_url":"https://github.com/andersevenrud/OS.js-v2/milestones/2.0.0-beta1","labels_url":"https://api.github.com/repos/andersevenrud/OS.js-v2/milestones/1/labels","id":854984,"number":1,"title":"2.0.0-beta1","description":"First stable build with frozen API. OS.js will enter this stage as soon as I have enough testers","creator":{"login":"andersevenrud","id":161548,"avatar_url":"https://avatars.githubusercontent.com/u/161548?v=3","gravatar_id":"","url":"https://api.github.com/users/andersevenrud","html_url":"https://github.com/andersevenrud","followers_url":"https://api.github.com/users/andersevenrud/followers","following_url":"https://api.github.com/users/andersevenrud/following{/other_user}","gists_url":"https://api.github.com/users/andersevenrud/gists{/gist_id}","starred_url":"https://api.github.com/users/andersevenrud/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andersevenrud/subscriptions","organizations_url":"https://api.github.com/users/andersevenrud/orgs","repos_url":"https://api.github.com/users/andersevenrud/repos","events_url":"https://api.github.com/users/andersevenrud/events{/privacy}","received_events_url":"https://api.github.com/users/andersevenrud/received_events","type":"User","site_admin":false},"open_issues":5,"closed_issues":41,"state":"open","created_at":"2014-11-05T18:38:59Z","updated_at":"2015-07-27T20:23:52Z","due_on":null,"closed_at":null},"comments":39,"created_at":"2015-07-27T17:36:27Z","updated_at":"2015-08-04T16:58:07Z","closed_at":null,"body":"This issue is for the next-generation UI system. The plan is to separate the UI stuff from JavaScript, so have to code less to make interfaces work (no CSS required), much simpler handling and manipulation.\r\n\r\nAlso, this paves the way for better mobile/tablet compability.\r\n\r\n**BIG CHANGES TO THE API. THIS WILL BREAK YOUR APPS**\r\n\r\nhttps://github.com/andersevenrud/OS.js-v2/tree/gui-ng\r\n\r\n#### General\r\n\r\n- [x] Finish the \"spec\" **Any comments on this?**\r\n- [ ] Grunt task for embedding the HTML/Scheme (required for file:///. Application::init() automation ?)\r\n- [x] Schema Parser\r\n- [x] New Theme CSS\r\n- [x] Add all elements from previous generation\r\n- [x] Create event binding\r\n- [x] Create property getters\r\n- [x] Create property setters\r\n- [x] JavaScript hooks for dynamic content\r\n- [x] New iframefix (IFrame and RichText)\r\n- [x] Hook up to locales (auto translation of labels) \r\n- [x] Hook up automatic icon path resolver\r\n- [x] Hook up old API.createMenu() function\r\n- [x] Fix window restore positions\r\n- [ ] Touch compability!\r\n- [x]  Bind ESC to dialogs\r\n- [ ] Add aspect-ratio resizing to windows\r\n- [x] Utils::$bind() wrapper\r\n- [x] Make sure Menu stays within envelope\r\n\r\n#### Refactoring\r\n- [ ] Application launch splash screen (use fragment)\r\n- [x] Remove all old GUI and Event stuff from Window\r\n- [x] Re-make dialogs\r\n- [ ] Re-make themes **33%**\r\n- [ ] Re-make apps **60%**\r\n- [x] Replace old theme engine\r\n- [ ] CoreWM IconView\r\n- [ ] CoreWM Custom Menu\r\n- [x] Split code back up into individual files\r\n- [x] Rewrite DOM tagnames for windows\r\n- [x] Rewrite DOM tagnames for CoreWM stuff (panels, notifications etc)\r\n- [ ] Clean up, abstraction and linting after finished\r\n\r\n#### Elements\r\n- [x] Icons on Menu\r\n- [x] Labels, Inputs, Containers, etc\r\n- [ ] Richtext **40%**\r\n- [x] IconView\r\n- [x] TreeView\r\n- [x] ListView\r\n- [x] FileView\r\n- [x] Select, SelectList also needs insert(), clear()\r\n- [ ] Keybindings for ListView, IconView, TreeView, Tabs\r\n- [x] Box content adjustments parameters\r\n- [ ] add() remove() methods from containers for dynamics\r\n- [x] DnD (ListView, TreeView, IconView)\r\n- [ ] Tabindex\r\n- [x] Radio type menu item\r\n- [x] Checkbox type menu item\r\n- [x] ContextMenu events\r\n- [x] Blur upon Window::_blur() (hooks)\r\n- [ ] Tooltip property\r\n- [ ] Some TODO/FIXME notations in the code\r\n\r\n#### Default Applications\r\n\r\n- [x] About\r\n- [x] Broadway\r\n- [x] Calculator\r\n- [ ] Draw\r\n- [x] File Manager\r\n- [x] Firefox Marketplace\r\n- [x] Music Player **missing playlist**\r\n- [x] Preview\r\n- [x] Process Viewer\r\n- [ ] Settings\r\n- [x] Textpad\r\n- [ ] Writer\r\n\r\nMisc for apps:\r\n\r\n- [ ] Check if changed before closing\r\n\r\n#### Compability and QA\r\n\r\n- [x] Chrome\r\n- [x] FF\r\n- [x] Mobile\r\n- [x] IE\r\n\r\n#### Documentation\r\n\r\n- [ ] New GUI element code docu **10%**\r\n- [ ] New Dialog element code docu\r\n- [ ] Redo tutorials\r\n- [ ] Regenerate online documentation\r\n\r\n## Schemes\r\n\r\nThis is basically the HTML document that will be loaded into the Window content container. Example:\r\n\r\n```html\r\n\r\n    <application-window data-id=\"MyWindowID\">\r\n        <gui-hbox>\r\n            <gui-hbox-container data-basis=\"50%\" data-fill=\"true\">\r\n                <gui-textarea data-id=\"MyTextarea\" />\r\n            </gui-hbox-container>\r\n\r\n            <gui-hbox-container data-basis=\"50%\">\r\n                <gui-button data-id=\"MyButtonOne\">My Label</gui-button>\r\n                <gui-button data-id=\"MyButtonTwo\">My Label</gui-button>\r\n                <gui-button data-id=\"MyButtonThree\" data-disabled=\"true\">My Label</gui-button>\r\n            </gui-hbox-container>\r\n        </gui-hbox>\r\n    </application-window>\r\n\r\n```\r\n\r\n## Code\r\n\r\nCurrently it works like this, but it will probably be simplified with some abstraction for the 'scheme' class so you don't have to give it a window reference.\r\n\r\n```javascript\r\n\r\n  ApplicationWindow.prototype.init = function(wm, app, scheme) {\r\n    var root = Window.prototype.init.apply(this, arguments);\r\n\r\n    scheme.render(this, 'MyWindowID', root);\r\n\r\n    // Bind Event (chainable)\r\n    scheme.find(this, 'MyButtonOne').on('click', function() {\r\n      alert(\"You clicked me\");\r\n    });\r\n\r\n    // Get property\r\n    var prop = scheme.find(this, 'SomeElement').get('property-name');\r\n\r\n    // Set property (chainable)\r\n    scheme.find(this, 'SomeElement').set('property-name', 'value');\r\n\r\n    // Create UI element programatically (chainable)\r\n    scheme.create(this, 'gui-button', {disabled: true}, root).on('click', function() {\r\n\r\n       // `this` is UIElement() class\r\n       // Any values etc is in `ev.detail`\r\n\r\n    });\r\n\r\n    return root;\r\n  };\r\n\r\n```\r\n\r\n\r\n## Preview\r\n\r\n![Screenshot](http://i.imgur.com/4F5NbU2.jpg)\r\n\r\nYou can see an example scheme here: https://github.com/andersevenrud/OS.js-v2/blob/gui-ng/src/packages/default/ngui/scheme.html"},"comment":{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/comments/127675623","html_url":"https://github.com/andersevenrud/OS.js-v2/issues/136#issuecomment-127675623","issue_url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/136","id":127675623,"user":{"login":"andersevenrud","id":161548,"avatar_url":"https://avatars.githubusercontent.com/u/161548?v=3","gravatar_id":"","url":"https://api.github.com/users/andersevenrud","html_url":"https://github.com/andersevenrud","followers_url":"https://api.github.com/users/andersevenrud/followers","following_url":"https://api.github.com/users/andersevenrud/following{/other_user}","gists_url":"https://api.github.com/users/andersevenrud/gists{/gist_id}","starred_url":"https://api.github.com/users/andersevenrud/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andersevenrud/subscriptions","organizations_url":"https://api.github.com/users/andersevenrud/orgs","repos_url":"https://api.github.com/users/andersevenrud/repos","events_url":"https://api.github.com/users/andersevenrud/events{/privacy}","received_events_url":"https://api.github.com/users/andersevenrud/received_events","type":"User","site_admin":false},"created_at":"2015-08-04T16:58:07Z","updated_at":"2015-08-04T16:58:07Z","body":"@khoaakt And I forgot, the theme \"engine\" has also been rewritten and is a lot better."}}