[fractal] room-details: Improve UI for name and topic in edit mode
- From: Julian Sparber <jsparber src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [fractal] room-details: Improve UI for name and topic in edit mode
- Date: Fri, 20 May 2022 13:38:43 +0000 (UTC)
commit f8263c003bc9e76f67c804097b61c1ae26871c5c
Author: Julian Sparber <julian sparber net>
Date: Thu May 19 18:32:16 2022 +0200
room-details: Improve UI for name and topic in edit mode
Fixes: https://gitlab.gnome.org/GNOME/fractal/-/issues/921
data/resources/style.css | 7 +-
data/resources/ui/content-room-details.ui | 126 ++++++++++++++++++------------
src/session/content/room_details/mod.rs | 39 ++++++---
3 files changed, 108 insertions(+), 64 deletions(-)
---
diff --git a/data/resources/style.css b/data/resources/style.css
index 2f88f2771..880388d2b 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -526,13 +526,12 @@ message-reactions .reaction-count {
background: none;
}
-.room-details-name {
+.room-details-name:disabled {
font-size: 2em;
- margin-bottom: 6px;
}
-.room-details-topic {
- margin-bottom: 6px;
+.room-details-topic:not(:disabled) {
+ min-height: 102px;
}
.cutout-button {
diff --git a/data/resources/ui/content-room-details.ui b/data/resources/ui/content-room-details.ui
index b611a258a..f8292bf95 100644
--- a/data/resources/ui/content-room-details.ui
+++ b/data/resources/ui/content-room-details.ui
@@ -2,6 +2,7 @@
<interface>
<template class="RoomDetails" parent="AdwPreferencesWindow">
<property name="title" translatable="yes">Room Details</property>
+ <property name="default-widget">edit_toggle</property>
<property name="search-enabled">False</property>
<child>
<object class="AdwPreferencesPage">
@@ -11,7 +12,7 @@
<child>
<object class="AdwPreferencesGroup">
<style>
- <class name="room-details-group" />
+ <class name="room-details-group"/>
</style>
<child>
<object class="GtkOverlay">
@@ -29,7 +30,7 @@
<child type="overlay">
<object class="AdwBin" id="avatar_remove_button">
<style>
- <class name="cutout-button" />
+ <class name="cutout-button"/>
</style>
<property name="halign">end</property>
<property name="valign">start</property>
@@ -38,7 +39,7 @@
<property name="icon-name">user-trash-symbolic</property>
<property name="action-name">details.remove-avatar</property>
<style>
- <class name="circular" />
+ <class name="circular"/>
</style>
</object>
</child>
@@ -47,7 +48,7 @@
<child type="overlay">
<object class="AdwBin" id="avatar_edit_button">
<style>
- <class name="cutout-button" />
+ <class name="cutout-button"/>
</style>
<property name="halign">end</property>
<property name="valign">end</property>
@@ -56,7 +57,7 @@
<property name="icon-name">document-edit-symbolic</property>
<property name="action-name">details.choose-avatar</property>
<style>
- <class name="circular" />
+ <class name="circular"/>
</style>
</object>
</child>
@@ -65,51 +66,79 @@
</object>
</child>
<child>
- <object class="GtkEntry" id="room_name_entry">
- <property name="has-frame">True</property>
- <property name="sensitive" bind-source="edit_toggle" bind-property="active"
bind-flags="sync-create" />
- <property name="xalign">0.5</property>
- <property name="buffer">
- <object class="GtkEntryBuffer" id="room_name_buffer">
- <binding name="text">
- <lookup name="display-name">
- <lookup name="room">RoomDetails</lookup>
- </lookup>
- </binding>
- </object>
- </property>
- <style>
- <class name="room-details-name" />
- </style>
- </object>
- </child>
- <child>
- <object class="CustomEntry">
- <property name="sensitive" bind-source="edit_toggle" bind-property="active"
bind-flags="sync-create" />
- <child>
- <object class="GtkTextView" id="room_topic_text_view">
- <property name="justification">center</property>
- <property name="wrap-mode">word-char</property>
- <property name="accepts-tab">False</property>
- <property name="buffer">
- <object class="GtkTextBuffer" id="room_topic_buffer">
- <binding name="text">
- <lookup name="topic">
- <lookup name="room">RoomDetails</lookup>
- </lookup>
- </binding>
+ <object class="AdwClamp">
+ <property name="maximum-size">400</property>
+ <property name="tightening-threshold">400</property>
+ <property name="margin-top">12</property>
+ <property name="child">
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="GtkEntry" id="room_name_entry">
+ <property name="sensitive">false</property>
+ <property name="activates-default">True</property>
+ <property name="xalign">0.5</property>
+ <property name="buffer">
+ <object class="GtkEntryBuffer" id="room_name_buffer">
+ <binding name="text">
+ <lookup name="display-name">
+ <lookup name="room">RoomDetails</lookup>
+ </lookup>
+ </binding>
+ </object>
+ </property>
+ <style>
+ <class name="room-details-name"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="room_topic_label">
+ <property name="visible">false</property>
+ <property name="margin-top">12</property>
+ <property name="label" translatable="yes">Description</property>
+ <property name="halign">start</property>
+ <style>
+ <class name="dim-label"/>
+ <class name="caption-heading"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="CustomEntry" id="room_topic_entry">
+ <property name="sensitive">false</property>
+ <property name="margin-bottom">18</property>
+ <child>
+ <object class="GtkTextView" id="room_topic_text_view">
+ <property name="justification">center</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="accepts-tab">False</property>
+ <property name="top-margin">7</property>
+ <property name="bottom-margin">7</property>
+ <property name="buffer">
+ <object class="GtkTextBuffer" id="room_topic_buffer">
+ <binding name="text">
+ <lookup name="topic">
+ <lookup name="room">RoomDetails</lookup>
+ </lookup>
+ </binding>
+ </object>
+ </property>
+ </object>
+ </child>
+ <style>
+ <class name="room-details-topic"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="edit_toggle">
+ <property name="halign">center</property>
</object>
- </property>
+ </child>
</object>
- </child>
- <style>
- <class name="room-details-topic" />
- </style>
- </object>
- </child>
- <child>
- <object class="GtkToggleButton" id="edit_toggle">
- <property name="halign">center</property>
+ </property>
</object>
</child>
</object>
@@ -119,3 +148,4 @@
<!-- ContentMemberPage goes here -->
</template>
</interface>
+
diff --git a/src/session/content/room_details/mod.rs b/src/session/content/room_details/mod.rs
index f6c0ca2d3..c49445c3c 100644
--- a/src/session/content/room_details/mod.rs
+++ b/src/session/content/room_details/mod.rs
@@ -19,6 +19,8 @@ use crate::{
};
mod imp {
+ use std::cell::Cell;
+
use glib::subclass::InitializingObject;
use once_cell::unsync::OnceCell;
@@ -34,12 +36,17 @@ mod imp {
#[template_child]
pub avatar_edit_button: TemplateChild<adw::Bin>,
#[template_child]
- pub edit_toggle: TemplateChild<gtk::ToggleButton>,
+ pub edit_toggle: TemplateChild<gtk::Button>,
#[template_child]
pub room_name_entry: TemplateChild<gtk::Entry>,
#[template_child]
pub room_topic_text_view: TemplateChild<gtk::TextView>,
+ #[template_child]
+ pub room_topic_entry: TemplateChild<CustomEntry>,
+ #[template_child]
+ pub room_topic_label: TemplateChild<gtk::Label>,
pub member_page: OnceCell<MemberPage>,
+ pub edit_mode: Cell<bool>,
}
#[glib::object_subclass]
@@ -169,18 +176,33 @@ impl RoomDetails {
let label_enabled = gettext("Save Details");
let label_disabled = gettext("Edit Details");
- edit_toggle.set_active(false);
edit_toggle.set_label(&label_disabled);
// Save changes of name and topic on toggle button release.
- edit_toggle.connect_toggled(clone!(@weak self as this => move |button| {
- if button.is_active() {
+ edit_toggle.connect_clicked(clone!(@weak self as this => move |button| {
+ let priv_ = this.imp();
+ if !priv_.edit_mode.get() {
+ priv_.edit_mode.set(true);
button.set_label(&label_enabled);
+ priv_.room_topic_text_view.set_justification(gtk::Justification::Left);
+ priv_.room_name_entry.set_xalign(0.0);
+ priv_.room_name_entry.set_halign(gtk::Align::Center);
+ priv_.room_name_entry.set_sensitive(true);
+ priv_.room_name_entry.set_width_chars(25);
+ priv_.room_topic_entry.set_sensitive(true);
+ priv_.room_topic_label.show();
return;
}
+ priv_.edit_mode.set(false);
button.set_label(&label_disabled);
+ priv_.room_topic_text_view.set_justification(gtk::Justification::Center);
+ priv_.room_name_entry.set_xalign(0.5);
+ priv_.room_name_entry.set_sensitive(false);
+ priv_.room_name_entry.set_halign(gtk::Align::Fill);
+ priv_.room_name_entry.set_width_chars(-1);
+ priv_.room_topic_entry.set_sensitive(false);
+ priv_.room_topic_label.hide();
- let priv_ = this.imp();
let room = this.room();
let room_name = priv_.room_name_entry.buffer().text();
@@ -190,13 +212,6 @@ impl RoomDetails {
room.store_topic(topic.to_string());
}));
- // End editing on enter.
- priv_
- .room_name_entry
- .connect_activate(clone!(@weak self as this => move |_entry| {
- this.imp().edit_toggle.set_active(false);
- }));
-
// Hide edit controls when the user is not eligible to perform the actions.
let room = self.room();
let room_name_changeable =
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
