edit/crop: Implement updated designs
These designs are different for mobile and desktop sizes.
This commit is contained in:
Sophie Herold
parent
5ed026db29
commit
59082b7314
14 changed files with 318 additions and 66 deletions
|
|
@ -50,54 +50,290 @@
|
|||
|
||||
</section>
|
||||
</menu>
|
||||
<object class="GtkSizeGroup">
|
||||
<property name="mode">horizontal</property>
|
||||
<widgets>
|
||||
<widget name="box-start" />
|
||||
<widget name="box-end" />
|
||||
</widgets>
|
||||
</object>
|
||||
<template class="LpEditCrop" parent="GtkWidget">
|
||||
<property name="child">
|
||||
<object class="AdwToolbarView">
|
||||
<property name="bottom-bar-style">raised</property>
|
||||
<binding name="reveal-bottom-bars">
|
||||
<lookup name="narrow-layout" type="LpWindow">
|
||||
<lookup name="root">LpEditCrop</lookup>
|
||||
</lookup>
|
||||
</binding>
|
||||
<property name="content">
|
||||
<object class="GtkOverlay">
|
||||
<property name="margin-top">18</property>
|
||||
<property name="margin-end">18</property>
|
||||
<property name="margin-bottom">18</property>
|
||||
<property name="margin-start">18</property>
|
||||
<child>
|
||||
<object class="LpImage" id="image">
|
||||
<property name="sensitive">false</property>
|
||||
<object class="AdwOverlaySplitView">
|
||||
<property name="sidebar-position">end</property>
|
||||
<property name="min-sidebar-width">280</property>
|
||||
<binding name="show-sidebar">
|
||||
<lookup name="wide-layout" type="LpWindow">
|
||||
<lookup name="root">LpEditCrop</lookup>
|
||||
</lookup>
|
||||
</binding>
|
||||
<property name="sidebar">
|
||||
<object class="AdwPreferencesPage">
|
||||
<child>
|
||||
<object class="AdwPreferencesGroup">
|
||||
<property name="title">Aspect Ratio</property>
|
||||
<child>
|
||||
<object class="GtkGrid">
|
||||
<property name="column-homogeneous">true</property>
|
||||
<property name="row-spacing">6</property>
|
||||
<property name="column-spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'free'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-free-symbolic</property>
|
||||
<property name="label" translatable="yes">_Free</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="column">0</property>
|
||||
<property name="row">0</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'original'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-original-symbolic</property>
|
||||
<property name="label" translatable="yes">_Original</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="row">0</property>
|
||||
<property name="column">1</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'square'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-square-symbolic</property>
|
||||
<property name="label" translatable="yes">_Square</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="row">1</property>
|
||||
<property name="column">0</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'r5to4'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-5to4-symbolic</property>
|
||||
<property name="label" translatable="yes">_5:4</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="row">1</property>
|
||||
<property name="column">1</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'r4to3'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-4to3-symbolic</property>
|
||||
<property name="label" translatable="yes">_4:3</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="row">2</property>
|
||||
<property name="column">0</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'r3to2'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-3to2-symbolic</property>
|
||||
<property name="label" translatable="yes">_3:2</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="row">2</property>
|
||||
<property name="column">1</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkToggleButton">
|
||||
<property name="action-name">edit-crop.aspect-ratio</property>
|
||||
<property name="action-target">'r16to9'</property>
|
||||
<child>
|
||||
<object class="AdwButtonContent">
|
||||
<property name="halign">start</property>
|
||||
<property name="icon-name">aspect-ratio-16to9-symbolic</property>
|
||||
<property name="label" translatable="yes">_16:9</property>
|
||||
<property name="use-underline">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<layout>
|
||||
<property name="row">3</property>
|
||||
<property name="column">0</property>
|
||||
</layout>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="AdwPreferencesGroup">
|
||||
<property name="title">Rotate</property>
|
||||
<child>
|
||||
<object class="GtkGrid">
|
||||
<property name="column-homogeneous">true</property>
|
||||
<property name="row-spacing">6</property>
|
||||
<property name="column-spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-left-symbolic</property>
|
||||
<property name="action-name">edit-crop.rotate-ccw</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-right-symbolic</property>
|
||||
<property name="action-name">edit-crop.rotate-cw</property>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="AdwPreferencesGroup">
|
||||
<property name="title">Flip</property>
|
||||
<child>
|
||||
<object class="GtkGrid">
|
||||
<property name="column-homogeneous">true</property>
|
||||
<property name="row-spacing">6</property>
|
||||
<property name="column-spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">edit-mirror-symbolic</property>
|
||||
<property name="action-name">edit-crop.mirror</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">edit-mirror-vertically-symbolic</property>
|
||||
<property name="action-name">edit-crop.mirror</property>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="AdwPreferencesGroup">
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="label">_Reset</property>
|
||||
<property name="use-underline">true</property>
|
||||
<property name="action-name">edit-crop.reset</property>
|
||||
<property name="vexpand">true</property>
|
||||
<property name="valign">end</property>
|
||||
<property name="halign">end</property>
|
||||
<style>
|
||||
<class name="flat" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child type="overlay">
|
||||
<object class="LpEditCropSelection" id="selection">
|
||||
<property name="crop">LpEditCrop</property>
|
||||
</property>
|
||||
<property name="content">
|
||||
<object class="GtkOverlay">
|
||||
<property name="margin-top">18</property>
|
||||
<property name="margin-end">18</property>
|
||||
<property name="margin-bottom">18</property>
|
||||
<property name="margin-start">18</property>
|
||||
<child>
|
||||
<object class="LpImage" id="image">
|
||||
<property name="sensitive">false</property>
|
||||
</object>
|
||||
</child>
|
||||
<child type="overlay">
|
||||
<object class="LpEditCropSelection" id="selection">
|
||||
<property name="crop">LpEditCrop</property>
|
||||
</object>
|
||||
</child>
|
||||
<child type="overlay">
|
||||
<object class="GtkButton" id="apply_crop">
|
||||
<property name="label">Apply</property>
|
||||
<property name="action-name">edit.apply-crop</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="osd" />
|
||||
<class name="pill" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child type="overlay">
|
||||
<object class="GtkButton" id="apply_crop">
|
||||
<property name="label">Apply</property>
|
||||
<property name="action-name">edit.apply-crop</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="valign">start</property>
|
||||
<style>
|
||||
<class name="osd" />
|
||||
<class name="pill" />
|
||||
</style>
|
||||
</object>
|
||||
</child>
|
||||
</property>
|
||||
</object>
|
||||
</property>
|
||||
<child type="bottom">
|
||||
<object class="AdwClamp">
|
||||
<property name="maximum-size">360</property>
|
||||
<property name="maximum-size">350</property>
|
||||
<property name="child">
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="homogeneous">true</property>
|
||||
<property name="spacing">6</property>
|
||||
<style>
|
||||
<class name="toolbar" />
|
||||
</style>
|
||||
<child>
|
||||
<object class="GtkBox" id="box-start">
|
||||
<property name="hexpand">true</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">center</property>
|
||||
<property name="spacing">6</property>
|
||||
<child>
|
||||
<object class="GtkMenuButton">
|
||||
<property name="icon-name">aspect-ratio-symbolic</property>
|
||||
|
|
@ -141,6 +377,13 @@
|
|||
</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-left-symbolic</property>
|
||||
<property name="action-name">edit-crop.rotate-ccw</property>
|
||||
<property name="valign">start</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">edit-mirror-symbolic</property>
|
||||
|
|
@ -151,29 +394,10 @@
|
|||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">center</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-left-symbolic</property>
|
||||
<property name="action-name">edit-crop.rotate-ccw</property>
|
||||
<property name="valign">start</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="icon-name">object-rotate-right-symbolic</property>
|
||||
<property name="action-name">edit-crop.rotate-cw</property>
|
||||
<property name="valign">start</property>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<object class="GtkBox" id="box-end">
|
||||
<property name="orientation">horizontal</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="hexpand">true</property>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="label">Reset</property>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<object class="AdwHeaderBar">
|
||||
<property name="show-title">false</property>
|
||||
<property name="show-start-title-buttons">false</property>
|
||||
<property name="show-start-title-buttons">false</property>
|
||||
<property name="show-end-title-buttons">false</property>
|
||||
<child type="start">
|
||||
<object class="GtkButton" id="cancel">
|
||||
<property name="label" translatable="true">Cancel</property>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ use crate::widgets::{LpEditWindow, LpImageView, LpImageWindow};
|
|||
const SHOW_WINDOW_AFTER: u64 = 2000;
|
||||
|
||||
mod imp {
|
||||
use std::cell::Cell;
|
||||
|
||||
use super::*;
|
||||
|
||||
// To use composite templates, you need
|
||||
|
|
@ -44,8 +46,9 @@ mod imp {
|
|||
// If some member fields did not implement default,
|
||||
// we'd need to have a `new()` function in the
|
||||
// `impl ObjectSubclass for $TYPE` section.
|
||||
#[derive(Default, Debug, CompositeTemplate)]
|
||||
#[derive(Default, Debug, CompositeTemplate, glib::Properties)]
|
||||
#[template(file = "window.ui")]
|
||||
#[properties(wrapper_type=super::LpWindow)]
|
||||
pub struct LpWindow {
|
||||
#[template_child]
|
||||
pub(super) toast_overlay: TemplateChild<adw::ToastOverlay>,
|
||||
|
|
@ -56,6 +59,11 @@ mod imp {
|
|||
pub(super) image_window: TemplateChild<LpImageWindow>,
|
||||
#[template_child]
|
||||
pub(super) edit_window_child: TemplateChild<adw::Bin>,
|
||||
|
||||
#[property(get, set)]
|
||||
narrow_layout: Cell<bool>,
|
||||
#[property(get, set)]
|
||||
wide_layout: Cell<bool>,
|
||||
}
|
||||
|
||||
#[glib::object_subclass]
|
||||
|
|
@ -89,6 +97,7 @@ mod imp {
|
|||
}
|
||||
}
|
||||
|
||||
#[glib::derived_properties]
|
||||
impl ObjectImpl for LpWindow {
|
||||
fn constructed(&self) {
|
||||
self.parent_constructed();
|
||||
|
|
|
|||
|
|
@ -5,20 +5,20 @@
|
|||
<property name="default-height">498</property>
|
||||
<property name="width-request">360</property>
|
||||
<property name="height-request">294</property>
|
||||
<!--
|
||||
<child>
|
||||
<object class="AdwBreakpoint">
|
||||
<condition>min-width: 590sp</condition>
|
||||
<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="multi_layout_view" property="layout-name">bottom-properties</setter>
|
||||
<setter object="LpWindow" property="narrow-layout">true</setter>
|
||||
<setter object="LpWindow" property="wide-layout">false</setter>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="AdwBreakpoint">
|
||||
<condition>max-width: 590sp and max-height: 550sp</condition>
|
||||
<setter object="multi_layout_view" property="layout-name">overlay-properties</setter>
|
||||
</object>
|
||||
</child>
|
||||
-->
|
||||
<property name="content">
|
||||
<object class="AdwToastOverlay" id="toast_overlay">
|
||||
<property name="child">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue