Skip to content

Commit

Permalink
Merge pull request #6 from cj12312021/fit-cards-plugin
Browse files Browse the repository at this point in the history
Fit cards plugin improvements
  • Loading branch information
cj12312021 authored Jan 22, 2024
2 parents 54977cc + 1ec12c8 commit d95b103
Show file tree
Hide file tree
Showing 10 changed files with 189 additions and 90 deletions.
35 changes: 35 additions & 0 deletions ui/v2.5/src/components/Movies/MovieCardGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useRef } from "react";
import * as GQL from "src/core/generated-graphql";
import { MovieCard } from "./MovieCard";
import { useContainerDimensions } from "../Shared/GridCard";

interface IMovieCardGrid {
movies: GQL.MovieDataFragment[];
selectedIds: Set<string>;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}

export const MovieCardGrid: React.FC<IMovieCardGrid> = ({
movies,
selectedIds,
onSelectChange,
}) => {
const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);
return (
<div className="row justify-content-center" ref={componentRef}>
{movies.map((p) => (
<MovieCard
key={p.id}
containerWidth={width}
movie={p}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
/>
))}
</div>
);
};
27 changes: 7 additions & 20 deletions ui/v2.5/src/components/Movies/MovieList.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useIntl } from "react-intl";
import cloneDeep from "lodash-es/cloneDeep";
import Mousetrap from "mousetrap";
Expand All @@ -18,9 +18,8 @@ import {
} from "../List/ItemList";
import { ExportDialog } from "../Shared/ExportDialog";
import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
import { MovieCard } from "./MovieCard";
import { MovieCardGrid } from "./MovieCardGrid";
import { EditMoviesDialog } from "./EditMoviesDialog";
import { useContainerDimensions } from "../Shared/GridCard";

const MovieItemList = makeItemList({
filterMode: GQL.FilterMode.Movies,
Expand Down Expand Up @@ -104,9 +103,6 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {
setIsExportDialogOpen(true);
}

const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);

function renderContent(
result: GQL.FindMoviesQueryResult,
filter: ListFilterModel,
Expand Down Expand Up @@ -134,20 +130,11 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {

if (filter.displayMode === DisplayMode.Grid) {
return (
<div className="row justify-content-center" ref={componentRef}>
{result.data.findMovies.movies.map((p) => (
<MovieCard
key={p.id}
containerWidth={width}
movie={p}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
/>
))}
</div>
<MovieCardGrid
movies={result.data.findMovies.movies}
selectedIds={selectedIds}
onSelectChange={onSelectChange}
/>
);
}
if (filter.displayMode === DisplayMode.List) {
Expand Down
39 changes: 39 additions & 0 deletions ui/v2.5/src/components/Performers/PerformerCardGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { useRef } from "react";
import * as GQL from "src/core/generated-graphql";
import { IPerformerCardExtraCriteria, PerformerCard } from "./PerformerCard";
import { useContainerDimensions } from "../Shared/GridCard";

interface IPerformerCardGrid {
performers: GQL.PerformerDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
extraCriteria?: IPerformerCardExtraCriteria;
}

export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
performers,
selectedIds,
onSelectChange,
extraCriteria,
}) => {
const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);
return (
<div className="row justify-content-center" ref={componentRef}>
{performers.map((p) => (
<PerformerCard
key={p.id}
containerWidth={width}
performer={p}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
extraCriteria={extraCriteria}
/>
))}
</div>
);
};
31 changes: 10 additions & 21 deletions ui/v2.5/src/components/Performers/PerformerList.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import cloneDeep from "lodash-es/cloneDeep";
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useIntl } from "react-intl";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
Expand All @@ -19,12 +19,12 @@ import { DisplayMode } from "src/models/list-filter/types";
import { PerformerTagger } from "../Tagger/performers/PerformerTagger";
import { ExportDialog } from "../Shared/ExportDialog";
import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
import { IPerformerCardExtraCriteria, PerformerCard } from "./PerformerCard";
import { IPerformerCardExtraCriteria } from "./PerformerCard";
import { PerformerListTable } from "./PerformerListTable";
import { EditPerformersDialog } from "./EditPerformersDialog";
import { cmToImperial, cmToInches, kgToLbs } from "src/utils/units";
import TextUtils from "src/utils/text";
import { useContainerDimensions } from "../Shared/GridCard";
import { PerformerCardGrid } from "./PerformerCardGrid";

