Make multiset mode buttons more obvious (#1435)

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

@@ -7,6 +7,7 @@
 * Added [DLNA server](/settings?tab=dlna). ([#1364](https://github.com/stashapp/stash/pull/1364))
 
 ### 🎨 Improvements
+* Make multi-set mode buttons more obvious in multi-edit dialog. ([#1435](https://github.com/stashapp/stash/pull/1435))
 * Filter modifiers and sort by options are now sorted alphabetically. ([#1406](https://github.com/stashapp/stash/pull/1406))
 * Add `CreatedAt` and `UpdatedAt` (and `FileModTime` where applicable) to API objects. ([#1421](https://github.com/stashapp/stash/pull/1421))
 * Add Studios Performer filter criterion. ([#1405](https://github.com/stashapp/stash/pull/1405))

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

@@ -1,8 +1,7 @@
 import * as React from "react";
 
 import * as GQL from "src/core/generated-graphql";
-import { Button, InputGroup } from "react-bootstrap";
+import { Button, ButtonGroup } from "react-bootstrap";
-import { Icon } from "src/components/Shared";
 import { FilterSelect } from "./Select";
 
 type ValidTypes =
@@ -23,25 +22,20 @@ interface IMultiSetProps {
 const MultiSet: React.FunctionComponent<IMultiSetProps> = (
   props: IMultiSetProps
 ) => {
+  const modes = [
+    GQL.BulkUpdateIdMode.Set,
+    GQL.BulkUpdateIdMode.Add,
+    GQL.BulkUpdateIdMode.Remove,
+  ];
+
   function onUpdate(items: ValidTypes[]) {
     props.onUpdate(items);
   }
 
-  function getModeIcon() {
+  function getModeText(mode: GQL.BulkUpdateIdMode) {
-    switch (props.mode) {
+    switch (mode) {
       case GQL.BulkUpdateIdMode.Set:
-        return "pencil-alt";
+        return "Overwrite";
-      case GQL.BulkUpdateIdMode.Add:
-        return "plus";
-      case GQL.BulkUpdateIdMode.Remove:
-        return "times";
-    }
-  }
-
-  function getModeText() {
-    switch (props.mode) {
-      case GQL.BulkUpdateIdMode.Set:
-        return "Set";
       case GQL.BulkUpdateIdMode.Add:
         return "Add";
       case GQL.BulkUpdateIdMode.Remove:
@@ -49,31 +43,25 @@ const MultiSet: React.FunctionComponent<IMultiSetProps> = (
     }
   }
 
-  function nextMode() {
+  function renderModeButton(mode: GQL.BulkUpdateIdMode) {
-    switch (props.mode) {
+    return (
-      case GQL.BulkUpdateIdMode.Set:
+      <Button
-        return GQL.BulkUpdateIdMode.Add;
+        variant="primary"
-      case GQL.BulkUpdateIdMode.Add:
+        active={props.mode === mode}
-        return GQL.BulkUpdateIdMode.Remove;
+        size="sm"
-      case GQL.BulkUpdateIdMode.Remove:
+        onClick={() => props.onSetMode(mode)}
-        return GQL.BulkUpdateIdMode.Set;
+        disabled={props.disabled}
-    }
+      >
+        {getModeText(mode)}
+      </Button>
+    );
   }
 
   return (
-    <InputGroup className="multi-set">
+    <div>
-      <InputGroup.Prepend>
+      <ButtonGroup className="button-group-above">
-        <Button
+        {modes.map((m) => renderModeButton(m))}
-          size="sm"
+      </ButtonGroup>
-          variant="primary"
-          onClick={() => props.onSetMode(nextMode())}
-          title={getModeText()}
-          disabled={props.disabled}
-        >
-          <Icon icon={getModeIcon()} className="fa-fw" />
-        </Button>
-      </InputGroup.Prepend>
-
       <FilterSelect
         type={props.type}
         isDisabled={props.disabled}
@@ -82,7 +70,7 @@ const MultiSet: React.FunctionComponent<IMultiSetProps> = (
         onSelect={onUpdate}
         ids={props.ids ?? []}
       />
-    </InputGroup>
+    </div>
   );
 };
 

ui/v2.5/src/index.scss

@@ -631,3 +631,13 @@ div.dropdown-menu {
   border-color: inherit;
   box-shadow: inherit;
 }
+
+.button-group-above {
+  .btn:first-child {
+    border-bottom-left-radius: 0;
+  }
+
+  .btn:last-child {
+    border-bottom-right-radius: 0;
+  }
+}