?
avatar dgt41
dgt41
13 Jun 2016

Calendar's outfit is outdated

Before I make a PR with the code (already tested) I would like some guidelines to what's ok and what's not. So here is my approach:

  • Instead of two scripts we end up with one (other cals like Jalali needs fixing)
  • No css file (using the bootstrap classes)
  • Didn't touch the internals for date calculation etc
  • No inline scripts, everything is done with data-attributes
  • Unification of form field calendar and JHtml calendar
  • Drop the drop down menus for months and years (did you knew it existed such thing?)
  • Fix the accessibility (now we can select today with space, move to the wanted date with cursor key and press enter)
  • Option for not having today button
  • Option for selection of month/year in one line (the default is each one will have its own line in the table header)
  • Remove the option to drag the calendar in the viewport (the position is relative to the button)
  • Should be 100% B/C

Preview:
screen shot 2016-06-13 at 10 57 32

Comments/ suggestions will be highly appreciated!

avatar dgt41 dgt41 - open - 13 Jun 2016
avatar brianteeman
brianteeman - comment - 13 Jun 2016

Sounds good to me especially the year picker. My understanding is that the
main concern is the support for non Gregorian calendars

avatar dgt41
dgt41 - comment - 13 Jun 2016

I am willing to patch all those calendars as well, as long as I get the uncompressed source files

avatar dgt41
dgt41 - comment - 13 Jun 2016

@Bakual can you provide the sources of the non Gregorian calendars?

avatar dgt41 dgt41 - change - 13 Jun 2016
The description was changed
avatar JoomliC
JoomliC - comment - 13 Jun 2016

Before I make a PR with the code (already tested) I would like some guidelines to what's ok and what's not. So here is my approach:

Can't wait to test! ?

Instead of two scripts we end up with one (other cals like Jalali needs fixing)

Do you mean you will integrate non-gregorian calculation directly in main script (and not as currently in language package) ?
If yes, +1 for this! ;-)

No css file (using the bootstrap classes)

This is the only thing i would say no, as many site template does not load/use bootstrap styling.
There are already too much site templates no managing well the display of the field (input append button...) so i think we should keep a css file specifically for the calendar picker html rendering for B/C

Didn't touch the internals for date calculation etc

This works good, so agree no reason to touch this part

No inline scripts, everything is done with data-attributes

+1

Unification of form field calendar and JHtml calendar

Will it be possible to override html rendering of the calendar (JLayout) ?

Drop the drop down menus for months and years (did you knew it existed such thing?)
+1
And did you remove too the "first day of the week" on day click ?

Fix the accessibility (now we can select today with space, move to the wanted date with cursor key and press enter)

I wonder if someone has ever tested Joomla admin with a screen reader... ?

Option for not having today button

+1
About today button, will it be possible a only date today (current day), or date time today (now) ?

Option for selection of month/year in one line (the default is each one will have its own line in the table header)

See below my note on globalization ;-)

Remove the option to drag the calendar in the viewport (the position is relative to the button)

+1 yes good to remove!

Should be 100% B/C

Agree!

Additional notes

1 Integrate the globalization for month / year format.
Today, the month uses core strings for months. But those ones are wrong in the context of a calendar in some languages. In some languages (for example Russian) month is not written using the correct grammatical spelling. And you can have too suffix / prefix for month and/or year in calendar for some languages.
In some other languages, year should be displayed before month.
A time ago, i did a proposal for this (but in a wrong way, and this PR is not good nor valid) : #2809 (examples could help to understand the issue ;-) )
And i think it's not a big work to prepare code for month / year formatted depending of the culture.

2 What about the time picker (which one already exists in the current calendar picker, but with IMO a bad UX...) ?

3 For sure, while and after testing it! ;-)

avatar Bakual
Bakual - comment - 13 Jun 2016

@Bakual can you provide the sources of the non Gregorian calendars?

I don't have access to them. You would have to check the language packs where they are included. Maybe @infograf768 knows more.

avatar dgt41
dgt41 - comment - 13 Jun 2016

@JoomliC sort answers:

Do you mean you will integrate non-gregorian calculation directly in main script

No this is concatenation of calendar.js and calendar-setup.js

This is the only thing i would say no, as many site template does not load/use bootstrap styling

There are classes (not bootstrap specific) that cover those templates

Will it be possible to override html rendering of the calendar (JLayout)

Great idea, I haven't thought about that, will try to blend that in

And did you remove too the "first day of the week" on day click

Not sure what's that but there is also an option for the week number (on/off)

About today button, will it be possible a only date today (current day), or date time today (now) ?

