Fix yaml editor styling (#11823)

* fix codemirror styling * fix keyvalue codemirror style * fix codemirror json annotation display * fix fold gutters
rancher · Sep 18, 2024 · 2dbcd6c · 2dbcd6c
1 parent 1d51ed5
commit 2dbcd6c
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 68 deletions.
diff --git a/shell/components/CodeMirror.vue b/shell/components/CodeMirror.vue
@@ -57,7 +57,7 @@ export default {
         theme:                   `base16-${ theme }`,
         lineNumbers:             true,
         line:                    true,
-        styleActiveLine:         true,
+        styleActiveLine:         false,
         lineWrapping:            true,
         foldGutter:              true,
         styleSelectedText:       true,
@@ -66,6 +66,7 @@ export default {
 
       if (this.asTextArea) {
         out.lineNumbers = false;
+        out.foldGutter = false;
         out.tabSize = 0;
         out.extraKeys = { Tab: false };
       }
@@ -178,6 +179,7 @@ export default {
         :value="value"
         :options="combinedOptions"
         :disabled="isDisabled"
+        :original-style="true"
         @ready="onReady"
         @input="onInput"
         @changes="onChanges"
@@ -194,72 +196,8 @@ export default {
 <style lang="scss">
   $code-mirror-animation-time: 0.1s;
 
-  .codemirror-container {
-    z-index: 0;
-
-    // Keyboard mapping overlap
-    .keymap.overlay {
-      position: absolute;
-      display: flex;
-      top: 7px;
-      right: 7px;
-      z-index: 1;
-      cursor: pointer;
-
-      .keymap-indicator {
-        width: 48px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: 1px solid transparent;
-        color: var(--darker);
-        background-color: var(--overlay-bg);
-        font-size: 12px;
-
-        .close-indicator {
-          width: 0;
-
-          .icon-close {
-            color: var(--primary);
-            opacity: 0;
-          }
-        }
-
-        .keymap-icon {
-          font-size: 24px;
-          opacity: 0.8;
-          transition: margin-right $code-mirror-animation-time ease-in-out;
-        }
-
-        &:hover {
-          border: 1px solid var(--primary);
-          border-radius: var(--border-radius);;
-
-          .close-indicator {
-            margin-left: -6px;
-            width: auto;
-
-            .icon-close {
-              opacity: 1;
-              transition: opacity $code-mirror-animation-time ease-in-out $code-mirror-animation-time; // Only animate when being shown
-            }
-          }
-
-          .keymap-icon {
-            opacity: 0.6;
-            margin-right: 10px;
-          }
-        }
-      }
-    }
-
-    .vue-codemirror .CodeMirror {
-      height: initial;
-      background: none
-    }
-
-    &.as-text-area {
+  .code-mirror {
+    &.as-text-area .codemirror-container{
       min-height: 40px;
       position: relative;
       display: block;
@@ -345,6 +283,83 @@ export default {
         color: var(--primary-text);
         background-color: var(--primary);
       }
+
+      .CodeMirror-gutters .CodeMirror-foldgutter:empty {
+        display: none;
+      }
+    }
+  }
+
+  .code-mirror .codemirror-container {
+    z-index: 0;
+    font-size: inherit !important;
+
+    // Keyboard mapping overlap
+    .keymap.overlay {
+      position: absolute;
+      display: flex;
+      top: 7px;
+      right: 7px;
+      z-index: 1;
+      cursor: pointer;
+
+      .keymap-indicator {
+        width: 48px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid transparent;
+        color: var(--darker);
+        background-color: var(--overlay-bg);
+        font-size: 12px;
+
+        .close-indicator {
+          width: 0;
+
+          .icon-close {
+            color: var(--primary);
+            opacity: 0;
+          }
+        }
+
+        .keymap-icon {
+          font-size: 24px;
+          opacity: 0.8;
+          transition: margin-right $code-mirror-animation-time ease-in-out;
+        }
+
+        &:hover {
+          border: 1px solid var(--primary);
+          border-radius: var(--border-radius);;
+
+          .close-indicator {
+            margin-left: -6px;
+            width: auto;
+
+            .icon-close {
+              opacity: 1;
+              transition: opacity $code-mirror-animation-time ease-in-out $code-mirror-animation-time; // Only animate when being shown
+            }
+          }
+
+          .keymap-icon {
+            opacity: 0.6;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
+    //rm no longer extant selector
+    .CodeMirror {
+      height: initial;
+      background: none
+    }
+
+    .CodeMirror-gutters {
+      background: inherit;
     }
+
   }
 </style>
diff --git a/shell/components/YamlEditor.vue b/shell/components/YamlEditor.vue
@@ -103,7 +103,7 @@ export default {
         mode:            'yaml',
         lint:            !readOnly,
         lineNumbers:     !readOnly,
-        styleActiveLine: true,
+        styleActiveLine: false,
         tabSize:         2,
         indentWithTabs:  false,
         cursorBlinkRate: ( readOnly ? -1 : 530 ),