added view collection type

ui/src/scss/_form.scss

@@ -454,11 +454,10 @@ select {
         user-select: none;
         font-weight: 600;
         color: var(--txtHintColor);
-        font-size: var(--xsFontSize);
-        text-transform: uppercase;
+        font-size: var(--smFontSize);
         line-height: 1;
         padding-top: 12px;
-        padding-bottom: 2px;
+        padding-bottom: 3px;
         padding-left: var(--hPadding);
         padding-right: var(--hPadding);
         border: 0;
@@ -474,8 +473,11 @@ select {
         i {
             font-size: 0.96rem;
             line-height: 1;
-            margin-top: -2px;
-            margin-bottom: -2px;
+            margin-top: -1px;
+            margin-bottom: -1px;
+            &:before {
+                margin: 0;
+            }
         }
     }
     %input, label {
@@ -550,14 +552,23 @@ select {
             margin-left: -2px;
         }
     }
+    &.readonly,
     &.disabled {
+        label, %input {
+            background: var(--baseAlt1Color);
+        }
         > label {
-            color: var(--txtDisabledColor);
+            color: var(--txtHintColor);
         }
         &.required > label:after {
             opacity: 0.5;
         }
     }
+    &.disabled {
+        > label {
+            color: var(--txtDisabledColor);
+        }
+    }
 
     // checkbox/radio
     input[type="radio"],
@@ -1084,13 +1095,15 @@ select {
 // codemirror field
 .code-editor {
     @extend %input;
-
+    display: flex;
+    flex-direction: column;
+    width: 100%;
     .form-field label ~ & {
         padding-bottom: 6px;
         padding-top: 4px;
     }
-
     .cm-editor {
+        flex-grow: 1;
         border: 0 !important;
         outline: none !important;
         .cm-line {
@@ -1122,6 +1135,7 @@ select {
             }
         }
         .cm-scroller {
+            flex-grow: 1;
             outline: 0 !important;
             font-family: var(--monospaceFontFamily);
             font-size: var(--baseFontSize);
@@ -1145,6 +1159,9 @@ select {
             background-color: rgba(50, 140, 130, 0.1);
         }
     }
+    .ͼf {
+        color: var(--dangerColor);
+    }
 }
 
 // tinymce field