No, the main body of the table is always visible (can be done tho, I don't really see the use case)

What about the time picker (which one already exists in the current calendar picker, but with IMO a bad UX...) ?

Time picker is still available, I have to redo the dropdowns on these ?

Here are two more different options sets:
screen shot 2016-06-13 at 14 40 46

screen shot 2016-06-13 at 14 42 16

avatar dgt41
dgt41 - comment - 13 Jun 2016

@JoomliC

1 Integrate the globalization for month / year format.

Let's not do that here, my idea is to drop this Date function that the calendar is using and instead use moment.js http://momentjs.com
But there is a HARD B/C break with this one and can't be done in 3.x, maybe 4.
I think @wilsonge also agrees on this one

avatar brianteeman brianteeman - change - 13 Jun 2016
Labels Added: ?
avatar JoomliC
JoomliC - comment - 13 Jun 2016

Let's not do that here, my idea is to drop this Date function that the calendar is using and instead use moment.js http://momentjs.com
But there is a HARD B/C break with this one and can't be done in 3.x, maybe 4.
I think @wilsonge also agrees on this one

Well, i think i was not clear ;-)
I DON'T mean for the input date, but for the popup calendar, month and year navigation in the header ;-)
capture d ecran 2016-06-13 a 16 33 25
But don't worry about it now, as i think i could check this later, or after seeing your code, maybe do a proposal (as not sure if i do a separate PR for this later, after your code to be merged, that it will retains the attention of Latin-language natives... and so testers... ;-) )

avatar JoomliC
JoomliC - comment - 13 Jun 2016

And did you remove too the "first day of the week" on day click

Not sure what's that but there is also an option for the week number (on/off)

Currently, if for example you click on "Wed" header day of the week, it will reoder the calendar table to start the week by wednesday ;-)
Just to ask if your remove this feature too ?
IMO, not needed, and first day of the week is already set by the language pack ;-)

avatar JoomliC
JoomliC - comment - 13 Jun 2016

Time picker is still available, I have to redo the dropdowns on these ?

This is exactly what i meant, and where i see a possible important improvement! (i still wonder why all Joomla core date fields have time in input, and no time picker...)
The current UX is too crap to be used. (i'm sure you will give us a nice new time picker ;-) )
In the same time, if possible to display it alone too, with a new option directly in the field attributes, it would be great as it could then allow a datetime, date or time picker ;-)
Or at least, to be able to activate time using a field attribute (today, you have to set it with inline script).
eg. :

<field
    name="mycalendar"
    type="calendar"
    label="Select a date"
    description=""
    showdate="true"
    showtime="true"
/>

Note: for sure, not difficulte to add showtime attribute, but maybe not easy or with some changes needed for showdate (in case you hide date (calendar) and display only a time picker...). But if you can at least add the showtime attribute element, would be great!

Then, just count on me for a lot of testing ;-)

avatar brianteeman brianteeman - change - 13 Jun 2016
Category Fields
avatar brianteeman
brianteeman - comment - 13 Jun 2016

@Bakual can you provide the sources of the non Gregorian calendars?
At least for the farsi (persian) they are in the language package


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10803.

avatar dgt41
dgt41 - comment - 14 Jun 2016

@JoomliC you can take a look on my approach here: https://github.com/dgt41/joomla-cms/tree/calendar

@brianteeman I know, but I think only the compressed id available in that package (or at least that was the case few months ago)

avatar brianteeman
brianteeman - comment - 14 Jun 2016

@dgt41 I wouldnt have said it if I hadnt checked to make sure :)

avatar dgt41
dgt41 - comment - 13 Jul 2016

So time picker is also implemented and many more things:
screen shot 2016-07-14 at 02 33 50

This needs a css file that will be used in Hathor and all the 3pd templates that don't use bootstrap
@JoomliC @C-Lodder anyone willing to style this for non BS templates?

avatar C-Lodder
C-Lodder - comment - 14 Jul 2016

@dgt41 - Why not copy and paste the CSS needed for the calendar from the bootstrap file, so that it looks bootstrapified on non-bootstrap templates?

Else I don't mind styling it

avatar dgt41
dgt41 - comment - 14 Jul 2016

with just 2 lines: z-index and background-color the non bootstrap version isn't that bad (well, it's not broken)

screen shot 2016-07-14 at 11 34 22

But I guess I will just copy the bootstrap classes for those elements to get a unified appearance. Probably this weekend

avatar C-Lodder
C-Lodder - comment - 14 Jul 2016

Yeah it's ok, but definitely need some CSS love

avatar Bakual
Bakual - comment - 14 Jul 2016

If you're going to copy the bootstrap CSS you will have to make sure they are "namespaced" to the calendar. Otherwise it may change template output in forms where the calendar (and its CSS) is loaded.
Also, it's probably best to put the CSS into an own file in the media folder which can be overridden by templates if needed.

avatar dgt41
dgt41 - comment - 14 Jul 2016

@Bakual the classes won't be the same. Eg the container bootstrap class is dropdown-menu and the plain css j-calendar, so I will not replicate bootstrap classes, just copy the relative styling to the non bootstrap class. Also the bootstrap version (no css file) will be available only for isis and protostar, beez and hathor will load the css ( the good part of jLayout).
But thanks for the tips! ?

avatar dgt41 dgt41 - change - 14 Jul 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-07-14 23:46:41
Closed_By dgt41
avatar dgt41 dgt41 - close - 14 Jul 2016

Add a Comment

Login with GitHub to post a comment