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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue