? ? ? Pending

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
3 Jan 2018

Pull Request for Issue # .

Summary of Changes

  • Total rewrite of the js/scss part
  • dead easy HTML markup
  • Accessible!
  • No dependencies

Testing Instructions

Apply the patch and check in admin the template cassiopeia

Expected result

screen shot 2018-01-03 at 22 11 59

Actual result

Documentation Changes Required

Kudos to @brianteeman and Christiane Maier-Stadtherr for their help on the accessibility!

avatar dgt41 dgt41 - open - 3 Jan 2018
avatar dgt41 dgt41 - change - 3 Jan 2018
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 3 Jan 2018
Category JavaScript Repository Layout Front End Templates (site)
avatar brianteeman
brianteeman - comment - 3 Jan 2018

Why is it clss and not class?

avatar dgt41
dgt41 - comment - 3 Jan 2018

Class is a reserved word in js we can’t use it to assign variables

avatar brianteeman
brianteeman - comment - 3 Jan 2018

I knew there would be a good reason - thanks

avatar dgt41 dgt41 - change - 3 Jan 2018
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - change - 3 Jan 2018
Category JavaScript Repository Layout Front End Templates (site) JavaScript Repository Administration Language & Strings Layout Front End Templates (site)
avatar dgt41 dgt41 - change - 3 Jan 2018
Labels Added: ?
avatar dgt41 dgt41 - change - 3 Jan 2018
The description was changed
avatar dgt41 dgt41 - edited - 3 Jan 2018
avatar dgt41
dgt41 - comment - 3 Jan 2018

So we do have the word close, will do that

avatar brianteeman
brianteeman - comment - 3 Jan 2018

For users of assistive technologies it is obvious that the first white box is for transparent and not for white
For the rest of us they both look white
perhaps the transparent one should be with a red line through it?

avatar dgt41
dgt41 - comment - 3 Jan 2018

@brianteeman that's the css part that needs some improvement, but I guess since all these fields will be styled properly for the new template this can be postponed. Right now the css is just an improved (?) version of the old one I guess we can do better than that. Maybe @ciar4n has something good in his mind for this

avatar C-Lodder
C-Lodder - comment - 3 Jan 2018

Havent looked at the code yet but hope you used the dropdown code from tk

avatar dgt41
dgt41 - comment - 3 Jan 2018

@C-Lodder there is no dropdown

avatar brianteeman
brianteeman - comment - 4 Jan 2018

Dont know where the color swatch came from but

  1. why are we converting hex to rgb?
  2. as mentioned previously wouldnt using the "real name" for assistive technology be better than reading out the hex value -" limegreen colour" is surely better than "Colour with hexadecimal value of 3, 2, C, D, 3, 2"
avatar dgt41
dgt41 - comment - 4 Jan 2018

why are we converting hex to rgb?

Well I have no clue, that part was there and I just kept it. For sure we can throw it away

About the second one: what difference will it make the limegreen from a hexadecimal colour code to some visual impaired? I have no answer here but we can make it work either ways (at least for the known colours)

avatar brianteeman
brianteeman - comment - 4 Jan 2018

The Colorado pallets is fixed in the library so finding their real names will be easy.

I would assume that saying lime green is more useful and meaningful than the hex (or RGB) string

avatar brianteeman
brianteeman - comment - 4 Jan 2018

Dam autocorrect. Colorado should have been color

avatar dgt41
dgt41 - comment - 4 Jan 2018

