members-list-view: Refactor list items

Have a more consistent styling accross items.
This commit is contained in:
Kévin Commaille 2023-12-05 14:38:09 +01:00
parent 0d2a1d25e5
commit 556d470074
No known key found for this signature in database
GPG Key ID: 29A48C1F03620416
7 changed files with 137 additions and 112 deletions

View File

@ -769,6 +769,21 @@ audiohistoryviewer listview > row {
filter: opacity(1);
}
members-list row {
margin-bottom: 6px;
padding: 8px 12px;
min-height: 32px;
border-radius: 12px;
}
members-list row .icon:dir(ltr) {
margin-right: 6px;
}
members-list row .icon:dir(rtl) {
margin-left: 6px;
}
dragoverlay statuspage {
background-color: alpha(@accent_bg_color, 0.5);
color: @accent_fg_color;

View File

@ -1,4 +1,3 @@
use adw::subclass::prelude::BinImpl;
use gtk::{glib, glib::clone, prelude::*, subclass::prelude::*, CompositeTemplate};
use super::super::{MemberMenu, MembersPage};
@ -29,11 +28,12 @@ mod imp {
impl ObjectSubclass for MemberRow {
const NAME: &'static str = "ContentMemberRow";
type Type = super::MemberRow;
type ParentType = adw::Bin;
type ParentType = gtk::Box;
fn class_init(klass: &mut Self::Class) {
Avatar::static_type();
Badge::static_type();
Self::bind_template(klass);
}
@ -84,12 +84,12 @@ mod imp {
}
}
impl WidgetImpl for MemberRow {}
impl BinImpl for MemberRow {}
impl BoxImpl for MemberRow {}
}
glib::wrapper! {
pub struct MemberRow(ObjectSubclass<imp::MemberRow>)
@extends gtk::Widget, adw::Bin, @implements gtk::Accessible;
@extends gtk::Widget, gtk::Box, @implements gtk::Accessible;
}
impl MemberRow {

View File

@ -1,105 +1,97 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<template class="ContentMemberRow" parent="AdwBin">
<property name="margin-top">12</property>
<property name="margin-bottom">12</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="child">
<object class="GtkBox" id="header">
<property name="spacing">12</property>
<template class="ContentMemberRow" parent="GtkBox">
<property name="spacing">12</property>
<style>
<class name="header"/>
</style>
<child>
<object class="ComponentsAvatar">
<property name="size">32</property>
<binding name="data">
<lookup name="avatar-data" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
<property name="accessible-role">presentation</property>
</object>
</child>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<style>
<class name="header"/>
<class name="title"/>
</style>
<child>
<object class="ComponentsAvatar">
<property name="size">32</property>
<binding name="data">
<lookup name="avatar-data" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
<property name="accessible-role">presentation</property>
</object>
</child>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<style>
<class name="title"/>
</style>
<property name="spacing">3</property>
<child>
<object class="GtkBox">
<property name="spacing">3</property>
<child>
<object class="GtkLabel" id="title">
<property name="halign">start</property>
<property name="ellipsize">end</property>
<binding name="label">
<lookup name="display-name" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
<style>
<class name="title"/>
</style>
</object>
</child>
<child>
<object class="GtkImage" id="verified_icon">
<property name="icon-name">verified-symbolic</property>
<!-- Translators: As in "Verified room member". -->
<property name="tooltip-text" translatable="yes">Verified</property>
<accessibility>
<!-- Translators: As in "Verified room member". -->
<property name="label" translatable="yes">Verified</property>
</accessibility>
<binding name="visible">
<lookup name="verified" type="User">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
</object>
</child>
<child>
<object class="Badge">
<binding name="power-level">
<lookup name="power-level" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
</object>
</child>
</object>
</child>
<child>
<object class="GtkLabel" id="subtitle">
<property name="hexpand">True</property>
<object class="GtkLabel" id="title">
<property name="halign">start</property>
<property name="ellipsize">end</property>
<binding name="label">
<lookup name="user-id" type="Member">
<lookup name="display-name" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
<style>
<class name="subtitle"/>
<class name="title"/>
</style>
</object>
</child>
<child>
<object class="GtkImage" id="verified_icon">
<property name="icon-name">verified-symbolic</property>
<!-- Translators: As in "Verified room member". -->
<property name="tooltip-text" translatable="yes">Verified</property>
<accessibility>
<!-- Translators: As in "Verified room member". -->
<property name="label" translatable="yes">Verified</property>
</accessibility>
<binding name="visible">
<lookup name="verified" type="User">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
</object>
</child>
<child>
<object class="Badge">
<binding name="power-level">
<lookup name="power-level" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
</object>
</child>
</object>
</child>
<child>
<object class="GtkToggleButton" id="menu_btn">
<property name="has-frame">False</property>
<property name="icon-name">menu-secondary-symbolic</property>
<property name="tooltip-text" translatable="yes">Member Menu</property>
<accessibility>
<property name="label" translatable="yes">Member Menu</property>
</accessibility>
<object class="GtkLabel" id="subtitle">
<property name="hexpand">True</property>
<property name="halign">start</property>
<property name="ellipsize">end</property>
<binding name="label">
<lookup name="user-id" type="Member">
<lookup name="member">ContentMemberRow</lookup>
</lookup>
</binding>
<style>
<class name="subtitle"/>
</style>
</object>
</child>
</object>
</property>
</child>
<child>
<object class="GtkToggleButton" id="menu_btn">
<property name="has-frame">False</property>
<property name="icon-name">menu-secondary-symbolic</property>
<property name="tooltip-text" translatable="yes">Member Menu</property>
<accessibility>
<property name="label" translatable="yes">Member Menu</property>
</accessibility>
</object>
</child>
</template>
</interface>

View File

@ -1,6 +1,6 @@
use adw::subclass::prelude::*;
use adw::{prelude::*, subclass::prelude::*};
use gettextrs::gettext;
use gtk::{gdk, glib, glib::clone, prelude::*, CompositeTemplate};
use gtk::{gdk, glib, glib::clone, CompositeTemplate};
use super::MembershipSubpageItem;
use crate::session::model::Membership;
@ -29,7 +29,7 @@ mod imp {
impl ObjectSubclass for MembershipSubpageRow {
const NAME: &'static str = "MembersPageMembershipSubpageRow";
type Type = super::MembershipSubpageRow;
type ParentType = adw::ActionRow;
type ParentType = adw::Bin;
fn class_init(klass: &mut Self::Class) {
Self::bind_template(klass);
@ -97,14 +97,12 @@ mod imp {
}
impl WidgetImpl for MembershipSubpageRow {}
impl ListBoxRowImpl for MembershipSubpageRow {}
impl PreferencesRowImpl for MembershipSubpageRow {}
impl ActionRowImpl for MembershipSubpageRow {}
impl BinImpl for MembershipSubpageRow {}
}
glib::wrapper! {
pub struct MembershipSubpageRow(ObjectSubclass<imp::MembershipSubpageRow>)
@extends gtk::Widget, adw::ActionRow, @implements gtk::Accessible;
@extends gtk::Widget, adw::Bin, @implements gtk::Accessible;
}
impl MembershipSubpageRow {

View File

@ -1,26 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<template class="MembersPageMembershipSubpageRow" parent="AdwActionRow">
<property name="title" bind-source="MembersPageMembershipSubpageRow" bind-property="label" bind-flags="sync-create"/>
<property name="icon-name">users-symbolic</property>
<property name="activatable">True</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<child type="suffix">
<object class="GtkLabel" id="members_count">
<property name="valign">center</property>
<property name="halign">center</property>
<template class="MembersPageMembershipSubpageRow" parent="AdwBin">
<accessibility>
<relation name="labelled-by">title</relation>
</accessibility>
<child>
<object class="GtkBox">
<property name="spacing">6</property>
<child>
<object class="GtkImage">
<property name="valign">center</property>
<property name="icon-name">users-symbolic</property>
<property name="accessible-role">presentation</property>
<style>
<class name="icon"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel" id="title">
<property name="valign">center</property>
<property name="hexpand">True</property>
<property name="xalign">0.0</property>
<property name="ellipsize">end</property>
<property name="label" bind-source="MembersPageMembershipSubpageRow" bind-property="label" bind-flags="sync-create"/>
</object>
</child>
<child>
<object class="GtkLabel" id="members_count">
<property name="valign">center</property>
</object>
</child>
<child>
<object class="GtkImage">
<property name="valign">center</property>
<property name="icon-name">go-next-symbolic</property>
<property name="accessible-role">presentation</property>
</object>
</child>
</object>
</child>
<child type="suffix">
<object class="GtkImage">
<property name="valign">center</property>
<property name="halign">center</property>
<property name="icon-name">go-next-symbolic</property>
</object>
</child>
<style>
<class name="round-corners"/>
</style>
</template>
</interface>

View File

@ -48,7 +48,10 @@ mod imp {
fn class_init(klass: &mut Self::Class) {
ItemRow::static_type();
Self::bind_template(klass);
klass.set_css_name("members-list");
}
fn instance_init(obj: &InitializingObject<Self>) {

View File

@ -59,7 +59,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<template class="GtkListItem">
<property name="activatable">False</property>
<property name="selectable">False</property>
<property name="child">
<object class="ContentMemberItemRow">