[ENG 946] Added zooming for image preview (#2368)

* added buttons for zoom in and out

* currently added only English translation

* added magnification prop

* added a `div` Wrapper for Scrolling

* Update Original.tsx

* Update de/common.json

* Update es/common.json

* Update fr/common.json

* Update it/common.json

* Update js/common.json

* Update nl/common.json

* Update ru/common.json

* Update tr/common.json

* Update by/common.json

* Update zh-CN/common.json

* Update zh-TW/common.json

* Reset Zoom

* Squashed commit of the following:

commit 36ae94c998874b5aaf79be0b87d1c05c605b1ff0
Merge: df0201729 9126332df
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Sat Apr 27 21:35:22 2024 +0530

    Merge branch 'spacedriveapp:main' into main

commit 9126332df1
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Sat Apr 27 18:08:07 2024 +0300

    [MOB-89] Separate headers (#2408)

    * separate headers

    improvements to headers

    cleanup

    missed cleanup

    documentation

    * Update SearchStack.tsx

commit a61a7bee65
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Fri Apr 26 20:36:21 2024 +0300

    Windows mouse resize fix (#2407)

    Update useMouseItemResize.ts

commit 9384bade61
Author: Vítor Vasconcellos <vasconcellos.dev@gmail.com>
Date:   Thu Apr 25 21:29:55 2024 -0300

    Revert OpenDAL for ephemeral location (#2399)

    * Revert "OpenDAL - Ephemeral Locations (#2283)"

    This reverts commit 2848782e8e.

    * Format

    * Fix some diff problems

commit e76ff78f3c
Author: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com>
Date:   Thu Apr 25 20:29:55 2024 -0400

    Alpha 0.2.13 (#2394)

    bump

commit 476447ab70
Author: Vítor Vasconcellos <vasconcellos.dev@gmail.com>
Date:   Thu Apr 25 21:20:36 2024 -0300

    Fix server release again (#2403)

    * Fix server release again

    * small improvement to regex

commit ab46cffa11
Author: Jamie Pine <32987599+jamiepine@users.noreply.github.com>
Date:   Thu Apr 25 14:37:25 2024 -0700

    Reactive file identification (#2396)

    * yes

    * Explain mysterious if

    * Use id alias just for consistency reasons

    * yes

    * Rust fmt

    * fix ts

    ---------

    Co-authored-by: Ericson "Fogo" Soares <ericson.ds999@gmail.com>
    Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>

commit 64bbce32e9
Author: Utku <74243531+utkubakir@users.noreply.github.com>
Date:   Thu Apr 25 16:06:35 2024 -0400

    Fix title (#2398)

    * fix task manager title

    * 2 more config item

commit 310eb28e63
Author: Vítor Vasconcellos <vasconcellos.dev@gmail.com>
Date:   Thu Apr 25 14:58:50 2024 -0300

    Fix `cargo test`  & improve `pnpm prep` native deps download (#2393)

    Couple of fixes
     - Increase `pnpm prep` connection timeout to 5min, to better handle downloading native deps under flaky network conditions
     - Fix `cargo test` and cache-factory CI
     - Clippy and fmt

commit b86d3d27cb
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Thu Apr 25 20:29:46 2024 +0300

    [ENG-1762] Reverse mouse resize direction (#2395)

    Update useMouseItemResize.ts

commit 449337285d
Author: Artsiom Voitas <artsiom.voitas@gmail.com>
Date:   Thu Apr 25 19:26:36 2024 +0300

    Improved translation into Belarusian and Russian (#2391)

    * feat: improved translation on belarusian and russian

    * updated keys related to vacuum

    * updated keys related to vacuum

commit b1ffbee9b1
Author: Jamie Pine <32987599+jamiepine@users.noreply.github.com>
Date:   Thu Apr 25 09:14:43 2024 -0700

    Fix thumbnail generation reactivity  (#2392)

    fix

commit 73f521a3b8
Author: Ericson "Fogo" Soares <ericson.ds999@gmail.com>
Date:   Thu Apr 25 01:06:11 2024 -0300

    [ENG-1629] Write new file identifier with the task system (#2334)

    * Introduce deep vs shallow for indexer tasks with different priorities

    * Make job wait to dispatch if it's paused

    * Extract file metadata task on file identifier job

    * Some initial drafts on object processor task

    * Object processor task for file identifier

    * File Identifier job and shallow

commit 463babe1d4
Author: Heavysnowjakarta <54460050+HeavySnowJakarta@users.noreply.github.com>
Date:   Thu Apr 25 07:38:34 2024 +0800

    I18n polish (zh-cn) (#2337)

    * i18n some polishes

    * reviewed 1st-100th strings of zh-cn i18n

    * change the indent to 2 space characters

commit 2c777e53f1
Author: Vítor Vasconcellos <vasconcellos.dev@gmail.com>
Date:   Wed Apr 24 20:37:38 2024 -0300

    Fix core test (#2386)

    * Fix core test

    * Import CompressedCRDTOperations

    ---------

    Co-authored-by: Ericson "Fogo" Soares <ericson.ds999@gmail.com>

commit 57b0139240
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Thu Apr 25 02:34:24 2024 +0300

    [MOB-90] Visual adjustments (#2383)

    * Visual adjustments

    * Update Tags.tsx

    * cleanup

    * remove prop

    * remove hitslop

    * sectionlist

commit e0f540a1be
Author: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com>
Date:   Wed Apr 24 14:20:51 2024 -0400

    Small Trash UI fixes (#2385)

    * Update index.tsx

    * More ui fixes + toast

    * Update index.tsx

    * Add Translations

commit 279aaf2c50
Author: Utku <74243531+utkubakir@users.noreply.github.com>
Date:   Wed Apr 24 12:48:14 2024 -0400

    hide placeholders (#2384)

commit 3bed56d4d9
Author: Utku <74243531+utkubakir@users.noreply.github.com>
Date:   Wed Apr 24 10:25:22 2024 -0400

    Alpha 0.2.12 (#2382)

    * pnpm

    * alpha 0.2.12

    * make pnpm version non strict

commit 0b6bd050a0
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Wed Apr 24 18:09:18 2024 +0800

    Fix main (#2381)

    * fix

    * fix

commit ae6c49b0ba
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Wed Apr 24 16:43:30 2024 +0800

    Improved p2p settings (#2379)

    improved p2p settings

commit 918c2a987d
Author: Brendan Allan <brendonovich@outlook.com>
Date:   Wed Apr 24 16:26:50 2024 +0800

    Batch ingest sync operations (#2378)

    batch ingest sync operations

commit 643bd3a142
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Wed Apr 24 16:27:31 2024 +0800

    Block size (#2377)

    Block size + some Clippy

commit e009a0478c
Author: Utku <74243531+utkubakir@users.noreply.github.com>
Date:   Tue Apr 23 19:20:59 2024 -0400

    Revert "[MOB-85] Better headers" (#2376)

    Revert "[MOB-85] Better headers (#2375)"

    This reverts commit 6a556a457d.

commit 6a556a457d
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Wed Apr 24 01:21:31 2024 +0300

    [MOB-85] Better headers (#2375)

    * wip

    * improve headers

    * cleanup

commit b4037d6537
Author: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com>
Date:   Mon Apr 22 15:46:10 2024 -0400

    Open Trash from the application (#2338)

    * Open Trash from the application

    * Working Trash Sidebar Button

    * Small UI fixes

    * Update common.json

    * Move openTrash to Tauri Command instead of RSPC

    * format and remove type assertion

    ---------

    Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>

commit 745399ecab
Author: nikec <43032218+niikeec@users.noreply.github.com>
Date:   Mon Apr 22 20:54:42 2024 +0200

    [ENG-1751] Improve active item handling (#2367)

    base

commit 959ccdfd98
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Mon Apr 22 20:43:44 2024 +0800

    Reintroduce P2P Settings (#2365)

    * redo backend to be less cringe

    * fixed up

commit ef969f1ada
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Mon Apr 22 19:47:47 2024 +0800

    Remove indexer rules from ephemeral indexer (#2319)

    remove indexer rules from ephemeral indexer

commit 548fff1e96
Author: Brendan Allan <brendonovich@outlook.com>
Date:   Mon Apr 22 18:29:54 2024 +0800

    Ignore empty object/filepath search filters (#2371)

commit 52c5c2bfe7
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Mon Apr 22 18:28:35 2024 +0800

    Show errors creating P2P listeners on startup (#2372)

    * do it

    * fix accuracy

    * `useRef` as god intended

commit 20e5430eaf
Author: nikec <43032218+niikeec@users.noreply.github.com>
Date:   Mon Apr 22 12:27:30 2024 +0200

    [ENG-1753] Only open quick preview when items are selected (#2374)

    only toggle when items are selected

commit 13e4ff6107
Author: nikec <43032218+niikeec@users.noreply.github.com>
Date:   Mon Apr 22 12:25:53 2024 +0200

    [ENG-1752] Fix explorer selection reset when closing quick preview via keybind (#2373)

    prevent selection reset

commit 51c94c88e3
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Mon Apr 22 18:12:06 2024 +0800

    Fix Docker start command (#2370)

commit d689e7e58a
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Sun Apr 21 17:28:27 2024 +0300

    [ENG-1750] Update context menu colors (#2369)

    update context menu colors

commit df0201729278dfa11126b41922e404146c151a35
Merge: 5624054f1 619a4c8b6
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Sat Apr 20 13:14:52 2024 +0530

    Merge branch 'main' of https://github.com/Raghav-45/spacedrive

commit 947354f6c0
Author: Oscar Beaumont <oscar@otbeaumont.me>
Date:   Sat Apr 20 11:21:20 2024 +0800

    Remove files over p2p feature (#2364)

    * goodbye

    * types

    * a

commit f97a761346
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Sat Apr 20 02:18:54 2024 +0300

    [ENG-1745] Mouse wheel resize (#2366)

    * Resize layout items with mouse wheel

    icon/item size using mouse wheel

    Update useMouseItemResize.ts

    Update useMouseItemResize.ts

    * improve comment

    * fb

    * Update useMouseItemResize.ts

    * Update IconSize.tsx

commit 619a4c8b6dfe7239bce1b54b528a3176aa7350da
Merge: df4f6279b 795bb18d1
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Tue Aug 29 16:59:18 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit df4f6279bfbd7bdaa120212b19db72cfae0d17c7
Merge: dfb519206 e4b03619d
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Tue Aug 22 20:44:09 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit dfb51920667c24ff05b16ebc63bf4aea33225002
Merge: c1bfc3296 a0a1c6766
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Thu Aug 17 21:22:49 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit c1bfc3296ee7686a6a142d74a91cf13cf4bd7677
Merge: de274c331 9c0aec816
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Tue Aug 15 19:43:43 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit de274c3317cff942e9c3a4f2c8c08819a897d251
Merge: 14faf0bce c86a728a1
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Sun Aug 13 21:54:16 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit 14faf0bce2ee9123bf66706812357d6aefc44dea
Merge: 3e013d8bd baf032883
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Thu Aug 10 06:54:01 2023 -0400

    Merge branch 'spacedriveapp:main' into main

commit 3e013d8bdef2ba59536c90044be4312336b6cd8a
Merge: 2e702f2eb 7708ba585
Author: Aditya <raghavbhai4545@gmail.com>
Date:   Tue Aug 8 11:21:07 2023 -0400

    Merge branch 'spacedriveapp:main' into main

commit 2e702f2eba
Author: Brendan Allan <brendonovich@outlook.com>
Date:   Tue Aug 8 07:58:58 2023 -0700

    Mention pnpm dev:web in CONTRIBUTING.md

commit a1c5c55a37
Author: Raghav-45 <77260113+Raghav-45@users.noreply.github.com>
Date:   Tue Aug 8 18:49:50 2023 +0530

    Update command to run server

    I encountered an issue where the cargo run -p server command was not functioning properly. It took me nearly an hour to pinpoint the problem, which turned out to be related to a modification in the Cargo.toml file. This change was made by @Brendonovich during their work on issue #1181, which pertained to *syncing ingestion*.

    Initially, I believed that re-cloning the repository from GitHub would resolve the issue. However, after attempting this solution exactly 5 times, I realized my assumption was incorrect. Despite the time and effort spent, I was able to successfully identify and rectify the problem.

* conflicts

* Revert "conflicts"

This reverts commit 2f1066a0a3.

* Revert "Squashed commit of the following:"

This reverts commit cd2435edaf.

* change in line endings from 'LF' to 'CRLF'.

* Update common.json

* Update common.json

* Update common.json

* fixed indent

---------

Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>
This commit is contained in:
Aditya 2024-04-30 06:23:40 +05:30 committed by GitHub
parent ce5e285c2f
commit 1b6b8973d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 90 additions and 22 deletions

View file

@ -29,6 +29,7 @@ interface OriginalRendererProps {
isDark: boolean;
childClassName?: string;
size?: number;
magnification?: number;
mediaControls?: boolean;
frame?: boolean;
isSidebarPreview?: boolean;
@ -163,16 +164,23 @@ const ORIGINAL_RENDERERS: {
const size = useSize(ref);
return (
<Image
ref={ref}
src={props.src}
size={size}
onLoad={props.onLoad}
onError={props.onError}
decoding={props.size ? 'async' : 'sync'}
className={clsx(props.className, props.frameClassName)}
crossOrigin="anonymous" // Here it is ok, because it is not a react attr
/>
<div className="custom-scroll quick-preview-images-scroll flex size-full justify-center transition-all">
<Image
ref={ref}
src={props.src}
size={size}
style={{ transform: `scale(${props.magnification})` }}
onLoad={props.onLoad}
onError={props.onError}
decoding={props.size ? 'async' : 'sync'}
className={clsx(
props.className,
props.frameClassName,
'origin-center transition-transform'
)}
crossOrigin="anonymous" // Here it is ok, because it is not a react attr
/>
</div>
);
}
};

View file

@ -40,6 +40,7 @@ export interface ThumbProps {
childClassName?: string | ((type: ThumbType) => string | undefined);
isSidebarPreview?: boolean;
childProps?: HTMLAttributes<HTMLElement>;
magnification?: number;
}
type ThumbType = { variant: 'original' } | { variant: 'thumbnail' } | { variant: 'icon' };
@ -217,6 +218,7 @@ export const FileThumb = forwardRef<HTMLImageElement, ThumbProps>((props, ref) =
isDark={isDark}
childClassName={childClassName}
size={props.size}
magnification={props.magnification}
mediaControls={props.mediaControls}
frame={props.frame}
isSidebarPreview={props.isSidebarPreview}

View file

@ -2,6 +2,8 @@ import {
ArrowLeft,
ArrowRight,
DotsThree,
MagnifyingGlassMinus,
MagnifyingGlassPlus,
Plus,
SidebarSimple,
Slideshow,
@ -81,6 +83,7 @@ export const QuickPreview = () => {
const thumb = createRef<HTMLDivElement>();
const [thumbErrorToast, setThumbErrorToast] = useState<ToastMessage>();
const [showMetadata, setShowMetadata] = useState<boolean>(false);
const [magnification, setMagnification] = useState<number>(1);
const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
const [isRenaming, setIsRenaming] = useState<boolean>(false);
const [newName, setNewName] = useState<string | null>(null);
@ -149,6 +152,7 @@ export const QuickPreview = () => {
useEffect(() => {
setNewName(null);
setThumbErrorToast(undefined);
setMagnification(1);
if (open || item) return;
@ -423,6 +427,35 @@ export const QuickPreview = () => {
</div>
<div className="flex flex-1 items-center justify-end gap-1">
<Tooltip label={t('zoom_in')}>
<IconButton
onClick={() =>
setMagnification(
(currentMagnification) =>
currentMagnification +
currentMagnification * 0.2
)
}
// this is same formula as intrest calculation
>
<MagnifyingGlassPlus />
</IconButton>
</Tooltip>
<Tooltip label={t('zoom_out')}>
<IconButton
onClick={() =>
setMagnification(
(currentMagnification) =>
currentMagnification / (1 + 0.2)
)
}
// this is same formula as intrest calculation
>
<MagnifyingGlassMinus />
</IconButton>
</Tooltip>
<DropdownMenu.Root
trigger={
<div className="flex">
@ -537,6 +570,7 @@ export const QuickPreview = () => {
!icon && 'h-full',
textKinds.includes(kind) && 'select-text'
)}
magnification={magnification}
/>
{explorerLayoutStore.showImageSlider && activeItem && (

View file

@ -500,5 +500,7 @@
"your_account": "Ваш уліковы запіс",
"your_account_description": "Уліковы запіс Spacedrive і інфармацыя.",
"your_local_network": "Ваша лакальная сетка",
"your_privacy": "Ваша прыватнасць"
"your_privacy": "Ваша прыватнасць",
"zoom_in": "Павялічыць",
"zoom_out": "Змяншэння"
}

View file

@ -500,5 +500,7 @@
"your_account": "Ihr Konto",
"your_account_description": "Spacedrive-Konto und -Informationen.",
"your_local_network": "Ihr lokales Netzwerk",
"your_privacy": "Ihre Privatsphäre"
"your_privacy": "Ihre Privatsphäre",
"zoom_in": "Hereinzoomen",
"zoom_out": "Hinauszoomen"
}

View file

@ -500,5 +500,7 @@
"your_account": "Your account",
"your_account_description": "Spacedrive account and information.",
"your_local_network": "Your Local Network",
"your_privacy": "Your Privacy"
"your_privacy": "Your Privacy",
"zoom_in": "Zoom In",
"zoom_out": "Zoom Out"
}

View file

@ -500,5 +500,7 @@
"your_account": "Tu cuenta",
"your_account_description": "Cuenta de Spacedrive e información.",
"your_local_network": "Tu Red Local",
"your_privacy": "Tu Privacidad"
"your_privacy": "Tu Privacidad",
"zoom_in": "Acercar",
"zoom_out": "Alejar"
}

View file

@ -500,5 +500,7 @@
"your_account": "Votre compte",
"your_account_description": "Compte et informations Spacedrive.",
"your_local_network": "Votre réseau local",
"your_privacy": "Votre confidentialité"
"your_privacy": "Votre confidentialité",
"zoom_in": "Zoom avant",
"zoom_out": "Zoom arrière"
}

View file

@ -500,5 +500,7 @@
"your_account": "Il tuo account",
"your_account_description": "Account di Spacedrive e informazioni.",
"your_local_network": "La tua rete locale",
"your_privacy": "La tua Privacy"
"your_privacy": "La tua Privacy",
"zoom_in": "Ingrandire",
"zoom_out": "Ridurre"
}

View file

@ -500,5 +500,7 @@
"your_account": "あなたのアカウント",
"your_account_description": "Spacedriveアカウントの情報",
"your_local_network": "ローカルネットワーク",
"your_privacy": "あなたのプライバシー"
"your_privacy": "あなたのプライバシー",
"zoom_in": "拡大する",
"zoom_out": "縮小する"
}

View file

@ -500,5 +500,7 @@
"your_account": "Je account",
"your_account_description": "Spacedrive account en informatie.",
"your_local_network": "Je Lokale Netwerk",
"your_privacy": "Jouw Privacy"
"your_privacy": "Jouw Privacy",
"zoom_in": "Inzoomen",
"zoom_out": "Uitzoomen"
}

View file

@ -500,5 +500,7 @@
"your_account": "Ваш аккаунт",
"your_account_description": "Учетная запись Spacedrive и информация.",
"your_local_network": "Ваша локальная сеть",
"your_privacy": "Ваша конфиденциальность"
"your_privacy": "Ваша конфиденциальность",
"zoom_in": "Увеличить",
"zoom_out": "Уменьшить"
}

View file

@ -500,5 +500,7 @@
"your_account": "Hesabınız",
"your_account_description": "Spacedrive hesabınız ve bilgileri.",
"your_local_network": "Yerel Ağınız",
"your_privacy": "Gizliliğiniz"
"your_privacy": "Gizliliğiniz",
"zoom_in": "Yakınlaştır",
"zoom_out": "Uzaklaştır"
}

View file

@ -502,5 +502,7 @@
"your_account": "您的账户",
"your_account_description": "Spacedrive账号和信息。",
"your_local_network": "您的本地网络",
"your_privacy": "您的隐私"
"your_privacy": "您的隐私",
"zoom_in": "放大",
"zoom_out": "缩小"
}

View file

@ -500,5 +500,7 @@
"your_account": "您的帳戶",
"your_account_description": "Spacedrive帳戶和資訊。",
"your_local_network": "您的本地網路",
"your_privacy": "您的隱私"
"your_privacy": "您的隱私",
"zoom_in": "放大",
"zoom_out": "縮小"
}