Tagger UI improvements (#1605)

* Choose fields to tag
* Use check-circle for success icon
* Maintain fingerprint results
* Show scene details
* Maintain whitespace in TruncatedText
* Use undefine for img when not setting

ui/v2.5/src/components/Changelog/versions/v090.md

@@ -1,7 +1,9 @@
 ### ✨ New Features
+* Support excluding fields and editing tags when saving from scene tagger view. ([#1605](https://github.com/stashapp/stash/pull/1605))
 * Added not equals/greater than/less than modifiers for resolution criteria. ([#1568](https://github.com/stashapp/stash/pull/1568))
 
 ### 🎨 Improvements
+* Show current scene details in tagger view. ([#1605](https://github.com/stashapp/stash/pull/1605))
 * Removed stripes and added background colour to default performer images (old images can be downloaded from the PR link). ([#1609](https://github.com/stashapp/stash/pull/1609))
 * Added pt-BR language option. ([#1587](https://github.com/stashapp/stash/pull/1587))
 * Added de-DE language option. ([#1578](https://github.com/stashapp/stash/pull/1578))

ui/v2.5/src/components/Shared/Icon.tsx

@@ -2,10 +2,13 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp, SizeProp, library } from "@fortawesome/fontawesome-svg-core";
 import { faStar as fasStar } from "@fortawesome/free-solid-svg-icons";
-import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
+import {
+  faCheckCircle as farCheckCircle,
+  faStar as farStar,
+} from "@fortawesome/free-regular-svg-icons";
 
 // need these to use far and fas styles of stars
-library.add(fasStar, farStar);
+library.add(fasStar, farStar, farCheckCircle);
 
 interface IIcon {
   icon: IconProp;

ui/v2.5/src/components/Shared/SuccessIcon.tsx

@@ -6,7 +6,7 @@ interface ISuccessIconProps {
 }
 
 const SuccessIcon: React.FC<ISuccessIconProps> = ({ className }) => (
-  <Icon icon="check" className={className} color="#0f9960" />
+  <Icon icon={["far", "check-circle"]} className={className} color="#0f9960" />
 );
 
 export default SuccessIcon;

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

@@ -180,9 +180,11 @@ button.collapse-button.btn-primary:not(:disabled):not(.disabled):active {
   -webkit-box-orient: vertical;
   display: -webkit-box;
   overflow: hidden;
+  white-space: pre-line;
 
   &-tooltip .tooltip-inner {
     max-width: 300px;
+    white-space: pre-line;
   }
 }
 

ui/v2.5/src/components/Tagger/Config.tsx

@@ -11,7 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "src/components/Shared";
 import { useConfiguration } from "src/core/StashService";
 
-import { ITaggerConfig, ParseMode } from "./constants";
+import { ITaggerConfig, ParseMode, TagOperation } from "./constants";
 
 interface IConfigProps {
   show: boolean;
@@ -118,7 +118,7 @@ const Config: React.FC<IConfigProps> = ({ show, config, setConfig }) => {
                   onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                     setConfig({
                       ...config,
-                      tagOperation: e.currentTarget.value,
+                      tagOperation: e.currentTarget.value as TagOperation,
                     })
                   }
                   disabled={!config.setTags}

ui/v2.5/src/components/Tagger/IncludeButton.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { Icon } from "../Shared";
+
+interface IIncludeExcludeButton {
+  exclude: boolean;
+  disabled?: boolean;
+  setExclude: (v: boolean) => void;
+}
+
+export const IncludeExcludeButton: React.FC<IIncludeExcludeButton> = ({
+  exclude,
+  disabled,
+  setExclude,
+}) => (
+  <Button
+    onClick={() => setExclude(!exclude)}
+    disabled={disabled}
+    variant="minimal"
+    className={`${
+      exclude ? "text-danger" : "text-success"
+    } include-exclude-button`}
+  >
+    <Icon className="fa-fw" icon={exclude ? "times" : "check"} />
+  </Button>
+);
+
+interface IOptionalField {
+  exclude: boolean;
+  disabled?: boolean;
+  setExclude: (v: boolean) => void;
+}
+
+export const OptionalField: React.FC<IOptionalField> = ({
+  exclude,
+  setExclude,
+  children,
+}) => (
+  <div className={`optional-field ${!exclude ? "included" : "excluded"}`}>
+    <IncludeExcludeButton exclude={exclude} setExclude={setExclude} />
+    {children}
+  </div>
+);

ui/v2.5/src/components/Tagger/PerformerResult.tsx

@@ -3,12 +3,13 @@ import { Button, ButtonGroup } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
 import cx from "classnames";
 
-import { SuccessIcon, PerformerSelect } from "src/components/Shared";
+import { PerformerSelect } from "src/components/Shared";
 import * as GQL from "src/core/generated-graphql";
 import { ValidTypes } from "src/components/Shared/Select";
 import { IStashBoxPerformer, filterPerformer } from "./utils";
 
 import PerformerModal from "./PerformerModal";
+import { OptionalField } from "./IncludeButton";
 
 export type PerformerOperation =
   | { type: "create"; data: IStashBoxPerformer }
@@ -121,12 +122,22 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
           <b className="ml-2">{performer.name}</b>
         </div>
         <span className="ml-auto">
-          <SuccessIcon />
-          <FormattedMessage id="component_tagger.verb_matched" />:
+          <OptionalField
+            exclude={selectedSource === "skip"}
+            setExclude={(v) =>
+              v ? handlePerformerSkip() : setSelectedSource("existing")
+            }
+          >
+            <div>
+              <span className="mr-2">
+                <FormattedMessage id="component_tagger.verb_matched" />:
+              </span>
+              <b className="col-3 text-right">
+                {stashData.findPerformers.performers[0].name}
+              </b>
+            </div>
+          </OptionalField>
         </span>
-        <b className="col-3 text-right">
-          {stashData.findPerformers.performers[0].name}
-        </b>
       </div>
     );
   }