Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 04:44:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add zoom slider to other grid views (#4674)

Browse Source 
* bring zoom slider to other list views
* updated 0 index to scale more proportionally
This commit is contained in:
CJ
2025-03-03 18:56:59 -06:00
committed by GitHub
parent 0f32311f6e
commit a3f8c36536
13 changed files with 84 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/v2.5/src/components/Galleries/GalleryCard.tsx
View File

@@ -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;
@@ -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;

25
ui/v2.5/src/components/Groups/GroupCard.tsx
View File

@@ -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;
@@ -52,6 +53,7 @@ export const GroupCard: React.FC<IProps> = ({
containerWidth,
selecting,
selected,
zoomIndex,
onSelectedChanged,
fromGroupId,
onMove,
@@ -71,15 +73,30 @@ export const GroupCard: React.FC<IProps> = ({
}, [fromGroupId, group.containing_groups]);
useEffect(() => {
if (!containerWidth || ScreenUtils.isMobile()) return;
if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
return;
let preferredCardWidth = 250;
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;
@@ -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}`}

3
ui/v2.5/src/components/Groups/GroupCardGrid.tsx
View File

@@ -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;
@@ -14,6 +15,7 @@ interface IGroupCardGrid {
export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
groups,
selectedIds,
zoomIndex,
onSelectChange,
fromGroupId,
onMove,
@@ -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) =>

2
ui/v2.5/src/components/Groups/GroupList.tsx
View File

@@ -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}
@@ -225,6 +226,7 @@ export const GroupList: React.FC<IGroupList> = ({
selectable={selectable}
>
<ItemList
zoomable
view={view}
otherOperations={otherOperations}
addKeybinds={addKeybinds}

4
ui/v2.5/src/components/Images/ImageCard.tsx
View File

@@ -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;
@@ -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(
() =>

25
ui/v2.5/src/components/Performers/PerformerCard.tsx
View File

@@ -38,6 +38,7 @@ interface IPerformerCardProps {
ageFromDate?: string;
selecting?: boolean;
selected?: boolean;
zoomIndex?: number;
onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
extraCriteria?: IPerformerCardExtraCriteria;
}
@@ -48,6 +49,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
ageFromDate,
selecting,
selected,
zoomIndex,
onSelectedChanged,
extraCriteria,
}) => {
@@ -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) {
@@ -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={

2
ui/v2.5/src/components/Performers/PerformerCardGrid.tsx
View File

@@ -14,6 +14,7 @@ interface IPerformerCardGrid {
export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
performers,
selectedIds,
zoomIndex,
onSelectChange,
extraCriteria,
}) => {
@@ -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) =>

1
ui/v2.5/src/components/Performers/PerformerList.tsx
View File

@@ -329,6 +329,7 @@ export const PerformerList: React.FC<IPerformerList> = ({
selectable
>
<ItemList
zoomable
view={view}
otherOperations={otherOperations}
addKeybinds={addKeybinds}

4
ui/v2.5/src/components/Scenes/SceneCard.tsx
View File

@@ -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
@@ -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;

26
ui/v2.5/src/components/Studios/StudioCard.tsx
View File

@@ -24,6 +24,7 @@ interface IProps {
hideParent?: boolean;
selecting?: boolean;
selected?: boolean;
zoomIndex?: number;
onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
}
@@ -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) {
@@ -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}

3
ui/v2.5/src/components/Studios/StudioCardGrid.tsx
View File

@@ -7,6 +7,7 @@ interface IStudioCardGrid {
studios: GQL.StudioDataFragment[];
fromParent: boolean | undefined;
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
@@ -14,6 +15,7 @@ export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
studios,
fromParent,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const [componentRef, { width }] = useContainerDimensions();
@@ -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)}

2
ui/v2.5/src/components/Studios/StudioList.tsx
View File

@@ -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}
@@ -187,6 +188,7 @@ export const StudioList: React.FC<IStudioList> = ({
selectable
>
<ItemList
zoomable
view={view}
otherOperations={otherOperations}
addKeybinds={addKeybinds}

2
ui/v2.5/src/components/Tags/TagCard.tsx
View File

@@ -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;