search

Alberplz / angular2-color-picker

Angular 2 Color Picker Directive, no dependences required.
MIT License
185 stars 82 forks source link

Makes color picker dialog responsive and adds cpWidth parameter #22

Closed sconix closed 8 years ago

sconix commented 8 years ago

This makes the need for cpHeight obsolete by making the dialog responsive. Added cpWidth parameter can be used to set the width of the dialog (to match the directive width with top/bottom placement for example).

Alberplz commented 8 years ago

Hi I see a line under the top slider and the text alpha control is outside cp

sconix commented 8 years ago

Let me try to re-produce this, maybe browser default styles are messing it up and I am missing some reset styles. What browser did you test with? I will make some tests and improvements to the styles during the weekend. I totally forgot to test with narrower settings than the default etc. so will test those and tweak the stules so that it will work in all situations.

sconix commented 8 years ago

I added the style fixes that should correct those issues you were seeing. I could not reproduce the extra white space after the preset colors though. So if that is a still issue then let me know the browser you tested with and I try to reproduce it. Also please let me know if you want me to do any other changes / fixes.

Alberplz commented 8 years ago

Hi Fails in Internet Explorer 11 and Safari(5.1.7) Same problem, text inputs overfow color picker dialog when is selected rgba or hsla

sconix commented 8 years ago

Weird I did test with IE 11 and fixed that problem as well. Let me check once I get back to my computer that if I forget to commit them, it seems that I only see one commit in here so I guess I accidentally left that commit unpushed.

Yep had it committed in wrong branch, should have double checked that all changes was pushed. With that IE style fix it should work also in Safari, at least for me Safari works now.

Alberplz commented 8 years ago

Internet Explorer is OK, In Safari(5.1.7) for windows and I see: safari

What version are you using?

Alberplz commented 8 years ago

The new 2 options a very nice, but could be possible having the sliders, color selected...with the same widths and positions please? I would be nice the color picker to have the same appearence in all versions. In the template folder could be added news templates...

sconix commented 8 years ago

I tested with latest safari in OS X. Isn't the windows Safari like really old? I am not sure if that should be supported, not sure if Angular 2 even supports such old version of Safari. At least as far as I know the preferred way to do layouts in Angular 2 is flexbox and those really old browsers wont support that.

Not sure what you mean with your latest comment. The appearance should be the same as previously.

Alberplz commented 8 years ago

If works with Safari (7+) is OK, (now I cant access to mac a to test in Safari), could you validate that?

My last comment, sliders width, paddings...: colorpickers

sconix commented 8 years ago

Yes I tested with OS X and safari 7 and it looks the same as in Chrome, Firefox and IE 11.

Ok I get it now, I try to tweak the paddings / width closer to the originals. So give me an hour and I will update the pull request.

sconix commented 8 years ago

I changed the paddings closer to your original paddings and there should now be only really small difference which I left in for more consistent padding values around the widget. I hope they are now to your liking.

I also merged changes from your master branch for this and the preset colors pull request.

Alberplz commented 8 years ago

<input [colorPicker]="color" (colorPickerChange)="hex8=onChangeColor($event)"/>