[fractal] fractal-gtk: Use HdyLeaflet to adapt to small sizes
- From: Julian Sparber <jsparber src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [fractal] fractal-gtk: Use HdyLeaflet to adapt to small sizes
- Date: Fri, 1 Feb 2019 21:13:32 +0000 (UTC)
commit 3b69e8e898590c0e97a79abc3da7f6a58bc35a26
Author: Christopher Davis <brainblasted disroot org>
Date: Sat Jan 26 16:07:03 2019 -0500
fractal-gtk: Use HdyLeaflet to adapt to small sizes
Fractal's main view could only shrink so far, barring usage at smaller sizes such as a phone's screen.
HdyLeaflet enables
Fractal to adapt.
Related to https://gitlab.gnome.org/GNOME/fractal/issues/377
fractal-gtk/res/ui/main_window.ui | 98 ++++++++++++++++++++++++++++++++-------
fractal-gtk/src/actions/global.rs | 2 +-
fractal-gtk/src/appop/mod.rs | 7 +++
fractal-gtk/src/appop/state.rs | 12 ++---
4 files changed, 93 insertions(+), 26 deletions(-)
---
diff --git a/fractal-gtk/res/ui/main_window.ui b/fractal-gtk/res/ui/main_window.ui
index 9b3a2389..726d3260 100644
--- a/fractal-gtk/res/ui/main_window.ui
+++ b/fractal-gtk/res/ui/main_window.ui
@@ -10,16 +10,23 @@
<child>
<object class="GtkStack" id="main_content_stack">
<property name="can_focus">False</property>
+ <property name="hhomogeneous">False</property>
<child>
- <object class="GtkBox" id="chat_state">
+ <object class="HdyLeaflet" id="chat_state_leaflet">
+ <property name="child-transition-duration" bind-source="header_leaflet"
bind-property="child-transition-duration" bind-flags="bidirectional|sync-create"/>
+ <property name="child-transition-type" bind-source="header_leaflet"
bind-property="child-transition-type" bind-flags="bidirectional|sync-create"/>
+ <property name="mode-transition-duration" bind-source="header_leaflet"
bind-property="mode-transition-duration" bind-flags="bidirectional|sync-create"/>
+ <property name="mode-transition-type" bind-source="header_leaflet"
bind-property="mode-transition-type" bind-flags="bidirectional|sync-create"/>
+ <property name="visible-child-name" bind-source="header_leaflet"
bind-property="visible-child-name" bind-flags="bidirectional|sync-create"/>
<property name="visible">True</property>
<property name="can_focus">False</property>
+ <property name="hhomogeneous-folded">True</property>
<child>
<object class="GtkBox" id="sidebar-box">
<property name="width_request">200</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
+ <property name="halign">fill</property>
<property name="hexpand">False</property>
<property name="orientation">vertical</property>
<child>
@@ -80,21 +87,17 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">False</property>
- <property name="position">0</property>
+ <property name="name">sidebar</property>
</packing>
</child>
<child>
- <object class="GtkSeparator">
+ <object class="GtkSeparator" id="content_separator">
<property name="visible">True</property>
<property name="can_focus">False</property>
+ <style>
+ <class name="sidebar"/>
+ </style>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">1</property>
- </packing>
</child>
<child>
<object class="GtkOverlay" id="inapp">
@@ -277,10 +280,7 @@
</child>
</object>
<packing>
- <property name="expand">True</property>
- <property name="fill">True</property>
- <property name="pack_type">end</property>
- <property name="position">0</property>
+ <property name="name">content</property>
</packing>
</child>
</object>
@@ -729,14 +729,19 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="hexpand">True</property>
+ <property name="hhomogeneous">False</property>
<child>
- <object class="GtkBox"> <!--message view-->
+ <object class="HdyLeaflet" id="header_leaflet"> <!--message view-->
<property name="visible">True</property>
+ <property name="child-transition-type">slide</property>
+ <property name="mode-transition-type">slide</property>
+ <property name="hhomogeneous-folded">True</property>
<child>
<object class="GtkHeaderBar" id="left-header"> <!--left titlebar-->
<property name="visible">True</property>
<property name="can_focus">False</property>
- <!--<property name="show-close-button">True</property>-->
+ <property name="halign">fill</property>
+ <property name="show-close-button">True</property>
<child>
<object class="GtkMenuButton" id="main_menu_button">
<property name="visible">True</property>
@@ -818,9 +823,12 @@
</object>
</child>
</object>
+ <packing>
+ <property name="name">sidebar</property>
+ </packing>
</child>
<child>
- <object class="GtkSeparator">
+ <object class="GtkSeparator" id="header_separator">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
@@ -834,6 +842,37 @@
<property name="show-close-button">True</property>
<property name="has-subtitle">False</property>
<property name="hexpand">True</property>
+ <child>
+ <object class="GtkRevealer">
+ <property name="reveal-child" bind-source="header_leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="transition-duration" bind-source="header_leaflet"
bind-property="mode-transition-duration" bind-flags="bidirectional|sync-create"/>
+ <property name="transition-type">crossfade</property>
+ <property name="visible">True</property>
+ <child>
+ <object class="GtkButton" id="leaflet_back_button">
+ <property name="action_name">app.back</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon_name">go-previous-symbolic</property>
+ </object>
+ </child>
+ <accessibility>
+
+ </accessibility>
+ <child internal-child="accessible">
+ <object class="AtkObject" id="a11y-leaflet_back_button">
+ <property name="AtkObject::accessible_name"
translatable="yes">Back</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
<child type="title">
<object class="GtkBox" id="room_info">
<property name="visible">True</property>
@@ -898,6 +937,9 @@
</packing>
</child>
</object>
+ <packing>
+ <property name="name">content</property>
+ </packing>
</child>
</object>
<packing>
@@ -1037,4 +1079,24 @@
<widget name="sidebar-box"/>
</widgets>
</object>
+ <object class="GtkSizeGroup">
+ <property name="mode">horizontal</property>
+ <widgets>
+ <widget name="inapp"/>
+ <widget name="room_header_bar"/>
+ </widgets>
+ </object>
+ <object class="GtkSizeGroup">
+ <property name="mode">horizontal</property>
+ <widgets>
+ <widget name="header_separator"/>
+ <widget name="content_separator"/>
+ </widgets>
+ </object>
+ <object class="HdyHeaderGroup">
+ <headerbars>
+ <headerbar name="left-header"/>
+ <headerbar name="room_header_bar"/>
+ </headerbars>
+ </object>
</interface>
diff --git a/fractal-gtk/src/actions/global.rs b/fractal-gtk/src/actions/global.rs
index ca2cb829..edd93395 100644
--- a/fractal-gtk/src/actions/global.rs
+++ b/fractal-gtk/src/actions/global.rs
@@ -160,7 +160,7 @@ pub fn new(app: >k::Application, op: &Arc<Mutex<AppOp>>) {
open_room.connect_activate(clone!(op => move |_, data| {
if let Some(id) = get_room_id(data) {
op.lock().unwrap().set_active_room_by_id(id.to_string());
- /* This does nothing if fractal is already in focus */
+ /* This does nothing if fractal is already in focus */
op.lock().unwrap().activate();
}
let back = upgrade_weak!(back_weak);
diff --git a/fractal-gtk/src/appop/mod.rs b/fractal-gtk/src/appop/mod.rs
index 16a127c6..9b3e79b6 100644
--- a/fractal-gtk/src/appop/mod.rs
+++ b/fractal-gtk/src/appop/mod.rs
@@ -73,12 +73,18 @@ pub struct AppOp {
search_type: SearchType,
pub directory: Vec<Room>,
+ pub leaflet: libhandy::Leaflet,
}
impl PasswordStorage for AppOp {}
impl AppOp {
pub fn new(ui: uibuilder::UI, tx: Sender<BKCommand>) -> AppOp {
+ let leaflet = ui
+ .builder
+ .get_object::<libhandy::Leaflet>("header_leaflet")
+ .expect("Couldn't find header_leaflet in ui file");
+
AppOp {
ui: ui,
backend: tx,
@@ -108,6 +114,7 @@ impl AppOp {
search_type: SearchType::Invite,
directory: vec![],
+ leaflet: leaflet,
}
}
diff --git a/fractal-gtk/src/appop/state.rs b/fractal-gtk/src/appop/state.rs
index b72f2f6f..cc33fa1a 100644
--- a/fractal-gtk/src/appop/state.rs
+++ b/fractal-gtk/src/appop/state.rs
@@ -1,5 +1,6 @@
use gtk;
use gtk::prelude::*;
+use libhandy::LeafletExt;
use crate::actions::AppState;
use crate::appop::AppOp;
@@ -18,20 +19,21 @@ impl AppOp {
.get_object::<gtk::HeaderBar>("room_header_bar")
.expect("Can't find room_header_bar in ui file.");
- let mut view_child = None;
let widget_name = match self.state {
AppState::Login => {
self.clean_login();
"login"
}
AppState::NoRoom => {
- view_child = Some("noroom");
self.set_state_no_room(&headerbar);
+ self.leaflet.set_visible_child_name("sidebar");
+ stack.set_visible_child_name("noroom");
"chat"
}
AppState::Room => {
- view_child = Some("room_view");
self.set_state_room(&headerbar);
+ self.leaflet.set_visible_child_name("content");
+ stack.set_visible_child_name("room_view");
"chat"
}
AppState::Directory => "directory",
@@ -41,10 +43,6 @@ impl AppOp {
AppState::MediaViewer => "media-viewer",
};
- view_child.map(|name| {
- stack.set_visible_child_name(name);
- });
-
self.ui
.builder
.get_object::<gtk::Stack>("main_content_stack")
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]