const PerformerItemList = makeItemList({
filterMode: GQL.FilterMode.Performers,
Expand Down Expand Up @@ -235,9 +235,6 @@ export const PerformerList: React.FC<IPerformerList> = ({
setIsExportDialogOpen(true);
}

const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);

function renderContent(
result: GQL.FindPerformersQueryResult,
filter: ListFilterModel,
Expand Down Expand Up @@ -267,21 +264,13 @@ export const PerformerList: React.FC<IPerformerList> = ({

if (filter.displayMode === DisplayMode.Grid) {
return (
<div className="row justify-content-center" ref={componentRef}>
{result.data.findPerformers.performers.map((p) => (
<PerformerCard
key={p.id}
containerWidth={width}
performer={p}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
extraCriteria={extraCriteria}
/>
))}
</div>
<PerformerCardGrid
performers={result.data.findPerformers.performers}
zoomIndex={filter.zoomIndex}
selectedIds={selectedIds}
onSelectChange={onSelectChange}
extraCriteria={extraCriteria}
/>
);
}
if (filter.displayMode === DisplayMode.List) {
Expand Down
6 changes: 5 additions & 1 deletion ui/v2.5/src/components/Scenes/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,10 @@ textarea.scene-description {
}
}

.justify-content-center .studio-card .studio-card-image {
width: 100%;
}

.studio-card {
padding: 0.5rem;

Expand All @@ -99,7 +103,7 @@ textarea.scene-description {
max-height: 150px;
object-fit: contain;
vertical-align: middle;
width: 100%;
width: 320px;

@media (max-width: 576px) {
width: 100%;
Expand Down
7 changes: 1 addition & 6 deletions ui/v2.5/src/components/Shared/GridCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,7 @@ interface ICardProps {
export const useContainerDimensions = (
myRef: React.RefObject<HTMLDivElement>
) => {
const overflow = window?.visualViewport?.height! < window.innerHeight;
const defaultWidth = overflow ? window.innerWidth - 15 : window.innerWidth;
const [dimensions, setDimensions] = useState({
width: defaultWidth,
height: 0,
});
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

useEffect(() => {
const getDimensions = () => ({
Expand Down
38 changes: 38 additions & 0 deletions ui/v2.5/src/components/Studios/StudioCardGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React, { useRef } from "react";
import * as GQL from "src/core/generated-graphql";
import { useContainerDimensions } from "../Shared/GridCard";
import { StudioCard } from "./StudioCard";

interface IStudioCardGrid {
studios: GQL.StudioDataFragment[];
fromParent: boolean | undefined;
selectedIds: Set<string>;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}

export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
studios,
fromParent,
selectedIds,
onSelectChange,
}) => {
const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);
return (
<div className="row justify-content-center" ref={componentRef}>
{studios.map((studio) => (
<StudioCard
key={studio.id}
containerWidth={width}
studio={studio}
hideParent={fromParent}
selecting={selectedIds.size > 0}
selected={selectedIds.has(studio.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(studio.id, selected, shiftKey)
}
/>
))}
</div>
);
};
29 changes: 8 additions & 21 deletions ui/v2.5/src/components/Studios/StudioList.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useIntl } from "react-intl";
import cloneDeep from "lodash-es/cloneDeep";
import { useHistory } from "react-router-dom";
Expand All @@ -18,9 +18,8 @@ import { ListFilterModel } from "src/models/list-filter/filter";
import { DisplayMode } from "src/models/list-filter/types";
import { ExportDialog } from "../Shared/ExportDialog";
import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
import { StudioCard } from "./StudioCard";
import { StudioTagger } from "../Tagger/studios/StudioTagger";
import { useContainerDimensions } from "../Shared/GridCard";
import { StudioCardGrid } from "./StudioCardGrid";

const StudioItemList = makeItemList({
filterMode: GQL.FilterMode.Studios,
Expand Down Expand Up @@ -109,9 +108,6 @@ export const StudioList: React.FC<IStudioList> = ({
setIsExportDialogOpen(true);
}

const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);

function renderContent(
result: GQL.FindStudiosQueryResult,
filter: ListFilterModel,
Expand Down Expand Up @@ -139,21 +135,12 @@ export const StudioList: React.FC<IStudioList> = ({

if (filter.displayMode === DisplayMode.Grid) {
return (
<div className="row justify-content-center" ref={componentRef}>
{result.data.findStudios.studios.map((studio) => (
<StudioCard
key={studio.id}
containerWidth={width}
studio={studio}
hideParent={fromParent}
selecting={selectedIds.size > 0}
selected={selectedIds.has(studio.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(studio.id, selected, shiftKey)
}
/>
))}
</div>
<StudioCardGrid
studios={result.data.findStudios.studios}
fromParent={fromParent}
selectedIds={selectedIds}
onSelectChange={onSelectChange}
/>
);
}
if (filter.displayMode === DisplayMode.List) {
Expand Down
38 changes: 38 additions & 0 deletions ui/v2.5/src/components/Tags/TagCardGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React, { useRef } from "react";
import * as GQL from "src/core/generated-graphql";
import { useContainerDimensions } from "../Shared/GridCard";
import { TagCard } from "./TagCard";

interface ITagCardGrid {
tags: GQL.TagDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}

export const TagCardGrid: React.FC<ITagCardGrid> = ({
tags,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const componentRef = useRef<HTMLDivElement>(null);
const { width } = useContainerDimensions(componentRef);
return (
<div className="row justify-content-center" ref={componentRef}>
{tags.map((tag) => (
<TagCard
key={tag.id}
containerWidth={width}
tag={tag}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(tag.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(tag.id, selected, shiftKey)
}
/>
))}
</div>
);
};
Loading

0 comments on commit d95b103

Please sign in to comment.