adding the third option which is click and hover and need to finish the code with this option as well as figure out why the color hover appears to disappear when one clicks on the color decorator

This commit is contained in:
Aiday Marlen Kyzy 2023-06-01 18:24:51 +02:00
parent 2733c9dc3c
commit f3bb16afe7
No known key found for this signature in database
GPG key ID: 24A8B53DBD26FF4E
4 changed files with 11 additions and 5 deletions

View file

@ -352,7 +352,7 @@ export interface IEditorOptions {
/**
* Controls what is the condition to spawn a color picker from a color dectorator
*/
colorDecoratorsActivatedOn?: 'click' | 'hover';
colorDecoratorsActivatedOn?: 'click and hover' | 'click' | 'hover';
/**
* Controls the max number of color decorators that can be rendered in an editor at once.
*/
@ -5216,8 +5216,9 @@ export const EditorOptions = {
EditorOption.colorDecorators, 'colorDecorators', true,
{ description: nls.localize('colorDecorators', "Controls whether the editor should render the inline color decorators and color picker.") }
)),
colorDecoratorActivatedOn: register(new EditorStringEnumOption(EditorOption.colorDecoratorsActivatedOn, 'colorDecoratorsActivatedOn', 'hover' as 'hover' | 'click', ['hover', 'click'] as const, {
colorDecoratorActivatedOn: register(new EditorStringEnumOption(EditorOption.colorDecoratorsActivatedOn, 'colorDecoratorsActivatedOn', 'click and hover' as 'click and hover' | 'hover' | 'click', ['click and hover', 'hover', 'click'] as const, {
enumDescriptions: [
nls.localize('editor.colorDecoratorActivatedOn.clickAndHover', "Make the color picker appear both on click and hover of the color decorator"),
nls.localize('editor.colorDecoratorActivatedOn.hover', "Make the color picker appear on hover of the color decorator"),
nls.localize('editor.colorDecoratorActivatedOn.click', "Make the color picker appear on click of the color decorator")
],

View file

@ -34,7 +34,7 @@ export class ColorContribution extends Disposable implements IEditorContribution
private onMouseDown(mouseEvent: IEditorMouseEvent) {
const colorDecoratorsActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
if (colorDecoratorsActivatedOn !== 'click') {
if (colorDecoratorsActivatedOn !== 'click' && colorDecoratorsActivatedOn !== 'click and hover') {
return;
}

View file

@ -179,6 +179,11 @@ export class ModesHoverController implements IEditorContribution {
const onDecorator = target.element?.classList.contains('colorpicker-color-decoration');
const decoratorActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
console.log('onDecorator : ', onDecorator);
console.log('decoratorActivatedOn : ', decoratorActivatedOn);
// TODO: finish the following code whith the option 'click and hover''
// TODO: find out why the color hover seems to disappear when clicking on th box
if (onDecorator) {
if (decoratorActivatedOn === 'click') {
if (!this._activatedByColorDecoratorClick) {

4
src/vs/monaco.d.ts vendored
View file

@ -3437,7 +3437,7 @@ declare namespace monaco.editor {
/**
* Controls what is the condition to spawn a color picker from a color dectorator
*/
colorDecoratorsActivatedOn?: 'click' | 'hover';
colorDecoratorsActivatedOn?: 'click and hover' | 'click' | 'hover';
/**
* Controls the max number of color decorators that can be rendered in an editor at once.
*/
@ -4934,7 +4934,7 @@ declare namespace monaco.editor {
codeLensFontFamily: IEditorOption<EditorOption.codeLensFontFamily, string>;
codeLensFontSize: IEditorOption<EditorOption.codeLensFontSize, number>;
colorDecorators: IEditorOption<EditorOption.colorDecorators, boolean>;
colorDecoratorActivatedOn: IEditorOption<EditorOption.colorDecoratorsActivatedOn, 'click' | 'hover'>;
colorDecoratorActivatedOn: IEditorOption<EditorOption.colorDecoratorsActivatedOn, 'click and hover' | 'click' | 'hover'>;
colorDecoratorsLimit: IEditorOption<EditorOption.colorDecoratorsLimit, number>;
columnSelection: IEditorOption<EditorOption.columnSelection, boolean>;
comments: IEditorOption<EditorOption.comments, Readonly<Required<IEditorCommentsOptions>>>;