WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 8 months ago

#24165 closed enhancement (fixed)

Re-skinning Trac 1.0

Reported by: nacin Owned by:
Milestone: WordPress.org Priority: high
Severity: minor Version:
Component: WordPress.org site Keywords:
Focuses: Cc:

Description

As part of a datacenter migration, Trac was updated to 1.0, which has a new UI featuring rounded corners, gradients, drop shadows; and fieldsets with rounded corners, gradients, and drop shadows.

Let's update http://wordpress.org/style/trac/wp-trac.css?2 to replace all of the ugly and to fix some of our custom styling broken with the upgrade.

We went from Trac 0.12.4 to 1.0. Here's a diff of the relevant CSS/JS/images: http://trac.edgewall.org/changeset?old_path=%2Ftags%2Ftrac-0.12.4%2Ftrac%2Fhtdocs&old=11784&new_path=%2Ftags%2Ftrac-1.0%2Ftrac%2Fhtdocs&new=11784

Attachments (14)

24165.top-menu-hover.png (6.1 KB) - added by SergeyBiryukov 12 months ago.
24165.missing-fields-color.png (3.6 KB) - added by SergeyBiryukov 12 months ago.
24165.inline-buttons.png (2.4 KB) - added by SergeyBiryukov 12 months ago.
24165.inline-buttons.after.png (2.3 KB) - added by SergeyBiryukov 12 months ago.
24165.internal-error.png (44.2 KB) - added by SergeyBiryukov 12 months ago.
24165.patch (1.2 KB) - added by DrewAPicture 11 months ago.
spacing, gravatars, buttons
24165.keywords.patch (647 bytes) - added by SergeyBiryukov 11 months ago.
24165.blame.png (80.3 KB) - added by SergeyBiryukov 11 months ago.
24165.blame-overflow.png (76.2 KB) - added by SergeyBiryukov 11 months ago.
24165.report-width.png (54.9 KB) - added by SergeyBiryukov 10 months ago.
24165.browse-source-width.png (79.8 KB) - added by SergeyBiryukov 10 months ago.
24165.blame-width.png (28.5 KB) - added by SergeyBiryukov 10 months ago.
24165.blame-width.2.png (56.2 KB) - added by SergeyBiryukov 10 months ago.
iPhone-view-Trac.png (114.1 KB) - added by RDall 10 months ago.
iPhone view of Trac

Download all attachments as: .zip

Change History (50)

comment:1 sabreuse12 months ago

  • Cc sabreuse added

comment:2 SergeyBiryukov12 months ago

  • Type changed from defect (bug) to enhancement

comment:3 SergeyBiryukov12 months ago

Some bugs with the new UI:

  1. Can't mark a tickets as duplicates, the text input does not appear.
  2. The top menu buttons have wrong text color on hover: 24165.top-menu-hover.png.
  3. Missing field labels are barely visible, the contrast seems too low: 24165.missing-fields-color.png (I guess they're intentionally de-emphasized, but the contrast could be a bit higher).
  4. Inline button labels seem blurry and misaligned: 24165.inline-buttons.png (Firefox 20, Windows). Removing text-shadow and fixed height appears to fix that: 24165.inline-buttons.after.png.

comment:4 DrewAPicture12 months ago

  • Cc xoodrew@… added

comment:5 SergeyBiryukov12 months ago

Apparently anyone is able to set milestone now: #24174.

comment:6 SergeyBiryukov12 months ago

Getting a Trac internal error when trying to mark a ticket as a duplicate: 24165.internal-error.png.

Last edited 12 months ago by SergeyBiryukov (previous) (diff)

comment:7 SergeyBiryukov12 months ago

If you add a keyword from the dropdown and then remove it, it doesn't become available in the dropdown again, so you can only add it back using the "manual" text input.

comment:8 RDall12 months ago

I'd suggest that on the https://core.trac.wordpress.org/milestone/3.6 page on roadmap.css we set #stats to float: left;

#stats {
    float: left;
}

So on a wide screen the "Ticket status" is not wildly off to the right…  

See screenshot: 
http://cl.ly/image/2C241G3a203B

Last edited 11 months ago by SergeyBiryukov (previous) (diff)

comment:9 aaroncampbell12 months ago

  • Cc aaroncampbell added

comment:10 follow-up: DrewAPicture12 months ago

A couple of seconds after you start typing a comment, all of the comment author gravatars disappear.

comment:11 nacin12 months ago

