Fix disabled state in management

Author: jochenklar

rdmo/core/assets/scss/_bs53/base/typography.scss

@@ -108,8 +108,14 @@ button.unstyled {
 }
 
 .bi {
-  font-weight: bold;
-  -webkit-text-stroke: 0.5px currentColor;
+    font-weight: bold;
+    -webkit-text-stroke: 0.5px currentColor;
+
+    &.disabled,
+    &:disabled {
+        color: var(--bs-secondary-color) !important;
+        cursor: not-allowed !important;
+    }
 }
 
 .cursor-pointer {

rdmo/management/assets/js/components/common/DragAndDrop.js

@@ -16,8 +16,12 @@ const Drag = ({ element, show=true }) => {
 
   drag(dragRef)
 
+  const className = classNames('bi bi-arrows-move drag', {
+    'disabled': element.read_only
+  })
+
   return show && <span className="drag">
-    <i className="bi bi-arrows-move drag" ref={dragRef} aria-hidden="true"></i>
+    <i className={className} ref={dragRef} aria-hidden="true"></i>
   </span>
 }
 

rdmo/management/assets/js/components/edit/common/CodeMirror.js

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
 import get from 'lodash/get'
+import { EditorView } from '@codemirror/view'
 import ReactCodeMirror from '@uiw/react-codemirror'
 import { html } from '@codemirror/lang-html'
 
@@ -22,16 +23,23 @@ const CodeMirror = ({ element, field, onChange }) => {
         errors = get(element, ['errors', field])
 
   const className = classNames('codemirror form-control', {
-    'is-invalid': !isEmpty(errors)
+    'is-invalid': !isEmpty(errors),
+    'disabled': element.read_only
   })
 
   const value = isNil(element[field]) ? '' : element[field]
 
+  const extensions = [html()]
+
+  if (element.read_only) {
+    extensions.push(EditorView.editable.of(false))
+  }
+
   return (
     <div className="mb-3">
       <label className="control-label" htmlFor={id}>{label}</label>
 
-      <ReactCodeMirror className={className} id={id} value={value} extensions={[html()]}
+      <ReactCodeMirror className={className} id={id} value={value} extensions={extensions}
                        onChange={(value) => onChange(field, value)} disabled={element.read_only} />
 
       <ErrorList errors={errors} />

rdmo/management/assets/scss/management.scss

@@ -18,20 +18,6 @@
         padding: 0.3rem 0.75rem;
     }
 
-//     .pull-right {
-//         .element-link,
-//         .element-btn-link,
-//         .element-button {
-//             margin-left: 4px;
-
-//             &.disabled,
-//             &:disabled {
-//                 color: #ccc !important;
-//                 cursor: not-allowed !important;
-//             }
-//         }
-//     }
-
     .drag {
         color: var(--rdmo-color-link);
 
@@ -118,6 +104,12 @@
         outline: 0;
         box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
     }
+
+    &.disabled {
+        .cm-scroller {
+            background-color: var(--bs-secondary-bg);
+        }
+    }
 }
 
 .field-diff {