Andreas/tracks
1
0
Fork 0
mirror of https://github.com/TracksApp/tracks.git synced 2025-12-16 15:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Created Discussing new gui for tracks 3 (markdown)

Reinier Balt 2013-07-19 08:08:21 -07:00
parent 41d08337ea
commit 8e86575c20
1 changed files with 57 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

57
Discussing-new-gui-for-tracks-3.md Normal file

@ -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?