MODX Forums
View Latest Posts

or Search:

Color Picker TV for Revo

Subscribe: RSS
  • pepebe Reply #1, 2 years, 5 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
    • Bruno17 Reply #2, 2 years, 5 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
      • Mark Hamstra Reply #3, 2 years, 5 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
          Hi there! I am Mark Hamstra, I am the owner and developer of modmore.com, a MODX and community focused business. I've released a fair number of Extras.
          Tweet me @mark_hamstra, catch my infrequent blog at markhamstra.com and talk code at Github.
        • pepebe Reply #4, 2 years, 5 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
          • Bruno17 Reply #5, 2 years, 5 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
            • pepebe Reply #6, 2 years, 5 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
              • Bruno17 Reply #7, 2 years, 5 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;
}



                • pepebe Reply #8, 2 years, 5 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
                  • Michael van Laar Reply #9, 2 years, 5 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.
                    • Bruno17 Reply #10, 2 years, 5 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?