Suggestion: Color picker in editools

Hardmath123

There should be a pink paint bucket kind of icon in the editool bar, which reveals a color palette with some of the common colors. I'll implement a simple patch today (nXIII, don't beat me to it!) if you want.

Hardmath123

Alright, I'm done with my implementation:

You need to modify http://mv.ezproxy.com.ezproxyberklee.flo.org/scratchr2/static//djangobb_forum/js/markitup/sets/bbcode/set.js and http://mv.ezproxy.com.ezproxyberklee.flo.org/scratchr2/static//djangobb_forum/js/markitup/sets/bbcode/style.css

set.js:

// ----------------------------------------------------------------------------
// markItUp!
// ----------------------------------------------------------------------------
// Copyright (C) 2008 Jay Salvat
// http://markitup.jaysalvat.com/
// ----------------------------------------------------------------------------
// BBCode tags example
// http://en.wikipedia.org/wiki/Bbcode
// ----------------------------------------------------------------------------
// Feel free to add more tags
// ----------------------------------------------------------------------------
var mySettings = {
	previewParserPath:	POST_PREVIEW_URL,
	markupSet: [
		{name:'Bold', key:'B', openWith:'[b]', closeWith:'[/b]'},
		{name:'Italic', key:'I', openWith:'[i]', closeWith:'[/i]'},
		{name:'Underline', key:'U', openWith:'[u]', closeWith:'[/u]'},
		{name:'Stroke', key:'S', openWith:'[s]', closeWith:'[/s]' },
		{separator:'---------------' },
		{name:'Picture', key:'P', replaceWith:'[img][![Url]!][/img]'},
		{name:'Link', key:'L', openWith:'[url=[![Url]!]]', closeWith:'[/url]', placeHolder:'Your text to link here...'},
		{separator:'---------------' },
		{name:'Size', key:'S', openWith:'', closeWith:'',
		dropMenu :[
			{name:'Big', openWith:'[big]', closeWith:'[/big]' },
			{name:'Small', openWith:'[small]', closeWith:'[/small]' }
		]},
		{name:'Colors', openWith:'', closeWith:'', dropMenu: [
			{name:'black', openWith:'[color=black]', closeWith:'[/color]' },
			{name:'dimgray', openWith:'[color=dimgray]', closeWith:'[/color]' },
			{name:'darkgray', openWith:'[color=darkgray]', closeWith:'[/color]' },
			{name:'gainsboro', openWith:'[color=gainsboro]', closeWith:'[/color]' },
			{name:'white', openWith:'[color=white]', closeWith:'[/color]' },
			{name:'darkred', openWith:'[color=darkred]', closeWith:'[/color]' },
			{name:'red', openWith:'[color=red]', closeWith:'[/color]' },
			{name:'orangered', openWith:'[color=orangered]', closeWith:'[/color]' },
			{name:'tomato', openWith:'[color=tomato]', closeWith:'[/color]' },
			{name:'yellow', openWith:'[color=yellow]', closeWith:'[/color]' },
			{name:'maroon', openWith:'[color=maroon]', closeWith:'[/color]' },
			{name:'palevioletred', openWith:'[color=palevioletred]', closeWith:'[/color]' },
			{name:'lightcoral', openWith:'[color=lightcoral]', closeWith:'[/color]' },
			{name:'pink', openWith:'[color=pink]', closeWith:'[/color]' },
			{name:'fuchsia', openWith:'[color=fuchsia]', closeWith:'[/color]' },
			{name:'midnightblue', openWith:'[color=midnightblue]', closeWith:'[/color]' },
			{name:'darkblue', openWith:'[color=darkblue]', closeWith:'[/color]' },
			{name:'royalblue', openWith:'[color=royalblue]', closeWith:'[/color]' },
			{name:'lightblue', openWith:'[color=lightblue]', closeWith:'[/color]' },
			{name:'blue', openWith:'[color=blue]', closeWith:'[/color]' },
			{name:'darkgreen', openWith:'[color=darkgreen]', closeWith:'[/color]' },
			{name:'green', openWith:'[color=green]', closeWith:'[/color]' },
			{name:'seagreen', openWith:'[color=seagreen]', closeWith:'[/color]' },
			{name:'darkseagreen', openWith:'[color=darkseagreen]', closeWith:'[/color]' },
			{name:'limegreen', openWith:'[color=limegreen]', closeWith:'[/color]' }
		]
		},
		{separator:'---------------' },
		{name:'Bulleted list', openWith:'[list]\n', closeWith:'\n[/list]'},
		{name:'Numeric list', openWith:'[list=[![Starting number]!]]\n', closeWith:'\n[/list]'},
		{name:'List item', openWith:'[*] '},
		{separator:'---------------' },
		{name:'Quotes', openWith:'[quote]', closeWith:'[/quote]'},
			{name:'Smiles', openWith:'', closeWith:'', dropMenu:[
			{name:'Smile', openWith:':)'},
			{name:'Neutral', openWith:':|'},
			{name:'Sad', openWith:':('},
			{name:'Big smile', openWith:':D'},
			{name:'Yikes', openWith:':o'},
			{name:'Wink', openWith:';)'},
			{name:'Hmm', openWith:':/'},
			{name:'Tongue', openWith:':P'},
			{name:'Lol', openWith:':lol:'},
			{name:'Mad', openWith:':mad:'},
			{name:'Roll', openWith:':rolleyes:'},
			{name:'Cool', openWith:':cool:'}
		]},
		{separator:'---------------' },
		{name:'Clean', className:"clean", replaceWith:function(markitup) { return markitup.selection.replace(/\[(.*?)\]/g, "") } },
		{name:'Preview', className:"preview", call:'preview' }
	]
}

