help: Write intial help documentation

Part-of: <https://gitlab.gnome.org/GNOME/Incubator/loupe/-/merge_requests/248>
This commit is contained in:
Christopher Davis 2023-06-30 12:24:39 -04:00 • committed by Marge Bot
parent fb6d852cca
commit 97c9dcde64
28 changed files with 778 additions and 18 deletions

3
help/C/Makefile Normal file
View file

@ -0,0 +1,3 @@
build:
@ducktype -o . duck/*.duck
@for f in *.page; do sed -i "2s/^/<!--\n DO NOT EDIT THIS FILE!\n\n This file is autogenerated with ducktype.\n Edit duck\/$$f.duck instead and run make in this directory.\n-->\n/" $$f; done

View file

@ -0,0 +1,20 @@
= Image Properties
[topic]
@link[guide >index#additional-features]
@desc View detailed properties of the selected image.
Loupe allows users to view an image's properties. All images will have the following
basic properties:
* Image size
* Image format
* File size
* File creation date
* File modification date
If the file has $link[href="https://en.wikipedia.org/wiki/Exif"](Exif) metadata, it
will be shown below the basic properties.
To view the selected image's properties, press the $gui(Image Properties)
($media[type="image" src="figures/help-about-symbolic.svg"](help-about-symbolic)) button.

22
help/C/duck/index.duck Normal file
View file

@ -0,0 +1,22 @@
= $media[type="image" its:translate="no" src="figures/org.gnome.Loupe.svg" height="48px" width="48px"] Loupe Image Viewer
[guide]
@desc Browse through your images and inspect their metadata.
== Introduction
Loupe is an image viewer that supports modern image formats. It provides:
* Fast GPU accelerated image rendering with tiled rendering for SVGs
* Extendable and sandboxed raster image decoding
* Extensive support for touchpad and touchscreen gestures
* Accessible presentation of the most important metadata
== Getting Started
[#getting-started .2column]
== Additional Features
[#additional-features .2column]
== Technical Information
[#technical-information .2column]

View file

@ -0,0 +1,49 @@
= Opening Images
[topic]
@link[guide >index#getting-started]
@desc Open and browse through pictures via the file chooser, file manager, or drag and drop.
== Opening Files
=== From The File Chooser
Loupe allows users to pick images with the file chooser at any time.
[steps]
* Click the $gui(Open Files…) button, the $gui[style="menuitem"](Open…) menu item, or press $keyseq($key(Ctrl)$key(O)). The $gui(Open Image) file dialog will appear.
* Select the image you want to open, then click $gui(Open).
Loupe will open with the selected image showing, and the other images in the directory can be reached by browsing.
=== From The File Manager
Users can also open images in Loupe directly from their file manager.
[steps]
* Open your preferred file manager application.
* Navigate to the image you want to view in Loupe.
* If Loupe is set as your default image viewer, use the file manager's function for opening files.
* If Loupe is not your default image viewer, you will need to select $gui(Open With…) or similar in the file manager, and pick Loupe.
=== Drag & Drop
Loupe also accepts local image files dragged from other applications.
[steps]
* In the source application, begin dragging the image.
* Drag the image over the Loupe main window. A blue highlighted area should appear.
* Drop the image while it's still hovered over the main window.
== Browsing
When opening an image from the file chooser or file manager, Loupe will load other files
in the parent directory of the image and sort them in alphabetical order. Users can
browse the other images in the directory with the $gui(Previous Image) ($media[type="image" src="figures/go-previous-symbolic.svg"](go-previous-symbolic))
and $gui(Next Image) ($media[type="image" src="figures/go-next-symbolic.svg"](go-next-symbolic)) buttons.
Keyboard users can also use the following shortcuts:
* $key(→) to go to the next image.
* $key(←) to go to the previous image.
* $key(Home) to jump to the first image in the directory.
* $key(End) to jump to the last image in the directory.

View file

@ -0,0 +1,24 @@
= Sending Images To Other Apps
[topic]
@link[guide >index#additional-features]
@desc Learn how to send, copy, and drag images from Loupe to other apps.
== "Open With…" Action
[steps]
* Click the $gui[style="menuitem"](Open With…) menu item. A dialog with a list of applications will appear.
* Select the application you want to open the image with.
== Copy & Paste
[steps]
* Click the $gui(Copy to Clipboard) ($media[type="image" src="figures/edit-copy-symbolic.svg"](edit-copy-symbolic)) button. A toast notifying you that the image is in your clipboard will appear.
* Paste your image in your application of choice.
== Drag & Drop
[steps]
* Zoom out from the image completely.
* Click and hold the selected image.
* Drag the image to your application of choice.

View file

@ -0,0 +1,11 @@
= Supported Image Formats
[topic]
@link[guide >index#technical-information]
Loupe uses $link[href=https://gitlab.gnome.org/sophie-h/glycin](glycin) for
loading images. You can check $link[href=https://gitlab.gnome.org/sophie-h/glycin#supported-image-formats](glycin's README)
for more details about the formats supported by the default loaders and the features
provided by each format.
Glycin's loaders are configurable, and new loaders can be created by third-parties,
so the supported formats on your system may vary.

View file

@ -0,0 +1,10 @@
= Moving Images to Trash
[topic]
@link[guide >index#additional-features]
@desc Move unwanted images to the trash directly from Loupe.
If a user wants to remove an image, they can press the $gui(Move To Trash)
($media[type="image" src="figures/user-trash-symbolic.svg"](user-trash-symbolic))
button. A toast will appear allowing them to restore the image with the $gui(Undo)
button.

View file

@ -0,0 +1,48 @@
= Viewing Images
[topic]
@link[guide >index#getting-started]
@desc Learn how to view an image at different scales and orientations.
== Zooming
Users can zoom in with the $gui(Zoom In) ($media[type="image" src="figures/zoom-in-symbolic.svg"](zoom-in-symbolic))
button and zoom out with the $gui(Zoom Out) ($media[type="image" src="figures/zoom-out-symbolic.svg"](zoom-out-symbolic))
button. They can also use the following keyboard shortcuts:
* $keyseq($key(Ctrl)$key(+)) or $key(+) to zoom in.
* $keyseq($key(Ctrl)$key(-)) or $key(-) to zoom out.
* $keyseq($key(Ctrl)$key(0)) or $key(0) to zoom to the best fitting size for the window size.
* $keyseq($key(Ctrl)$key(1)) or $key(1) to zoom to the image's original scale.
* $keyseq($key(Ctrl)$key(2)) or $key(2) to zoom to 200% of the image's original scale.
Touchpad and touchscreen users can also zoom with a two-finger pinch gesture.
== Panning
Mouse and touchpad users can pan the view when zoomed in by clicking and dragging the image.
Touchscreen users can use a single-finger drag gesture to pan the view. Users with a keyboard
can also use the following keyboard shortcuts:
* $keyseq($key(Ctrl)$key(←)) to pan left.
* $keyseq($key(Ctrl)$key(→)) to pan right.
* $keyseq($key(Ctrl)$key(↑)) to pan up.
* $keyseq($key(Ctrl)$key(↓)) to pan down.
== Rotating
Users can use the $gui(Rotate Right) ($media[type="image" src="figures/object-rotate-right-symbolic.svg"](object-rotate-right-symbolic))
and $gui(Rotate Left) ($media[type="image" src="figures/object-rotate-left-symbolic.svg"](object-rotate-left-symbolic))
buttons under $gui[style="menuitem"](Rotate) in the main menu to rotate clockwise and
counter-clockwise. They can also use the following keyboard shortcuts:
* $keyseq($key(Ctrl)$key(R)) to rotate clockwise.
* $keyseq($key(Ctrl)$key(Shift)$key(R)) to rotate counter-clockwise.
Touchpad and touchscreen users can also use a two-finger rotate gesture.
== Fullscreen
Loupe has a simple fullscreen mode. Users can toggle fullscreen mode by pressing the $gui(Toggle Fullscreen)
($media[type="image" src="figures/view-fullscreen-symbolic.svg"](view-fullscreen-symbolic) / $media[type="image" src="figures/view-restore-symbolic.svg"](view-restore-symbolic)) button.
Keyboard users can also use $key(F11) to toggle fullscreen mode.

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 0 3 c 0 -1.644531 1.355469 -3 3 -3 h 5 c 1.644531 0 3 1.355469 3 3 c 0 0.550781 -0.449219 1 -1 1 s -1 -0.449219 -1 -1 c 0 -0.570312 -0.429688 -1 -1 -1 h -5 c -0.570312 0 -1 0.429688 -1 1 v 5 c 0 0.570312 0.429688 1 1 1 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 c -1.644531 0 -3 -1.355469 -3 -3 z m 5 5 c 0 -1.644531 1.355469 -3 3 -3 h 5 c 1.644531 0 3 1.355469 3 3 v 5 c 0 1.644531 -1.355469 3 -3 3 h -5 c -1.644531 0 -3 -1.355469 -3 -3 z m 2 0 v 5 c 0 0.570312 0.429688 1 1 1 h 5 c 0.570312 0 1 -0.429688 1 -1 v -5 c 0 -0.570312 -0.429688 -1 -1 -1 h -5 c -0.570312 0 -1 0.429688 -1 1 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 765 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 4 2 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 6 6 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 l -6 6 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 s 0.105469 -0.519531 0.292969 -0.707031 l 5.292969 -5.292969 l -5.292969 -5.292969 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 638 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 12 2 c 0 -0.265625 -0.105469 -0.519531 -0.292969 -0.707031 c -0.390625 -0.390625 -1.023437 -0.390625 -1.414062 0 l -6 6 c -0.1875 0.1875 -0.292969 0.441406 -0.292969 0.707031 s 0.105469 0.519531 0.292969 0.707031 l 6 6 c 0.390625 0.390625 1.023437 0.390625 1.414062 0 c 0.1875 -0.1875 0.292969 -0.441406 0.292969 -0.707031 s -0.105469 -0.519531 -0.292969 -0.707031 l -5.292969 -5.292969 l 5.292969 -5.292969 c 0.1875 -0.1875 0.292969 -0.441406 0.292969 -0.707031 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 638 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 8 0 c -4.410156 0 -8 3.589844 -8 8 s 3.589844 8 8 8 s 8 -3.589844 8 -8 s -3.589844 -8 -8 -8 z m 0 2 c 3.332031 0 6 2.667969 6 6 s -2.667969 6 -6 6 s -6 -2.667969 -6 -6 s 2.667969 -6 6 -6 z m 0 1.875 c -0.621094 0 -1.125 0.503906 -1.125 1.125 s 0.503906 1.125 1.125 1.125 s 1.125 -0.503906 1.125 -1.125 s -0.503906 -1.125 -1.125 -1.125 z m -1.523438 3.125 c -0.265624 0.011719 -0.476562 0.230469 -0.476562 0.5 c 0 0.277344 0.222656 0.5 0.5 0.5 h 0.5 v 3 h -0.5 c -0.277344 0 -0.5 0.222656 -0.5 0.5 s 0.222656 0.5 0.5 0.5 h 3 c 0.277344 0 0.5 -0.222656 0.5 -0.5 s -0.222656 -0.5 -0.5 -0.5 h -0.5 v -4 h -2.5 c -0.007812 0 -0.015625 0 -0.023438 0 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 819 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 8.914062 2 c -0.574218 0.007812 -1.152343 0.085938 -1.726562 0.238281 c -3.054688 0.820313 -5.1875 3.597657 -5.1875 6.761719 h -2 v 1 h 0.0078125 c -0.00390625 0.265625 0.1015625 0.519531 0.2851565 0.707031 l 2 2 c 0.390625 0.390625 1.023437 0.390625 1.414062 0 l 2 -2 c 0.183594 -0.1875 0.289063 -0.441406 0.289063 -0.707031 h 0.003906 v -1 h -2 c 0 -2.269531 1.515625 -4.242188 3.707031 -4.832031 c 2.1875 -0.585938 4.488281 0.367187 5.625 2.332031 c 1.132813 1.964844 0.808594 4.429688 -0.796875 6.035156 c -0.390625 0.390625 -0.390625 1.023438 0 1.414063 s 1.023438 0.390625 1.414063 0 c 2.238281 -2.238281 2.695312 -5.710938 1.113281 -8.449219 c -1.1875 -2.054688 -3.304688 -3.324219 -5.578125 -3.480469 c -0.191406 -0.015625 -0.378906 -0.023437 -0.570313 -0.019531 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 946 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 7.085938 2 c 0.574218 0.007812 1.152343 0.085938 1.726562 0.238281 c 3.054688 0.820313 5.1875 3.597657 5.1875 6.761719 h 2 v 1 h -0.007812 c 0.003906 0.265625 -0.101563 0.519531 -0.285157 0.707031 l -2 2 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -2 -2 c -0.1875 -0.1875 -0.289063 -0.441406 -0.289063 -0.707031 h -0.003906 v -1 h 2 c 0 -2.269531 -1.515625 -4.242188 -3.707031 -4.832031 c -2.1875 -0.585938 -4.488281 0.367187 -5.625 2.332031 c -1.132813 1.964844 -0.808594 4.429688 0.796875 6.035156 c 0.390625 0.390625 0.390625 1.023438 0 1.414063 s -1.023438 0.390625 -1.414063 0 c -2.238281 -2.238281 -2.695312 -5.710938 -1.113281 -8.449219 c 1.1875 -2.054688 3.304688 -3.324219 5.578125 -3.480469 c 0.1875 -0.015625 0.378906 -0.023437 0.570313 -0.019531 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 943 B

View file

@ -0,0 +1,185 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="a">
<path d="m 2 2 h 124 v 124 h -124 z m 0 0"/>
</clipPath>
<clipPath id="b">
<path d="m 34.957031 2.382812 l 85.003907 22.777344 c 4.265624 1.144532 6.800781 5.53125 5.65625 9.796875 l -22.777344 85.003907 c -1.144532 4.265624 -5.53125 6.800781 -9.796875 5.65625 l -85.003907 -22.777344 c -4.265624 -1.144532 -6.800781 -5.53125 -5.65625 -9.796875 l 22.777344 -85.003907 c 1.144532 -4.265624 5.53125 -6.796874 9.796875 -5.65625 z m 0 0"/>
</clipPath>
<linearGradient id="c" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffa348"/>
<stop offset="0.474835" stop-color="#c061cb"/>
<stop offset="1" stop-color="#1c71d8"/>
</linearGradient>
<linearGradient id="d" gradientTransform="matrix(-1.375 0 0 1.133334 124.499995 -224.800098)" x1="31.003128" x2="71.043274" xlink:href="#c" y1="257.064087" y2="220.171326"/>
<clipPath id="e">
<path d="m 20 20 h 88 v 68 h -88 z m 0 0"/>
</clipPath>
<clipPath id="f">
<path d="m 106 20 h -84 c -1.105469 0 -2 0.894531 -2 2 v 64 c 0 1.105469 0.894531 2 2 2 h 84 c 1.105469 0 2 -0.894531 2 -2 v -64 c 0 -1.105469 -0.894531 -2 -2 -2 z m 0 0"/>
</clipPath>
<filter id="g" height="100%" width="100%" x="0%" y="0%">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
<mask id="h">
<g filter="url(#g)">
<rect fill-opacity="0.568457" height="128" width="128"/>
</g>
</mask>
<linearGradient id="i" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="j" gradientTransform="matrix(-0.707107 0.707107 0.707107 0.707107 109.999996 -173.999977)" x1="212.802719" x2="290.802734" xlink:href="#i" y1="161.293045" y2="161.293045"/>
<clipPath id="k">
<rect height="152" width="192"/>
</clipPath>
<mask id="l">
<g filter="url(#g)">
<rect fill-opacity="0.363132" height="128" width="128"/>
</g>
</mask>
<linearGradient id="m" gradientTransform="matrix(-0.707107 0.707107 0.707107 0.707107 110.999996 -177.999977)" x1="202.232544" x2="240.798187" xlink:href="#i" y1="172.831131" y2="172.831131"/>
<clipPath id="n">
<rect height="152" width="192"/>
</clipPath>
<mask id="o">
<g filter="url(#g)">
<rect fill-opacity="0.768678" height="128" width="128"/>
</g>
</mask>
<linearGradient id="p" gradientTransform="matrix(0 1.428571 -1.428571 0 427.285702 12.714302)" x1="24" x2="38" xlink:href="#i" y1="238" y2="238"/>
<clipPath id="q">
<rect height="152" width="192"/>
</clipPath>
<clipPath id="r">
<path d="m 22 42 h 60 v 61 h -60 z m 0 0"/>
</clipPath>
<clipPath id="s">
<path d="m 22.0625 72.179688 c 0 16.535156 13.402344 29.9375 29.9375 29.9375 s 29.9375 -13.402344 29.9375 -29.9375 c 0 -16.535157 -13.402344 -29.9375 -29.9375 -29.9375 s -29.9375 13.402343 -29.9375 29.9375 z m 0 0"/>
</clipPath>
<linearGradient id="t" gradientTransform="matrix(-1.649999 0 0 1.36 139.400018 -271.759913)" x1="31.003128" x2="71.043274" xlink:href="#c" y1="257.064087" y2="220.171326"/>
<clipPath id="u">
<path d="m 117.199219 22 h -100.800781 c -1.324219 0 -2.398438 1.074219 -2.398438 2.398438 v 76.800781 c 0 1.328125 1.074219 2.402343 2.398438 2.402343 h 100.800781 c 1.328125 0 2.402343 -1.074218 2.402343 -2.402343 v -76.800781 c 0 -1.324219 -1.074218 -2.398438 -2.402343 -2.398438 z m 0 0"/>
</clipPath>
<mask id="v">
<g filter="url(#g)">
<rect fill-opacity="0.568457" height="128" width="128"/>
</g>
</mask>
<linearGradient id="w" gradientTransform="matrix(-0.848528 0.848528 0.848528 0.848528 120.400036 -213.999794)" x1="212.802719" x2="290.802734" xlink:href="#i" y1="161.293045" y2="161.293045"/>
<clipPath id="x">
<rect height="152" width="192"/>
</clipPath>
<mask id="y">
<g filter="url(#g)">
<rect fill-opacity="0.363132" height="128" width="128"/>
</g>
</mask>
<linearGradient id="z" gradientTransform="matrix(-0.848528 0.848528 0.848528 0.848528 121.600035 -218.799791)" x1="202.232544" x2="240.798187" xlink:href="#i" y1="172.831131" y2="172.831131"/>
<clipPath id="A">
<rect height="152" width="192"/>
</clipPath>
<clipPath id="B">
<path d="m 22 42 h 60 v 61 h -60 z m 0 0"/>
</clipPath>
<clipPath id="C">
<path d="m 22.0625 72.179688 c 0 16.535156 13.402344 29.9375 29.9375 29.9375 s 29.9375 -13.402344 29.9375 -29.9375 c 0 -16.535157 -13.402344 -29.9375 -29.9375 -29.9375 s -29.9375 13.402343 -29.9375 29.9375 z m 0 0"/>
</clipPath>
<mask id="D">
<g filter="url(#g)">
<rect fill-opacity="0.768678" height="128" width="128"/>
</g>
</mask>
<linearGradient id="E" gradientTransform="matrix(0 1.714284 -1.714284 0 501.142633 10.057194)" x1="24" x2="38" xlink:href="#i" y1="238" y2="238"/>
<clipPath id="F">
<rect height="152" width="192"/>
</clipPath>
<mask id="G">
<g filter="url(#g)">
<rect fill-opacity="0.154" height="128" width="128"/>
</g>
</mask>
<clipPath id="H">
<rect height="152" width="192"/>
</clipPath>
<mask id="I">
<g filter="url(#g)">
<rect fill-opacity="0.154" height="128" width="128"/>
</g>
</mask>
<clipPath id="J">
<rect height="152" width="192"/>
</clipPath>
<mask id="K">
<g filter="url(#g)">
<rect fill-opacity="0.35" height="128" width="128"/>
</g>
</mask>
<radialGradient id="L" cx="-72" cy="190" gradientTransform="matrix(-1 0 0 1 -12 -123.882362)" gradientUnits="userSpaceOnUse" r="29.937637">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="0.271152" stop-color="#ffffff" stop-opacity="0.866667"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<clipPath id="M">
<rect height="152" width="192"/>
</clipPath>
<path d="m 34.957031 2.382812 l 85.003907 22.777344 c 4.265624 1.144532 6.800781 5.53125 5.65625 9.796875 l -22.777344 85.003907 c -1.144532 4.265624 -5.53125 6.800781 -9.796875 5.65625 l -85.003907 -22.777344 c -4.265624 -1.144532 -6.800781 -5.53125 -5.65625 -9.796875 l 22.777344 -85.003907 c 1.144532 -4.265624 5.53125 -6.796874 9.796875 -5.65625 z m 0 0" fill="#deddda"/>
<g clip-path="url(#a)">
<g clip-path="url(#b)">
<image height="152" transform="matrix(1 0 0 1 -8 -16)" width="192" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAACYCAYAAACyAeadAAAABmJLR0QA/wD/AP+gvaeTAAAENElEQVR4nO3a4W7iOBQG0BvKzPs/77bA/gArxnVmpCVhZvWdI1kQBLSy7+fYCVUAAAAAAAAAAAAAAAAAAAAA/H2WN3//0X+Pu9tvjnk4H/Cdy+T5Uor/3W41L3xh6OxdlGPBL1V1Go6P+Lvc3brH1q7Dcf++eHueAcainzUBOFZf4NeNJgSdvQLQF/9H3Yv9/Hj+0b1mKXS8fua/dO2r7n1/Gd4bbY8A9LP6R62F/+PxvB0LwHuMAfiq78V/ebxnqfAQ7HUGONU605/rXvw/6zkA9gDHG/cAl1rHZamqz3ou+Otb/7u/0KsB6Nf8rfh/1nMA+tm//1xV+Oyzo1l/3up5/1XDe2yKa78lUAvAj1qLvy2BxmXP1uU5/ru+P8crcePk0y+RrhU+Fq8EYLzi0y9/2tJnnHkU//GWSTvXfGN8qvCzwBFLoP6qT7M120R2+gFmd9z7pU8/Pm1j3F+UiB2HV88A7bHfBG8Vf/zp9kBjv/aB6EPQxml2XyZybPY8A/Sd2m/KZo3jzPp+6wZl/Bng9Pu3/NZszdko/vf7VZ/Pfp4Sba8AzI5nv0vhPbZ+++PXuYM9AlA1n/2rFP6fNuv/rbGKtFcA4H9JAIgmAEQTAKIJANEEgGgCQDQBIJoAEE0AiCYARBMAogkA0QSAaAJANAEgmgAQTQCIJgBEEwCiCQDRBIBoAkA0ASCaABBNAIgmAEQTAKIJANEEgGgCQDQBIJoAEE0AiCYARBMAogkA0QSAaAJANAEgmgAQTQCIJgBEEwCiCQDRBIBoAkA0ASCaABBNAIgmAEQTAKIJANEEgGgCQDQBIJoAEE0AiCYARBMAogkA0QSAaAJANAEgmgAQTQCIJgBEEwCiCQDRBIBoAkA0ASCaABBNAIgmAEQTAKIJANEEgGgCQDQBIJoAEE0AiCYARBMAogkA0fYKwK1rveXR+DNm/b81VpH2CMDYke146R4F4b3GPm+PW2MV67zDd9wmrVnq+2DEd/qBZpNOP/G08bmWs0BVvR6AvkNba6+NgzDORhxna+K51nysYr0SgFbkrWMvXTvVurw6DZ8Zv4PXjZPKUs9j0Bf/pZ4DUBU8DnueAS5V9fX4zlN9D8FSZpx32Fr6tPH5qjUE8ePx6hmg6nlm+aqqz1oH4FyWQH9Cv+y51Vr4YwDiQ/Dx4ufHTdf42q8+Jwj72brcea216P95tM9al6rXN/6Pf6U9lkBV6xmgal3qtNfPdQ+as8Dx+jX9uOxpxW8J1NnjMmjV80zSr/XbTPNR6z5A8R9rti9rS9P+QkX87F+1332AVvTtLHCt5xlIAN5nDEBrX91r8Vd/mj2Lsd/snjaaJdCx+sIer/mPm9744q/avxBndyJPw/ERf5e7cQ8w3vU18w+OKMRl8tzS5/22Cl7xd44uytkdSo7njjsAAAAAAAAAAAAAAf4F/cwkE5fMKm0AAAAASUVORK5CYII="/>
</g>
</g>
<path d="m 20 12 h 88 c 4.417969 0 8 3.582031 8 8 v 88 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -88 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
<path d="m 106 20 h -84 c -1.105469 0 -2 0.894531 -2 2 v 64 c 0 1.105469 0.894531 2 2 2 h 84 c 1.105469 0 2 -0.894531 2 -2 v -64 c 0 -1.105469 -0.894531 -2 -2 -2 z m 0 0" fill="url(#d)"/>
<g clip-path="url(#e)">
<g clip-path="url(#f)">
<g clip-path="url(#k)" mask="url(#h)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 40.34375 68.605469 l -43.839844 43.839843 c -3.125 3.125 -3.125 8.191407 0 11.3125 l 43.839844 43.84375 c 3.125 3.121094 8.1875 3.121094 11.3125 0 l 43.839844 -43.84375 c 3.125 -3.121093 3.125 -8.1875 0 -11.3125 l -43.839844 -43.839843 c -3.125 -3.125 -8.1875 -3.125 -11.3125 0 z m 0 0" fill="url(#j)"/>
</g>
<g clip-path="url(#n)" mask="url(#l)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 69.34375 77.65625 l -43.839844 43.839844 c -3.125 3.125 -3.125 8.191406 0 11.316406 l 43.839844 43.839844 c 3.125 3.125 8.1875 3.125 11.3125 0 l 43.839844 -43.839844 c 3.125 -3.125 3.125 -8.191406 0 -11.316406 l -43.839844 -43.839844 c -3.125 -3.125 -8.1875 -3.125 -11.3125 0 z m 0 0" fill="url(#m)"/>
</g>
</g>
</g>
<g clip-path="url(#q)" mask="url(#o)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 93 67 c -5.523438 0 -10 -4.476562 -10 -10 s 4.476562 -10 10 -10 s 10 4.476562 10 10 s -4.476562 10 -10 10 z m 0 0" fill="url(#p)"/>
</g>
<g clip-path="url(#r)">
<g clip-path="url(#s)">
<path d="m 117.601562 22 h -101.601562 c -1.105469 0 -2 0.894531 -2 2 v 77.601562 c 0 1.101563 0.894531 2 2 2 h 101.601562 c 1.101563 0 2 -0.898437 2 -2 v -77.601562 c 0 -1.105469 -0.898437 -2 -2 -2 z m 0 0" fill="url(#t)"/>
<g clip-path="url(#u)">
<g clip-path="url(#x)" mask="url(#v)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 37.941406 75.996094 l -54.871094 54.871094 c -3.121093 3.125 -3.121093 8.1875 0 11.3125 l 54.871094 54.871093 c 3.125 3.125 8.191406 3.125 11.316406 0 l 54.871094 -54.871093 c 3.125 -3.125 3.125 -8.1875 0 -11.3125 l -54.871094 -54.871094 c -3.125 -3.125 -8.191406 -3.125 -11.316406 0 z m 0 0" fill="url(#w)"/>
</g>
<g clip-path="url(#A)" mask="url(#y)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 72.742188 86.855469 l -54.871094 54.871093 c -3.125 3.125 -3.125 8.191407 0 11.316407 l 54.871094 54.871093 c 3.125 3.125 8.191406 3.125 11.316406 0 l 54.871094 -54.871093 c 3.121093 -3.125 3.121093 -8.191407 0 -11.316407 l -54.871094 -54.871093 c -3.125 -3.121094 -8.191406 -3.121094 -11.316406 0 z m 0 0" fill="url(#z)"/>
</g>
</g>
</g>
</g>
<g clip-path="url(#B)">
<g clip-path="url(#C)">
<g clip-path="url(#F)" mask="url(#D)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 100 75.199219 c -6.628906 0 -12 -5.371094 -12 -12 c 0 -6.625 5.371094 -12 12 -12 s 12 5.375 12 12 c 0 6.628906 -5.371094 12 -12 12 z m 0 0" fill="url(#E)"/>
</g>
</g>
</g>
<g clip-path="url(#H)" mask="url(#G)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 11.890625 268.550308 l 15.457031 -15.457031" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-width="1.63784" transform="matrix(1 0 0 1 2 -137.882339)"/>
</g>
<g fill="none">
<path d="m 30 96.117188 l -8 8" stroke="#241f31" stroke-width="6"/>
<path d="m 30 94.117188 l -8 8" stroke="#3d3846" stroke-width="6"/>
<path d="m 22 104.117188 l -14 14" stroke="#5e5c64" stroke-linecap="round" stroke-width="12"/>
<path d="m 22 102.117188 l -14 14" stroke="#77767b" stroke-linecap="round" stroke-width="12"/>
<path d="m 82.117188 74.117187 c 0 16.632813 -13.484375 30.117188 -30.117188 30.117188 c -16.632812 0 -30.117187 -13.484375 -30.117187 -30.117188 c 0 -16.632812 13.484375 -30.117187 30.117187 -30.117187 c 16.632813 0 30.117188 13.484375 30.117188 30.117187 z m 0 0" stroke="#241f31" stroke-linejoin="round" stroke-width="4"/>
</g>
<g clip-path="url(#J)" mask="url(#I)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m -170.584656 386.756477 l 16 -16" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-width="2" transform="matrix(1 0 0 1 183.584656 -255.63929)"/>
</g>
<g clip-path="url(#M)" mask="url(#K)" transform="matrix(1 0 0 1 -8 -16)">
<path d="m 30.0625 88.179688 c 0 16.535156 13.402344 29.9375 29.9375 29.9375 s 29.9375 -13.402344 29.9375 -29.9375 c 0 -16.535157 -13.402344 -29.9375 -29.9375 -29.9375 s -29.9375 13.402343 -29.9375 29.9375 z m 0 0" fill="url(#L)"/>
</g>
<path d="m 82.117188 72.117187 c 0 16.632813 -13.484375 30.117188 -30.117188 30.117188 c -16.632812 0 -30.117187 -13.484375 -30.117187 -30.117188 c 0 -16.632812 13.484375 -30.117187 30.117187 -30.117187 c 16.632813 0 30.117188 13.484375 30.117188 30.117187 z m 0 0" fill="none" stroke="#5e5c64" stroke-linejoin="round" stroke-width="4"/>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<g fill="#2e3436">
<path d="m 1 3 h 14 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 h -14 c -0.550781 0 -1 -0.449219 -1 -1 s 0.449219 -1 1 -1 z m 0 0"/>
<path d="m 4 4 v -1.5 c 0 -1.386719 1.113281 -2.5 2.5 -2.5 h 2.980469 c 1.382812 0 2.5 1.113281 2.5 2.5 v 1.5 h -2 v -1.5 c 0 -0.269531 -0.230469 -0.5 -0.5 -0.5 h -2.980469 c -0.269531 0 -0.5 0.230469 -0.5 0.5 v 1.5 z m 0 0"/>
<path d="m 4 4 v 9 c 0 0.546875 0.453125 1 1 1 h 6 c 0.546875 0 1 -0.453125 1 -1 v -9 h 2 v 9 c 0 1.660156 -1.339844 3 -3 3 h -6 c -1.660156 0 -3 -1.339844 -3 -3 v -9 z m 0 0"/>
<path d="m 7 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
<path d="m 10 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<g fill="#2e3436">
<path d="m 1 9 c -0.550781 0 -1 0.449219 -1 1 v 6 h 6 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -2.585938 l 3.292969 -3.292969 c 0.390625 -0.390625 0.390625 -1.023437 0 -1.414062 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 s -0.519531 0.105469 -0.707031 0.292969 l -3.292969 3.292969 v -2.585938 c 0 -0.550781 -0.449219 -1 -1 -1 z m 0 0"/>
<path d="m 15 7 c 0.550781 0 1 -0.449219 1 -1 v -6 h -6 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 h 2.585938 l -3.292969 3.292969 c -0.390625 0.390625 -0.390625 1.023437 0 1.414062 c 0.1875 0.1875 0.441406 0.292969 0.707031 0.292969 s 0.519531 -0.105469 0.707031 -0.292969 l 3.292969 -3.292969 v 2.585938 c 0 0.550781 0.449219 1 1 1 z m 0 0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 897 B

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<g fill="#2e3436">
<path d="m 2 8 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 h 2.585938 l -3.292969 3.292969 c -0.390625 0.390625 -0.390625 1.023437 0 1.414062 s 1.023437 0.390625 1.414062 0 l 3.292969 -3.292969 v 2.585938 c 0 0.550781 0.449219 1 1 1 s 1 -0.449219 1 -1 v -6 z m 0 0"/>
<path d="m 14 8 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -2.585938 l 3.292969 -3.292969 c 0.390625 -0.390625 0.390625 -1.023437 0 -1.414062 s -1.023437 -0.390625 -1.414062 0 l -3.292969 3.292969 v -2.585938 c 0 -0.550781 -0.449219 -1 -1 -1 s -1 0.449219 -1 1 v 6 z m 0 0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 740 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 4 1 c -1.660156 0 -3 1.339844 -3 3 v 8 c 0 1.660156 1.339844 3 3 3 h 8 c 1.660156 0 3 -1.339844 3 -3 v -8 c 0 -1.660156 -1.339844 -3 -3 -3 z m 3 3 h 2 v 3 h 3 v 2 h -3 v 3 h -2 v -3 h -3 v -2 h 3 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 371 B

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<path d="m 4 1 c -1.660156 0 -3 1.339844 -3 3 v 8 c 0 1.660156 1.339844 3 3 3 h 8 c 1.660156 0 3 -1.339844 3 -3 v -8 c 0 -1.660156 -1.339844 -3 -3 -3 z m 0 6 h 8 v 2 h -8 z m 0 0" fill="#2e3436"/>
</svg>

After

Width:  |  Height:  |  Size: 335 B

View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/image-properties.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="image-properties">
<info>
<link type="guide" xref="index#additional-features"/>
<desc>View detailed properties of the selected image.</desc>
</info>
<title>Image Properties</title>
<p>Loupe allows users to view an image's properties. All images will have the following
basic properties:</p>
<list>
<item>
<p>Image size</p>
</item>
<item>
<p>Image format</p>
</item>
<item>
<p>File size</p>
</item>
<item>
<p>File creation date</p>
</item>
<item>
<p>File modification date</p>
</item>
</list>
<p>If the file has <link href="https://en.wikipedia.org/wiki/Exif">Exif</link> metadata, it
will be shown below the basic properties.</p>
<p>To view the selected image's properties, press the <gui>Image Properties</gui>
(<media type="image" src="figures/help-about-symbolic.svg">help-about-symbolic</media>) button.</p>
</page>

View file

@ -1,19 +1,40 @@
<page xmlns="http://projectmallard.org/1.0/"
type="guide" style="task"
xmlns:its="http://www.w3.org/2005/11/its"
id="index">
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/index.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="guide" id="index">
<info>
<desc>Help for Loupe.</desc>
<title type='link' role="trail"><media its:translate="no" type="image" src="figures/org.gnome.eog-symbolic.svg"/></title>
<title type='link'>Loupe</title>
<title type='text'>Loupe</title>
<credit type="author copyright">
<name>Christopher Davis</name>
<email>christopherdavis@gnome.org</email>
<years>2020</years>
</credit>
<desc>Browse through your images and inspect their metadata.</desc>
</info>
<title>Loupe</title>
<title><media type="image" its:translate="no" src="figures/org.gnome.Loupe.svg" height="48px" width="48px"/> Loupe Image Viewer</title>
<section>
<title>Introduction</title>
<p>Loupe is an image viewer that supports modern image formats. It provides:</p>
<list>
<item>
<p>Fast GPU accelerated image rendering with tiled rendering for SVGs</p>
</item>
<item>
<p>Extendable and sandboxed raster image decoding</p>
</item>
<item>
<p>Extensive support for touchpad and touchscreen gestures</p>
</item>
<item>
<p>Accessible presentation of the most important metadata</p>
</item>
</list>
</section>
<section id="getting-started" style="2column">
<title>Getting Started</title>
</section>
<section id="additional-features" style="2column">
<title>Additional Features</title>
</section>
<section id="technical-information" style="2column">
<title>Technical Information</title>
</section>
</page>

View file

@ -0,0 +1,85 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/opening-images.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="opening-images">
<info>
<link type="guide" xref="index#getting-started"/>
<desc>Open and browse through pictures via the file chooser, file manager, or drag and drop.</desc>
</info>
<title>Opening Images</title>
<section>
<title>Opening Files</title>
<section>
<title>From The File Chooser</title>
<p>Loupe allows users to pick images with the file chooser at any time.</p>
<steps>
<item>
<p>Click the <gui>Open Files…</gui> button, the <gui style="menuitem">Open…</gui> menu item, or press <keyseq><key>Ctrl</key><key>O</key></keyseq>. The <gui>Open Image</gui> file dialog will appear.</p>
</item>
<item>
<p>Select the image you want to open, then click <gui>Open</gui>.</p>
</item>
</steps>
<p>Loupe will open with the selected image showing, and the other images in the directory can be reached by browsing.</p>
</section>
<section>
<title>From The File Manager</title>
<p>Users can also open images in Loupe directly from their file manager.</p>
<steps>
<item>
<p>Open your preferred file manager application.</p>
</item>
<item>
<p>Navigate to the image you want to view in Loupe.</p>
</item>
<item>
<p>If Loupe is set as your default image viewer, use the file manager's function for opening files.</p>
</item>
<item>
<p>If Loupe is not your default image viewer, you will need to select <gui>Open With…</gui> or similar in the file manager, and pick Loupe.</p>
</item>
</steps>
</section>
<section>
<title>Drag &amp; Drop</title>
<p>Loupe also accepts local image files dragged from other applications.</p>
<steps>
<item>
<p>In the source application, begin dragging the image.</p>
</item>
<item>
<p>Drag the image over the Loupe main window. A blue highlighted area should appear.</p>
</item>
<item>
<p>Drop the image while it's still hovered over the main window.</p>
</item>
</steps>
</section>
</section>
<section>
<title>Browsing</title>
<p>When opening an image from the file chooser or file manager, Loupe will load other files
in the parent directory of the image and sort them in alphabetical order. Users can
browse the other images in the directory with the <gui>Previous Image</gui> (<media type="image" src="figures/go-previous-symbolic.svg">go-previous-symbolic</media>)
and <gui>Next Image</gui> (<media type="image" src="figures/go-next-symbolic.svg">go-next-symbolic</media>) buttons.
Keyboard users can also use the following shortcuts:</p>
<list>
<item>
<p><key>→</key> to go to the next image.</p>
</item>
<item>
<p><key>←</key> to go to the previous image.</p>
</item>
<item>
<p><key>Home</key> to jump to the first image in the directory.</p>
</item>
<item>
<p><key>End</key> to jump to the last image in the directory.</p>
</item>
</list>
</section>
</page>

View file

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/sending-to-other-apps.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="sending-to-other-apps">
<info>
<link type="guide" xref="index#additional-features"/>
<desc>Learn how to send, copy, and drag images from Loupe to other apps.</desc>
</info>
<title>Sending Images To Other Apps</title>
<section>
<title>"Open With…" Action</title>
<steps>
<item>
<p>Click the <gui style="menuitem">Open With…</gui> menu item. A dialog with a list of applications will appear.</p>
</item>
<item>
<p>Select the application you want to open the image with.</p>
</item>
</steps>
</section>
<section>
<title>Copy &amp; Paste</title>
<steps>
<item>
<p>Click the <gui>Copy to Clipboard</gui> (<media type="image" src="figures/edit-copy-symbolic.svg">edit-copy-symbolic</media>) button. A toast notifying you that the image is in your clipboard will appear.</p>
</item>
<item>
<p>Paste your image in your application of choice.</p>
</item>
</steps>
</section>
<section>
<title>Drag &amp; Drop</title>
<steps>
<item>
<p>Zoom out from the image completely.</p>
</item>
<item>
<p>Click and hold the selected image.</p>
</item>
<item>
<p>Drag the image to your application of choice.</p>
</item>
</steps>
</section>
</page>

View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/supported-formats.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="supported-formats">
<info>
<link type="guide" xref="index#technical-information"/>
</info>
<title>Supported Image Formats</title>
<p>Loupe uses <link href="https://gitlab.gnome.org/sophie-h/glycin">glycin</link> for
loading images. You can check <link href="https://gitlab.gnome.org/sophie-h/glycin#supported-image-formats">glycin's README</link>
for more details about the formats supported by the default loaders and the features
provided by each format.</p>
<p>Glycin's loaders are configurable, and new loaders can be created by third-parties,
so the supported formats on your system may vary.</p>
</page>

View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/trashing-images.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="trashing-images">
<info>
<link type="guide" xref="index#additional-features"/>
<desc>Move unwanted images to the trash directly from Loupe.</desc>
</info>
<title>Moving Images to Trash</title>
<p>If a user wants to remove an image, they can press the <gui>Move To Trash</gui>
(<media type="image" src="figures/user-trash-symbolic.svg">user-trash-symbolic</media>)
button. A toast will appear allowing them to restore the image with the <gui>Undo</gui>
button.</p>
</page>

View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
DO NOT EDIT THIS FILE!
This file is autogenerated with ducktype.
Edit duck/viewing-images.page.duck instead and run make in this directory.
-->
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="viewing-images">
<info>
<link type="guide" xref="index#getting-started"/>
<desc>Learn how to view an image at different scales and orientations.</desc>
</info>
<title>Viewing Images</title>
<section>
<title>Zooming</title>
<p>Users can zoom in with the <gui>Zoom In</gui> (<media type="image" src="figures/zoom-in-symbolic.svg">zoom-in-symbolic</media>)
button and zoom out with the <gui>Zoom Out</gui> (<media type="image" src="figures/zoom-out-symbolic.svg">zoom-out-symbolic</media>)
button. They can also use the following keyboard shortcuts:</p>
<list>
<item>
<p><keyseq><key>Ctrl</key><key>+</key></keyseq> or <key>+</key> to zoom in.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>-</key></keyseq> or <key>-</key> to zoom out.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>0</key></keyseq> or <key>0</key> to zoom to the best fitting size for the window size.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>1</key></keyseq> or <key>1</key> to zoom to the image's original scale.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>2</key></keyseq> or <key>2</key> to zoom to 200% of the image's original scale.</p>
</item>
</list>
<p>Touchpad and touchscreen users can also zoom with a two-finger pinch gesture.</p>
</section>
<section>
<title>Panning</title>
<p>Mouse and touchpad users can pan the view when zoomed in by clicking and dragging the image.
Touchscreen users can use a single-finger drag gesture to pan the view. Users with a keyboard
can also use the following keyboard shortcuts:</p>
<list>
<item>
<p><keyseq><key>Ctrl</key><key>←</key></keyseq> to pan left.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>→</key></keyseq> to pan right.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>↑</key></keyseq> to pan up.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>↓</key></keyseq> to pan down.</p>
</item>
</list>
</section>
<section>
<title>Rotating</title>
<p>Users can use the <gui>Rotate Right</gui> (<media type="image" src="figures/object-rotate-right-symbolic.svg">object-rotate-right-symbolic</media>)
and <gui>Rotate Left</gui> (<media type="image" src="figures/object-rotate-left-symbolic.svg">object-rotate-left-symbolic</media>)
buttons under <gui style="menuitem">Rotate</gui> in the main menu to rotate clockwise and
counter-clockwise. They can also use the following keyboard shortcuts:</p>
<list>
<item>
<p><keyseq><key>Ctrl</key><key>R</key></keyseq> to rotate clockwise.</p>
</item>
<item>
<p><keyseq><key>Ctrl</key><key>Shift</key><key>R</key></keyseq> to rotate counter-clockwise.</p>
</item>
</list>
<p>Touchpad and touchscreen users can also use a two-finger rotate gesture.</p>
</section>
<section>
<title>Fullscreen</title>
<p>Loupe has a simple fullscreen mode. Users can toggle fullscreen mode by pressing the <gui>Toggle Fullscreen</gui>
(<media type="image" src="figures/view-fullscreen-symbolic.svg">view-fullscreen-symbolic</media> / <media type="image" src="figures/view-restore-symbolic.svg">view-restore-symbolic</media>) button.
Keyboard users can also use <key>F11</key> to toggle fullscreen mode.</p>
</section>
</page>

View file

@ -1,8 +1,30 @@
sources = [
'index.page'
'image-properties.page',
'index.page',
'opening-images.page',
'sending-to-other-apps.page',
'supported-formats.page',
'trashing-images.page',
'viewing-images.page',
]
media = [
'figures' / 'edit-copy-symbolic.svg',
'figures' / 'go-next-symbolic.svg',
'figures' / 'go-previous-symbolic.svg',
'figures' / 'help-about-symbolic.svg',
'figures' / 'object-rotate-left-symbolic.svg',
'figures' / 'object-rotate-right-symbolic.svg',
'figures' / 'org.gnome.Loupe.svg',
'figures' / 'user-trash-symbolic.svg',
'figures' / 'view-fullscreen-symbolic.svg',
'figures' / 'view-restore-symbolic.svg',
'figures' / 'zoom-in-symbolic.svg',
'figures' / 'zoom-out-symbolic.svg',
]
gnome.yelp(
meson.project_name(),
sources: sources,
media: media,
)