Update scene filename parser input styling (#1956)

* update scene filename parser input styling
* update parser field rating classnames

ui/v2.5/src/components/SceneFilenameParser/SceneParserRow.tsx

@@ -11,6 +11,7 @@ import {
   StudioSelect,
 } from "src/components/Shared";
 import { TextUtils } from "src/utils";
+import cx from "classnames";
 
 class ParserResult<T> {
   public value?: T;
@@ -121,7 +122,7 @@ function SceneParserStringField(props: ISceneParserFieldProps<string>) {
       <td>
         <Form.Group>
           <Form.Control
-            readOnly
+            disabled
             className={props.className}
             defaultValue={result.originalValue || ""}
           />
@@ -164,13 +165,13 @@ function SceneParserRatingField(
       <td>
         <Form.Group>
           <Form.Control
-            readOnly
+            disabled
-            className={props.className}
+            className={cx("input-control text-input", props.className)}
             defaultValue={result.originalValue || ""}
           />
           <Form.Control
             as="select"
-            className={props.className}
+            className={cx("input-control", props.className)}
             disabled={!props.parserResult.isSet}
             value={props.parserResult.value?.toString()}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
@@ -216,8 +217,14 @@ function SceneParserPerformerField(props: ISceneParserFieldProps<string[]>) {
       </td>
       <td>
         <Form.Group className={props.className}>
-          <PerformerSelect isDisabled isMulti ids={originalPerformers} />
           <PerformerSelect
+            isDisabled
+            isMulti
+            ids={originalPerformers}
+            className="parser-field-performers-select"
+          />
+          <PerformerSelect
+            className="parser-field-performers-select"
             isMulti
             isDisabled={!props.parserResult.isSet}
             onSelect={(items) => {
@@ -253,8 +260,14 @@ function SceneParserTagField(props: ISceneParserFieldProps<string[]>) {
       </td>
       <td>
         <Form.Group className={props.className}>
-          <TagSelect isDisabled isMulti ids={originalTags} />
           <TagSelect
+            isDisabled
+            isMulti
+            ids={originalTags}
+            className="parser-field-tags-select"
+          />
+          <TagSelect
+            className="parser-field-tags-select"
             isMulti
             isDisabled={!props.parserResult.isSet}
             onSelect={(items) => {
@@ -292,8 +305,13 @@ function SceneParserStudioField(props: ISceneParserFieldProps<string>) {
       </td>
       <td>
         <Form.Group className={props.className}>
-          <StudioSelect isDisabled ids={originalStudio} />
           <StudioSelect
+            isDisabled
+            ids={originalStudio}
+            className="parser-field-studio-select"
+          />
+          <StudioSelect
+            className="parser-field-studio-select"
             isDisabled={!props.parserResult.isSet}
             onSelect={(items) => {
               maybeValueChanged(items[0].id);
@@ -390,7 +408,7 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Rating") && (
         <SceneParserRatingField
           key="rating"
-          className="parser-field-rating input-control text-input"
+          className="parser-field-rating"
           parserResult={props.scene.rating}
           onSetChanged={(isSet) =>
             onRatingChanged(isSet, props.scene.rating.value ?? undefined)
@@ -403,7 +421,7 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Performers") && (
         <SceneParserPerformerField
           key="performers"
-          className="parser-field-performers input-control text-input"
+          className="parser-field-performers"
           parserResult={props.scene.performers}
           originalParserResult={props.scene.performers}
           onSetChanged={(set) =>
@@ -417,7 +435,7 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Tags") && (
         <SceneParserTagField
           key="tags"
-          className="parser-field-tags input-control text-input"
+          className="parser-field-tags"
           parserResult={props.scene.tags}
           originalParserResult={props.scene.tags}
           onSetChanged={(isSet) =>
@@ -431,7 +449,7 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Studio") && (
         <SceneParserStudioField
           key="studio"
-          className="parser-field-studio input-control text-input"
+          className="parser-field-studio"
           parserResult={props.scene.studio}
           originalParserResult={props.scene.studio}
           onSetChanged={(set) =>

ui/v2.5/src/components/SceneFilenameParser/styles.scss

@@ -26,6 +26,12 @@
     width: 30ch;
   }
 
+  .parser-field-performers-select,
+  .parser-field-tags-select,
+  .parser-field-studio-select {
+    margin-bottom: 0.5rem;
+  }
+
   .parser-field-tags {
     width: 30ch;
   }

ui/v2.5/src/index.scss

@@ -73,13 +73,6 @@ dd {
   }
 }
 
-.text-input,
-.text-input:focus,
-.text-input[readonly],
-.text-input:disabled {
-  background-color: $textfield-bg;
-}
-
 .input-control,
 .input-control:focus,
 .input-control:disabled {
@@ -90,6 +83,13 @@ dd {
   opacity: 0.8;
 }
 
+.text-input,
+.text-input:focus,
+.text-input[readonly],
+.text-input:disabled {
+  background-color: $textfield-bg;
+}
+
 textarea.text-input {
   line-height: 2.5ex;
   min-height: 12ex;