Edgewall Software
Modify

Opened 6 years ago

Closed 2 years ago

#11112 closed enhancement (fixed)

Apply hint/help classes more widely

Reported by: Ryan J Ollos Owned by: Ryan J Ollos
Priority: low Milestone: 1.3.3
Component: general Version:
Severity: minor Keywords: help
Cc: Branch:
Release Notes:

Changed styling and position of the You may use WikiFormatting here hint.

API Changes:

Description (last modified by Ryan J Ollos)

I like the styling of the hint and help classes, and have noticed some places that I think it could be appropriately applied.

Example of help class:

Attachments (7)

ComponentAdminPanel.png (7.6 KB ) - added by Ryan J Ollos <ryan.j.ollos@…> 6 years ago.
ReportEditPage.png (16.4 KB ) - added by Ryan J Ollos <ryan.j.ollos@…> 6 years ago.
ReportEditPageOrig.png (17.3 KB ) - added by Ryan J Ollos <ryan.j.ollos@…> 6 years ago.
Screen Shot 2017-07-25 at 17.25.11.png (28.8 KB ) - added by Ryan J Ollos 2 years ago.
wiki_toolbars_disabled_20170727T130259.png (22.1 KB ) - added by Jun Omae 2 years ago.
Screen Shot 2017-08-01 at 17.29.22.png (27.6 KB ) - added by Ryan J Ollos 2 years ago.
Screen Shot 2017-08-01 at 18.58.17.png (22.7 KB ) - added by Ryan J Ollos 2 years ago.

Download all attachments as: .zip

Change History (30)

by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

Attachment: ComponentAdminPanel.png added

comment:1 by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

Description: modified (diff)
Summary: Apply help class more widelyApply hint/help classes more widely

by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

Attachment: ReportEditPage.png added

comment:2 by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

Here is an example of the kind of changes I had in mind:

  • bef1f02e: Applied the hint class to text on the Report Edit page.
  • 7b72499e: Separated the label text and hint text, as I think this will allow theme authors to locate the hint independent from the placement of the label, without breaking translations.

Here is the result - the two lines to the right of the labels have a new styling:

by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

Attachment: ReportEditPageOrig.png added

comment:3 by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

Here is a screen capture of the current state of things, for comparison:

comment:4 by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

  • 61a40d63: Default padding for span.hint is 0, and padding of 1em for span.hint used on the Admin forms is set in admin.css..
  • 5ae38851: Moved p.help class from admin.css to trac.css, so that it can be used more widely within Trac.

comment:5 by Ryan J Ollos <ryan.j.ollos@…>, 6 years ago

I'll wait for feedback on the changes before coming up with a patch to implement these changes throughout Trac, but on first review, here is where changes would need to be made:

  • (you may use WikiFormatting here): on the following pages:
    • Milestone Edit
    • Ticket
    • Admin Ticket System and Admin Manage Repositories
  • Milestone Edit: Format: MM/DD/YYYY hh:mm:ss a should be wrapped in a span with class hint (like the Admin Milestone Edit page), rather than being wrapped in em, and the CSS rule for #edit em can be removed.

comment:6 by Ryan J Ollos, 6 years ago

Description: modified (diff)

comment:7 by Jun Omae, 5 years ago

Milestone: undecided

comment:8 by Peter Suter, 5 years ago

Using the hint styles for this sounds good to me. Visually I also like the label[for=comment] { float: right } in ticket.css.

comment:9 by Ryan J Ollos, 5 years ago

Milestone: undecided1.1.3
Owner: set to Ryan J Ollos
Status: newassigned

comment:10 by Ryan J Ollos, 5 years ago

Reporter: changed from Ryan J Ollos <ryan.j.ollos@…> to Ryan J Ollos

comment:11 by Ryan J Ollos, 5 years ago

Milestone: 1.1.3next-dev-1.1.x
Owner: Ryan J Ollos removed
Status: assignednew

comment:12 by Ryan J Ollos, 4 years ago

Milestone: next-dev-1.1.xnext-dev-1.3.x

Narrowing focus for milestone:1.2. Please move ticket to milestone:1.2 if you intend to fix it.

comment:13 by Ryan J Ollos, 2 years ago

Milestone: next-dev-1.3.x1.3.3
Owner: set to Ryan J Ollos
Status: newassigned

by Ryan J Ollos, 2 years ago

comment:14 by Ryan J Ollos, 2 years ago

I implemented the comment:8 suggestion: [5f04fe87f/rjollos.git].

comment:15 by Ryan J Ollos, 2 years ago

Release Notes: modified (diff)

I wrapped the text in a label so that clicking on the hint puts focus on the textarea. A span could be used if there are any problems with having multiple labels for each textarea. According to the HTML spec at least it is okay, but maybe there is an accessibility or other concern that I'm not aware of.

in reply to:  14 comment:16 by Jun Omae, 2 years ago

Replying to Ryan J Ollos:

I implemented the comment:8 suggestion: [5f04fe87f/rjollos.git].

Looks good to me but two lines is required when [trac] wiki_toolbars is disabled. Before the changes, one line was required.

comment:17 by Ryan J Ollos, 2 years ago

Thanks, I forgot about that config option. I'll investigate a fix.

comment:18 by Ryan J Ollos, 2 years ago

[c213a08d6/rjollos.git] changes the label to be a block element. Additional styling improvements in [2df0ce7ce/rjollos.git].

by Ryan J Ollos, 2 years ago

comment:19 by Ryan J Ollos, 2 years ago

I'm going to iterate on these changes some more. Running the latest (r16177) on t.e.o, which includes #12875, the hint collides with the toolbar:

Last edited 2 years ago by Ryan J Ollos (previous) (diff)

by Ryan J Ollos, 2 years ago

comment:20 by Ryan J Ollos, 2 years ago

Release Notes: modified (diff)

It seems to be much simpler to move the hint to the lower corner of the textarea, and I think it will behave better with themes like the one on t.e.o and with varying screen widths.

log:rjollos.git:t11112_hint_help.2

in reply to:  20 ; comment:21 by Jun Omae, 2 years ago

Replying to Ryan J Ollos:

It seems to be much simpler to move the hint to the lower corner of the textarea, and I think it will behave better with themes like the one on t.e.o and with varying screen widths.

log:rjollos.git:t11112_hint_help.2

It looks simple and good to me. I didn't think .css('display', 'block') in wikitoolbar.js at rjollos.git@t11112_hint_help is good.

However, I think we should use text-align: right rather than float: right in label.trac-textarea-hint like #help.

Last edited 2 years ago by Jun Omae (previous) (diff)

in reply to:  21 comment:22 by Ryan J Ollos, 2 years ago

Replying to Jun Omae:

However, I think we should use text-align: right rather than float: right in label.trac-textarea-hint like #help.

That's a good idea. It fixes the vertical margin on the report edit page.

comment:23 by Ryan J Ollos, 2 years ago

Resolution: fixed
Status: assignedclosed

Committed to trunk in r16179.

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Ryan J Ollos.
The resolution will be deleted. Next status will be 'reopened'.

Add Comment


E-mail address and name can be saved in the Preferences .
 
Note: See TracTickets for help on using tickets.