Redesign the menu (plans for version 3.0) about jquery-ui-month-picker

[KidSysco]

I think it is looking really sharp! Keep it up! I don't see how this would effect any existing users too terribly. Although I am sure they appreciate your thoughts in this area.

Keep moving forward, we will merge when you are ready. Let me know if you need anything.

[benjamin-albert]

I've managed to hack jQuery UI button to have a transparent background, take a look at the fiddle.

I've also added test/themes.html which allows to test the plugin in different jQuery UI themes and CSS (I think we should make a demo out of this).

I used themes.html to test the button hack, looks like it's working find in all of the stock themes.

Take a look at what I've did so far and tell me what you think.

[KidSysco]

Wow that is really cool, Swanky Purse, lol, that one is crazy. But I always liked smoothness the most. I do not understand what transparent buttons have to do with it. Interesting though, I would like to know more.

Also, do you think that moving forward and backwards through the years should jump in 12 years increments rather than 5?

If so, do you want to implement that here too?

[benjamin-albert]

I was thinking about offering an option to set the number of years to jump that defaults to 12.

If we implement this it would make sense to rename the prev5Years and next5Years properties on the i18n object.

I guess we can add this to the potentially breaking changes list of 3.0

[benjamin-albert]

jQuery UI button doesn't have any documented way to make it have a transparent background when you are not hovering it.

The way I achieved this is by removing the ui-state-default class from the button and applying a transparent 1px border that prevents the button from moving around you hover the button and it gets a border.

I also had to add the ui-state-hover class after you clicked the buttons because for some reason it get's removed when you click the button.

I wanted to make sure that the CSS I applied doesn't mess up other themes.

Now that I think about it, it makes more sense to test the plugin in different versions of jQuery UI and not different themes in the same version.

I still think this would be really cool as a demo.

[KidSysco]

I can agree to this. Good ideas in minimizing impacts!

On Mon, Dec 7, 2015 at 8:34 AM, Benjamin Albert [email protected]
wrote:

I was thinking about offering an option to set the number of years to jump
that defaults to 12.

If we implement this it would make sense to rename the prev5Years and
next5Years properties on the i18n object.

I guess we can add this to the potentially breaking changes list of 3.0

—
Reply to this email directly or view it on GitHub
#31 (comment)
.

[benjamin-albert]

BTW I originally thought to look into Datepicker's source code and do something similar, this way I don't have to hack the button and test it in different configurations.

Unfortunately all of those styles are limited to child elements of the ui-datepicker class and applying this class to the Month picker menu messes it up.

However the bright side of this is that even if I could imitate Datepicker's buttons it would require a lot more code even after hacking the button (because they don't use jQuery UI button).

[benjamin-albert]

I turned the year title into a transparent button that fades in the label Jump Years when you mouse over it.

I also made moving forward and backwards through the years jump 12 years rather than 5 (I'll discuss this in depth when I finish the prototype).

Please take a look at the fiddle and tell me what you think.

@KidSysco I need your help to make sure the unit test in the 3.0_prototype branch pass in Internet Explorer (including 8).

The tests should NOT fail in IE, if they are failing there's a problem we need to fix.

The next step is to make the jump years button show the months in the year the user was before they clicked jump years.

The button will have the label 'Back to 2015' or something like that.

[KidSysco]

Very nice work! The extra interactivity there exposes the jump years
function much better. This is good UI.

A back to 2015 button would be perfect!

This is a really nice vision.

I will test it later on IE and let you know.

I noticed that the next/previous buttons, when in jump years mode, still
say 'Jump Forward/Back 5 years' in the fiddle.

On Sun, Dec 20, 2015 at 12:28 PM, Benjamin Albert [email protected]
wrote:

I turned the year title into a transparent button that fades in the label
Jump Years when you mouse over it.

I also made moving forward and backwards through the years jump 12 years
rather than 5 (I'll discuss this in depth when I finish the prototype).

Please take a look at the fiddle
http://jsfiddle.net/benjamin_albert/vjbf4nn1/ and tell me what you
think.

@KidSysco https://github.com/KidSysco I need your help to make sure the
unit test in the 3.0_prototype branch
https://github.com/benjamin-albert/jquery-ui-month-picker/tree/3.0_prototype
pass in Internet Explorer (including 8).

The tests should NOT fail in IE, if they are failing there's a problem we
need to fix.

The next step is to make the jump years button show the months in the year
the user was before they clicked jump years.

The button will have the label 'Back to 2015' or something like that.

—
Reply to this email directly or view it on GitHub
#31 (comment)
.

[KidSysco]

I just got done testing.

All tests pass in your 3.0_Prototype branch.

This includes all version of IE 8 - 11 as well as Edge.

Well done!

On Sun, Dec 20, 2015 at 12:28 PM, Benjamin Albert [email protected]
wrote:

I turned the year title into a transparent button that fades in the label
Jump Years when you mouse over it.

I also made moving forward and backwards through the years jump 12 years
rather than 5 (I'll discuss this in depth when I finish the prototype).

Please take a look at the fiddle
http://jsfiddle.net/benjamin_albert/vjbf4nn1/ and tell me what you
think.

@KidSysco https://github.com/KidSysco I need your help to make sure the
unit test in the 3.0_prototype branch
https://github.com/benjamin-albert/jquery-ui-month-picker/tree/3.0_prototype
pass in Internet Explorer (including 8).

The tests should NOT fail in IE, if they are failing there's a problem we
need to fix.

The next step is to make the jump years button show the months in the year
the user was before they clicked jump years.

The button will have the label 'Back to 2015' or something like that.

—
Reply to this email directly or view it on GitHub
#31 (comment)
.

[benjamin-albert]

I'm sorry I couldn't respond sooner (working overtime at work).

The next/previous buttons title (AKA tooltip) is one of the many places wI'll need to change.

Here are a few other places we need to change:

1. The i18n property names (a breaking API change).
2. The projects README.
3. The demo fiddle.

Like I said in my previous comment, I'll discuss this in depth when I finish the prototype.

As a reminder I'm currently building a prototype (this is why you might experiencing bugs and the code is not the best).

After we agree on the final design (and we've made sure my jQuery UI hakes work in different configurations) I will TDD the real implementation.

[benjamin-albert]

The redesigned prototype is complete (including the Back to 2015) button.

Take a look at the fiddle and tell me what you think.

Assuming we both agree on the finial design the next steps are:

1. Decide if we should offer the number of years to jump as an option which defaults to 12.
2. Decide on an appropriate i18n property names.
3. Update the introduction text in the projects README.md and fiddle.
4. Create an 3.0-migration.md file which explains the CSS and i18n changes.
5. Decide exactly what configurations we are going to support and test my jQuery UI button hacks (should we include Bootstrap in this?).

I'll probably ask you for help with IE and other configuration testing.

After we've made sure my hacks work (without jQuery UI version sniffing) I'll discuss the real 3.0 implementation details (I have some ideas which might make Bootstrap support really easy).

[benjamin-albert]

It looks like the first beta is going fine for new.

Turns out the prototype was very close to production material and implementing the first beta mainly involved some refactoring and making the menu use em instead of px units.

If any problems show up with the beta we can open another issue for them, I am closing this now.