style.css:

/* -------------------------------------------------------------------
 // markItUp!
 // By Jay Salvat - http://markitup.jaysalvat.com/
 // ------------------------------------------------------------------*/
.markItUp .markItUpButton1 a	{
	background-image:url(images/bold.png);
}
.markItUp .markItUpButton2 a	{
	background-image:url(images/italic.png);
}
.markItUp .markItUpButton3 a	{
	background-image:url(images/underline.png);
}
.markItUp .markItUpButton4 a	{
	background-image:url(images/stroke.png);
}
.markItUp .markItUpButton5 a	{
	background-image:url(images/picture.png);
}
.markItUp .markItUpButton6 a	{
	background-image:url(images/link.png);
}
.markItUp .markItUpButton7 a	{
	background-image:url(images/fonts.png);
}
/* Colors */
.markItUp .markItUpButton8 a {
	background-image:url(images/paint.png);
}
.markItUp .markItUpButton8 ul {
	width:102px;
	height:102px;
	padding:1px;
}
.markItUp .markItUpButton8  li {
	border:1px solid white;
	width:18px;	height:18px;
	overflow:hidden;
	padding:0px; margin:0px;
	float:left;
}
.markItUp .markItUpButton8 a {
	width:18px;
	height:18px;
}
.markItUp .markItUpButton8 ul li:hover {
	border:1px solid gray;
}
.markItUp .markItUpButton8-1 a {background:black !important;}
.markItUp .markItUpButton8-2 a {background:dimgray !important;}
.markItUp .markItUpButton8-3 a {background:darkgray !important;}
.markItUp .markItUpButton8-4 a {background:gainsboro !important;}
.markItUp .markItUpButton8-5 a {background:white !important;}
.markItUp .markItUpButton8-6 a {background:darkred !important;}
.markItUp .markItUpButton8-7 a {background:red !important;}
.markItUp .markItUpButton8-8 a {background:orangered !important;}
.markItUp .markItUpButton8-9 a {background:tomato !important;}
.markItUp .markItUpButton8-10 a {background:yellow !important;}
.markItUp .markItUpButton8-11 a {background:maroon !important;}
.markItUp .markItUpButton8-12 a {background:palevioletred !important;}
.markItUp .markItUpButton8-13 a {background:lightcoral !important;}
.markItUp .markItUpButton8-14 a {background:pink !important;}
.markItUp .markItUpButton8-15 a {background:fuchsia !important;}
.markItUp .markItUpButton8-16 a {background:midnightblue !important;}
.markItUp .markItUpButton8-17 a {background:darkblue !important;}
.markItUp .markItUpButton8-18 a {background:royalblue !important;}
.markItUp .markItUpButton8-19 a {background:lightblue !important;}
.markItUp .markItUpButton8-20 a {background:blue !important;}
.markItUp .markItUpButton8-21 a {background:darkgreen !important;}
.markItUp .markItUpButton8-22 a {background:green !important;}
.markItUp .markItUpButton8-23 a {background:seagreen !important;}
.markItUp .markItUpButton8-24 a {background:darkseagreen !important;}
.markItUp .markItUpButton8-25 a {background:limegreen !important;}
.markItUp .markItUpButton9 a	{
	background-image:url(images/list-bullet.png);
}
.markItUp .markItUpButton10 a	{
	background-image:url(images/list-numeric.png);
}
.markItUp .markItUpButton11 a	{
	background-image:url(images/list-item.png);
}
.markItUp .markItUpButton12 a	{
	background-image:url(images/quotes.png);
}
.markItUp .markItUpButton13 a	{
	background-image:url(../../../../img/smilies/smile.png);
}
.markItUp .markItUpButton13-1 a	{
	background-image:url(../../../../img/smilies/smile.png);
}
.markItUp .markItUpButton13-2 a	{
	background-image:url(../../../../img/smilies/neutral.png);
}
.markItUp .markItUpButton13-3 a	{
	background-image:url(../../../../img/smilies/sad.png);
}
.markItUp .markItUpButton13-4 a	{
	background-image:url(../../../../img/smilies/big_smile.png);
}
.markItUp .markItUpButton13-5 a	{
	background-image:url(../../../../img/smilies/yikes.png);
}
.markItUp .markItUpButton13-6 a	{
	background-image:url(../../../../img/smilies/wink.png);
}
.markItUp .markItUpButton13-7 a	{
	background-image:url(../../../../img/smilies/hmm.png);
}
.markItUp .markItUpButton13-8 a	{
	background-image:url(../../../../img/smilies/tongue.png);
}
.markItUp .markItUpButton13-9 a	{
	background-image:url(../../../../img/smilies/lol.png);
}
.markItUp .markItUpButton13-10 a	{
	background-image:url(../../../../img/smilies/mad.png);
}
.markItUp .markItUpButton13-11 a	{
	background-image:url(../../../../img/smilies/roll.png);
}
.markItUp .markItUpButton13-12 a	{
	background-image:url(../../../../img/smilies/cool.png);
}
.markItUp .clean a {
	background-image:url(images/clean.png);
}
.markItUp .preview a {
	background-image:url(images/preview.png);
}

