Give Seven a nice looking default jQuery UI theme

Gonna take a crack at this :)

+++ 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.)

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.

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

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."

Improved the slider, and is IE-testing complete.

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

Slider looks good now...
Good job!

Fixed conflicts with the overlay.

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

subscribe

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

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.

:)

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

Removed the string from weight in seven_css_alter().

Reroll because of #672130: Seven's vertical-tabs.css is everywhere.

- 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)?

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.

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

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

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.

@mrfelton: #87994: Quit clobbering people's work when they click the filter tips link

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...

@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.

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?

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.

Sub.

I like it.

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

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

Is patch up to date (jquery ui 1.8)?

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

Here's a reroll.

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

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

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

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

No, they are both Garland.

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.

+++ 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.

Here's a patch without that CSS weight change.

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

#30 had some trailing whitespace.

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

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.

No we don't, srry for that.

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

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

Big plus from me to get this in.

- 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.

everyone and their mother has +1 this already.

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.

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

;)

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

Committed to CVS HEAD.

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

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

Committed those to HEAD. Thanks.

Sweet! Thank you ;)

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.