Color Picker TV for Revo

353 Posts

pepebe Reply #1, 13 years, 3 months ago

This topic has been started in another part of the forum:

http://modxcms.com/forums/index.php/topic,56355.0.html

...

A colorpicker is something we really need in MODx Revo.

Google research brought this forum post by vtswingkid to my attention:

http://www.sencha.com/forum/showthread.php?73998-3.x-Ext.ux.ColorPickerField

I love it!

You can see how it works here:

http://dl.dropbox.com/u/1840535/Experimente/ColorPicker/colorpicker-00.html

I have striped down the code to the bare essentials here:
http://dl.dropbox.com/u/1840535/Experimente/ColorPicker/colorpicker.html

Attached you can find some screenshots of the package and a zipfile containing the necessary code.

So far so good.

Question: How do I get this baby working in MODx as custom TV?

I’m just starting with revo and the whole Manager+ExtJS thing is completely new to me.

The documentation is really helpful.

http://rtfm.modx.com/display/revolution20/Adding+a+Custom+TV+Input+Type

I understand the php/smarty templating bit, but the ExtJS integration is way out of my field of expertise.

Is there anyone out there who wants to handle that?

Kind regards,

pepebe

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

5,888 Posts

Bruno17 Reply #2, 13 years, 3 months ago

Here is it.
Has some CSS-issues, but seems to work.

upload all files.
create plugin with content of /core/components/colorpicker/elements/plugins/colorpickercustomtv.plugin.php

check:
OnTVInputRenderList
OnDocFormPrerender

Use this CSS-fixed version by pepepe: http://modxcms.com/forums/index.php/topic,59277.msg337976.html#msg337976

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #3, 13 years, 3 months ago

Bruno - do you ever release these in the Repo, or keep a list of all the TV types you’ve made?

I see you popping in attachments all over the place, but never seem to find a full list tongue

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

353 Posts

pepebe Reply #4, 13 years, 3 months ago

Quote from: Bruno17 at Jan 03, 2011, 01:53 PM

Here is it.
Has some CSS-issues, but seems to work.

upload all files.
create plugin with content of /core/components/colorpicker/elements/plugins/colorpickercustomtv.plugin.php

check:
OnTVInputRenderList
OnDocFormPrerender

This is AWESOME!

Thanks Bruno17.

After a quick glance at your code, I realized that my own humble affords would never haven been successful. Cudos!

Regarding the CSS...

ARGGGGHHHH!!!

ExtJS creates about 270 lines of nested code for a stupid color picker. There are tables all over the place and css rules for a single element come in insane numbers (not to mention an incredible amount of inline css).

I’ve tried a few things that make things better, but the results are not really to my satisfaction.

Attached you will find a new colorpicker.css.

Copy it to assets/components/colorpicker/resources and you will at least be able to use the TV as intended.

Note: This looks still very ugly from both sides. I checked it in Firefox. Chrome looks a bit odd. I didn’t dare to check Opera and IE.

Also, I had to use lots of !important styles and other creepy stuff to make it work.

div.x-form-element[style='padding-left: 42px;'] {

		margin: 3px 0!important;	

}

It would make things much easier to have a "colorPicker" class or something like that around the whole monster. Can you do that?

Regards,

pepebe

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

5,888 Posts

Bruno17 Reply #5, 13 years, 3 months ago

you can add this line in /assets/components/colorpicker/sources/ColorPickerField.js

this.menus[1].addClass('clpickermenu');

to onTrigger2Click

	,onTrigger2Click : function(){
        if(this.disabled){
            return;
        }
		this.menus[1].addClass('clpickermenu');//added by Bruno
        this.menus[1].show(this.el, "tl-bl?");
		if (this.picker==1) {
        	this.menus[1].picker.setColor(this.getValue());
		}
    }

[Edit]

with your CSS I can no longer click my tabs ’Page Settings’ ’Template Variables’ ’Access Permissions’ in Chrome

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

