As discussed in #583400: jQuery UI libraries are loading too much CSS that needs to be reverted / Allow jQuery UI themes to be swappable, we need to provide nice looking default jQuery UI themes to both Garland and Seven. We need to do this so that jQuery UI elements that are presented without explicit styling actually look nice and embedded within the look of the site.

I started on a jQuery UI Theme here: Seven jQuery UI Theme #1. Note that it looks greyish, like Seven, and the messages match. Some help on it would be appreciated.

Requirement: #591794: Allow themes to alter forms and page
Sister issue: #606782: Give Garland a nice looking jQuery UI theme

Files: 
CommentFileSizeAuthor
#67 jq_ui.patch2.27 KBedward_or
#57 seven-jqueryui.patch16.25 KBcasey
PASSED: [[SimpleTest]]: [MySQL] 20,931 pass(es).
[ View ]
#51 seven-ui-10.patch16.58 KBalanburke
PASSED: [[SimpleTest]]: [MySQL] 20,345 pass(es).
[ View ]
#49 614494-49.patch15.99 KBalanburke
PASSED: [[SimpleTest]]: [MySQL] 20,343 pass(es).
[ View ]
#44 overlay-opacity-without-patch.png42.6 KBDavid_Rothstein
#44 overlay-opacity-with-patch.png51.11 KBDavid_Rothstein
#42 614494-42.patch16.99 KBRobLoach
PASSED: [[SimpleTest]]: [MySQL] 19,685 pass(es).
[ View ]
#41 614494-41.patch17.18 KBJacine
PASSED: [[SimpleTest]]: [MySQL] 18,967 pass(es).
[ View ]
#37 614494.patch16.81 KBRobLoach
PASSED: [[SimpleTest]]: [MySQL] 17,533 pass(es).
[ View ]
#30 seven-ui-10.patch16.58 KBJacine
Passed on all environments.
[ View ]
#28 jquery-ui-popup.png60.75 KBmrfelton
#24 seven-ui-9.patch16.27 KBJacine
Passed on all environments.
[ View ]
#22 seven-ui-8.patch16.18 KBJacine
Unable to apply patch seven-ui-8.patch
[ View ]
#22 seven-ui-icons-8.zip21.07 KBJacine
#20 seven-ui-7.patch16.22 KBJacine
Passed on all environments.
[ View ]
#18 seven-ui-6.patch16.17 KBJacine
Invalid PHP syntax in template.php.
[ View ]
#16 seven-ui-5.patch16.17 KBJacine
Passed on all environments.
[ View ]
#16 seven-ui-5.png128.64 KBJacine
#15 seven-ui-4.patch16.36 KBJacine
Passed on all environments.
[ View ]
#10 sevenui.png42.5 KBRobLoach
#9 seven-ui-3.patch18.12 KBJacine
Passed on all environments.
[ View ]
#7 seven-ui-2.patch18.16 KBJacine
Passed on all environments.
[ View ]
#7 seven-jquery-ui.png184.07 KBJacine
#5 picture1.png5.41 KBaspilicious
#5 picture2.png3.47 KBaspilicious
#4 seven-ui-icons.zip21.48 KBJacine
#4 seven-ui.patch18.3 KBJacine
Passed on all environments.
[ View ]
#1 614494.patch28.1 KBRobLoach
Passed on all environments.
[ View ]
#1 images.zip28 KBRobLoach

Comments

RobLoach’s picture

Status:Active» Needs review
StatusFileSize
new28 KB
new28.1 KB
Passed on all environments.
[ View ]

This swaps out ui.theme.css with Seven jQuery UI Theme #1 through ui.seven.css. The attached images.zip should be extracted to themes/seven/images.

Jacine’s picture

Gonna take a crack at this :)

cburschka’s picture

+++ themes/seven/ui.seven.css 1 Jan 1970 00:00:00 -0000
@@ -0,0 +1,406 @@
+* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.

These file names only make sense when they're actually included. Otherwise, they should probably be turned into URLs.

(Though for the GPL, maybe it can be changed to refer to the file bundled with Drupal already.)

Jacine’s picture

StatusFileSize
new18.3 KB
Passed on all environments.
[ View ]
new21.48 KB

Here's my attempt at this. Images are attached and need to be unzipped to themes/seven/images. IE testing hasn't been done yet. Not sure if I have time, but posting anyway.

Working Demo: http://bit.ly/7ftjcX

Re: #3, not about the GPL stuff so it's gone right now. Let me know what I should add, if anything.

aspilicious’s picture

StatusFileSize
new3.47 KB
new5.41 KB

