diff --git a/angular.json b/angular.json index ff5f8185f..063e876f9 100644 --- a/angular.json +++ b/angular.json @@ -36,7 +36,7 @@ "apps/red-ui/src/manifest.webmanifest" ], "styles": ["apps/red-ui/src/styles.scss"], - "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js"] + "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js", "node_modules/ace-builds/src-min/ace.js"] }, "configurations": { "production": { diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html index 01704968e..def455fdf 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html @@ -67,7 +67,7 @@ 0) { diff --git a/apps/red-ui/src/assets/ace-editor/theme-redaction.js b/apps/red-ui/src/assets/ace-editor/theme-redaction.js new file mode 100644 index 000000000..38fb52867 --- /dev/null +++ b/apps/red-ui/src/assets/ace-editor/theme-redaction.js @@ -0,0 +1,3 @@ +ace.define('ace/theme/redaction', [], function (exports, object) { + object.cssClass = 'ace-redaction'; +}); diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss index 78370be7c..e831d23f2 100644 --- a/apps/red-ui/src/assets/styles/red-editor.scss +++ b/apps/red-ui/src/assets/styles/red-editor.scss @@ -18,3 +18,42 @@ background: rgba($yellow-1, 0.3); z-index: 40; } + +.ace-redaction { + background-color: $white; + color: $accent; + + .ace_gutter { + background: $grey-2; + color: $grey-7; + } + + .ace_print-margin { + width: 0; + background: $white; + } + + .ace_cursor { + color: $grey-5; + } + + .ace_marker-layer .ace_selection { + background: $grey-4; + } + + .ace_multiselect .ace_selection.ace_start { + box-shadow: 0 0 3px 0 $white; + } + + .ace_gutter-active-line { + background-color: $grey-4; + } + + .ace_marker-layer .ace_selected-word { + border: 1px solid $grey-4; + } + + .ace_invisible { + color: $grey-4; + } +}