Opened 10 years ago

Closed 10 years ago

Last modified 8 years ago

#9521 closed defect (fixed)

[PATCH][CCLA]FontChoice plugin should include the label and button node in a <span> with a stype of whiteSpace: nowrap

Reported by: Jared Jurkiewicz Owned by: Jared Jurkiewicz
Priority: high Milestone: 1.4
Component: Editor Version: 1.3.1
Keywords: Cc: bill, liucougar
Blocked By: Blocking:

Description (last modified by Jared Jurkiewicz)

FontChoice? plugin should include the label and button node in a <span> with a style of whiteSpace: nowrap

This is so that when the page/toolbar is reduced, the label goes along with the dropdown. It looks much nicer that way. Breaking between the label and the dropdown looks ugly.

Attachments (3)

FontChoice.patch (745 bytes) - added by Jared Jurkiewicz 10 years ago.
FontChoice? update to keep labels with the dropdown.
badLinebreak.jpg (18.3 KB) - added by Jared Jurkiewicz 10 years ago.
Example of bad splitting on wrap
WithFix.jpg (18.4 KB) - added by Jared Jurkiewicz 10 years ago.
Same page, with fix applied. Note that the label follows the box on splitting.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 10 years ago by Jared Jurkiewicz

Description: modified (diff)

Changed 10 years ago by Jared Jurkiewicz

Attachment: FontChoice.patch added

FontChoice? update to keep labels with the dropdown.

comment:2 Changed 10 years ago by Jared Jurkiewicz

Summary: FontChoice plugin should include the label and button node in a <span> with a stype of whiteSpace: nowrap[PATCH][CCLA]FontChoice plugin should include the label and button node in a <span> with a stype of whiteSpace: nowrap

comment:3 Changed 10 years ago by Jared Jurkiewicz

Cc: liucougar added

Changed 10 years ago by Jared Jurkiewicz

Attachment: badLinebreak.jpg added

Example of bad splitting on wrap

Changed 10 years ago by Jared Jurkiewicz

Attachment: WithFix.jpg added

Same page, with fix applied. Note that the label follows the box on splitting.

comment:4 Changed 10 years ago by Jared Jurkiewicz

Milestone: tbd1.4

comment:5 Changed 10 years ago by bill

Component: GeneralEditor

Looks good to me. I was going to mention that this should be done for all the editor plugins w/labels, but apparently all the curent plugins w/labels are handled by that FontChoice.js.

One nitpicky thing is that you could use a single call to dojo.create() rather than calling dojo.doc.createElement(), dojo.style(), and dojo.place(). IIRC this should work (and save a few bytes in the code size):

dojo.create("span", {style: {whiteSpace: "noWrap"}}, this.button.domNode, "before");

Actually it's probably better to refactor that code to work off a template, does this work?

var span = dojo.place(
    "<span style='whiteSpace: nowrap'><label for="+this.button.id+">"+strings[this.command]+"</label></span>", 
    this.button.domNode, "before");
span.appendChild(this.button.domNode);

comment:6 Changed 10 years ago by liucougar

agree with bill, dojo.place looks a better fit here

comment:7 Changed 10 years ago by Jared Jurkiewicz

Resolution: fixed
Status: newclosed

(In [18746]) Fixing minor issue with the FontChoice? plugin. Does not wrap very well. fixes #9521

comment:8 Changed 10 years ago by Jared Jurkiewicz

(In [18782]) Discovered just the span breaks keyboard access. Needed a wrapper widget to make keyboard work right. refs #9521

comment:9 Changed 8 years ago by bill

In [27187]:

add comment, refs #9521 !strict

Note: See TracTickets for help on using tickets.