I IE 8 tested it a bit...

2 things that didn't look "nice enough"

1) the slider buttons look weird in IE they are to big or they have to go down a little (my opinion)
2) some text is interfering with each other

see attached pictures

Jacine’s picture

Issue tags:+Needs design review

Hey aspilicious, yay, thank you for taking a look ;)

Re pic: #1 - That looks like a Seven bug to me. That is a regular fieldset with a description, and I'm pretty sure nothing in this patch is touching it. Definitely a problem, but should be a separate issue.

Re pic: #2 - I agree the sliders don't look nice enough. I'm not digging them in Firefox or Safari either. Maybe we can get one of the designers to weigh in on that. Tagging this "Needs design review."

Jacine’s picture

StatusFileSize
new184.07 KB
new18.16 KB
Passed on all environments.
[ View ]

Improved the slider, and is IE-testing complete.

See it here or the attached screenshot: http://bit.ly/7ftjcX

aspilicious’s picture

Slider looks good now...
Good job!

Jacine’s picture

StatusFileSize
new18.12 KB
Passed on all environments.
[ View ]

Fixed conflicts with the overlay.

RobLoach’s picture

StatusFileSize
new42.5 KB

This looks REEAALLY good! Can I set this to RTBC?

Jacine’s picture

Thank you! I think it's ready, but I also wrote it so I guess I can't say :P

jensimmons’s picture

subscribe

RobLoach’s picture

Status:Needs review» Needs work

Whoops, nope, I can't RTBC it....

+    $css['misc/ui/ui.theme.css']['weight'] = '9';
+  }
+}
\ No newline at end of file
Index: themes/seven/ui.seven.css
===================================================================

It needs a newline at the end of the file :-) . I'll be able to reroll it tomorrow.

yoroy’s picture

Reviewed this with Jacine in IRC, summary:

This is an important opportunity for promoting consistency in admin UI. To do so, follow Sevens lead:

- Can't have the rounded corners for the accordions and dialogs, nor the messages. Rounded corners are for buttons and links (not content blocks) with only the progress-bar as the exeption for just looking nicer with round corners.
- Try one of the accent greys for the current day in the calendar, this yellow is too loud.

… subscribe

Jacine’s picture

StatusFileSize
new16.36 KB
Passed on all environments.
[ View ]

New patch:

- Corner radius functionality is now disabled in Seven, except for Dialog and Slider buttons.
- Calendar highlight state has been changed to gray.
- New lines have been added to the end of the files.

:)

Jacine’s picture

StatusFileSize
new128.64 KB
new16.17 KB
Passed on all environments.
[ View ]

Ok, one more change per @yoroy. Removed the .ui-widget-shadow functionality that was being applied to the modal.

Jacine’s picture

Status:Needs work» Needs review
Jacine’s picture

StatusFileSize
new16.17 KB
Invalid PHP syntax in template.php.
[ View ]

Removed the string from weight in seven_css_alter().

Status:Needs review» Needs work

The last submitted patch, seven-ui-6.patch, failed testing.

Jacine’s picture

Status:Needs work» Needs review
StatusFileSize
new16.22 KB
Passed on all environments.
[ View ]
Dries’s picture

- The icons in the highlight/error section seems to be misaligned. They seems to be floating to the top.

- The filenames of the icons seem to mix dashes and underscores. Is that an artifact, or something we can fix (to dashes)?

Jacine’s picture

StatusFileSize
new21.07 KB
new16.18 KB
Unable to apply patch seven-ui-8.patch
[ View ]

The icons don't get any margins or positioning by default in jQuery UI by design. This is actually a tough problem to solve here. In the demo I setup (clone of the ThemeRoller demo), the dialog link and the icons shown in the highlight/error samples have CSS applied that handles the positioning and margins of the icons that are not part of this commit. I can't target the icons directly because they are used all over the place. I also can't target .ui-state-highlight .ui-icon without potentially screwing up the icons in the accordion or any other widget that decides it wants icons & gets a highlighted state in the future. The best thing I can think do here is target icons in <p> tags, but it's not foolproof either.

This is "fixed" in the latest patch, and I changed the underscores to dashes in the icon file names. It's also updated on the demo site so you can see it there. :)

In general, it's tough to set reasonable defaults without knowing how/where this stuff is going to be used within Drupal. Having theme functions (or Drupalized widgets) for this stuff, and also substituting classes in existing theme functions for the jQuery UI classes (like changing <div class="messages error"> to <div class="messages ui-state-error">) would go a long way towards achieving some consistency and would greatly improve the TX! I hope to spend some time on this stuff over the weekend.