353 Posts

pepebe Reply #6, 13 years, 3 months ago

Quote from: Bruno17 at Jan 04, 2011, 07:06 AM

you can add this line in /assets/components/colorpicker/sources/ColorPicker.js
this.menus[1].addClass('clpickermenu');
to onTrigger2Click
	,onTrigger2Click : function(){
        if(this.disabled){
            return;
        }
		this.menus[1].addClass('clpickermenu');//added by Bruno
        this.menus[1].show(this.el, "tl-bl?");
		if (this.picker==1) {
        	this.menus[1].picker.setColor(this.getValue());
		}
    }
[Edit]

with your CSS I can no longer click my tabs ’Page Settings’ ’Template Variables’ ’Access Permissions’ in Chrome

Thanks, the custom class is exactly what I need.

Sorry about Chrome. I don’t have any problems (except from an aesthetic POV) in Chrome (ver.8.0.552.224, Ubuntu 10.04).

I’ll handle this and test it in all current browsers (FF, Chrome, Opera and IE7/8). I should be able to finish it by tomorrow.

Thanks again,

pepebe

BTW: It’s ColorPickerField.js line 164 in the same directory

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

5,888 Posts

Bruno17 Reply #7, 13 years, 3 months ago

after commenting-out all these lines I’m able to use my tabs again and colorpicker looks somewhat ok so far.

.x-panel-body {
	height: auto!important;
}

li.x-menu-list-item[style='width: 326px; height: 189px;'] {
	height: 193px!important;
}
/*

form.x-panel-body.x-form[style='width: 110px; height: 182px;'] {
	height: 182px!important;
	width: 107px!important;	
	position: relative;
}
*/
table.x-btn.x-btn-noicon[style='width: 108px; margin-top: 2px;'] {

}

/* Container arround websafe/invers button und preview field */
div.x-panel-body.x-panel-body-noheader.x-table-layout-ct[style='width: 107px; height: 44px;'] {
	height: 60px!important;
}
/*
	div.x-form-element[style='padding-left: 15px;'] {
		margin-bottom: 2px!important;
	}

label.x-form-item-label[style='width: 10px;'] {
	margin-right: 5px!important;
}

input.x-form-text.x-form-field.x-form-num-field[style='width: 28px;'] {
	width: 33px!important;
}
*/
/*Container for all items below rgb hsa value fieldset *//*
div.x-panel-body.x-panel-body-noheader[style='width: 110px;'] {
	height: 113px!important;
}

div.x-panel-body.x-panel-body-noheader[style='width: 110px;'] div.x-form-element[style='padding-left: 42px;'] {
	margin-bottom: 5px!important;
}
*/
/* Container arround HTML Hexvalues *//*
div.x-form-element[style='padding-left: 42px;'] {
		margin: 3px 0!important;	
}
*/
/* Container arround websafe/invers button und preview field *//*
div.x-panel-body.x-panel-body-noheader.x-table-layout-ct[style='width: 107px; height: 44px;'] {
	height: 60px!important;
}
*/
table.x-btn.x-btn-icon {
	margin-bottom: 2px!important;
	margin-right: -3px!important;
}

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

353 Posts

pepebe Reply #8, 13 years, 3 months ago

OK,

update for a new colorpicker.css. I also had to apply some minor changes to ColorPicker.js to get classes to some of the form elements.

Attached you will find a complete package.

I could only check FF/Chrome running on Ubuntu tonight.

I’ll check Windows on friday.

Regards,

pepebe

Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe

49 Posts

Michael van Laar Reply #9, 13 years, 3 months ago

Great Extension grin

Exactly what I needed right now.

But I can only agree with Mark: It should definitely be available as an automatically installable package.

5,888 Posts

Bruno17 Reply #10, 13 years, 3 months ago

But I can only agree with Mark: It should definitely be available as an automatically installable package.

when all is working as it should, I think we can package it together. Does it?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!