diff --git a/Discussing-new-gui-for-tracks-3.md b/Discussing-new-gui-for-tracks-3.md new file mode 100644 index 0000000..9eab3ae --- /dev/null +++ b/Discussing-new-gui-for-tracks-3.md @@ -0,0 +1,57 @@ +This page is meant to show some ideas for a new gui for Tracks that could be part of Tracks 3.0. + +_**I think it is very important to keep Tracks recognizable for long-time users. So nothing too radical here. This page is meant to get feedback, it is not an overview of an already settled redesign **_ + +Note: the screenshots are taken from the experimental new-gui branch found in the Tracks repo. + +## background +The current gui is quite old and has a lot of complex code running it. Adding new functionality is quite difficult and error-prone, even though we have extensive tests. + +Rendering times are awful, both on the server (controller / view) and on the client (dom rendering, js). We probably have a lot of dead js-code and unused css-styles + +Furthermore, the look of Tracks is getting dated + +## goals +I see the following goals for a new gui +* Simplify the pages. Currently there is too much going on +* Ease maintenance by using well maintained frameworks. I like jQuery, Bootcamp and Font Awesome for this +** depend on their browser support. We should not try to support browser versions that are not supported by these frameworks +* Reduce page load time using the new caching functionality of rails 4 and some tricks as mentioned here: http://37signals.com/svn/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui +* Make the default pages usable on modern tables / phones. We could keep the current mobile version and try to make the non-mobile version useable on ipad/iphone like devices, so supporting touch is a must-have +* include keyboard shortcuts like google reader had, gmail has, etc. + +## Overall look-and-feel + +Changes +* Move to Bootcamp +* Remove form for new-todo and replace with +** Button in menubar to open new-todo form +** 'a' shotcut to use keyboard to quickly open new-todo form +** use one form to add single todo, multiple todos and repeating todos +* Remove list with project/contexts from sidebar +** Button in menubar to go to project / context +** keyboard shotcuts to quickly go to a project / context. For example use 'g c' to go to a context. This shows a dialog where you can type the context name with autocomplete functionality +* Show less information of a todo by default. Clicking the todo expands it and shows more detail and buttons with actions to do with the selected todo. + +The following screenshot shows the homepage with much less stuff going on + +Hitting '?' shows help: + +The go to button in the menubar (or hitting 'G') shows a dialog containing the lists of the old sidebar: + +Hitting 'g c' or 'g p' shows a dialog to go to a specific context/project where you can use autocomplete to partially type the name of the project or context: + +Hitting 'a' or clicking the button in the menubar shows the dialog for adding a (repeating) todo: + +The list of todos shows less information. It can be ordered by context or project: + +A todo is clickable and will show more information and the action buttons. To reduce load time, the details are rendered on the client on demand: + +The project, context, tag view are all looking the same and is re-using the same code + +## Todo +* introduce drag-and-drop to order todos within context / project on all pages +* redo the page listing all projects +* redo the page listing all contexts + +## Other ideas? \ No newline at end of file