Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ColorPicker: *.png missing #13820

Closed
102-97-98-105 opened this issue Oct 6, 2023 · 11 comments
Closed

ColorPicker: *.png missing #13820

102-97-98-105 opened this issue Oct 6, 2023 · 11 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@102-97-98-105
Copy link

102-97-98-105 commented Oct 6, 2023 •
edited
Loading

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 102-97-98-105 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 6, 2023
@102-97-98-105
Copy link
Author

102-97-98-105 commented Oct 7, 2023 •
edited
Loading

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

@SoyDiego
Copy link
Contributor

SoyDiego commented Oct 7, 2023

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

@sitterrus
Copy link

sitterrus commented Nov 8, 2023 •
edited
Loading

@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

@cetincakiroglu
Copy link
Contributor

Hi,

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

@mrafiqk
Copy link

mrafiqk commented Oct 23, 2024

@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

@StefaniOSApps
Copy link

same

@faelpinho
Copy link

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

@faelpinho faelpinho mentioned this issue Nov 7, 2024
Open
@Eagle-Tim
Copy link

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

@rajabilal555
Copy link

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

@mertsincan
Copy link
Member

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,

@ThoSap
Copy link
Contributor

ThoSap commented Dec 29, 2024 •
edited
Loading

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 #13820 (comment)).
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:
#16449
#16538
#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 17.18.10...17.18.11 -> https://github.com/primefaces/primeng/blob/17.18.11/gulpfile.js#L39-L41

This was referenced Dec 29, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests