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:
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.
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
Solution
The solve for this issue could involve:
./media/lib/reinvented-color-wheel.css
or a new file, ex:./media/style.css
)./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.