Coming from #91663-100: Permission of text format is not checked when editing an entity and instead reset to something a user can use.

...next one on my all time hit list:

resizable-textarea.png

CommentFileSizeAuthor
#11 735628-11.patch5.29 KBjacine
#4 735628-4.patch5.31 KBjacine
#3 drupal.textarea.3.patch3.32 KBsun
#2 drupal.textarea.1.patch4.43 KBsun
resizable-textarea.png5.87 KBsun

Comments

jacine’s picture

jacine
she/her
Location New York
commented

subscribing.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Active » Needs review
StatusFileSize
new drupal.textarea.1.patch4.43 KB

Awesome.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
StatusFileSize
new drupal.textarea.3.patch3.32 KB

Let's keep that .resizable-textarea class. Behaviors can be changed/overridden.

jacine’s picture

jacine
she/her
Location New York
commented
StatusFileSize
new 735628-4.patch5.31 KB

Cross-browser tested this with Garland, Seven and Stark and did some more work on it.

  1. Removed the margin-right hack that was being applied to the grippie w/js
  2. Removed the 95% nonsense from textareas and the filter-wrapper
  3. Removed code from Seven that is no longer necessary with this being fixed.

The box-sizing: border-box was the key :D It looks pretty awesome cross-browser. IE6 and IE7 have a 2px wider textarea, but IMO it's not worth doing anything about. It's a HUGE improvement over the existing code! Yay :)

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Yay! :)

IE6 and IE7 have a 2px wider textarea, but IMO it's not worth doing anything about.

Would it be possible to post some screenshots? (I'll also leave a pointer to this issue in the previous fieldsets issue to get some xbrowser testing help)

+++ misc/textarea.js	8 Mar 2010 09:17:02 -0000
@@ -3,16 +3,14 @@
       // When wrapping the text area, work around an IE margin bug. See:
       // http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout
...
-      var textarea = $(this).wrap('<div class="resizable-textarea"><span></span></div>');
+      var textarea = $(this).addClass('resizable-textarea').find('textarea').wrap('<span></span>');

Does this mean we can also kill that comment and the wrapping SPAN?

+++ modules/node/node.css	8 Mar 2010 09:17:03 -0000
@@ -31,10 +31,6 @@ td.revision-current {
-.node-form textarea {

Nice catch! :)

+++ modules/system/system-behavior.css	8 Mar 2010 09:17:04 -0000
@@ -79,8 +79,13 @@ html.js fieldset.collapsible .fieldset-w
  * Resizable textareas
  */
...
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;

Could we document that border-box trick in the CSSDocBlock?

147 critical left. Go review some!

aspilicious’s picture

aspilicious commented

I'll unleash my multiple browser power on this patch soon.
Tell me what has to be tested, what can go wrong...

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

This patch changes the markup of textareas AND resizable textareas. Both used completely different markup before, so we need to ensure that both are looking and working properly in all browsers.

You can test regular textareas by disabling JS in your browser, I think. Otherwise, I guess we need a new testing module with the following states:

1)
- #type textarea with #resizable FALSE
- #type textarea with #resizable TRUE
- #type text_format

2)
- above list again, but in a fieldset

3)
- above list again, but in a vertical tab

aspilicious’s picture

aspilicious commented

I almost don't dare to ask but can you make one sun? Your fieldset module was excellent...
It's for example not that easy to disable javascript in every browser.

cosmicdreams’s picture

cosmicdreams commented

Subscribing. Planning to test tomorrow night.

effulgentsia’s picture

effulgentsia commented

Subscribing. See also #281669: Usability: comment textareas should not be full-width. and #331852: Change 95% textarea width to 100%.

jacine’s picture

jacine
she/her
Location New York
commented
StatusFileSize
new 735628-11.patch5.29 KB

Oy, ~40 screenshots later: http://www.flickr.com/photos/jacine-rodriguez/sets/72157623367597578/det...

Still need to add docs to the patch, but this is what the screenshots are based on with Stark.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs review » Reviewed & tested by the community

Awesome, plain awesome. (you're nuts! XD)

Based on those screenshots and my own (limited) testing, it seems all browsers are either better than before or (in case of IE) rendering NOT worse than before. We can try to improve IE in a follow-up.

cosmicdreams’s picture

cosmicdreams commented
Status: Reviewed & tested by the community » Needs review

Brilliant!

jacine’s picture

jacine
she/her
Location New York
commented
Status: Reviewed & tested by the community » Needs review

@cosicdreams thanks :D

Did you mean to set the status to needs review though?

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs review » Reviewed & tested by the community

I don't think so.

cosmicdreams’s picture

cosmicdreams commented
Status: Needs review » Reviewed & tested by the community

Sorry Jacine, I didn't realize I changed the status.

jacine’s picture

jacine
she/her
Location New York
commented

No worries at all ;) Just wanted to make sure.

dries’s picture

dries commented
Status: Reviewed & tested by the community » Fixed

Thanks for the crazy testing Jacine. Great work all. Committed to CVS HEAD.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Awesome!

Quick follow-up: #737202: Vertical tabs don't use full available width

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

FYI: #1138258: Drop textarea.js in favor of CSS3 resize makes textarea.js use jQuery UI for resizable textareas instead, but has some issues with the CSS/layout of the grippie.