Things that have been fixed:

  • Marking tickets as a duplicate. First, the plugin wasn't installed. Second, the plugin needed to be updated for 1.0.
  • Milestone and priority are again blocked for those who are not bug gardeners. (Same situation - plugin was not installed.)

comment:12 nacin11 months ago

comment:13 in reply to: ↑ 10 ; follow-ups: nacin11 months ago

Replying to DrewAPicture:

A couple of seconds after you start typing a comment, all of the comment author gravatars disappear.

I really have no idea what the hell Trac is thinking here. Basically, the XHR request *RELOADS THE ENTIRE PAGE*. And does so in a way that does not load our own template customizations. It's like a comment preview on a Twenty Ten child theme replacing the *entire page* with Twenty Ten.

So, fun times. We may just turn off the comment previews, I guess. I'd wager that they annoy people more than help.

comment:14 in reply to: ↑ 13 DrewAPicture11 months ago

Replying to nacin:

Replying to DrewAPicture:

A couple of seconds after you start typing a comment, all of the comment author gravatars disappear.

I really have no idea what the hell Trac is thinking here. Basically, the XHR request *RELOADS THE ENTIRE PAGE*.

I think it's their solution to the "this ticket has been changed" message, so they reload the page after you start typing to make sure you don't lose your comment.

comment:15 in reply to: ↑ 13 sabreuse11 months ago

Replying to nacin:

I really have no idea what the hell Trac is thinking here. Basically, the XHR request *RELOADS THE ENTIRE PAGE*. And does so in a way that does not load our own template customizations. It's like a comment preview on a Twenty Ten child theme replacing the *entire page* with Twenty Ten.

So, fun times. We may just turn off the comment previews, I guess. I'd wager that they annoy people more than help.

Ugh. I use and appreciate comment previews because I'm apparently incapable of formatting a comment without having to go back and fix it three times. But I'd rather train myself to hit the manual preview button than support something that idiotic.

comment:16 mitchoyoshitaka11 months ago

  • Cc mitcho@… added

comment:17 follow-up: nacin11 months ago

Since the previews in 1.0 handle a lot of things (new comments, conflicting changes, etc.), I'm not going to disable them. I will, though, look into why our custom template isn't applying.

"Attachments" is again expanded by default again.

I removed a ton of box shadows and overly rounded corners.

If you add a keyword from the dropdown and then remove it, it doesn't become available in the dropdown again, so you can only add it back using the "manual" text input.

If someone can figure this out (I haven't looked yet), you can submit a patch and upload it here. Here's the file in version control.

comment:18 in reply to: ↑ 13 nacin11 months ago

Replying to nacin:

It's like a comment preview on a Twenty Ten child theme replacing the *entire page* with Twenty Ten.

I have to take this back. It's definitely more clever than that. Trac does do a partial template load (it did not appear that way as it POST'd to itself and returned a sizable chunk of HTML). This breaks because our global template customization file is not loaded during this partial load.

I'm working around it.

comment:19 follow-up: nacin11 months ago

Gravatars are back for ticket previews. I wouldn't mind a design that makes the gravatars and author names a bit bigger, and gives a little more whitespace between comments.

comment:20 in reply to: ↑ 19 ; follow-up: DrewAPicture11 months ago

Replying to nacin:

Gravatars are back for ticket previews. I wouldn't mind a design that makes the gravatars and author names a bit bigger, and gives a little more whitespace between comments.

What about something like this (traception):

I increased gravatars to 30px, added bottom margin, bumped the names to 101% and spaced the buttons apart a bit. Also, some of the changes are in tickets.css, is that versioned somewhere?

http://f.cl.ly/items/242P2I1f33181X3K1X2q/Screen%20Shot%202013-06-04%20at%2012.20.52%20PM.png

comment:21 in reply to: ↑ 20 nacin11 months ago

Replying to DrewAPicture:

I increased gravatars to 30px, added bottom margin, bumped the names to 101% and spaced the buttons apart a bit. Also, some of the changes are in tickets.css, is that versioned somewhere?

That's a core Trac file. Everything we do needs to be an override in wp-trac.css.

comment:22 ocean9011 months ago

  • Cc ocean90 added

comment:23 DrewAPicture11 months ago

24165.patch should cover everything from comment:20

DrewAPicture11 months ago

spacing, gravatars, buttons

comment:24 follow-up: rmccue11 months ago

