Skip to content

Commit

Permalink
feat(ProfileCover): redesign ff (#1250)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeopJr
GeopJr authored Dec 9, 2024
1 parent a0b080a commit 6e81553
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 50 deletions.
24 changes: 22 additions & 2 deletions data/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ calendar>header>button, calendar>grid>label {
color: @text_view_bg;
}

.no-min-size {
min-width: 0;
min-height: 0;
}

.notification-badge.no-attention {
background: alpha(var(--sidebar-fg-color), .4);
}
Expand All @@ -46,10 +51,10 @@ headerbar.flat.no-title .title {
padding: 6px;
}

.cover-badge.button > button {
/* .cover-badge.button > button {
padding-top: 0px;
padding-bottom: 0px;
}
} */

.ttl-flat-button {
padding: 0px;
Expand Down Expand Up @@ -293,6 +298,21 @@ headerbar.flat.no-title .title {
margin-right: -5px;
}

.ttl-mutuals {
font-size: small;
padding: 0 5px;
margin-left: -5px;
margin-right: -5px;
}

.ttl-mutuals label {
font-weight: normal;
}

.ttl-mutuals .mutual-avi:not(.first-avi) {
margin-left: -6px;
}

.ttl-status-avatar-actor {
margin-top: -20px;
margin-left: -6px;
Expand Down
28 changes: 15 additions & 13 deletions data/ui/views/profile_header.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,6 @@
</style>
</object>
</child>
<child type="overlay">
<object class="GtkMenuButton" id="mutuals_button">
<property name="valign">end</property>
<property name="halign">end</property>
<property name="direction">none</property>
<property name="visible">0</property>
<property name="margin-bottom">48</property>
<style>
<class name="button" />
<class name="cover-badge" />
</style>
</object>
</child>
<property name="child">
<object class="TubaWidgetsBackground" id="background">
<accessibility>
Expand Down Expand Up @@ -186,6 +173,21 @@
<property name="margin_top">6</property>
</object>
</child>

<child>
<object class="GtkMenuButton" id="mutuals_button">
<property name="margin_top">6</property>
<property name="visible">0</property>
<property name="halign">start</property>
<property name="direction">none</property>
<!-- translators: tooltip text that opens a popup that lists everyone that you follow that also follow this person -->
<property name="tooltip-text" translatable="yes">View All Followers You Know</property>
<style>
<class name="flat" />
<class name="ttl-mutuals" />
</style>
</object>
</child>
<layout>
<property name="column">0</property>
<property name="row">4</property>
Expand Down
1 change: 1 addition & 0 deletions data/ui/widgets/profile.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
<property name="size">100</property>
<style>
<class name="account-avatar" />
<class name="main-avi" />
</style>
<layout>
<property name="column">0</property>
Expand Down
71 changes: 44 additions & 27 deletions po/dev.geopjr.Tuba.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2024-12-08 20:18+0200\n"
"POT-Creation-Date: 2024-12-09 04:14+0200\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
Expand Down Expand Up @@ -921,21 +921,26 @@ msgstr ""

#. translators: tooltip text on profile covers.
#. You can replace 'Cover' with 'Background' if needed.
#: data/ui/views/profile_header.ui:98
#: data/ui/views/profile_header.ui:85
msgid "View Cover"
msgstr ""

#. translators: tooltip text on profile avatars.
#. You can replace 'Avatar' with 'Profile Picture' if needed.
#: data/ui/views/profile_header.ui:112
#: data/ui/views/profile_header.ui:99
msgid "View Avatar"
msgstr ""

#: data/ui/views/profile_header.ui:177 src/Views/Sidebar.vala:68
#: data/ui/views/profile_header.ui:164 src/Views/Sidebar.vala:68
msgid "Open Profile"
msgstr ""

#: data/ui/views/profile_header.ui:212
#. translators: tooltip text that opens a popup that lists everyone that you follow that also follow this person
#: data/ui/views/profile_header.ui:184
msgid "View All Followers You Know"
msgstr ""

#: data/ui/views/profile_header.ui:214
msgid "Note"
msgstr ""

Expand Down Expand Up @@ -1587,7 +1592,7 @@ msgstr ""
#. translators: as in created an account; this is used in Profiles in a row
#. which has as value the date the profile was created on
#: src/Dialogs/Admin/Report.vala:127 src/Views/Admin/Pages/Accounts.vala:291
#: src/Widgets/ProfileCover.vala:480
#: src/Widgets/ProfileCover.vala:561
msgid "Joined"
msgstr ""

Expand All @@ -1598,7 +1603,7 @@ msgstr ""
#. and year.
#. If unsure, either leave it as-is or set it to %x.
#: src/Dialogs/Admin/Report.vala:128 src/Views/Admin/Pages/Accounts.vala:292
#: src/Widgets/ProfileCover.vala:464 src/Widgets/ScheduledStatus.vala:137
#: src/Widgets/ProfileCover.vala:545 src/Widgets/ScheduledStatus.vala:137
#: src/Widgets/Status.vala:592
msgid "%B %e, %Y"
msgstr ""
Expand Down Expand Up @@ -3488,7 +3493,7 @@ msgstr ""
#. please be mindful.
#. The first variable is the author's name and the
#. second one is the author's handle.
#: src/Widgets/Account.vala:145 src/Widgets/ProfileCover.vala:106
#: src/Widgets/Account.vala:145 src/Widgets/ProfileCover.vala:192
#, c-format
msgid "%s (%s)'s profile."
msgstr ""
Expand All @@ -3498,15 +3503,15 @@ msgstr ""
#. please be mindful.
#. The variable is a string representation of the
#. relationship (e.g. Mutuals, Follows You...)
#: src/Widgets/Account.vala:157 src/Widgets/ProfileCover.vala:118
#: src/Widgets/Account.vala:157 src/Widgets/ProfileCover.vala:204
#, c-format
msgid "Relationship: %s."
msgstr ""

#. translators: Used in profile stats.
#. The variable is a shortened number of the amount of posts a user has made.
#: src/Widgets/Account.vala:219 src/Widgets/ProfileCover.vala:239
#: src/Widgets/ProfileCover.vala:519
#: src/Widgets/Account.vala:219 src/Widgets/ProfileCover.vala:325
#: src/Widgets/ProfileCover.vala:600
#, c-format
msgid "%s Post"
msgid_plural "%s Posts"
Expand All @@ -3515,8 +3520,8 @@ msgstr[1] ""

#. translators: Used in profile stats.
#. The variable is a shortened number of the amount of followers a user has.
#: src/Widgets/Account.vala:227 src/Widgets/ProfileCover.vala:247
#: src/Widgets/ProfileCover.vala:533
#: src/Widgets/Account.vala:227 src/Widgets/ProfileCover.vala:333
#: src/Widgets/ProfileCover.vala:614
#, c-format
msgid "%s Follower"
msgid_plural "%s Followers"
Expand All @@ -3525,8 +3530,8 @@ msgstr[1] ""

#. translators: Used in profile stats.
#. The variable is a shortened number of the amount of people a user follows.
#: src/Widgets/Account.vala:236 src/Widgets/ProfileCover.vala:256
#: src/Widgets/ProfileCover.vala:527
#: src/Widgets/Account.vala:236 src/Widgets/ProfileCover.vala:342
#: src/Widgets/ProfileCover.vala:608
#, c-format
msgid "%s Following"
msgstr ""
Expand Down Expand Up @@ -3730,36 +3735,48 @@ msgid_plural "See all %d authors"
msgstr[0] ""
msgstr[1] ""

#. translators: button on profiles that when clicked shows a list of familiar followers.
#. The first variable is a comma-separated list of people (e.g. GeopJr, Tuba, GNOME).
#. If your language requires pronouns you may add a : after 'by' so it's clear it's a
#. list of names. The second variable is the amount of other familiar followers, not
#. displayed in the list. The singular version will not be used.
#: src/Widgets/ProfileCover.vala:73
#, c-format
msgid "Followed by %s & %s Other"
msgid_plural "Followed by %s & %s Others"
msgstr[0] ""
msgstr[1] ""

#. translators: button on profiles that when clicked shows a list of familiar followers.
#. The variable is a comma-separated list of people (e.g. GeopJr, Tuba, GNOME).
#. If your language requires pronouns you may add a : after 'by' so it's clear it's a
#. list of names. This is the version of the string that has 0 'others'.
#: src/Widgets/ProfileCover.vala:92
#, c-format
msgid "Followed by %s"
msgstr ""

#. translators: This is an accessibility label.
#. Screen reader users are going to hear this a lot,
#. please be mindful.
#. The variable is the amount of fields the profile
#. has.
#: src/Widgets/ProfileCover.vala:129
#: src/Widgets/ProfileCover.vala:215
#, c-format
msgid "Contains %d field."
msgid_plural "Contains %d fields."
msgstr[0] ""
msgstr[1] ""

#. translators: profile badge shown when a user is being followed by people you also follow.
#. The variable is a shortened number
#: src/Widgets/ProfileCover.vala:311
#, c-format
msgid "%s Mutual"
msgid_plural "%s Mutuals"
msgstr[0] ""
msgstr[1] ""

#. translators: Button label shown when a user has moved to another instance.
#. The first variable is this account's handle while the second
#. is the moved-to account's handle
#: src/Widgets/ProfileCover.vala:401
#: src/Widgets/ProfileCover.vala:482
#, c-format
msgid "%s has moved to %s"
msgstr ""

#: src/Widgets/ProfileCover.vala:630
#: src/Widgets/ProfileCover.vala:711
msgid "Error: Note is over 2000 characters long"
msgstr ""

Expand Down
97 changes: 89 additions & 8 deletions src/Widgets/ProfileCover.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,92 @@ protected class Tuba.Widgets.Cover : Gtk.Box {
typeof (Widgets.MarkupView).ensure ();
}

public class MutualsButtonContent : Gtk.Box {
Gtk.Box avi_box;
Widgets.EmojiLabel emoji_label;
construct {
this.orientation = Gtk.Orientation.HORIZONTAL;
this.spacing = 6;

avi_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
emoji_label = new Widgets.EmojiLabel () {
use_markup = false,
ellipsize = true,
valign = Gtk.Align.CENTER
};
emoji_label.add_css_class ("dim-label");

this.append (avi_box);
this.append (emoji_label);
}

public MutualsButtonContent (Gee.ArrayList<API.Account> mutual_accounts) {
Gee.HashMap<string, string> total_custom_emojis = new Gee.HashMap<string, string> ();
string[] display_named = {};

int max_accs = 3;
if (mutual_accounts.size == max_accs + 1) max_accs = max_accs + 1;

for (int i = 0; i < int.min (max_accs, mutual_accounts.size); i++) {
var acc = mutual_accounts.get (i);
string display_name = acc.display_name;

if (display_name.index_of_char (':') >= 0) {
acc.emojis_map.foreach (e => {
string new_moji_name = @"$(e.key)_$i";
display_name = display_name.replace (@":$(e.key):", @":$new_moji_name:");
total_custom_emojis.set (new_moji_name, e.value);

return true;
});
}

var avi = new Widgets.Avatar () {
account = acc,
size = 6
};
if (i == 0) avi.add_css_class ("first-avi");
avi.add_css_class ("no-min-size");
avi.add_css_class ("mutual-avi");
avi_box.append (avi);

display_named += display_name;
}

emoji_label.instance_emojis = total_custom_emojis;

int others_count = mutual_accounts.size - max_accs;
if (others_count > 0) {
this.tooltip_text = emoji_label.content = GLib.ngettext (
// translators: button on profiles that when clicked shows a list of familiar followers.
// The first variable is a comma-separated list of people (e.g. GeopJr, Tuba, GNOME).
// If your language requires pronouns you may add a : after 'by' so it's clear it's a
// list of names. The second variable is the amount of other familiar followers, not
// displayed in the list. The singular version will not be used.
"Followed by %s & %s Other", "Followed by %s & %s Others",
(ulong) others_count
).printf (string.joinv (", ", display_named), Units.shorten (others_count));
} else {
string display_name_list;
switch (display_named.length) {
case 1:
display_name_list = display_named[0];
break;
default:
int last_index = display_named.length - 1;
display_name_list = @"$(string.joinv(", ", display_named[0:last_index])) & $(display_named[last_index])";
break;
}

// translators: button on profiles that when clicked shows a list of familiar followers.
// The variable is a comma-separated list of people (e.g. GeopJr, Tuba, GNOME).
// If your language requires pronouns you may add a : after 'by' so it's clear it's a
// list of names. This is the version of the string that has 0 'others'.
this.tooltip_text = emoji_label.content = _("Followed by %s").printf (display_name_list);
}
}
}

[GtkChild] unowned Gtk.FlowBox roles;
[GtkChild] unowned Widgets.Background background;
[GtkChild] unowned Gtk.Label cover_badge;
Expand Down Expand Up @@ -287,6 +373,8 @@ protected class Tuba.Widgets.Cover : Gtk.Box {
Gee.ArrayList<API.Account>? mutual_accounts = null;
Gtk.ListBox? mutuals_listbox = null;
private bool populate_mutuals () {
mutuals_button.visible = false;

new Request.GET ("/api/v1/accounts/familiar_followers")
.with_account (accounts.active)
.with_param ("id", profile_id)
Expand All @@ -302,16 +390,9 @@ protected class Tuba.Widgets.Cover : Gtk.Box {

mutual_accounts = res_mutual_accounts.get (0).accounts;
if (mutual_accounts.size > 0) {
mutuals_button.get_first_child ().add_css_class ("osd");
mutuals_button.visible = true;

mutuals_button.label = GLib.ngettext (
// translators: profile badge shown when a user is being followed by people you also follow.
// The variable is a shortened number
"%s Mutual", "%s Mutuals",
(ulong) mutual_accounts.size
).printf (Tuba.Units.shorten (mutual_accounts.size));

mutuals_button.child = new MutualsButtonContent (mutual_accounts);
mutuals_listbox = new Gtk.ListBox () {
selection_mode = Gtk.SelectionMode.NONE,
css_classes = {"boxed-list"}
Expand Down

0 comments on commit 6e81553

Please sign in to comment.