How about the following logic:
if the hex is a known color (name exists either in the basic or extended names of https://www.w3.org/TR/2017/CR-css-color-3-20171205/) then use the name else fall back to announcing the hex code

avatar C-Lodder
C-Lodder - comment - 4 Jan 2018

The colour picker can use the pretty much the same code as the dropdown. Better yet, it can use it, period. Will explain on skype later

avatar dgt41
dgt41 - comment - 4 Jan 2018

What exactly will a dropdown solve here?

avatar ciar4n
ciar4n - comment - 4 Jan 2018

A nice touch here would be if the available colors could be defined within the xml.

avatar dgt41
dgt41 - comment - 4 Jan 2018

@ciar4n I think you can define them, that was the reason I didn't do in the first place only the named colours...

avatar ciar4n
ciar4n - comment - 4 Jan 2018

I'd be against using named colours. A user could source colours externally, copy/pasted from photoshop, sketch, a colour palette etc. And these will always be in HEX.

For the same reason I'd be against even converting HEX to a named colour (if exists) as a user may wish to copy and paste a colour from Joomla to an external source. Becomes a pain unless you can roll off the HEX of LavenderBlush from the top of their head 😄

avatar dgt41
dgt41 - comment - 5 Jan 2018

@ciar4n we re not considering changing the actual value, only the sr text and only if the color has a known named color. So data will always be hex

avatar brianteeman
brianteeman - comment - 5 Jan 2018

yes the colors can be defined although I don't know how the colors used are either from the xml or it falls back to a standard set.

See

* Method to get the data for the simple mode to be passed to the layout for rendering.

avatar ciar4n
ciar4n - comment - 5 Jan 2018
<field
	name="blabla"
	type="color"
	control="simple"
	colors="#000000, #FFFFFF, #AAAAAA"
	default=""
	label="color"
/>

It seems if no colors are defined in the xml then the standard set is used. The above looks likes...

image

Very neat 👍

On a somewhat related note, we could do with a place to list topics that need to be documented for J4.

avatar dgt41
dgt41 - comment - 5 Jan 2018

@ciar4n once we finish converting the fields to custom elements I will propose a neat documentation for all these, with snippets, live code examples etc, similar to the custom elements...

3f22e68 21 Jan 2018 avatar dgt41 oops
89f6284 21 Jan 2018 avatar dgt41 cs
avatar dgt41
dgt41 - comment - 21 Jan 2018

@brianteeman if you got some spare time please check this one, now will amend the colour name for the known colors (according to the W3C extended colors list)
It looks like this:
screen shot 2018-01-21 at 14 21 53

avatar brianteeman
brianteeman - comment - 21 Jan 2018

seems ok

avatar Anu1601CS
Anu1601CS - comment - 22 Feb 2018

@dgt41 please resolve conflicts .

avatar dgt41
dgt41 - comment - 22 Feb 2018

@Anu1601CS should be ok now

avatar Anu1601CS Anu1601CS - test_item - 24 Feb 2018 - Tested successfully
avatar Anu1601CS
Anu1601CS - comment - 24 Feb 2018

I have tested this item successfully on 80c0e8c


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

avatar Anu1601CS
Anu1601CS - comment - 1 Mar 2018

@astridx Please test this.

avatar astridx astridx - test_item - 1 Mar 2018 - Tested successfully
avatar astridx
astridx - comment - 1 Mar 2018

I have tested this item successfully on 80c0e8c

I tested this successful:

I was able to use a default value like #222222;
I could use the advanced mode control="advanced" and the simple mode.
I could use colors="brown, white" or colors="#AAAAAA, #000000, #FFFFFF" in simple mode.
I could use a description.

The color picker is not used in the template for changing any template colors up to now, right?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19281.
avatar Anu1601CS
Anu1601CS - comment - 1 Mar 2018

@astridx Thanks

The color picker is not used in the template for changing any template colors up to now, right?
I think yes @dgt41

avatar franz-wohlkoenig franz-wohlkoenig - change - 1 Mar 2018
Status Pending Ready to Commit
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 1 Mar 2018

Ready to Commit after two successful tests.

avatar dgt41
dgt41 - comment - 1 Mar 2018

The color picker is not used in the template for changing any template colors up to now, right?

Yes that filed was just placed in the template for testing purposes

avatar laoneo
laoneo - comment - 3 Apr 2018

Getting Argument 1 passed to Joomla\CMS\HTML\HTMLHelper::webcomponent() must be of the type string, array given.

avatar laoneo laoneo - change - 3 Apr 2018
Labels Added: ?
avatar dgt41
dgt41 - comment - 3 Apr 2018

@laoneo yup, these pro need an update, we recently changed the JHtml::webcomponent() to accept the file path similar to stylesheet and script. Will do that in a bit for all
PS ok I was too slow...

avatar laoneo
laoneo - comment - 3 Apr 2018

Can you fix conflicts here?

avatar laoneo
laoneo - comment - 3 Apr 2018

@dgt41 fixed it in 8a76be8

avatar laoneo laoneo - close - 3 Apr 2018
avatar laoneo laoneo - merge - 3 Apr 2018
avatar laoneo laoneo - change - 3 Apr 2018
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2018-04-03 12:19:32
Closed_By laoneo
avatar tassosm
tassosm - comment - 11 Apr 2018

It doesn't work anymore. The selected color doesn't get saved as the select element is not updated.

avatar dgrammatiko
dgrammatiko - comment - 11 Apr 2018

@tassosm thanks for testing, here is the fix: #20146
I think we consecrated our efforts to meet A11Y and we missed that one

Add a Comment

Login with GitHub to post a comment