feat: change css to allow color picker selector to show (refs #634)

[adeptflax]

Please check if the PR fulfills these requirements

• It's submitted to right branch according to our branching model
• It's right issue type on title
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes/features)
• Docs have been added/updated (for bug fixes/features)
• It does not introduce a breaking change or has description for the breaking change

Description

This pull request changes the css so that the color slider from the color picker shows up. It would make it easier for people to select colors. I'm not sure why this was hidden. I had to add some css to make it show up correctly.

Before:

After:

[adeptflax]

I realized a bug in my commit. When there is an additional option in the color picker. The color slider doesn't render correctly. I need to get it to change height somehow

closed

expanded

[adeptflax]

Just noticed the color picker div isn't in the correct position when expanded.

[lja1018]

@adeptflax
Thank you for the PR.
Can you fix the colors slider so that they are properly rendered?

[adeptflax]

@lja1018 yeah, I was going to do that. I'm going to work on it now.

[adeptflax]

Would It be better if the color picker expanded below the activation button and hide the arrow or expanded upward or something else?

[adeptflax]

https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/src/js/ui/filter.js#L418
https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/src/js/ui/filter.js#L443

Commenting out these lines, fixes the weird rending issues.

[adeptflax]

how it looks now.

[adeptflax]

Expanding upward seems like the better idea, I'll see if I can get that working.

[adeptflax]

I think the color slider should be moved above the color pallet.

[lja1018]

@adeptflax
Does it mean that the colour slider expands up, not down?

[adeptflax]

@lja1018 I meant the color picker box expands downward. I have version where it expands upward. I need to get some alignment bug fixed with it. I'm going to add a opacity setting to the draw tool.

[adeptflax]

ok got it fixed. I added an option to set the opacity of the draw tool

[lja1018]

@adeptflax
Thank you for the PR.
It will take some time because a detailed review is needed as it can affect usability.

[adeptflax]

New Filter UI:

Things I changed:

• Added more filters.
• Remove redundant filters. I added Tint to the blend filter. I remove multiply because it was just an option in the blend filter. Color Filter and Remove White where the same filter, except color filter tried to use the alpha channel on "removeColor", which isn't supported on fabric yet.
• add numerical input to filter values
• I made it so filters are always processed in a consistent order. In the current version depending on the order on which you selected the filters the image will look differently. It redid it in a similar way as this fabric.js example did.

Other

The filter code was really badly written. I'll fix the conflicts and update the tests later. I will be adding more features in the coming weeks.

[lja1018]

@adeptflax
Thank you for the new filter UI commit.
But it doesn't fit with this PR and I need to talk to our team.
Can you upload the commit(filter UI) to another PR?(and revert commit)

[adeptflax]

I'll revert when I get around to it. I think I will just maintain my own fork of this repo. I don't agree with a lot of the design decisions of this repo.

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[dadlaniTarun]

@adeptflax is there any update regarding this PR???

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale]

This issue will be closed due to inactivity. Thanks for your contribution!