Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Admin Tab Heights Increased - request for feedback


Reply

8 Posts   2364 Views

Avatar
elijahlofgren

12 June 2007 at 10:55am (Last edited: 12 June 2007 10:55am), Google Summer of Code Hacker, 222 Posts

Hi guys,

Today I worked on "Make HTML editor full height of window (if possible)" as part of usability issue #57 "Newsletter tree and tab row are confusing": http://www.elijahlofgren.com/silverstripe/newletter-tree-and-tab-row-are-confusing/

To increase the height of the Admin Tabs, and therefore allow the editor to expand to the full height of the browser, I committed this change to the gsoc branch of jsparty:
http://www.elijahlofgren.com/silverstripe/patches/Usability-Issue-57-Increase-Tab-Height-jsparty-gsoc-r36716.patch

Here are the results in Firefox 2, Internet Explorer 7, and IE6:
http://www.elijahlofgren.com/silverstripe/images/usability/57-tab-height-before-after-screenshots.html

As you can see, I was only able to get the best spacing in Firefox 2.

I'd love your feedback and suggestions regarding this change.

I have marked this usability issue as complete, but will look at it again if you find something that needs changing.

Thanks,

Elijah Lofgren

Avatar
qhoxie

12 June 2007 at 11:05am Google Summer of Code Hacker, 39 Posts

for the time being, i would call it a success
it seems like everything is extended sufficiently

if you have free time late in the summer (not that you will), you could play with some js and/or css hacks to make things more consistent, but it probably is not worth the time right now

Avatar
Tim

12 June 2007 at 4:59pm Core Development Team, 201 Posts

I think it would be great if there was a "maximise" button, which could toggle the WYSIWYG window, so that it would take up the entire right hand content window (ie so you can't see any of their other fields).

Avatar
Willr

12 June 2007 at 6:57pm Forum Moderator, 5511 Posts

Elijah - great patch man its wicked. Sean will be able to help you if you want to get IE6/7 working the same as FF2. But it doesnt really seem a huge deal it looks good enough!

"I think it would be great if there was a "maximise" button, which could toggle the WYSIWYG window, so that it would take up the entire right hand content window"

You could go further and do something like a maximize button or something that loads the content area into like a light box window that takes up 95% of the screen space. I think that would be pretty cool as when you are trying to write content you dont normally need to see the site tree or the top tabs or anything else apart from the tiny MCE controls which would be embeded in the lightbox window. Then when you click save/publish or a Minimize button is goes back to the old self

Avatar
Markus

12 June 2007 at 8:53pm Google Summer of Code Hacker, 152 Posts

Hey!

I think that small difference in the browsers is not so important. From a usability-viewpoint in my opinion there is a much more important thing:

When the content textarea gets larger, the scrollbar doesn't appear on the textarea (where it should), but on the tab. This is an unnatural behavior which users may not understand. Another drawback is that in that way the page name and the navigational label fields will disappear when the user scrolls down.

Maybe you should address this issue instead of trying to make a pixel-perfect layout in all major browsers.

Avatar
elijahlofgren

13 June 2007 at 5:38am Google Summer of Code Hacker, 222 Posts

> "I think it would be great if there was a "maximise" button, which could toggle the WYSIWYG window, so that it would take up the entire right hand content window"

> You could go further and do something like a maximize button or something that loads the content area into like a light box window that takes up 95% of the screen space. I think that would be pretty cool as when you are trying to write content you dont normally need to see the site tree or the top tabs or anything else apart from the tiny MCE controls which would be embeded in the lightbox window. Then when you click save/publish or a Minimize button is goes back to the old self

When you suggested this, I immediately thought of the TinyMCE fullscreen plugin.

You can try it out by going to http://tinymce.moxiecode.com/example_full.php and clicking the "Toggle Fullscreen mode" button (last button on the right in the the 3rd row).

I spent about 30 minutes today trying to get it to work in SilverStripe, but didn't get very far. The main thing I found was that to make the fullscreen button show on the SilverStripe TinyMCE toolbar, this line needs to be added to sapphire/forms/HtmlEditorField.php:
new HtmlEditorField_button("mceFullScreen","fullscreen","Toggle Full Screen Mode"),

However, the fullscreen plugin does not work correctly.

>> When the content textarea gets larger, the scrollbar doesn't appear on the textarea (where it should), but on the tab. This is an unnatural behavior which users may not understand. Another drawback is that in that way the page name and the navigational label fields will disappear when the user scrolls down.

I agree that this is unnatural. However, because it would be such a large change to the way the SilverStripe currently works, I'm reluctant to look into changing it.

Does anyone else thing this needs changing?

Avatar
Tim

13 June 2007 at 11:10am Core Development Team, 201 Posts

The full screen mode is nice, however it's unlikely we will be able to use this plug-in out of the box, as as we've needed to hack up TinyMCE quite a bit to make it do what we want it to (specifically the separation of the top tool bar from the content area)

However I think replicating this functionality would be time well spent.

Avatar
Sam

13 June 2007 at 11:57am Administrator, 685 Posts

The reason we had the scroll bar on the tab rather than the text field was in situations where you have several fields as well as a HTMLEditorField on a single tab - maybe even multiple HTMLEditorFields on a single tab.

If we put the scrollbar onto the TinyMCE window, you would risk getting a mess of scrollbars; it also means that you can't scroll down to hide the title and see more of the TinyMCE content.

I think that I would want to see evidence of users getting confused by this before acting on changes to the scrollbar position.