Loupe/data/gtk/image_view.ui
Sophie Herold 029c0c9244 image: Add zoom and scrolling support
Zoom via
- Scroll event controller
- Zoom gesture
- Overlay buttons
- Fixed zoom level shortcuts (1=100%, 2=200%)
Scrolling via
- Scrolled window
- Drag gesture
Changes
- Implement best-fit via calculating a zoom level
- Gesture for carousel no longer working because of scrolled window
- Split control overlays into two to not steal inputs in area between

Closes #17
2022-11-23 00:57:43 +01:00

125 lines
5 KiB
XML

<?xml version="1.0" encoding="UTF-8"?>
<interface>
<template class="LpImageView" parent="AdwBin">
<property name="css-name">imageview</property>
<property name="focusable">True</property>
<property name="focus-on-click">True</property>
<property name="child">
<object class="GtkOverlay">
<property name="hexpand">True</property>
<child>
<object class="AdwCarousel" id="carousel">
<property name="interactive">True</property>
<property name="allow-mouse-drag">False</property>
<property name="allow-scroll-wheel">False</property>
<signal name="page-changed" handler="page_changed_cb" swapped="yes"/>
</object>
</child>
<child type="overlay">
<object class="GtkBox" id="controls_box_start">
<property name="valign">end</property>
<property name="halign">start</property>
<property name="margin-start">18</property>
<property name="margin-end">18</property>
<property name="margin-top">18</property>
<property name="margin-bottom">18</property>
<property name="spacing">12</property>
<child>
<object class="GtkButton" id="prev_button">
<property name="halign">start</property>
<property name="icon-name">go-previous-symbolic</property>
<property name="action-name">iv.previous</property>
<property name="tooltip-text" translatable="yes">Previous Image</property>
<style>
<class name="osd"/>
<class name="circular"/>
</style>
</object>
</child>
<child>
<object class="GtkButton" id="next_button">
<property name="icon-name">go-next-symbolic</property>
<property name="action-name">iv.next</property>
<property name="tooltip-text" translatable="yes">Next Image</property>
<style>
<class name="osd"/>
<class name="circular"/>
</style>
</object>
</child>
</object>
</child>
<child type="overlay">
<object class="GtkBox" id="controls_box_end">
<property name="valign">end</property>
<property name="halign">end</property>
<property name="margin-start">18</property>
<property name="margin-end">18</property>
<property name="margin-top">18</property>
<property name="margin-bottom">18</property>
<property name="spacing">12</property>
<child>
<object class="GtkButton" id="fullscreen_button">
<property name="halign">end</property>
<binding name="icon-name">
<closure type="gchararray" function="get_fullscreen_icon">
<lookup type="GtkWindow" name="fullscreened">
<lookup type="GtkWidget" name="root">LpImageView</lookup>
</lookup>
</closure>
</binding>
<property name="action-name">win.toggle-fullscreen</property>
<property name="tooltip-text" translatable="yes">Toggle Fullscreen</property>
<style>
<class name="osd"/>
<class name="circular"/>
</style>
</object>
</child>
<child>
<object class="GtkButton" id="zoom_out">
<property name="icon-name">zoom-out-symbolic</property>
<property name="action-name">win.zoom-out</property>
<property name="tooltip-text" translatable="yes">Zoom Out</property>
<style>
<class name="osd"/>
<class name="circular"/>
</style>
</object>
</child>
<child>
<object class="GtkButton" id="zoom_in">
<property name="icon-name">zoom-in-symbolic</property>
<property name="action-name">win.zoom-in</property>
<property name="tooltip-text" translatable="yes">Zoom In</property>
<style>
<class name="osd"/>
<class name="circular"/>
</style>
</object>
</child>
</object>
</child>
</object>
</property>
<child>
<object class="GtkShortcutController">
<child>
<object class="GtkShortcut">
<property name="trigger">Left</property>
<property name="action">action(iv.previous)</property>
</object>
</child>
<child>
<object class="GtkShortcut">
<property name="trigger">Right</property>
<property name="action">action(iv.next)</property>
</object>
</child>
</object>
</child>
<style>
<class name="image-view"/>
</style>
</template>
</interface>