ForumsTips & Tricks[UserStyles] Toodledo Focus


[UserStyles] Toodledo Focus
Author Message
twangus

Posted: Dec 11, 2010
Score: 2 Reference
I took my first stab at a user style this week, and wanted to share it with all of you to try to get some feedback. I call it "Toodledo Focus," because the central design idea was to get all the configurations options (which sit on top of the table in the tradition UI) out to the sides of the layout so that you can focus your attention on the most important information in the central panel -- the tasks themselves!

There is still work to be done, and there are some limitations of the design based how the html file is structured, but overall I was surprised by how little time it took to come up with a relatively coherent design for the site.

I've tested it in my everyday use in Chrome and Safari, and to a lesser extent Firefox. I'm sure there are still bugs and compatibility issues, but I'll try to get those addressed pretty quickly.

If you have any comments or suggestions, feel free to just reply to this post.

http://userstyles.org/styles/40980
piyush_soni

Posted: Dec 11, 2010
Score: 0 Reference
Wow! This is the first user style of the many posted here that I have liked. :) Some really nice work. Will post if I have some suggestions.
PeterW 

Posted: Dec 11, 2010
Score: 0 Reference
Great work. I like the way the settings panel works.

There are a few issues for me:

1. I had the experimental scrolling feature turned on in my settings which caused the task panel to become larger (i.e. deeper) than required with a lot of blank space. Turning it off fixed the problem, although it would be very cool if this worked because then the settings panel would always be visible. The same issue applied in the 'Toodledo Me Too' theme.

2. The separators are not deep enough so the text doesn't fit in it and overlaps into the task area.

I'm using the latest Chrome on Win Vista.

EDIT: Re: #2...
Just looked at your screenshot and can see there is no text in the separator. And if I collapse the separators they become wider and the text fits in fine. So looks like a mismatch in the height when expanded.


This message was edited Dec 11, 2010.
twangus

Posted: Dec 11, 2010
Score: 0 Reference
Yeah, I haven't tried it with the experimental scrolling feature. I'll give that a try, but I'm going to try to address smaller bugs first.

As for the second point, the text in the separator is supposed to be transparent and only become visible when the separator is closed. Is that not happening for you? The reasoning behind that design decision was that, for me, the vast majority of the time my tasks are sorted by some field that is already being displayed in the grid (the one exception being when the tasks are sorted by importance, but in that case the actual importance number is pretty abstract and meaningless), so having the text in the separator too just made it clunky. The separator text wasn't adding anything for me when it was open, and I found it cleaner to have smaller, simpler separators.

That said, I always use grid mode, and I realize that when people are using multi-line mode, having the text in the separators makes sense even when open... So I'll see what I can do to add that back.

I also found a few bugs already -- namely, the levels are messed up a bit, so pop-ups in the add-task panel show up behind the panel. I'll update the style shortly to fix it.
PeterW 

Posted: Dec 11, 2010
Score: 0 Reference
RE: Separators - thanks, that makes sense. I almost always sort by due date so the separators are quite functional in that scenario, e.g. Due Today, Due Tommorrow, Due Next 7 Days, etc.

Anyway, I've quickly edited your script to increase the height of the separators to 16px which seems to be the sweet spot.

I see also that you solved the problem that 'Toodledo Me Too' had when using the 'Add Subtasks' option (which resulted in the popup appearing at the bottom of the screen and partly obscured). Well done.
M.Stevens

Posted: Dec 12, 2010
Score: 0 Reference
Great job twangus, really like the clean layout of this style.

Also, thanks for the tip on the 16px height PeterW, that resizes the bar perfectly in firefox on vista as well. I also like the text being displayed in the separator.
Travis

Posted: Dec 12, 2010
Score: 0 Reference
This is the best skin for Toodledo ever! Seriously, this looks better than the other 900 GTD web based services I have tried. Also really brings out all of the functionality of Toodledo very nicely at the bottom. THIS SHOULD BE THE DEFAULT THEME for Toodledo! +1 Vote

This message was edited Dec 12, 2010.
piyush_soni

Posted: Dec 12, 2010
Score: 0 Reference
Yeah. I had come to point out the add task Calendar and tags panel opening below the add task thing, but seems you already know about that.

Also, seems some buttons/links are not affected by the css. Like the 'Post Reply' button in the forums, and 'Search All Forums', 'Search this Topic' etc.
twangus

