October 1, 2014—A scheduled data center restart may impact logins and registrations at modx.com.
Subscribe: RSS
  • 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
    • 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!
      • 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 & Entrepreneur selling Premium Extras and trying to help MODX move forward.
          Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com or talk code at Github.
        • Quote from: Bruno17 at Jan 03, 2011, 07:53 AM

          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
          • 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!
            • Quote from: Bruno17 at Jan 04, 2011, 01: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
              • 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!
                • 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
                  • 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.
                    • 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!