You need a new image called paint.png which has the icon. Put it at http://mv.ezproxy.com.ezproxyberklee.flo.org/scratchr2/static//djangobb_forum/js/markitup/sets/bbcode/images/paint.png

Last edited by Hardmath123 (Jan. 26, 2013 14:41:05)

Hardmath123

Download a demo with the modified files here: https://docs.google.com/file/d/0B1UC0dDhQyzMa1RnMThYY0JxdFk/edit. Please excuse the atrocious indentation, that's Xcode's fault.

Last edited by Hardmath123 (Jan. 26, 2013 14:50:55)

Hardmath123

http://mv.ezproxy.com.ezproxyberklee.flo.org/issues/426

veggieman001

Nothing is permanent.

Last edited by veggieman001 (July 17, 2013 00:02:00)

nXIII

I think an HSL color picker might be better.

Hardmath123

veggieman001
Hardmath123
http://mv.ezproxy.com.ezproxyberklee.flo.org/issues/426
Now I know your real name :O

Yeah, it's quite a pain surviving with a first name like Hard.

nXIII
I think an HSL color picker might be better.

Continuous range? Overkill, I guess.

Hardmath123

Bump. Can the ST give some feedback, at least?

Lightnin

Woah, suggested and totally implemented - fast!

In general, we want to keep features in the forums to a minimum, because even if they're cool, they add complexity. After beta though, we should check it out and reconsider.

scimonster

Lightnin
Woah, suggested and totally implemented - fast!

In general, we want to keep features in the forums to a minimum, because even if they're cool, they add complexity. After beta though, we should check it out and reconsider.

IMO it's more complex trying to figure out the color code.

Hardmath123

Lightnin
Woah, suggested and totally implemented - fast!

Thanks!

In general, we want to keep features in the forums to a minimum, because even if they're cool, they add complexity. After beta though, we should check it out and reconsider.

Aww… well, I understand how you guys are totally busy with getting the important stuff out, so I suppose it's reasonable to have to wait. How about I get nXIII to merge it into the next patch he gives you guys: that way you don't have to worry about it.

nXIII

Hardmath123
In general, we want to keep features in the forums to a minimum, because even if they're cool, they add complexity. After beta though, we should check it out and reconsider.
Aww… well, I understand how you guys are totally busy with getting the important stuff out, so I suppose it's reasonable to have to wait. How about I get nXIII to merge it into the next patch he gives you guys: that way you don't have to worry about it.

I think we should probably wait until we've decided if we want it in the toolbar…

Hardmath123

Yeah, I guess.

I think it would be useful because

New Scratchers will discover the feature easily, and won't go around asking “how do I make colorful text?”
People who know about it may not know the correct names of certain colors they want, and definitely not the hex values. Having a color picker makes it easy to get an initial range of colors to pick from, rather than guessing. Of course, if you want a really specific color, you need to look it up, but I tried to get a good balance of all the normally used colors
It admittedly saves typing time (considerably for someone not used to BBCode, and a bit for more experienced people).

We have plenty of space to put it in, and it would be a logical addition to the toolbar (most formatting toolbars have a color option). Convinced?

Hardmath123

Bump.

Discuss Scratch