primeng icon indicating copy to clipboard operation
primeng copied to clipboard
verified publisher icon primefaces

ColorPicker: *.png missing

Open 102-97-98-105 opened this issue 2 years ago • 8 comments

Describe the bug

By following the installation guide the png-files are missing, and the color picker is broken. (fore example the hue.png is missing)

Environment

Angular CLI: 16.2.4 Node: 18.17.0 Package Manager: npm 9.8.1 Windows: 10 IDE: Intellij Community

Reproducer

No response

Angular version

16.2.4

PrimeNG version

16.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.0

Browser(s)

No response

Steps to reproduce the behavior

  1. Angular application setup with sass for styling
  2. Follow the installation guide.
  3. Use the ColorPicker in a project.

Expected behavior

grafik Displaying that way, no error messages or anything else in dev tools. Files are in the node_modules folder

102-97-98-105 avatar Oct 06 '23 22:10 102-97-98-105

I found a fix: Add the following to the top level styles.sass

/* You can add global styles to this file, and also import other style files */
.p-colorpicker-panel .p-colorpicker-color
    background: transparent url("./images/color.png") no-repeat left top


.p-colorpicker-panel .p-colorpicker-hue
   background: transparent url("./images/hue.png") no-repeat left top

The problem seems to be the styles generator that throws away the css styles of colorpicker-images.css

102-97-98-105 avatar Oct 07 '23 08:10 102-97-98-105

I cannot reproduce. I added in my project and all is working perfectly.

image

Maybe is better if you share a stackblitz or give more information.

Thanks

SoyDiego avatar Oct 07 '23 10:10 SoyDiego

@SoyDiego i think the op used sass theme https://github.com/primefaces/primeng-sass-theme/blob/main/theme-base/components/input/_colorpicker.scss which doesn't have the backround style and indeed there is no background image

Shouldn't colorpicker-images.css be included in colorpicker component? https://github.com/primefaces/primeng/blob/7216049475cdde34593d321181dbbb174e164dd8/src/app/components/colorpicker/colorpicker.ts#L74C38-L74C38

robbstankiewicz avatar Nov 08 '23 16:11 robbstankiewicz

Hi,

Could you please share a stackblitz reproducer so we can identify the issue clearly?

cetincakiroglu avatar Nov 09 '23 09:11 cetincakiroglu

@cetincakiroglu Looks like the resource images are corrupted in the latest build. I replaced the images and added some style in css. It worked.

FYI: style.css / style.scss

/* You can add global styles to this file, and also import other style files */
.p-colorpicker-panel .p-colorpicker-color {
	background: transparent url("assets/img/custom-color.png") no-repeat left top
}


.p-colorpicker-panel .p-colorpicker-hue {
	background: transparent url("assets/img/custom-hue.png") no-repeat left top !important;
}

custom-color.png custom-color

custom-hue.png custom-hue

mrafiqk avatar Oct 23 '24 04:10 mrafiqk

same

StefaniOSApps avatar Nov 02 '24 23:11 StefaniOSApps

Same here. Both versions 17.18.10 and 17.18.11 (with Angular 18).

faelpinho avatar Nov 07 '24 05:11 faelpinho

Hi,

Could you please share a stackblitz reproducer so we can identify the issue clearly?

If you want to reproduce, simply go to color picker on the primeng.org website (https://primeng.org/colorpicker) and select the Stackblitz for the Basic example

Eagle-Tim avatar Nov 07 '24 16:11 Eagle-Tim

Downgrading to 17.18.10 seems to be the solution for the time being...

rajabilal555 avatar Nov 20 '24 06:11 rajabilal555

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding! Best Regards,

mertsincan avatar Dec 25 '24 13:12 mertsincan

Hi @mertsincan @cetincakiroglu, this is still an issue...so many PrimeNG issues have been recently closed in a rush since the PrimeNG 18.0.0 release which are still issues and are even present even in newer releases like PrimeNG 19.0.2.

It has been present since PrimeNG 17.18.11 and all subsequent releases. Please fix this and please make sure to backport this fix to release PrimeNG 17.18.16 (non-LTS), many users can no longer use the ColorPicker since the 17.18.11 release 3 months ago without downloading the working images manually (see the working 17.18.10 links below) and overriding the global styles for class .p-colorpicker-panel .p-colorpicker-color/hue (see https://github.com/primefaces/primeng/issues/13820#issuecomment-2430890678). Make sure to rename the color.png and hue.png files else you will get the build errors:

X [ERROR] Two output files share the same path but have different contents: media\color.png
X [ERROR] Two output files share the same path but have different contents: media\hue.png

Related tickets: https://github.com/primefaces/primeng/issues/16449 https://github.com/primefaces/primeng/issues/16538 https://github.com/primefaces/primeng/issues/16586

The resources/images are working in PrimeNG 17.18.10: https://unpkg.com/browse/[email protected]/resources/images/ https://unpkg.com/browse/[email protected]/resources/images/color.png https://unpkg.com/browse/[email protected]/resources/images/hue.png https://unpkg.com/browse/[email protected]/resources/images/password-meter.png

They are no longer working/corrupted in the following PrimeNG versions, see for yourself by clicking the .png links. Something must have changed in the release process https://github.com/primefaces/primeng/compare/17.18.10...17.18.11 -> https://github.com/primefaces/primeng/blob/17.18.11/gulpfile.js#L39-L41

ThoSap avatar Dec 29 '24 20:12 ThoSap

@mertsincan @cetincakiroglu Guys, I'd appreciate if you can review tomorrow. There is a lot of demand from our users about this one. The brand new ColorPicker can wait, as we should make the current one right.

cagataycivici avatar May 07 '25 16:05 cagataycivici

Could you please try;

.p-colorpicker-panel .p-colorpicker-color-background {
	width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%) !important;
}


.p-colorpicker-panel .p-colorpicker-hue {
	background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red) !important;
}

mertsincan avatar May 07 '25 17:05 mertsincan

This will be automatically fixed in v20 since we're moving to shared primeuix, right now PrimeNG has its own fork. Still I think we should fix it for v19.1.x.

cagataycivici avatar May 08 '25 08:05 cagataycivici