Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add zoom slider to other grid views #4674

Merged
merged 5 commits into from
Mar 4, 2025
Merged

Add zoom slider to other grid views #4674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd0e012
bring zoom slider to other list views
cj12312021 Mar 9, 2024
5134a87
updated 0 index to scale more proportionally
cj12312021 Mar 9, 2024
101d11a
Merge branch 'develop' into bring-zoom-slider-to-other-grid-views
cj12312021 Jan 6, 2025
b51905f
revert TagCard changes
cj12312021 Jan 6, 2025
a6f236a
Merge remote-tracking branch 'upstream/develop' into prs/4674
WithoutPants Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/v2.5/src/components/Galleries/GalleryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 240;
preferredCardWidth = 280;
break;
case 1:
preferredCardWidth = 340;
Expand All @@ -95,7 +95,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
preferredCardWidth!
);
setCardWidth(fittedCardWidth);
}, [props, props.containerWidth, props.zoomIndex]);
}, [props.containerWidth, props.zoomIndex]);

function maybeRenderScenePopoverButton() {
if (props.gallery.scenes.length === 0) return;
Expand Down
27 changes: 22 additions & 5 deletions ui/v2.5/src/components/Groups/GroupCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ interface IProps {
sceneNumber?: number;
selecting?: boolean;
selected?: boolean;
zoomIndex?: number;
onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
fromGroupId?: string;
onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
Expand All @@ -52,6 +53,7 @@ export const GroupCard: React.FC<IProps> = ({
containerWidth,
selecting,
selected,
zoomIndex,
onSelectedChanged,
fromGroupId,
onMove,
Expand All @@ -71,15 +73,30 @@ export const GroupCard: React.FC<IProps> = ({
}, [fromGroupId, group.containing_groups]);

useEffect(() => {
if (!containerWidth || ScreenUtils.isMobile()) return;

let preferredCardWidth = 250;
if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
return;

let zoomValue = zoomIndex;
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 210;
break;
case 1:
preferredCardWidth = 250;
break;
case 2:
preferredCardWidth = 300;
break;
case 3:
preferredCardWidth = 375;
}
let fittedCardWidth = calculateCardWidth(
containerWidth,
preferredCardWidth!
);
setCardWidth(fittedCardWidth);
}, [containerWidth]);
}, [containerWidth, zoomIndex]);

function maybeRenderScenesPopoverButton() {
if (group.scenes.length === 0) return;
Expand Down Expand Up @@ -150,7 +167,7 @@ export const GroupCard: React.FC<IProps> = ({

return (
<GridCard
className="group-card"
className={`group-card zoom-${zoomIndex}`}
objectId={group.id}
onMove={onMove}
url={`/groups/${group.id}`}
Expand Down
3 changes: 3 additions & 0 deletions ui/v2.5/src/components/Groups/GroupCardGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useContainerDimensions } from "../Shared/GridCard/GridCard";
interface IGroupCardGrid {
groups: GQL.GroupDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
fromGroupId?: string;
onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
Expand All @@ -14,6 +15,7 @@ interface IGroupCardGrid {
export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
groups,
selectedIds,
zoomIndex,
onSelectChange,
fromGroupId,
onMove,
Expand All @@ -26,6 +28,7 @@ export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
key={p.id}
containerWidth={width}
group={p}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
Expand Down
2 changes: 2 additions & 0 deletions ui/v2.5/src/components/Groups/GroupList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ export const GroupList: React.FC<IGroupList> = ({
{filter.displayMode === DisplayMode.Grid && (
<GroupCardGrid
groups={result.data?.findGroups.groups ?? []}
zoomIndex={filter.zoomIndex}
selectedIds={selectedIds}
onSelectChange={onSelectChange}
fromGroupId={fromGroupId}
Expand Down Expand Up @@ -225,6 +226,7 @@ export const GroupList: React.FC<IGroupList> = ({
selectable={selectable}
>
<ItemList
zoomable
view={view}
otherOperations={otherOperations}
addKeybinds={addKeybinds}
Expand Down
4 changes: 2 additions & 2 deletions ui/v2.5/src/components/Images/ImageCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 240;
preferredCardWidth = 280;
break;
case 1:
preferredCardWidth = 340;
Expand All @@ -66,7 +66,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
preferredCardWidth!
);
setCardWidth(fittedCardWidth);
}, [props, props.containerWidth, props.zoomIndex]);
}, [props.containerWidth, props.zoomIndex]);

const file = useMemo(
() =>
Expand Down
25 changes: 21 additions & 4 deletions ui/v2.5/src/components/Performers/PerformerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ interface IPerformerCardProps {
ageFromDate?: string;
selecting?: boolean;
selected?: boolean;
zoomIndex?: number;
onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
extraCriteria?: IPerformerCardExtraCriteria;
}
Expand All @@ -48,6 +49,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
ageFromDate,
selecting,
selected,
zoomIndex,
onSelectedChanged,
extraCriteria,
}) => {
Expand All @@ -72,15 +74,30 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
const [cardWidth, setCardWidth] = useState<number>();

useEffect(() => {
if (!containerWidth || ScreenUtils.isMobile()) return;
if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
return;

let preferredCardWidth = 300;
let zoomValue = zoomIndex;
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 240;
break;
case 1:
preferredCardWidth = 300;
break;
case 2:
preferredCardWidth = 375;
break;
case 3:
preferredCardWidth = 470;
}
let fittedCardWidth = calculateCardWidth(
containerWidth,
preferredCardWidth!
);
setCardWidth(fittedCardWidth);
}, [containerWidth]);
}, [containerWidth, zoomIndex]);

function onToggleFavorite(v: boolean) {
if (performer.id) {
Expand Down Expand Up @@ -246,7 +263,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({

return (
<GridCard
className="performer-card"
className={`performer-card zoom-${zoomIndex}`}
url={`/performers/${performer.id}`}
width={cardWidth}
pretitleIcon={
Expand Down
2 changes: 2 additions & 0 deletions ui/v2.5/src/components/Performers/PerformerCardGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface IPerformerCardGrid {
export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
performers,
selectedIds,
zoomIndex,
onSelectChange,
extraCriteria,
}) => {
Expand All @@ -25,6 +26,7 @@ export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
key={p.id}
containerWidth={width}
performer={p}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
Expand Down
1 change: 1 addition & 0 deletions ui/v2.5/src/components/Performers/PerformerList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,7 @@ export const PerformerList: React.FC<IPerformerList> = ({
selectable
>
<ItemList
zoomable
view={view}
otherOperations={otherOperations}
addKeybinds={addKeybinds}
Expand Down
4 changes: 2 additions & 2 deletions ui/v2.5/src/components/Scenes/SceneCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,7 +474,7 @@ export const SceneCard = PatchComponent(
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 240;
preferredCardWidth = 280;
break;
case 1:
preferredCardWidth = 340; // this value is intentionally higher than 320
Expand All @@ -490,7 +490,7 @@ export const SceneCard = PatchComponent(
preferredCardWidth!
);
setCardWidth(fittedCardWidth);
}, [props, props.containerWidth, props.zoomIndex]);
}, [props.containerWidth, props.zoomIndex]);

const cont = configuration?.interface.continuePlaylistDefault ?? false;

Expand Down
26 changes: 22 additions & 4 deletions ui/v2.5/src/components/Studios/StudioCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ interface IProps {
hideParent?: boolean;
selecting?: boolean;
selected?: boolean;
zoomIndex?: number;
onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
}

Expand Down Expand Up @@ -78,21 +79,38 @@ export const StudioCard: React.FC<IProps> = ({
hideParent,
selecting,
selected,
zoomIndex,
onSelectedChanged,
}) => {
const [updateStudio] = useStudioUpdate();
const [cardWidth, setCardWidth] = useState<number>();

useEffect(() => {
if (!containerWidth || ScreenUtils.isMobile()) return;
if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
return;

let preferredCardWidth = 340;
let zoomValue = zoomIndex;
console.log(zoomValue);
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 280;
break;
case 1:
preferredCardWidth = 340;
break;
case 2:
preferredCardWidth = 420;
break;
case 3:
preferredCardWidth = 560;
}
let fittedCardWidth = calculateCardWidth(
containerWidth,
preferredCardWidth!
);
setCardWidth(fittedCardWidth);
}, [containerWidth]);
}, [containerWidth, zoomIndex]);

function onToggleFavorite(v: boolean) {
if (studio.id) {
Expand Down Expand Up @@ -216,7 +234,7 @@ export const StudioCard: React.FC<IProps> = ({

return (
<GridCard
className="studio-card"
className={`studio-card zoom-${zoomIndex}`}
url={`/studios/${studio.id}`}
width={cardWidth}
title={studio.name}
Expand Down
3 changes: 3 additions & 0 deletions ui/v2.5/src/components/Studios/StudioCardGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ interface IStudioCardGrid {
studios: GQL.StudioDataFragment[];
fromParent: boolean | undefined;
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}

export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
studios,
fromParent,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const [componentRef, { width }] = useContainerDimensions();
Expand All @@ -24,6 +26,7 @@ export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
key={studio.id}
containerWidth={width}
studio={studio}
zoomIndex={zoomIndex}
hideParent={fromParent}
selecting={selectedIds.size > 0}
selected={selectedIds.has(studio.id)}
Expand Down
2 changes: 2 additions & 0 deletions ui/v2.5/src/components/Studios/StudioList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ export const StudioList: React.FC<IStudioList> = ({
return (
<StudioCardGrid
studios={result.data.findStudios.studios}
zoomIndex={filter.zoomIndex}
fromParent={fromParent}
selectedIds={selectedIds}
onSelectChange={onSelectChange}
Expand Down Expand Up @@ -187,6 +188,7 @@ export const StudioList: React.FC<IStudioList> = ({
selectable
>
<ItemList
zoomable
view={view}
otherOperations={otherOperations}
addKeybinds={addKeybinds}
Expand Down
2 changes: 1 addition & 1 deletion ui/v2.5/src/components/Tags/TagCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const TagCard: React.FC<IProps> = ({
let preferredCardWidth: number;
switch (zoomValue) {
case 0:
preferredCardWidth = 240;
preferredCardWidth = 280;
break;
case 1:
preferredCardWidth = 340;
Expand Down
Loading