UI improvements (#726)

* Use rating stars in movie
* Make multiset button more obvious
* Hide select all/none buttons where not selectable
* Make add the default multi-set mode

ui/v2.5/src/components/List/ListFilter.tsx

@@ -361,7 +361,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
   }
 
   function renderMore() {
-    const options = [renderSelectAll(), renderSelectNone()];
+    const options = [renderSelectAll(), renderSelectNone()].filter((o) => o);
 
     if (props.otherOperations) {
       props.otherOperations

ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx

@@ -27,6 +27,7 @@ import {
   TextUtils,
   DurationUtils,
 } from "src/utils";
+import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars";
 import { MovieScenesPanel } from "./MovieScenesPanel";
 import { MovieScrapeDialog } from "./MovieScrapeDialog";
 
@@ -517,14 +518,16 @@ export const Movie: React.FC = () => {
               isEditing,
               onChange: setDirector,
             })}
-            {TableUtils.renderHtmlSelect({
+            <tr>
-              title: "Rating",
+              <td>Rating</td>
-              value: rating ?? "",
+              <td>
-              isEditing,
+                <RatingStars
-              onChange: (value: string) =>
+                  value={rating}
-                setRating(Number.parseInt(value, 10)),
+                  disabled={!isEditing}
-              selectOptions: ["", "1", "2", "3", "4", "5"],
+                  onSetRating={(value) => setRating(value)}
-            })}
+                />
+              </td>
+            </tr>
           </tbody>
         </Table>
 

ui/v2.5/src/components/Scenes/EditScenesDialog.tsx

@@ -22,10 +22,10 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
   const [studioId, setStudioId] = useState<string>();
   const [performerMode, setPerformerMode] = React.useState<
     GQL.BulkUpdateIdMode
-  >(GQL.BulkUpdateIdMode.Set);
+  >(GQL.BulkUpdateIdMode.Add);
   const [performerIds, setPerformerIds] = useState<string[]>();
   const [tagMode, setTagMode] = React.useState<GQL.BulkUpdateIdMode>(
-    GQL.BulkUpdateIdMode.Set
+    GQL.BulkUpdateIdMode.Add
   );
   const [tagIds, setTagIds] = useState<string[]>();
 

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -56,6 +56,7 @@ export const SceneList: React.FC<ISceneList> = ({
 
   const listData = useScenesList({
     zoomable: true,
+    selectable: true,
     otherOperations,
     renderContent,
     renderEditDialog: renderEditScenesDialog,

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

@@ -64,7 +64,7 @@ const MultiSet: React.FunctionComponent<IMultiSetProps> = (
       <InputGroup.Prepend>
         <Button
           size="sm"
-          variant="secondary"
+          variant="primary"
           onClick={() => props.onSetMode(nextMode())}
           title={getModeText()}
           disabled={props.disabled}

ui/v2.5/src/hooks/ListHook.tsx

@@ -62,6 +62,7 @@ interface IListHookOptions<T, E> {
   subComponent?: boolean;
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
   zoomable?: boolean;
+  selectable?: boolean;
   defaultZoomIndex?: number;
   otherOperations?: IListHookOperation<T>[];
   renderContent: (
@@ -426,8 +427,8 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       <ListFilter
         subComponent={options.subComponent}
         onFilterUpdate={updateQueryParams}
-        onSelectAll={onSelectAll}
+        onSelectAll={options.selectable ? onSelectAll : undefined}
-        onSelectNone={onSelectNone}
+        onSelectNone={options.selectable ? onSelectNone : undefined}
         zoomIndex={options.zoomable ? zoomIndex : undefined}
         onChangeZoom={options.zoomable ? onChangeZoom : undefined}
         otherOperations={otherOperations}