[Feature] Responsive Color Picker

[ryanraposo]

Responsive Color Picker

The color picker in the Color view should automatically resize to fit the view.

Relevant Code

The 'Color' view in CodeUI is a Webview, which is no different than an ordinary webpage.

The HTML comes from a template literal:

https://github.com/ryanraposo/codeui/blob/fff58bb5f8cb6147e5db15d18f2a2a6eeb354fe4/src/color.ts#L65-L87

This is the JavaScript behind the view:

https://github.com/ryanraposo/codeui/blob/fff58bb5f8cb6147e5db15d18f2a2a6eeb354fe4/media/main.js#L5-L49

Currently, there is no CSS other than the stylesheet included with the color picker package:

https://github.com/ryanraposo/codeui/blob/2325927c357e0db5fe85b1f8bba66bfbd53c413e/media/lib/reinvented-color-wheel.css#L1-L42

Note: the package, reinvented-color-picker, is located in codeui/media alongside main.js (above). It is stored locally (not via npm) in the lib folder:

media
    └main.js
    └───lib
        └ reinvented-color-wheel.min.css
        └ reinvented-color-wheel.min.js

Solution

The solve for this issue could involve:

• CSS (./media/lib/reinvented-color-wheel.css or a new file, ex: ./media/style.css)
• Manipulation of the ReinventedColorWheel object and it's properties. See ./media/main.js:

https://github.com/ryanraposo/codeui/blob/fff58bb5f8cb6147e5db15d18f2a2a6eeb354fe4/media/main.js#L36-L47

• The VS Code Extension API. I can help with this side of things if you are only comfortable with the 'traditional web' stuff.

  An example is the onDidChangeVisibility event of the WebviewView. For the most part, we can work within the webview--but if we want to detect open/close/collapse events for the view container itself, we need to 'ask' VS Code.

[ryanraposo]

The color picker is now centered in the view. See: #49

Thanks, @devXprite.