{"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 GUI, Dialogs and Themes","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"},{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/labels/testing","name":"testing","color":"d4c5f9"}],"state":"closed","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":44,"state":"open","created_at":"2014-11-05T18:38:59Z","updated_at":"2015-08-21T17:09:39Z","due_on":null,"closed_at":null},"comments":138,"created_at":"2015-07-27T17:36:27Z","updated_at":"2015-08-21T17:09:39Z","closed_at":"2015-08-21T17:09:39Z","body":"This issue is for the next-generation UI system.\r\n\r\nThe plan is to separate the UI stuff from JavaScript, so you have to code less to make interfaces work (no CSS required), much simpler handling and manipulation of elements and dialogs.\r\n\r\nYou can now design your apps with HTML (custom elements) instead of coding them. This saves a lot of time, especially when prototyping. Also, this paves the way for better mobile/tablet compability.\r\n\r\nTheme support will also get a refresh making it way easier to design and modify themes!\r\n\r\n*FYI: There is no Mobile optimized UI yet. This will be apart of a future update*\r\n\r\n~~**If everything goes as planned I will be able to have a test version running this weekend (8-9 aug)**~~\r\n\r\n**THIS HAS BEEN MERGED** d9708d672b6a57d1a2f10aeb21c21deaaabb2149\r\n\r\n# Changes\r\n\r\n**BIG CHANGES TO THE API. THIS WILL BREAK YOUR APPS**\r\n\r\n- All UI interfaces now uses CSS flexbox to dynamically (and correctly) fill content\r\n- Updated touch support abstraction to pave the way for multitouch etc\r\n- Collapsed some settings in `scr/conf` for simplification\r\n- Completely new DefaultApplication abstraction\r\n- Completely new GUI (with new elements)\r\n- Completely new Dialogs\r\n- Rewritten Application\r\n- Rewritten Core CSS\r\n- Rewritten Theming\r\n- Removal of code\r\n- Optimizations\r\n- Cleanups\r\n- Bugfixes\r\n\r\n*Removed almost 8K lines of code in total*\r\n\r\n*300+ commits, 5 issues closed and 10 user requests also in this update*\r\n\r\n# TODO\r\n\r\n## General\r\n\r\n- [x] Finish the \"spec\" **Any comments on this?**\r\n- [x] 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- [x] 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- [x] Add self-closing tag support to parser\r\n- [x] File dialog needs mime dict on save dialog to ensure correct extension\r\n- [x] DefaultApplication: Check if changed on close\r\n- [ ] Some TODO/FIXME notations in the code\r\n- [x] Hook up application locale (binding)\r\n\r\n## Refactoring\r\n- [x] Application launch splash screen\r\n- [x] Remove all old GUI and Event stuff from Window\r\n- [x] Re-make dialogs\r\n- [x] Re-make themes **I decided to ditch some of the old themes**\r\n- [x] Replace old theme engine\r\n- [x] CoreWM IconView\r\n- [x] 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\r\n## Elements\r\n\r\n- [x] All elements from previous version\r\n- [x] New container elements\r\n- [x] New input elements\r\n- [x] New menus (with radio, checkboxes etc)\r\n- [x] Wrapper fo binding window key evens for *dataview*\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- [x] Tabindex\r\n- [x] Radio type menu item\r\n- [x] Checkbox type menu item\r\n\r\n## Applications\r\n\r\n**I will have to redo some of the apps completely and will leave it out of this update**\r\n\r\n- [x] Re-make core apps\r\n- [x] Re-make extras apps **missing Archiver**\r\n- [x] Re-make experimental apps **90%** **missing DrumSampler**\r\n\r\n### Core Applications\r\n\r\n- [x] About\r\n- [x] Broadway\r\n- [x] Calculator\r\n- [x] Draw **missing odraw/layer support**\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- [x] Settings\r\n- [x] Textpad\r\n- [x] Writer\r\n\r\n## Compability and QA\r\n\r\n- [x] Chrome (Webkit)\r\n- [x] FF\r\n- [x] Mobile (Still works, not optimized)\r\n- [x] IE\r\n\r\n### Problems found so far\r\n\r\n- [x] Firefox is slow on Windows. *deal with it* :sunglasses: \r\n- [x] **Firefox does not like resetting scrollTop (as fix) in _dataview focus()**\r\n- [x] Checkboxes and radio inputs in menus behave strangely\r\n- [x] `[object XMLHttpRequestProgressEvent]` when drop-uploading files in filemanager\r\n- [x] `TAB` key in inputs causing jumping on some platforms (Not windows apparently)\r\n- [x] Richtext tab character insertion\r\n- [x] Richtext fix race condition on load\r\n- [x] TreeView `index` is wrong on selection because nesting does not work with Utils.$index()\r\n- [x] Draw does not detect changes so you can close and destroy current work\r\n- [x] IconView up/down key is not 100% accurate. Better method coming.\r\n\r\n## Documentation\r\n\r\n- [x] New GUI element code docu **90%**\r\n- [x] New Dialog element code docu\r\n- [x] Redo tutorials\r\n- [x] Regenerate online documentation\r\n\r\n# Schemes\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\r\n\r\n# Code\r\n\r\nExample code on how to bind events and set/get properties etc.:\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"},"comment":{"url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/comments/133496997","html_url":"https://github.com/andersevenrud/OS.js-v2/issues/136#issuecomment-133496997","issue_url":"https://api.github.com/repos/andersevenrud/OS.js-v2/issues/136","id":133496997,"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-21T17:09:38Z","updated_at":"2015-08-21T17:09:38Z","body":"I am retireting this issue because all of the features are complete. The rest of this will be referred in #49.\r\n\r\nThanks for all the support guys. You rock! :metal:\r\n"}}