Theme: Add new theme called "Base" #248

rxaviers · 2015-01-08T18:53:52Z

Keep "Smoothness" and "UI Lightness" in the gallery, while the new
theme will be available as "Base" and it will be the default.

Ref jquery/jquery-ui#1384

TODO:

Remove a temporary change below before landing.

rxaviers · 2015-01-08T18:54:27Z

config.json

+			"dependsOn": "jQuery1.6+",
+			"label": "Experimental"
+		},
+		{


Note to self. This is a temporary change. Remove before landing.

rxaviers · 2015-01-08T18:58:11Z

Follow these instructions to run the server locally using "Base" by default:

Run grunt prepare. It will fail, because it won't find version 1a10f10cb0a39281e91eec5a53b5bb874497c629.
Run cd tmp/jquery-ui && git checkout --detach 20a636844961a1fb2de7a892ab28890091822e6a && git pull origin refs/pull/1384/head:pr/1384 && cd ../../.
Run grunt prepare again. I must pass now.
Run node server.js --console and browse it.

rxaviers · 2015-01-08T19:01:54Z

Themeroller displaying the new theme called "Base".

rxaviers · 2015-01-08T19:03:01Z

jQuery UI 1.9.2, 1.10.4, 1.11.2, 1.12.0-pre packages with the new theme called "Base" available for download:

https://gist.github.com/rxaviers/1f77d0a19806df75ff76

kborchers · 2015-01-08T19:41:21Z

Didn't I see a better mockup somewhere with the rounded corners removed and a better font? This feels very similar to smoothness with just a slight color and maybe a font change when I look at it.

jzaefferer · 2015-01-08T20:28:25Z

We changed the font-size in general, independent of this new theme. That doesn't seem to be included here, though. Rounded corners are still in the new theme, its just smaller radii(?). The smaller font-size might make the rounded corners more obvious.

One thing that looks very wrong on the screenshot is the overlay and shadow element demo. The overlay doesn't cover the background, the shadow also disappears in the middle.

rxaviers · 2015-01-09T12:58:57Z

We changed the font-size in general, independent of this new theme.

Please, can you point me to this change?

rxaviers · 2015-01-09T13:10:19Z

One thing that looks very wrong on the screenshot is the overlay and shadow element demo. The overlay doesn't cover the background, the shadow also disappears in the middle.

I'm assuming changes are going to be made on jquery/jquery-ui#1384, so I can later update this PR accordingly.

jzaefferer · 2015-01-09T14:03:24Z

Please, can you point me to this change?

jquery/jquery-ui#1374

kborchers · 2015-01-09T21:54:08Z

Rounded corners are still in the new theme, its just smaller radii(?). The smaller font-size might make the rounded corners more obvious.

Let me rephrase my comment. Can we get rid of the rounded corners in this new base theme to make it feel more current?

jzaefferer · 2015-01-09T22:58:51Z

You can check out the actual theme and discuss it at the original PR: jquery/jquery-ui#1374

kborchers · 2015-01-12T16:15:32Z

You can check out the actual theme and discuss it at the original PR: jquery/jquery-ui#1374

I thought this was the Theme PR. The one you referenced is just the font size change so this would be the appropriate place to discuss the removal of the rounded corners. It doesn't seem like too much to ask for since most themes for current frameworks have removed rounded corners. They make it feel outdated no matter what you do to color or font.

kborchers · 2015-01-12T16:17:56Z

Maybe you meant jquery/jquery-ui#1384 which I see now. I will comment there.

jzaefferer · 2015-01-12T16:28:35Z

Yes, sorry, that's the one I meant.

rxaviers · 2015-01-21T11:18:56Z

This PR is now (temporarily) pointing to d2eb0c93cfc5fce158ac2af6ca7b0f50760d9b90, i.e., @jzaefferer's jquery/jquery-ui#1420.

I have it deployed locally. Please, @jzaefferer just let me know if I can provide a screenshot of a particular place or perform any test and post here.

rxaviers · 2015-01-21T12:03:25Z

Updated jQuery UI 1.9.2, 1.10.4, 1.11.2, 1.12.0-pre packages using the new "Base" theme (based on d2eb0c93cfc5fce158ac2af6ca7b0f50760d9b90). They're available for download on https://gist.github.com/rxaviers/edd9cb1ecdedb3e65b10.

Below is how the tooltip dropshadow is presented to me on 1.12.0-pre package and on 1.11.2.

1.12.0-pre	1.11.2

The Overlay shadow also changed. It looks better on 1.12.0-pre (although, the white stripe underneath it is still present). Using the Base theme on 1.11.2 or older packages is still problematic.

1.12.0-pre	1.11.2

rxaviers · 2015-01-21T12:04:55Z

I've noticed a problem that happens since my first update. The initial Icons on 1.12-pre package are all duplicate / the same. In contrast, this doesn't happen on 1.11.2 (or older) using the Base theme.

1.12.0-pre	1.11.2

rxaviers · 2015-01-22T18:04:09Z

Jörn and I had a chat. Below is the outcome:

Create a new template/zip/index-1-12.html with several style and markup fixes: (a) drop body font size override, (b) fix overlay markup, (c) fix caret icons (s/ui-icon-carat/ui-icon-caret/g), (d) fix menu markup (add div inside li's).
Do not use an image when using the flat texture.
Update "Base" theme variables according to @jzaefferer's tooltip shadow update Theme update jquery-ui#1436.
The white stripe of the overlay background was a local thing and must be ignored - it should work just fine on the server (it'is due to bad image background generation).

Double check:

On 1.9 and 1.10, accordion is not working properly in index.html demo page.

rxaviers · 2015-01-22T20:12:20Z

Updated jQuery UI 1.9.2, 1.10.4, 1.11.2, 1.12.0-pre packages using the new "Base" theme (based on 4371d59abd4a24275e0aaa4cae49a2fed591c9ae). They're available for download on https://gist.github.com/rxaviers/5293bc717f283f5eaad7

Fixes #243

Keep "Smoothness" and "UI Lightness" in the gallery, while the new theme will be available as "Base" and it will be the default. Ref jquery/jquery-ui#1384

Temporary update jquery/jquery-ui#1420 @ d2eb0c93cfc5fce158ac2af6ca7b0f50760d9b90 Do not use an image when using the flat texture. Updated index.html for the 1.12.0 package.

@ 4371d59abd4a24275e0aaa4cae49a2fed591c9ae

rxaviers · 2015-01-23T23:13:05Z

On 1.9 and 1.10, accordion is not working properly in index.html demo page.

Fixed this regression with dc11c77.

jzaefferer · 2015-01-23T23:16:58Z

So with Jasper's last update and this fix, is everything addressed and we can merge both PRs to master? Or are we still missing something?

rxaviers · 2015-01-23T23:24:48Z

It'd be good if @jaspermdegroot could make a final review (packages at https://gist.github.com/rxaviers/5293bc717f283f5eaad7). At least, browsing index.html and visualizing if the widgets with new Base theme are correct.

rxaviers · 2015-01-23T23:31:31Z

To Whom It May Concern,

Based on the "we shouldn't bring back those comments/variables" decision (jquery/jquery-ui#1436), TR is going to have dead controls for such variables until the baseline of the available releases for download is at least 1.12.0, when those controls could be removed from TR.

jzaefferer · 2015-01-26T15:22:07Z

TR is going to have dead controls for such variables until the baseline of the available releases for download is at least 1.12.0, when those controls could be removed from TR.

I'm okay with that. Specifically the shadow controls have probably seen very little use anyway.

Are we ready to land this? I suggest keeping the extra changes until we merge this and the UI theme PR to master, test on stage, then remove it until we release 1.12.

rxaviers · 2015-01-26T17:25:53Z

Are we ready to land this?

Yeap. I still suggest that @jaspermdegroot make a final review on all packages at https://gist.github.com/rxaviers/5293bc717f283f5eaad7.

I suggest keeping the extra changes until we merge this and the UI theme PR to master, test on stage, then remove it until we release 1.12.

Ok.

jaspermdegroot · 2015-01-26T18:56:36Z

I suppose the reason that all the changes in the default theme (except changes in ui-widget-shadow) have been applied to previous versions of UI is that the ThemeRoller isn't version aware? Feels a bit wrong though to make changes in something that already has been released. The default theme in the ThemeRoller will be different from the one that you can download via the "Quick Downloads" links at the top of the Download Builder page.

1.12: The color for ui-widget-shadow should be #666666 instead of #dddddd. I changed that in my last commit. See jquery/jquery-ui@4371d59

Other than that it looks good!

jzaefferer · 2015-01-26T19:09:16Z

I suppose the reason that all the changes in the default theme (except changes in ui-widget-shadow) have been applied to previous versions of UI is that the ThemeRoller isn't version aware

That's wrong. Based on the discussion we had around this, it sounded like TR would use the theme.css file from the respective release, not just the newest. Was that wrong?

rxaviers · 2015-01-26T21:54:22Z

I'm confused. I think @jaspermdegroot and @jzaefferer are talking about two different things. Correct me if I'm wrong.

I think @jaspermdegroot is talking about the fact the Custom Downloads for 1.12.0 and all the previous releases (1.11.2, 1.10.4 and 1.9.2) will include the Base theme by default from now on as decided prior to the creation of this PR. Although, the Quick Downloads will include Base for 1.12.0, but UI Lightness for the previous ones (given the fact those are existing old packages). I think Jasper has a valid point. But, the decision is up to you all.

@jzaefferer is talking about either of these two things: (a) the custom downloads should use the theme.css file from the respective release, which is true (please, just let me know if it's not); or (b) the TR (the page, the web interface) should use the theme.css file from the respective release, which doesn't happen (TR, the interface, is not release-aware and it uses the latest released jQuery UI's theme.css).

jzaefferer · 2015-01-27T12:18:04Z

Alright, I misunderstood that. Let's go ahead and merge this and the UI PR.

Changes tooltip to use the ui-widget-shadow class, which now applies the box-shadow style. .ui-widget-shadow was created when box-shadow wasn't available. By now, there's no point in faking a custom shadow anymore. This removes the only non-structural CSS from a widget-specific file. Updates demos to use the same font-family, removes unused images. Will be available as the new default theme on ThemeRoller called "Base", while "UI Smoothness" and "UI Lightness" will still be available in the gallery. Fixes #10617 Fixes #10880 Closes gh-1436 Ref jquery/download.jqueryui.com#248

jzaefferer · 2015-01-27T12:34:06Z

Upstream change landed in jquery/jquery-ui@79c4fa1

jzaefferer · 2015-01-27T12:55:15Z

Still need to integrate this into jqueryui.com to actually be able to test on stage.

These are still needed. Ref gh-1436 Ref jquery/download.jqueryui.com#248

rxaviers reviewed Jan 8, 2015
View reviewed changes

rxaviers mentioned this pull request Jan 8, 2015

Theme jquery/jquery-ui#1384

Closed

rxaviers mentioned this pull request Jan 21, 2015

Tooltip shadow jquery/jquery-ui#1420

Closed

rxaviers force-pushed the new-theme-called-base branch from 2ba432c to f095a1a Compare January 22, 2015 18:04

rxaviers mentioned this pull request Jan 22, 2015

Update ThemeRoller UI to reflect changes in default theme #249

Open

rxaviers force-pushed the new-theme-called-base branch from f095a1a to 4e9efe9 Compare January 22, 2015 20:13

rxaviers added 5 commits January 23, 2015 18:38

jQuery UI: Handle manifest info from JS comments

18be98c

Fixes #243

fixup! jQuery UI: Handle manifest info from JS comments

dc11c77

Theme: Add new theme called "Base"

8b8ee47

Keep "Smoothness" and "UI Lightness" in the gallery, while the new theme will be available as "Base" and it will be the default. Ref jquery/jquery-ui#1384

Theme: Add new theme called "Base"

256c3ad

Temporary update jquery/jquery-ui#1420 @ d2eb0c93cfc5fce158ac2af6ca7b0f50760d9b90 Do not use an image when using the flat texture. Updated index.html for the 1.12.0 package.

fixup! Theme: Add new theme called "Base"

8ac9a2d

@ 4371d59abd4a24275e0aaa4cae49a2fed591c9ae

rxaviers force-pushed the new-theme-called-base branch from 4e9efe9 to 8ac9a2d Compare January 23, 2015 23:11

rxaviers closed this in e617430 Jan 27, 2015

jzaefferer mentioned this pull request Jan 27, 2015

ThemeRoller: Don't generate images for solid color backgrounds #29

Closed

rxaviers deleted the new-theme-called-base branch January 27, 2015 16:59

rxaviers mentioned this pull request Jan 27, 2015

New ThemeRoller demos #251

Closed

1 task

jzaefferer added a commit to jquery/jquery-ui that referenced this pull request Feb 12, 2015

Theme: Restore placeholders for overlay background image

d58051b

These are still needed. Ref gh-1436 Ref jquery/download.jqueryui.com#248

rxaviers mentioned this pull request Jul 14, 2015

Packer: Support building 1.12.0 package #256

Closed

9 tasks

rxaviers mentioned this pull request Oct 31, 2015

Revert to 1.11 default theme #283

Closed

Theme: Add new theme called "Base" #248

Theme: Add new theme called "Base" #248

Uh oh!

Conversation

rxaviers commented Jan 8, 2015

Uh oh!

rxaviers Jan 8, 2015

Choose a reason for hiding this comment

Uh oh!

rxaviers commented Jan 8, 2015

Uh oh!

rxaviers commented Jan 8, 2015

Uh oh!

rxaviers commented Jan 8, 2015

Uh oh!

kborchers commented Jan 8, 2015

Uh oh!

jzaefferer commented Jan 8, 2015

Uh oh!

rxaviers commented Jan 9, 2015

Uh oh!

rxaviers commented Jan 9, 2015

Uh oh!

jzaefferer commented Jan 9, 2015

Uh oh!

kborchers commented Jan 9, 2015

Uh oh!

jzaefferer commented Jan 9, 2015

Uh oh!

kborchers commented Jan 12, 2015

Uh oh!

kborchers commented Jan 12, 2015

Uh oh!

jzaefferer commented Jan 12, 2015

Uh oh!

rxaviers commented Jan 21, 2015

Uh oh!

rxaviers commented Jan 21, 2015

Uh oh!

rxaviers commented Jan 21, 2015

Uh oh!

rxaviers commented Jan 22, 2015

Uh oh!

rxaviers commented Jan 22, 2015

Uh oh!

rxaviers commented Jan 23, 2015

Uh oh!

jzaefferer commented Jan 23, 2015

Uh oh!

rxaviers commented Jan 23, 2015

Uh oh!

rxaviers commented Jan 23, 2015

Uh oh!

jzaefferer commented Jan 26, 2015

Uh oh!

rxaviers commented Jan 26, 2015

Uh oh!

jaspermdegroot commented Jan 26, 2015

Uh oh!

jzaefferer commented Jan 26, 2015

Uh oh!

rxaviers commented Jan 26, 2015

Uh oh!

jzaefferer commented Jan 27, 2015

Uh oh!

jzaefferer commented Jan 27, 2015

Uh oh!

jzaefferer commented Jan 27, 2015

Uh oh!

Uh oh!