lazzexus/Loupe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

window: Rework properties adaptivity

Browse source 
Ports the sidebar to AdwOverlaySplitView, and uses AdwMultiLayoutView
to use a box at narrow sizes. A bottom sheet also
overlays the content when the window is both narrow and short.
This commit is contained in:
Christopher Davis 2024-06-11 23:51:05 -04:00
parent 230ffd5c77
commit bb9b834a22
4 changed files with 236 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/widgets/properties_view.ui
View file

@ -1,9 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<template class="LpPropertiesView" parent="AdwBin">
<property name="width-request">255</property>
<property name="child">
<object class="GtkScrolledWindow">
<property name="propagate-natural-height">True</property>
<property name="max-content-height">316</property>
<property name="child">
<object class="GtkBox">
<property name="orientation">vertical</property>

348
src/window.ui
View file

@ -64,154 +64,256 @@
<child>
<object class="AdwBreakpoint">
<condition>max-width: 590sp</condition>
<setter object="properties_flap" property="orientation">vertical</setter>
<setter object="multi_layout_view" property="layout-name">sheet</setter>
</object>
</child>
<child>
<object class="AdwBreakpoint">
<condition>max-width: 590sp and max-height: 550sp</condition>
<setter object="multi_layout_view" property="layout-name">short</setter>
</object>
</child>
<property name="content">
<object class="LpFullscreenWidget" id="fullscreen_widget">
<property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
<property name="headerbar">
<object class="AdwHeaderBar" id="headerbar">
<property name="show-end-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
<property name="show-start-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
<style>
<class name="fullscreen-osd" />
</style>
<child type="start">
<object class="GtkButton">
<property name="icon-name">edit-copy-symbolic</property>
<property name="action-name">win.copy-image</property>
<property name="tooltip-text" translatable="yes">Copy to Clipboard</property>
</object>
</child>
<child type="start">
<object class="GtkButton">
<property name="icon-name">user-trash-symbolic</property>
<property name="action-name">win.trash</property>
<property name="tooltip-text" translatable="yes">Move to Trash</property>
</object>
</child>
<child type="end">
<object class="GtkMenuButton" id="primary_menu">
<property name="icon-name">open-menu-symbolic</property>
<property name="tooltip-text" translatable="yes">Main Menu</property>
<property name="primary">True</property>
<property name="popover">
<object class="GtkPopoverMenu">
<property name="menu-model">primary_menu</property>
<child type="rotate-left">
<object class="GtkButton">
<property name="icon-name">object-rotate-left-symbolic</property>
<property name="tooltip-text" translatable="yes">Rotate Left</property>
<property name="action-name">win.rotate-ccw</property>
<style>
<class name="flat" />
</style>
<object class="AdwToastOverlay" id="toast_overlay">
<property name="child">
<object class="AdwMultiLayoutView" id="multi_layout_view">
<child>
<object class="AdwLayout">
<property name="name">sidebar</property>
<property name="content">
<object class="LpFullscreenWidget" id="fullscreen_widget">
<property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
<property name="headerbar">
<object class="AdwLayoutSlot">
<property name="id">headerbar</property>
</object>
</child>
<child type="rotate-right">
<object class="GtkButton">
<property name="icon-name">object-rotate-right-symbolic</property>
<property name="tooltip-text" translatable="yes">Rotate Right</property>
<property name="action-name">win.rotate-cw</property>
<style>
<class name="flat" />
</style>
</property>
<property name="content">
<object class="AdwOverlaySplitView" id="properties_split_view">
<property name="sidebar-position">end</property>
<property name="min-sidebar-width">255</property>
<property name="show-sidebar" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
<property name="content">
<object class="AdwLayoutSlot">
<property name="id">content</property>
</object>
</property>
<property name="sidebar">
<object class="AdwLayoutSlot">
<property name="id">properties</property>
</object>
</property>
</object>
</child>
</property>
</object>
</property>
</object>
</child>
<child type="end">
<object class="GtkToggleButton" id="properties_button">
<property name="icon-name">info-outline-symbolic</property>
<property name="tooltip-text" translatable="yes">Image Properties</property>
</object>
</child>
<child>
<object class="GtkEventControllerMotion" id="headerbar_events" />
</child>
</object>
</property>
<property name="content">
<object class="AdwToastOverlay" id="toast_overlay">
<property name="child">
<object class="AdwFlap" id="properties_flap">
<property name="flap-position">end</property>
<property name="fold-policy">never</property>
<property name="swipe-to-open">false</property>
<property name="locked">True</property>
<property name="reveal-flap" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
<object class="AdwLayout">
<property name="name">sheet</property>
<property name="content">
<object class="LpDragOverlay" id="drag_overlay">
<property name="drop_target">drop_target</property>
<property name="overlayed">
<object class="AdwBin">
<property name="can-target">false</property>
<style>
<class name="lp-dragging-area-highlight" />
</style>
<object class="LpFullscreenWidget">
<property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
<property name="headerbar">
<object class="AdwLayoutSlot">
<property name="id">headerbar</property>
</object>
</property>
<property name="child">
<object class="GtkStack" id="stack">
<property name="visible-child">status_page</property>
<property name="vexpand">True</property>
<style>
<class name="drop-widget" />
</style>
<property name="content">
<object class="GtkBox">
<property name="orientation">vertical</property>
<child>
<object class="GtkDropTarget" id="drop_target">
<property name="actions">copy</property>
<object class="AdwLayoutSlot">
<property name="id">content</property>
<property name="vexpand">True</property>
</object>
</child>
<child>
<object class="AdwStatusPage" id="status_page">
<property name="title" translatable="yes">View Images</property>
<property name="description" translatable="yes">Drag and drop images here</property>
<child>
<object class="GtkButton">
<property name="halign">center</property>
<property name="label" translatable="yes">_Open Files…</property>
<property name="use-underline">True</property>
<property name="action-name">win.open</property>
<style>
<class name="pill" />
<class name="suggested-action" />
</style>
<object class="GtkRevealer">
<property name="transition-type">slide-up</property>
<property name="reveal-child" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
<property name="child">
<object class="AdwLayoutSlot">
<property name="id">properties</property>
</object>
</child>
</object>
</child>
<child>
<object class="LpImageView" id="image_view">
<child>
<object class="GtkGestureClick" id="forward_click_gesture">
<property name="button">9</property>
</object>
</child>
<child>
<object class="GtkGestureClick" id="backward_click_gesture">
<property name="button">8</property>
</object>
</child>
</property>
<style>
<class name="mobile-properties"/>
</style>
</object>
</child>
</object>
</property>
</object>
</property>
<property name="separator">
<object class="GtkSeparator" />
</property>
<property name="flap">
<object class="LpPropertiesView" id="properties_view">
<property name="vexpand">true</property>
</object>
</property>
</object>
</property>
</child>
<child>
<object class="AdwLayout">
<property name="name">short</property>
<property name="content">
<object class="AdwBottomSheet">
<property name="modal">True</property>
<property name="open" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
<property name="content">
<object class="LpFullscreenWidget">
<property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
<property name="headerbar">
<object class="AdwLayoutSlot">
<property name="id">headerbar</property>
</object>
</property>
<property name="content">
<object class="AdwLayoutSlot">
<property name="id">content</property>
</object>
</property>
</object>
</property>
<property name="sheet">
<object class="AdwToolbarView">
<child type="top">
<object class="AdwHeaderBar">
<property name="show-title">False</property>
</object>
</child>
<property name="content">
<object class="AdwLayoutSlot">
<property name="id">properties</property>
</object>
</property>
</object>
</property>
</object>
</property>
</object>
</child>
<child type="headerbar">
<object class="AdwHeaderBar" id="headerbar">
<property name="show-end-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
<property name="show-start-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
<style>
<class name="fullscreen-osd" />
</style>
<child type="start">
<object class="GtkButton">
<property name="icon-name">edit-copy-symbolic</property>
<property name="action-name">win.copy-image</property>
<property name="tooltip-text" translatable="yes">Copy to Clipboard</property>
</object>
</child>
<child type="start">
<object class="GtkButton">
<property name="icon-name">user-trash-symbolic</property>
<property name="action-name">win.trash</property>
<property name="tooltip-text" translatable="yes">Move to Trash</property>
</object>
</child>
<child type="end">
<object class="GtkMenuButton" id="primary_menu">
<property name="icon-name">open-menu-symbolic</property>
<property name="tooltip-text" translatable="yes">Main Menu</property>
<property name="primary">True</property>
<property name="popover">
<object class="GtkPopoverMenu">
<property name="menu-model">primary_menu</property>
<child type="rotate-left">
<object class="GtkButton">
<property name="icon-name">object-rotate-left-symbolic</property>
<property name="tooltip-text" translatable="yes">Rotate Left</property>
<property name="action-name">win.rotate-ccw</property>
<style>
<class name="flat" />
</style>
</object>
</child>
<child type="rotate-right">
<object class="GtkButton">
<property name="icon-name">object-rotate-right-symbolic</property>
<property name="tooltip-text" translatable="yes">Rotate Right</property>
<property name="action-name">win.rotate-cw</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</property>
</object>
</child>
<child type="end">
<object class="GtkToggleButton" id="properties_button">
<property name="icon-name">info-outline-symbolic</property>
<property name="tooltip-text" translatable="yes">Image Properties</property>
</object>
</child>
<child>
<object class="GtkEventControllerMotion" id="headerbar_events" />
</child>
</object>
</child>
<child type="content">
<object class="LpDragOverlay" id="drag_overlay">
<property name="drop_target">drop_target</property>
<property name="overlayed">
<object class="AdwBin">
<property name="can-target">false</property>
<style>
<class name="lp-dragging-area-highlight" />
</style>
</object>
</property>
<property name="child">
<object class="GtkStack" id="stack">
<property name="visible-child">status_page</property>
<style>
<class name="drop-widget" />
</style>
<child>
<object class="GtkDropTarget" id="drop_target">
<property name="actions">copy</property>
</object>
</child>
<child>
<object class="AdwStatusPage" id="status_page">
<property name="title" translatable="yes">View Images</property>
<property name="description" translatable="yes">Drag and drop images here</property>
<child>
<object class="GtkButton">
<property name="halign">center</property>
<property name="label" translatable="yes">_Open Files…</property>
<property name="use-underline">True</property>
<property name="action-name">win.open</property>
<style>
<class name="pill" />
<class name="suggested-action" />
</style>
</object>
</child>
</object>
</child>
<child>
<object class="LpImageView" id="image_view">
<child>
<object class="GtkGestureClick" id="forward_click_gesture">
<property name="button">9</property>
</object>
</child>
<child>
<object class="GtkGestureClick" id="backward_click_gesture">
<property name="button">8</property>
</object>
</child>
</object>
</child>
</object>
</property>
</object>
</child>
<child type="properties">
<object class="LpPropertiesView" id="properties_view"/>
</child>
</object>
</property>
</object>