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

properties: Remove usage of breakpoints

Browse source
This commit is contained in:
Sophie Herold 2024-12-19 23:25:50 +01:00
parent 2753447a0d
commit dd359235cf
8 changed files with 210 additions and 385 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/widgets/image_window.rs
View file

@ -45,7 +45,7 @@ use crate::util::gettext::*;
use crate::util::root::ParentWindow;
use crate::util::Direction;
use crate::widgets::window::ActionPartGlobal;
use crate::widgets::{LpDragOverlay, LpImage, LpImageView, LpPropertiesView, LpWindowContent};
use crate::widgets::{LpDragOverlay, LpImage, LpImageView, LpPropertiesView};
/// Animation duration for showing overlay buttons in milliseconds
const SHOW_CONTROLS_ANIMATION_DURATION: u32 = 200;
@ -61,9 +61,6 @@ mod imp {
#[properties(wrapper_type = super::LpImageWindow)]
#[template(file = "image_window.ui")]
pub struct LpImageWindow {
#[template_child]
pub(super) window_content: TemplateChild<LpWindowContent>,
#[template_child]
pub(super) headerbar: TemplateChild<adw::HeaderBar>,
#[template_child]
@ -77,6 +74,9 @@ mod imp {
#[template_child]
pub(super) primary_menu: TemplateChild<gtk::MenuButton>,
#[template_child]
pub(super) toolbar_view: TemplateChild<adw::ToolbarView>,
#[template_child]
pub(super) stack: TemplateChild<gtk::Stack>,
#[template_child]
@ -98,9 +98,6 @@ mod imp {
#[property(get = Self::is_showing_image)]
pub(super) is_showing_image: PhantomData<bool>,
/// Set via binding to HeaderBar
#[property(get, set)]
headerbar_opacity: Cell<f64>,
/// Motion controller for complete window
pub(super) motion_controller: gtk::EventControllerMotion,
@ -293,6 +290,18 @@ mod imp {
),
);
obj.connect_is_showing_image_notify(|obj| {
obj.update_headerbar_style();
});
self.properties_button.connect_active_notify(glib::clone!(
#[weak]
obj,
move |_| {
obj.update_headerbar_style();
}
));
// action win.previous status
self.image_view
.connect_is_previous_available_notify(glib::clone!(
@ -880,6 +889,8 @@ impl LpImageWindow {
};
self.imp().fullscreen_button.set_icon_name(icon);
self.update_headerbar_style();
if !self.window().is_fullscreen() {
self.set_cursor(None);
self.show_controls();
@ -888,11 +899,14 @@ impl LpImageWindow {
}
fn is_headerbar_flat(&self) -> bool {
self.imp().window_content.is_headerbar_flat()
matches!(
self.imp().toolbar_view.top_bar_style(),
adw::ToolbarStyle::Flat
)
}
fn is_content_extended_to_top(&self) -> bool {
self.imp().window_content.is_content_extended_to_top()
self.window().is_fullscreen() && !self.imp().properties_button.is_active()
}
fn update_accel_status(&self) {
@ -917,4 +931,39 @@ impl LpImageWindow {
pub fn properties_button(&self) -> gtk::ToggleButton {
self.imp().properties_button.clone()
}
fn update_header_opacity(&self) {
let imp = self.imp();
if self.is_headerbar_flat() && self.is_showing_image() {
// Bring headerbar opacity in sync with controls
imp.headerbar.set_opacity(self.headerbar_opacity());
} else {
imp.headerbar.set_opacity(1.);
}
}
fn update_headerbar_style(&self) {
let imp = self.imp();
imp.toolbar_view
.set_extend_content_to_top_edge(self.is_content_extended_to_top());
let style = if !self.is_showing_image() || self.is_content_extended_to_top() {
// Flat headerbar for empty state and fullscreen without properties enabled
adw::ToolbarStyle::Flat
} else {
// Use the border variant of raised to avoid shadows over images
adw::ToolbarStyle::RaisedBorder
};
if style != imp.toolbar_view.top_bar_style() {
imp.toolbar_view.set_top_bar_style(style);
self.update_header_opacity();
}
}
fn headerbar_opacity(&self) -> f64 {
self.imp().headerbar.opacity()
}
}

320
src/widgets/image_window.ui
View file

@ -58,57 +58,120 @@
</menu>
<template class="LpImageWindow" parent="AdwBin">
<property name="child">
<object class="AdwMultiLayoutView" id="multi_layout_view">
<child>
<object class="AdwLayout">
<property name="name">sidebar-properies</property>
<property name="content">
<object class="LpWindowContent" id="window_content">
<property name="show-properties" 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 class="AdwToolbarView" id="toolbar_view">
<child type="top">
<object class="LpShyBin">
<property name="child">
<object class="AdwHeaderBar" id="headerbar">
<binding name="show-end-title-buttons">
<lookup name="not-fullscreened" type="LpWindow">
<lookup name="root">LpImageWindow</lookup>
</lookup>
</binding>
<binding name="show-start-title-buttons">
<lookup name="not-fullscreened" type="LpWindow">
<lookup name="root">LpImageWindow</lookup>
</lookup>
</binding>
<style>
<class name="fullscreen-osd" />
</style>
<child type="start">
<object class="GtkButton" id="fullscreen_button">
<property name="action-name">win.toggle-fullscreen</property>
<property name="tooltip-text" translatable="yes">Toggle Fullscreen</property>
</object>
</property>
</child>
<child type="start">
<object class="GtkButton" id="edit_button">
<property name="action-name">win.edit</property>
<property name="icon-name">document-edit-symbolic</property>
<property name="tooltip-text" translatable="yes">Edit Image</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>
</property>
</object>
</child>
<property name="content">
<object class="AdwMultiLayoutView">
<binding name="layout-name">
<lookup name="layout-name" type="LpWindow">
<lookup name="root">LpImageWindow</lookup>
</lookup>
</binding>
<child>
<object class="AdwLayout">
<property name="name">wide</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>
<property name="content">
<object class="AdwLayoutSlot">
<property name="id">content</property>
</object>
</property>
</object>
</property>
</object>
</property>
</object>
</child>
<child>
<object class="AdwLayout">
<property name="name">bottom-properties</property>
<property name="content">
<object class="LpWindowContent">
<property name="show-properties" 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>
</child>
<child>
<object class="AdwLayout">
<property name="name">narrow</property>
<property name="content">
<object class="GtkBox">
<property name="orientation">vertical</property>
<child>
<object class="AdwLayoutSlot">
<property name="id">content</property>
<property name="vexpand">True</property>
</object>
</child>
<child>
@ -128,168 +191,63 @@
</object>
</property>
</object>
</property>
</object>
</child>
<child>
<object class="AdwLayout">
<property name="name">overlay-properties</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" />
</child>
<child type="properties">
<object class="LpPropertiesView" id="properties_view" />
</child>
<child type="content">
<object class="LpDragOverlay" id="drag_overlay">
<property name="vexpand">true</property>
<property name="drop_target">drop_target</property>
<property name="content">
<object class="LpWindowContent">
<property name="show-properties" 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 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>
<property name="content">
<object class="AdwLayoutSlot">
<property name="id">properties</property>
</object>
</property>
</object>
</property>
</object>
</property>
</object>
</child>
<!-- Layout slots -->
<child type="headerbar">
<object class="AdwHeaderBar" id="headerbar">
<!--
<property name="show-end-title-buttons" bind-source="window" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
<property name="show-start-title-buttons" bind-source="window" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
-->
<style>
<class name="fullscreen-osd" />
</style>
<child type="start">
<object class="GtkButton" id="fullscreen_button">
<property name="action-name">win.toggle-fullscreen</property>
<property name="tooltip-text" translatable="yes">Toggle Fullscreen</property>
</object>
</child>
<child type="start">
<object class="GtkButton" id="edit_button">
<property name="action-name">win.edit</property>
<property name="icon-name">document-edit-symbolic</property>
<property name="tooltip-text" translatable="yes">Edit Image</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>
<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 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>
<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="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="content">
<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>
</property>
</object>
</property>
</template>

6
src/widgets/window.rs
View file

@ -34,7 +34,7 @@ use crate::widgets::{LpEditWindow, LpImageView, LpImageWindow};
const SHOW_WINDOW_AFTER: u64 = 2000;
mod imp {
use std::cell::Cell;
use std::cell::{Cell, RefCell};
use super::*;
@ -70,6 +70,10 @@ mod imp {
narrow_layout: Cell<bool>,
#[property(get, set)]
wide_layout: Cell<bool>,
#[property(get, set)]
layout_name: RefCell<String>,
#[property(get, set)]
not_fullscreened: Cell<bool>,
}
#[glib::object_subclass]

9
src/widgets/window.ui
View file

@ -5,18 +5,23 @@
<property name="default-height">498</property>
<property name="width-request">360</property>
<property name="height-request">294</property>
<property name="layout-name">wide</property>
<property name="wide-layout" bind-source="LpWindow" bind-property="narrow-layout" bind-flags="sync-create|invert-boolean" />
<property name="not-fullscreened" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
<child>
<object class="AdwBreakpoint">
<condition>min-width: 590sp</condition>
<setter object="LpWindow" property="layout-name">wide</setter>
<setter object="LpWindow" property="narrow-layout">false</setter>
<setter object="LpWindow" property="wide-layout">true</setter>
</object>
</child>
<child>
<object class="AdwBreakpoint">
<condition>max-width: 590sp</condition>
<setter object="LpWindow" property="layout-name">narrow</setter>
<setter object="LpWindow" property="narrow-layout">true</setter>
<setter object="LpWindow" property="wide-layout">false</setter>
</object>
</child>
<property name="content">

161
src/widgets/window_content.rs
View file

@ -1,161 +0,0 @@
// Copyright (c) 2024 Sophie Herold
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
//
// SPDX-License-Identifier: GPL-3.0-or-later
//
// Copyright (c) 2024 Christopher Davis
//! Contains the main structure inside the window
//!
//! This is it's own widget since it's reused inside different layouts for
//! different positions of the image properties.
use std::cell::{Cell, RefCell};
use adw::prelude::*;
use adw::subclass::prelude::*;
use glib::Properties;
use gtk::CompositeTemplate;
use crate::deps::*;
mod imp {
use super::*;
#[derive(Default, Debug, Properties, CompositeTemplate)]
#[properties(wrapper_type = super::LpWindowContent)]
#[template(file = "window_content.ui")]
pub struct LpWindowContent {
#[template_child]
pub(super) toolbar_view: TemplateChild<adw::ToolbarView>,
#[property(get, set, nullable)]
headerbar: RefCell<Option<gtk::Widget>>,
#[property(get, set, nullable)]
content: RefCell<Option<gtk::Widget>>,
// Set via binding to window
#[property(get, set)]
fullscreened: Cell<bool>,
// Set via binding to properties toggle button
#[property(get, set)]
show_properties: Cell<bool>,
// Set via binding to window
#[property(get, set)]
is_showing_image: Cell<bool>,
}
impl LpWindowContent {
fn update_header_opacity(&self) {
let obj = self.obj();
if let Some(headerbar) = obj.headerbar() {
if obj.is_headerbar_flat() && obj.is_showing_image() {
// Bring headerbar opacity in sync with controls
headerbar.set_opacity(self.headerbar_opacity());
} else {
headerbar.set_opacity(1.);
};
}
}
fn update_headerbar_style(&self) {
let obj = self.obj();
self.toolbar_view
.set_extend_content_to_top_edge(obj.is_content_extended_to_top());
let style = if !obj.is_showing_image() || obj.is_content_extended_to_top() {
// Flat headerbar for empty state and fullscreen without properties enabled
adw::ToolbarStyle::Flat
} else {
// Use the border variant of raised to avoid shadows over images
adw::ToolbarStyle::RaisedBorder
};
let toolbar_view = self.toolbar_view.get();
if style != toolbar_view.top_bar_style() {
toolbar_view.set_top_bar_style(style);
self.update_header_opacity();
}
}
fn headerbar_opacity(&self) -> f64 {
self.headerbar
.borrow()
.as_ref()
.map(|x| x.opacity())
.unwrap_or(1.)
}
}
#[glib::object_subclass]
impl ObjectSubclass for LpWindowContent {
const NAME: &'static str = "LpWindowContent";
type Type = super::LpWindowContent;
type ParentType = adw::Bin;
fn class_init(klass: &mut Self::Class) {
klass.bind_template();
}
fn instance_init(obj: &gio::glib::subclass::InitializingObject<Self>) {
obj.init_template();
}
}
#[glib::derived_properties]
impl ObjectImpl for LpWindowContent {
fn constructed(&self) {
self.parent_constructed();
let obj = self.obj();
obj.connect_is_showing_image_notify(|obj| {
obj.imp().update_headerbar_style();
});
obj.connect_fullscreened_notify(|obj| {
obj.imp().update_headerbar_style();
});
obj.connect_show_properties_notify(|obj| {
obj.imp().update_headerbar_style();
});
}
}
impl WidgetImpl for LpWindowContent {}
impl BinImpl for LpWindowContent {}
}
glib::wrapper! {
pub struct LpWindowContent(ObjectSubclass<imp::LpWindowContent>)
@extends gtk::Widget, adw::Bin,
@implements gtk::Buildable, gtk::ConstraintTarget;
}
impl LpWindowContent {
pub fn is_headerbar_flat(&self) -> bool {
matches!(
self.imp().toolbar_view.top_bar_style(),
adw::ToolbarStyle::Flat
)
}
pub fn is_content_extended_to_top(&self) -> bool {
self.fullscreened() && self.show_properties()
}
}

27
src/widgets/window_content.ui
View file

@ -1,27 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<template class="LpWindowContent" parent="AdwBin">
<binding name="fullscreened">
<lookup name="fullscreened" type="GtkWindow">
<lookup name="root">LpWindowContent</lookup>
</lookup>
</binding>
<!--
<binding name="is-showing-image">
<lookup name="is-showing-image" type="LpWindow">
<lookup name="root">LpWindowContent</lookup>
</lookup>
</binding>
-->
<property name="child">
<object class="AdwToolbarView" id="toolbar_view">
<child type="top">
<object class="LpShyBin">
<property name="child" bind-source="LpWindowContent" bind-property="headerbar" />
</object>
</child>
<property name="content" bind-source="LpWindowContent" bind-property="content" />
</object>
</property>
</template>
</interface>