Status:Needs review» Needs work

The last submitted patch, seven-ui-8.patch, failed testing.

Jacine’s picture

Status:Needs work» Needs review
StatusFileSize
new16.27 KB
Passed on all environments.
[ View ]

Oops sorry, did the patch from the wrong directory :(

ChrisBryant’s picture

+10! This looks lovely, great work everyone! Will be nice to see this committed in D7.

mrfelton’s picture

Where are jQuery UI components used heavily? Where should I look to test all of this?

EDIT: If http://d7.jacine.net/static/ui is still a valid testing ground, I give this a +1. Looks great. Good work.

casey’s picture

mrfelton’s picture

Status:Needs review» Needs work
StatusFileSize
new60.75 KB

ok, well with the filter tips modal patch applied, my popup for the filter tips looks like this (see attached). I'm using the overlay and I believe this is due to line 377 of ui.seven.css where the background of the title bar is set to transparent. Why is this done? Surely the dialog titlebar should still have a background colour when displayed on top of the overlay...

Jacine’s picture

Status:Needs work» Needs review

@mrfelton - Both overlay windows, the child (filter tips) and the parent (the overlay itself) use the same class. The overlay dialog title needs a background: transparent for the overlay because this file loads after the overlay's CSS file, and overrides the styles set by it.

Regarding #87994: Quit clobbering people's work when they click the filter tips link, it hasn't been committed so I don't think it's a valid reason for this patch to need work. In addition, the overlay module itself hasn't supplied any CSS for these dialogs yet. If you look at the module, overlay-parent.css exists, but overlay-child.css does not. That is where most of the styling will need to happen. Until that is addressed in core, any dialog inside the overlay will inherit the styles of the main window. After it's addressed, we may or may not need need to style it here, but attempting to fix it here will only cause problems for person writing overlay-child.css if they want to style it in a different way. Hopefully that makes sense.

Jacine’s picture

StatusFileSize
new16.58 KB
Passed on all environments.
[ View ]

A change in Seven prompted small change here. Added list-style: none; for .ui-tabs <li>'s. Demo site is updated too.

I think this is ready... Anyone else?

yoroy’s picture

Status:Needs review» Reviewed & tested by the community

Looking good. We need this because:

- Will make it quicker/easier for developers to stay consistent with default Seven admin theme.
- Less styling to undo for admin themers.
- Wich is a UX win for any user that gets to visit contrib module settings pages.

mcrittenden’s picture

Sub.

Status:Reviewed & tested by the community» Needs review

Re-test of seven-ui-9.patch from comment #24 was requested by huntny.

JacobSingh’s picture

Status:Needs review» Reviewed & tested by the community

I like it.

Bojhan’s picture

Ok, confirming this looks good now. Lets get this in!

Jacine’s picture

Just to make it easier:

  1. http://drupal.org/files/issues/seven-ui-icons-8.zip needs to be unzipped into themes/seven/images
  2. Latest patch is here: http://drupal.org/files/issues/seven-ui-10.patch, tested in comment #30
RobLoach’s picture

StatusFileSize
new16.81 KB
PASSED: [[SimpleTest]]: [MySQL] 17,533 pass(es).
[ View ]

Having a quick re-look at the patch, it looks like we are switching the weight of ui.theme.css. We could probably fix that in system_library() instead and save all other themes from doing the same. JS_THEME - 10 will put it before all other theme's CSS, but after all the jQuery UI base CSS stuff. Means less line of code in the patch, which is good.

casey’s picture

Is patch up to date (jquery ui 1.8)?

Jacine’s picture

Status:Reviewed & tested by the community» Needs review

Probably not. Marking needs review so we can make sure.

RobLoach’s picture

Status:Needs review» Needs work

I believe the CSS file is named "misc/ui/jquery.ui.theme.css".

Jacine’s picture

Status:Needs work» Needs review
StatusFileSize
new17.18 KB
PASSED: [[SimpleTest]]: [MySQL] 18,967 pass(es).
[ View ]

Here's a reroll.

Images are here: http://drupal.org/files/issues/seven-ui-icons-8.zip

RobLoach’s picture

Status:Needs review» Reviewed & tested by the community
StatusFileSize
new16.99 KB
PASSED: [[SimpleTest]]: [MySQL] 19,685 pass(es).
[ View ]

There was one line with ending white space. Fixed in this patch. Nicely done, Jacine! This rules!

Also note that #575298: Provide non-PHP way to reliably override CSS would help because it would allow use to use the following in seven.info instead:

stylesheet_overrides[] = jquery.ui.theme.css
realityloop’s picture

#42: 614494-42.patch queued for re-testing.

David_Rothstein’s picture

Status:Reviewed & tested by the community» Needs review
StatusFileSize
new51.11 KB
new42.6 KB

This patch seems to make big changes to the overlay opacity?... see attached screenshots.

alanburke’s picture

@#44
Those screenshots have two different themes.
One with Garland, one with Seven

David_Rothstein’s picture

No, they are both Garland.

David_Rothstein’s picture

Oh... or did you mean within the same screenshot there are two themes? :) If so, yes, that's the standard setup there... but the problem is that the patch seems to remove the opacity in that situation.

