window: Rework properties adaptivity
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
parent
230ffd5c77
commit
bb9b834a22
4 changed files with 236 additions and 125 deletions
|
|
@ -1,3 +1,7 @@
|
||||||
row.property label.title {
|
row.property label.title {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.properties-border {
|
||||||
|
color: var(--headerbar-border-color);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,3 +58,7 @@ dialog.error-details textview {
|
||||||
background: none;
|
background: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-properties {
|
||||||
|
box-shadow: 0 -1px var(--headerbar-darker-shade-color);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<interface>
|
<interface>
|
||||||
<template class="LpPropertiesView" parent="AdwBin">
|
<template class="LpPropertiesView" parent="AdwBin">
|
||||||
<property name="width-request">255</property>
|
|
||||||
<property name="child">
|
<property name="child">
|
||||||
<object class="GtkScrolledWindow">
|
<object class="GtkScrolledWindow">
|
||||||
|
<property name="propagate-natural-height">True</property>
|
||||||
|
<property name="max-content-height">316</property>
|
||||||
<property name="child">
|
<property name="child">
|
||||||
<object class="GtkBox">
|
<object class="GtkBox">
|
||||||
<property name="orientation">vertical</property>
|
<property name="orientation">vertical</property>
|
||||||
|
|
|
||||||
150
src/window.ui
150
src/window.ui
|
|
@ -64,13 +64,132 @@
|
||||||
<child>
|
<child>
|
||||||
<object class="AdwBreakpoint">
|
<object class="AdwBreakpoint">
|
||||||
<condition>max-width: 590sp</condition>
|
<condition>max-width: 590sp</condition>
|
||||||
<setter object="properties_flap" property="orientation">vertical</setter>
|
<setter object="multi_layout_view" property="layout-name">sheet</setter>
|
||||||
</object>
|
</object>
|
||||||
</child>
|
</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="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">
|
<property name="content">
|
||||||
<object class="LpFullscreenWidget" id="fullscreen_widget">
|
<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="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
|
||||||
<property name="headerbar">
|
<property name="headerbar">
|
||||||
|
<object class="AdwLayoutSlot">
|
||||||
|
<property name="id">headerbar</property>
|
||||||
|
</object>
|
||||||
|
</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>
|
||||||
|
</property>
|
||||||
|
</object>
|
||||||
|
</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object class="AdwLayout">
|
||||||
|
<property name="name">sheet</property>
|
||||||
|
<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="GtkBox">
|
||||||
|
<property name="orientation">vertical</property>
|
||||||
|
<child>
|
||||||
|
<object class="AdwLayoutSlot">
|
||||||
|
<property name="id">content</property>
|
||||||
|
<property name="vexpand">True</property>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<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>
|
||||||
|
</property>
|
||||||
|
<style>
|
||||||
|
<class name="mobile-properties"/>
|
||||||
|
</style>
|
||||||
|
</object>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</property>
|
||||||
|
</object>
|
||||||
|
</property>
|
||||||
|
</object>
|
||||||
|
</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">
|
<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-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" />
|
<property name="show-start-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
|
||||||
|
|
@ -133,17 +252,8 @@
|
||||||
<object class="GtkEventControllerMotion" id="headerbar_events" />
|
<object class="GtkEventControllerMotion" id="headerbar_events" />
|
||||||
</child>
|
</child>
|
||||||
</object>
|
</object>
|
||||||
</property>
|
</child>
|
||||||
<property name="content">
|
<child type="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" />
|
|
||||||
<property name="content">
|
|
||||||
<object class="LpDragOverlay" id="drag_overlay">
|
<object class="LpDragOverlay" id="drag_overlay">
|
||||||
<property name="drop_target">drop_target</property>
|
<property name="drop_target">drop_target</property>
|
||||||
<property name="overlayed">
|
<property name="overlayed">
|
||||||
|
|
@ -157,7 +267,6 @@
|
||||||
<property name="child">
|
<property name="child">
|
||||||
<object class="GtkStack" id="stack">
|
<object class="GtkStack" id="stack">
|
||||||
<property name="visible-child">status_page</property>
|
<property name="visible-child">status_page</property>
|
||||||
<property name="vexpand">True</property>
|
|
||||||
<style>
|
<style>
|
||||||
<class name="drop-widget" />
|
<class name="drop-widget" />
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -201,17 +310,10 @@
|
||||||
</object>
|
</object>
|
||||||
</property>
|
</property>
|
||||||
</object>
|
</object>
|
||||||
</property>
|
</child>
|
||||||
<property name="separator">
|
<child type="properties">
|
||||||
<object class="GtkSeparator" />
|
<object class="LpPropertiesView" id="properties_view"/>
|
||||||
</property>
|
</child>
|
||||||
<property name="flap">
|
|
||||||
<object class="LpPropertiesView" id="properties_view">
|
|
||||||
<property name="vexpand">true</property>
|
|
||||||
</object>
|
|
||||||
</property>
|
|
||||||
</object>
|
|
||||||
</property>
|
|
||||||
</object>
|
</object>
|
||||||
</property>
|
</property>
|
||||||
</object>
|
</object>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue