[RFC] Add greyscale to colour picker

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
GravityDK
Registered User
Posts: 36
Joined: Sat Aug 28, 2010 10:19 am

[RFC] Add greyscale to colour picker

Post by GravityDK » Sun Aug 29, 2010 2:07 am

Outcome: Change picker to include greyscale, like this.
grey.jpg
grey.jpg (2.91 KiB) Viewed 6774 times
How to:
editor.js in the style/../template

Find

Code: Select all

/**
* Color pallette
*/
function colorPalette(dir, width, height)
{
Change to

Code: Select all

/**
* Color pallette
*/
function colorPalette(dir, width, height)
{
var r = 0, g = 0, b = 0;
var numberList = new Array(6);
var numberListgrey = new Array(6);
var color = '';

numberList[0] = '00';
numberList[1] = '40';
numberList[2] = '80';
numberList[3] = 'BF';
numberList[4] = 'FF';

numberListgrey[0] = '373737';
numberListgrey[1] = '565656';
numberListgrey[2] = '787878';
numberListgrey[3] = 'A1A1A1';
numberListgrey[4] = 'CACACA';

document.writeln('<table cellspacing="1" cellpadding="0" border="0">');

for (r = 0; r < 5; r++)
{
if (dir == 'h')
{
document.writeln('<tr>');
}

for (g = 0; g < 5; g++)
{
if (dir == 'v')
{
document.writeln('<tr>');
}

for (b = 0; b < 5; b++)
{
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]); 
document.write('<td bgcolor="#' + color + '" style="width: ' + width + 'px; height: ' + height + 'px;">');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.writeln('</td>');
}

if (dir == 'v')
{
document.writeln('</tr>');
}
}

colorgrey = String(numberListgrey[r]);
document.write('<td bgcolor="#' + colorgrey + '" style="width: ' + width + 'px; height: ' + height + 'px;">');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + colorgrey + ']\', \'[/color]\'); return false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + colorgrey + '" title="#' + colorgrey + '" /></a>');
document.writeln('</td>');

if (dir == 'h')
{
document.writeln('</tr>');
}
}
document.writeln('</table>');
}
Thanks to wejonk at STG for this code. That thread has a few alternative implementations if developers are curious, but they're more complicated.

User avatar
naderman
Consultant
Posts: 1727
Joined: Sun Jan 11, 2004 2:11 am
Location: Karlsruhe, Germany
Contact:

Re: Add greyscale to colour picker

Post by naderman » Thu May 31, 2012 2:44 am

Just came across this again. Anyone want to create a github pull request for this and create a ticket on the tracker?

User avatar
A_Jelly_Doughnut
Registered User
Posts: 1780
Joined: Wed Jun 04, 2003 4:23 pm

Re: [RFC] Add greyscale to colour picker

Post by A_Jelly_Doughnut » Thu May 31, 2012 3:28 am

Would strongly support a refactor of the color picker to use jQuery while we're at it.
A_Jelly_Doughnut

User avatar
naderman
Consultant
Posts: 1727
Joined: Sun Jan 11, 2004 2:11 am
Location: Karlsruhe, Germany
Contact:

Re: [RFC] Add greyscale to colour picker

Post by naderman » Thu May 31, 2012 9:02 am

Good idea.

User avatar
brunoais
Registered User
Posts: 962
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Add greyscale to colour picker

Post by brunoais » Thu May 31, 2012 9:47 am

That means not using document.write(), right? (YES!)
I would still prefer if innerHTML wasn't used. In some methods of jQuery innerHTML is used.
In some situations chrome fails or (logical "or") firefox fails.
I still wasn't able to find a way to repeat the situations where they fail. Sounds like Byzantine fault in the HTML parser where it fails sometimes...
Note: If you prefer using such feature, I won't fight against it, anyway

User avatar
Erik Frèrejean
Registered User
Posts: 207
Joined: Thu Oct 25, 2007 2:25 pm
Location: surfnet
Contact:

Re: [RFC] Add greyscale to colour picker

Post by Erik Frèrejean » Thu May 31, 2012 10:01 am

A_Jelly_Doughnut wrote:Would strongly support a refactor of the color picker to use jQuery while we're at it.
Might as well switch to a decent looking jQuery color picker plugin then. This seems to be nice/simple option.
Available on .com
Support Toolkit developer

User avatar
brunoais
Registered User
Posts: 962
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Add greyscale to colour picker

Post by brunoais » Thu May 31, 2012 11:51 am

Has some small(?) performance problems by jQuery abuse but overall sounds good :thumbsup:

User avatar
bantu
3.0 Release Manager
3.0 Release Manager
Posts: 557
Joined: Thu Sep 07, 2006 11:22 am
Location: Karlsruhe, Germany
Contact:

Re: [RFC] Add greyscale to colour picker

Post by bantu » Wed Jun 13, 2012 10:09 pm

+1 for adding grey scale. Never noticed it was not included however.

User avatar
psoTFX
Registered User
Posts: 1984
Joined: Tue Jul 03, 2001 8:50 pm
Contact:

Re: [RFC] Add greyscale to colour picker

Post by psoTFX » Fri Jul 06, 2012 3:13 pm

Erik Frèrejean wrote:
A_Jelly_Doughnut wrote:Would strongly support a refactor of the color picker to use jQuery while we're at it.
Might as well switch to a decent looking jQuery color picker plugin then. This seems to be nice/simple option.
+1 for this - biggest potential downside is when using touch interfaces, may need some investigation? Should add that I did away with the existing (ancient) colour swatch in my own styles and use a picker very similar to the one Erik's highlighted.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1750
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: [RFC] Add greyscale to colour picker

Post by DavidIQ » Fri Jul 06, 2012 3:31 pm

psoTFX wrote:biggest potential downside is when using touch interfaces, may need some investigation?
Just tried their demo on my iPad. Seems to work perfectly fine in Safari. :geek:
Image

Post Reply