diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts index 30f8d45d4..f2cdbe2f2 100644 --- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts @@ -68,6 +68,7 @@ export class EditorComponent implements OnInit, OnChanges { glyphMargin: true, automaticLayout: true, readOnly: !this.canEdit, + extraEditorClassName: this.canEdit ? '' : 'disabled', }; } @@ -79,19 +80,12 @@ export class EditorComponent implements OnInit, OnChanges { this._diffEditor.getModifiedEditor().onDidChangeModelContent(() => { this.value = this._diffEditor.getModel().modified.getValue(); }); + this._setTheme(); } onCodeEditorInit(editor: ICodeEditor): void { this.codeEditor = editor; - (window as any).monaco.editor.defineTheme('redaction', { - base: 'vs', - inherit: true, - rules: [], - colors: { - 'editor.lineHighlightBackground': '#f4f5f7', - }, - }); - (window as any).monaco.editor.setTheme('redaction'); + this._setTheme(); } @Debounce() @@ -107,6 +101,34 @@ export class EditorComponent implements OnInit, OnChanges { this._diffEditor?.getModifiedEditor().setValue(this.diffValue); } + private _defineThemes(): void { + (window as any).monaco.editor.defineTheme('redaction', { + base: 'vs', + inherit: true, + rules: [], + colors: { + 'editor.lineHighlightBackground': '#f4f5f7', + }, + }); + (window as any).monaco.editor.defineTheme('redaction-disabled', { + base: 'vs', + inherit: true, + rules: [], + colors: { + 'editor.background': '#f4f5f7', + 'editor.foreground': '#9398a0', + 'editor.lineHighlightBackground': '#f4f5f7', + 'editorLineNumber.foreground': '#9398a0', + 'editorActiveLineNumber.foreground': '#9398a0', + }, + }); + } + + private _setTheme(): void { + this._defineThemes(); + (window as any).monaco.editor.setTheme(this.canEdit ? 'redaction' : 'redaction-disabled'); + } + private _handleMarginButtonClick(event: IEditorMouseEvent) { const isMarginButtonClick = event.target.detail.glyphMarginWidth && event.target.detail.glyphMarginWidth !== 0; if (isMarginButtonClick) { diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss index 1150600de..447ecdc50 100644 --- a/apps/red-ui/src/assets/styles/red-editor.scss +++ b/apps/red-ui/src/assets/styles/red-editor.scss @@ -1,5 +1,39 @@ @use 'variables'; +.monaco-diff-editor { + .editor.original { + right: 30px !important; // diffOverviewRuler size + left: unset !important; + } + + .editor.modified { + left: 0 !important; + width: unset !important; + } + + .diffOverview { + .diffOverviewRuler.original { + left: 15px !important; + } + + .diffOverviewRuler.modified { + right: 15px !important; + } + } +} + +.monaco-editor.disabled { + cursor: default; + + .monaco-mouse-cursor-text { + cursor: default; + } + + .cursors-layer > .cursor { + display: none !important; + } +} + .changed-row-marker { background: rgba(variables.$primary, 0.1); } diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 91c598cbb..4b83d585b 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -32,25 +32,3 @@ $iqser-yellow-2: vars.$yellow-2, $iqser-helpmode-primary: vars.$green-2 ); - -.monaco-diff-editor { - .editor.original { - right: 30px !important; // diffOverviewRuler size - left: unset !important; - } - - .editor.modified { - left: 0 !important; - width: unset !important; - } - - .diffOverview { - .diffOverviewRuler.original { - left: 15px !important; - } - - .diffOverviewRuler.modified { - right: 15px !important; - } - } -}