alanburke’s picture

+++ modules/system/system.module 29 Mar 2010 05:43:45 -0000
@@ -1137,7 +1137,7 @@ function system_library() {
     'css' => array(
       'misc/ui/jquery.ui.core.css' => array(),
-      'misc/ui/jquery.ui.theme.css' => array(),
+      'misc/ui/jquery.ui.theme.css' => array('weight' => JS_THEME - 10),
     ),
   );

This is the reason the transparency changes.
With this change, the jquery.ui.theme.css file is actually moved down the css stack.
And a rule from overlay-parent.css is overridden.

From Firebug [the lines which indicate a rule is overridden are missing when you copy paste...]

.ui-widget-overlay {
background:url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;
opacity:0.3;
}
jquery...?l2d2jc (line 248)
.ui-widget-overlay {
background:url("images/background.png") repeat scroll 0 0 transparent;
filter:none;
opacity:1;
}

Powered by Dreditor.

alanburke’s picture

StatusFileSize
new15.99 KB
PASSED: [[SimpleTest]]: [MySQL] 20,343 pass(es).
[ View ]

Here's a patch without that CSS weight change.

alanburke’s picture

My apologies.
I've read through the issue closer.
The patch at #30 is better.

alanburke’s picture

StatusFileSize
new16.58 KB
PASSED: [[SimpleTest]]: [MySQL] 20,345 pass(es).
[ View ]

#30 had some trailing whitespace.

aspilicious’s picture

Status:Needs review» Needs work

Can some make the css standard compliant.

- Order the elements alphabeticly.
- with border you have to do it this way:
-moz-border
-webkit-border
border

alanburke’s picture

Status:Needs work» Needs review

Do we enforce our styleguides on css files from external projects?
This CSS file came from the jQuery UI themeroller, as opposed to being handrolled.

aspilicious’s picture

No we don't, srry for that.

Melissamcewen’s picture

I have reviewed this patch. Looks nice, tests great, thanks for this!

casey’s picture

Status:Needs review» Needs work

Filenames changed: it's jquery.ui.theme.css now.

Big plus from me to get this in.

casey’s picture

Status:Needs work» Needs review
StatusFileSize
new16.25 KB
PASSED: [[SimpleTest]]: [MySQL] 20,931 pass(es).
[ View ]

- overlay opacity mentioned in #44 is no longer overridden as it doesn't use jQuery UI dialog any more.
- even though the stylesheet is provided by a theme we shouldn't override weight at all; it should stay on the position where it was added as part of the jquery ui library.

This issue was RTBC in #42. Problems identified afterwards should be resolved. So RTBC again?

Note that images attached to #22 should be included too.

moshe weitzman’s picture

Status:Needs review» Reviewed & tested by the community

everyone and their mother has +1 this already.

yoroy’s picture

My 3 year old daughter also thinks it would be great to get this in now so that module devs get good defaults to build on.

Jacine’s picture

LOL! (Sorry, I couldn't resist.)

;)

Dries’s picture

Status:Reviewed & tested by the community» Fixed

I totally think our mothers should have voting power! :-)

Committed to CVS HEAD.

webchick’s picture

Oh, crap! I totally thought I had committed this months ago. Sorry!

Jacine’s picture

Status:Fixed» Reviewed & tested by the community

YAY!!! :D

We need to commit the images though:

http://drupal.org/files/issues/seven-ui-icons-8.zip needs to be unzipped into themes/seven/images

webchick’s picture

Status:Reviewed & tested by the community» Fixed

Committed those to HEAD. Thanks.

Jacine’s picture

Sweet! Thank you ;)

Status:Fixed» Closed (fixed)

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

edward_or’s picture

StatusFileSize
new2.27 KB

For those I supplied this url to without fully understanding the issue queue conventions the conversation is continued at #896728: Tweaks to jQuery UI Seven theme.