Codecov Report

Attention: Patch coverage is 92.30769% with 1 line in your changes missing coverage. Please review.

Project coverage is 94.50%. Comparing base (ff121f6) to head (4868c65).
Report is 2 commits behind head on main.

@@            Coverage Diff             @@
##             main     #223      +/-   ##
==========================================
+ Coverage   93.67%   94.50%   +0.82%     
==========================================
  Files           8        8              
  Lines         174      182       +8     
==========================================
+ Hits          163      172       +9     
+ Misses         11       10       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@obdulia-losantos thank you for this PR, is there still some work you want to do on it before marking it as ready?

@obdulia-losantos thank you for this PR, is there still some work you want to do on it before marking it as ready?

Yes, I tested it locally and the swatches were not displayed and the format is always hex with alpha... I think I need to make more adjustments to the library.

@fabiocaccamo ready! Sadly I cannot add the example app I used to test it locally. Should I remove that commit?

@fabiocaccamo any feedback?

@fabiocaccamo requested changes made

Yes, I tested it locally and the swatches were not displayed and the format is always hex with alpha... I think I need to make more adjustments to the library.

I've similar issue with new release, there is a different configuration to remove alpha and re-enable swatches?
I tried with:

COLOR_PALETTE = [("#9A6324", "Brown",), ("#e6194B", "Red",),("#3cb44b", "Green", )]
color = ColorField(default=random_color, samples=COLOR_PALETTE, format="hex")

but result is:

@obdulia-losantos the alpha control should not be visible if color format doesn't support alpha, could you double-check it?

I cannot reproduce the error in the admin page with a form.

I'm seeing that you are using the login page. Could you check if in your template all the scripts are loaded or if there is an error in the browser console?

@dadokkio , @fabiocaccamo

COLOR_PALETTE = [("#9A6324", "Brown",), ("#e6194B", "Red",),("#3cb44b", "Green", )]
color_choices = ColorField(blank=True, choices=COLOR_PALETTE, format="hex")

color_samples = ColorField(blank=True, samples=COLOR_PALETTE, format="hex")

I've no error in console and the loaded js are:

It seems that every time I made a crud request that has a color input a block like this is permanently added to the page:

<div id="clr-picker" class="clr-picker clr-open" style="left: 323.891px; top: 272px; color: rgb(0, 81, 255);"><input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="Color value field"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="Saturation and brightness selector. Use up, down, left and right arrow keys to select." style=""><div id="clr-color-marker" class="clr-marker" tabindex="0" aria-label="Saturation: 74.5. Brightness: 24." style="color: rgb(16, 30, 61); left: 149px; top: 76px;"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="Hue slider"><div id="clr-hue-marker" style="left: 61.3889%;"></div></div><div class="clr-alpha" style="color: rgb(16, 30, 61);"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="Opacity slider"><div id="clr-alpha-marker" style="color: rgb(16, 30, 61); left: 100%;"></div><span style=""></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>Color format</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="Clear the selected color">Clear</button><div id="clr-color-preview" class="clr-preview" style="color: rgb(16, 30, 61);"><button type="button" id="clr-close" class="clr-close" aria-label="Close color picker">Close</button></div><span id="clr-open-label" hidden="">Open color picker</span><span id="clr-swatch-label" hidden="">Color swatch</span></div>

So the first time the input is working but with default settings. Then color input in the edit or new panel is not working anymore and multiple dot selector are present in color area (like it's rendered multiple time):

So probably the error is related on how the form is loading its js. I'll let you know.

In the admin everything is working properly:

Sorry for the delay.
as a quick workaround I had to override coloris.js and check in init if the color picker was already been initialized.

  /**
   * Init the color picker.
   */
  function init() {
    picker = document.getElementById("clr-picker");
    if (picker) {
      // If picker exists, just reference UI elements and return
      colorArea = getEl("clr-color-area");
      colorMarker = getEl("clr-color-marker");
      clearButton = getEl("clr-clear");
      closeButton = getEl("clr-close");
      colorPreview = getEl("clr-color-preview");
      colorValue = getEl("clr-color-value");
      hueSlider = getEl("clr-hue-slider");
      hueMarker = getEl("clr-hue-marker");
      alphaSlider = getEl("clr-alpha-slider");
      alphaMarker = getEl("clr-alpha-marker");
      return;
    }
..

In this way all the input works without issue for the single page application.

The only minor issue is that only the first input has the full styling with color on the right then all the other ones have only text value.

But in my case that is better because styled one was not rendered like other form-control on a new line.
[eg here that password input is below text like all the other form fields while color is near on the right]

Add comment