Posted: Dec 12, 2010
Score: 0 Reference
Thanks for the kind words. I updated the style last night and it should fix the popups in the Add Task panel -- please let me know if it doesn't.

It's definitely true that there are still a lot of areas I haven't updated, especially in the forums. I'll try to get to those eventually -- I've been mostly focusing on the functionality of the to-do list.

If enough people like having the text in open separators, I can try to make that a "setting" in the user style, but I'm a bit hesitant to do that since it seems that you can't update the style through Stylish once it has settings. In the meantime, I'll try to add some code to the style that people can simply uncomment to put that text back in.

Also, FYI, I tried playing around with the experimental scrolling, and I'm not sure I can get it to work. I did find a way to get some interesting similar scrolling behavior, but I wasn't able to find anything in the HTML to figure out whether the feature was turned on. In other words, when I got the scrolling behavior to work, it then broke everything for people using the basic setting. I'll still play around with it, but for now I just added some code that makes everything work the same (i.e., whole-page scrolling) regardless of the setting).
PeterW 

Posted: Dec 12, 2010
Score: 0 Reference
One other minor issue to report using multi-line mode...

The width of the task pane is not set. So when you click the arrow to display all fields, the task pane adjusts to a wider size. If you don't run the browser window maximised (I don't) then you get a horizontal scroll bar.

Toodledo automatically wraps the fields to a second line so the task pane doesn't need to auto resize.


This message was edited Dec 12, 2010.
alexandremrj_2

Posted: Dec 13, 2010
Score: 0 Reference
The style is very good looking and very functional.

Minor issue with me is the note field that, when emailed, the text is all becoming running text instead of formated.
twangus

Posted: Dec 13, 2010
Score: 0 Reference
For the multi-line problem, I can imagine some people wanting the fields to wrap, while other would want the tasks to expand so that the fields all fit on one line... So I'm making the default that it expands to fit all the fields on one line. If you would prefer they wrap, just add this to the end of the file:

#main #tasks {
width: 800px !important;
}

You probably need my latest version to ensure that that works. Although, you'll be happy to know that I took your suggestion and made all separators 16px, whether open or closed.
PeterW 

Posted: Dec 13, 2010
Score: 0 Reference
Thanks twangus.

I've also noticed that all drop-down fields are truncated on the right hand side, so now arrow appears. This is only the case in multi-line mode and happens in both Chrome and Firefox. I looked through the code but couldn't work out what might be causing this.
piyush_soni

Posted: Dec 13, 2010
Score: 0 Reference
Posted by alexandremrj:
Minor issue with me is the note field that, when emailed, the text is all becoming running text instead of formated.


Yeah. This is very important :(. All my notes have lost the new line characters and the text is all wrapped into one giant paragraph.
twangus

Posted: Dec 14, 2010
Score: 0 Reference
Oh, sorry -- I don't use notes very much, so I must not have caught that. Can you update to the latest release and let me know if there are still any problems with notes?
Andrew A

Posted: Dec 14, 2010
Score: 0 Reference
Except for some minor issues, as noted here and there, very sweet (a little flaky on Ubuntu/Firefox, some font and width issues, but no real issue on Windows/Firefox).

So this and toodldoish are current favorites.

(though I will add my two cents for putting back some working scrolling CSS)


This message was edited Dec 14, 2010.
alexandremrj_2

Posted: Dec 14, 2010
Score: 0 Reference
It is resolved,

thank you very much
piyush_soni

Posted: Dec 14, 2010
Score: 0 Reference
Posted by twangus:
Can you update to the latest release and let me know if there are still any problems with notes?


Wonderful ! :) Thanks a lot! I see that the forum buttons are changed to the new theme as well. Nice!
earlemonroe

Posted: Dec 14, 2010
Score: 0 Reference
You say that you have tested this for Safari, Firefox and Chrome... How do I run it on Safari?

I installed it using Stylish with Facemoods as suggested, and this made the style usable on Firefox. However I use Safari more often, and it still shows up looking the old way on that browser.

Any tips on using the style on Safari?
PeterW 

Posted: Dec 15, 2010
Score: 0 Reference
If you install it into Chrome for Stylish from the userstyles website then it should convert whatever it needs to run correctly in Chrome.

If you cut & past the code manually, then you will need to manually remove the FireFox-specific header info, e.g.
@-moz-document domain('toodledo.com') {


and also delete the trailing } at the bottom of the script.
You cannot reply yet

U Back to topic home

R Post a reply

Skip to Page:  1   2   3      Next

To participate in these forums, you must be signed in.