I see we now have the full .org header. The main ticket area (#content.ticket) seems a little too squashed as-is, I think it'd be a bit better if it was the same width as the header (930px).

Also, the login items seem a little cramped up in the banner. IMO they'd look better opposite #ctxtnav on the left.

comment:25 in reply to: ↑ 17 SergeyBiryukov11 months ago

Replying to nacin:

If you add a keyword from the dropdown and then remove it, it doesn't become available in the dropdown again, so you can only add it back using the "manual" text input.

If someone can figure this out (I haven't looked yet), you can submit a patch and upload it here. Here's the file in version control.

24165.keywords.patch should fix that.

comment:26 in reply to: ↑ 24 nacin11 months ago

Replying to rmccue:

I see we now have the full .org header. The main ticket area (#content.ticket) seems a little too squashed as-is, I think it'd be a bit better if it was the same width as the header (930px).

It's actually a bit wider than it was (which was also Trac's default width), because I bumped up the font size a bit. However, the new font is a bit narrower. The end result is we're already at 120-130 characters per line, give or take. So I'd rather not eat up any more space. If things feel squashed, maybe we can adjust padding/whitespace etc.

Also, the login items seem a little cramped up in the banner. IMO they'd look better opposite #ctxtnav on the left.

Probably — between Trac and WP.org, there's a lot of navigation. But, I'm trying to achieve consistency with login items being in that location across multiple sites. See also http://wordpress.org/support/ (where many might be coming from), http://translate.wordpress.org/, etc. Let's let this ride for now.

comment:27 follow-up: bpetty11 months ago

It looks like we break out of max-width for many of the reports, but we still don't for custom queries or any reports based on custom queries (like report 46). Can we get that fixed?

comment:28 SergeyBiryukov11 months ago

color: 3333 in [38/meta] looks like a typo.

comment:29 in reply to: ↑ 27 nacin11 months ago

Replying to bpetty:

It looks like we break out of max-width for many of the reports, but we still don't for custom queries or any reports based on custom queries (like report 46). Can we get that fixed?

I actually had it set up to "break out" on a few other pages: query, browser, attachments (uploaded patches), and changesets. See 31/meta. ocean90 convinced me it wasn't needed for code. That left /query. It occurred to me that queries were almost always custom by a user, and probably wouldn't need an absolute ton of room. Report 46 happens to be the only non-SQL report we have. I'm happy to add them back for queries if that is what the consensus is.

Sergey: Fixing.

SergeyBiryukov11 months ago

comment:30 SergeyBiryukov11 months ago

The font used for changeset descriptions in blame mode is too small: 24165.blame.png.

Also, the white space on the left and right makes the changeset window too narrow and results in horizontal scrolling. It would probably look better if the main source code area filled up the whole screen.

comment:31 nacin11 months ago

Fixed blame styling (font size and overflow) in [meta43].

comment:32 follow-up: SergeyBiryukov10 months ago

Trying to squeeze Trac into 944px doesn't seem to work neither for reports (24165.report-width.png) nor for source browser (24165.browse-source-width.png). It also only leaves about 550px for blame mode, which makes the code with longer lines less readable (24165.blame-width.png, 24165.blame-width.2.png).

comment:33 in reply to: ↑ 32 nacin10 months ago

Replying to SergeyBiryukov:

Trying to squeeze Trac into 944px doesn't seem to work neither for reports (24165.report-width.png) nor for source browser (24165.browse-source-width.png). It also only leaves about 550px for blame mode, which makes the code with longer lines less readable (24165.blame-width.png, 24165.blame-width.2.png).

Reports were supposed to be full width, see [meta44] (broken by [meta43]). In [meta45] I made it so blame changesets are auto width, which is significantly more room if you have space.

I'm not concerned about the browse-source width for now, as it's only over by 50-150 pixels during my testing. We could change the browser directory view to be 1100px, let's say, but that would then affect viewing files too, and then that kind of spirals into attachments, etc. If we can't view our code in a 960px wide window, there are larger issues.

RDall10 months ago

iPhone view of Trac

comment:34 follow-up: RDall10 months ago

I am not sure if this has been covered yet. But the mobile view of Trac is somewhat broken in the new version of Trac.

Just though I'd add a screenshot for what it is worth :-)

comment:35 in reply to: ↑ 34 helen10 months ago

Replying to RDall:

Yeah... should probably kill that so long as the header isn't also responsive.

comment:36 nacin8 months ago

  • Resolution set to fixed
  • Status changed from new to closed

Going to mark this as fixed. Any issues can be opened up on http://meta.trac.wordpress.org/ under the Trac component.

The responsiveness of the header is #meta53.

Note: See TracTickets for help on using tickets.