[meta]: 0.9 new UI changes review
GeopJr opened this issue · 5 comments
I was planning on making this issue when I finished the other WIP features but since I've got both of your attention right now, I might as well start:
- #1099 Audio visualizer
Screencast.From.2024-10-09.17-49-42.mp4
Follows accent, if there's a cover, it uses its average color instead
- #1101 Focus picker
Screencast.from.2024-09-08.03-42-30.mp4
(focus picker icon top right)
- #1106 Mute dialog with options
- #1112 Verified author(s)
flat button, on click opens profile or author link if available. The API can return multiple authors even though it's currently not done. In that case it will show "Show all %d authors" and open a popover with all of them.
- #1128 thumbnail in alt text dialog composer
- #1125 scale revealer stop animation early and ease in-out not just out
Difficult to explain, but #1122 - the way scale revealer works is by crossfading between the attachment and the mediaviewer. That has the effect of the attachment stretching to fit the screen around the mid point of the animation. That PR makes the animation cross fade early and makes it ease-in-out so it hits more points while crossfading, otherwise it might go from 0% to 29% and crossfade only for one frame
Screencast.From.2024-10-09.17-59-28.mp4
- #1147 auto-fill in advanced search dialog for user
Screencast.from.2024-10-04.21-09-32.webm
basically a button to search and return the first account in the advanced search dialog
- #1160 poll show results button and refresh results button
- #1161 poll progress animation
Screencast.From.2024-10-13.19-22-18.mp4
- #1198 Wrapped
Screencast.From.2024-11-15.16-47-37.mp4
Yearly recap of the user's mastodon activity. This is generated by the server and I have some more info on the linked PR. I went with an animated border on the avatar to make it a bit more fun (?). The 'Most Used App' card will only look like in the recording if it's 'Tuba', otherwise it will look like the rest and not have an animated background or colors.
- #1188 AdwToggleGroup-like profile filter switcher
Screencast.From.2024-11-15.17-29-15.mp4
AdwToggleGroup will be available in the next libadwaita so in the meantime I ported it from Elastic
- #1209 scheduled posts
Scheduled Posts view:
You can re-schedule them or delete them
Scheduling from the composer:
Screencast.From.2024-11-22.00-28-01.mp4
(change since recording: the re-schedule dialog shows 'Reschedule' as the headerbar button label)
Drafting will also be added so it wont be the only option in the composer dropdown
- #1216 Moved accounts notice
Screencast.From.2024-11-23.00-23-37.mp4
- #1213 draft posts were added
They act similarly to schedule posts
(for a recap of everything to 0.9, v0.8.3...main)
Bump, reached feature freeze
Sorry about the delay, had a quick look at the latest main!
Audio player
Follows accent, if there's a cover, it uses its average color instead
If we can do average color, maybe it'd be better to do that for the user avatar as well?
Focal Point Setting
I was wondering if the numeric inputs are needed? My feeling is this is usually not something that needs to be particularly precise, and it makes the dialog look a bit clunky.
Thanks for working on this btw, I personally use this feature a lot!
Composer Dialog Layouts
The save button in the headerbar right next to close feels a bit off. I'd either use the classic layout with "Cancel" on the left, or move "Save" out of the headerbar (e.g. to the bottom).
I've noticed that the titles for some of these dialogs are longer than they need to be (e.g. could be just "Alternative Text" and "Set Focal Point"). They should also use Title Case.
Verified Authors
From that screenshot it looks a bit odd, but hard to judge it without more context. Do you have a link to a post with this? Also, is there any relevant art for this from other clients?
Alt Text Composer Thumbnail
It'd be good to have a little bit of padding around the thumbnail, and a slight border radius. I'd also drop the different background color on the textarea.
User Search/Autocomplete
This looks fun, but not very discoverable. Maybe instead of the button there could be an autocomplete popover with a list of search results that updates as you type the search query?
Wrapped
Niiice, very cute feature ❤️
The Default/Accent/etc. popovers are a bit confusing, both because it's not clear what they affect, and also because they're duplicated in two places. IMO it'd be clearer if there was a single "Style" chooser popover for this (ideally with some kind of inline preview), which would then be used if you download or share it. Maybe the background could be applied to this dialog as well, for an even clearer preview?
The share image needs a bit of padding around the widgets, e.g. 24px or so:
The notification I got has "(null)" in it:
For my account the "most interactions" thing doesn't seem to work, I guess there should be a better empty state (e.g. "No Interactions" with an icon or something), or the card should be emtpy/hidden.
Scheduling
The headerbar is a bit awkward here because of the long strings. Are you sure the button needs to say "Schedule and Publish"? My feeling is just "Schedule" would be enough, but maybe it could also say "Publish Later"? As for the title, I think it could just be "Schedule Post", no?
I'd also go for a more standard time chooser (like e.g. the one in Railway), the multi-row layout is a bit hard to parse.
The row layout for scheduled posts would look better with a divider line between the header and the post itself. I'd also drop the bold and the colon in the header, and just go for a normal label like "Scheduled for March 20, 2025 ...".
Everything else looks good to me. Thanks for all your work on this, this app is really coming along nicely!
Sorry about the delay, had a quick look at the latest main!
No problem, thanks for the review!
If we can do average color, maybe it'd be better to do that for the user avatar as well?
Currently, it's being calculated from the blurhash, which is very fast. Unfortunately, Mastodon doesn't provide blurhashes for avatars so I cannot do that that way. I'll see about quickly grabbing the avg color from the paintable but if it's too time consuming, I'll stay with the accent color
I was wondering if the numeric inputs are needed?
They were added for accessibility reasons. I can probably do keyboard navigation with the arrow keys but I don't think a screen reader will be able to provide much info from the picker without dedicated rows. Maybe we can go for a more generic approach of dropdowns e.g. "horizontal position: top, center, bottom"... But that also feels clunky
From that screenshot it looks a bit odd, but hard to judge it without more context. Do you have a link to a post with this? Also, is there any relevant art for this from other clients?
This post: https://mastodon.social/@Mastodon/113272025176822566
Will look like this in Tuba:
Screencast.From.2024-12-03.21-28-10.mp4
and clicking it will open the profile.
I think only Phanpy has done it from the clients I can access:
The main reason I decided to put it outside the preview card, is the 'horizontal' layout we have when there's no thumbnail, where having an extra row felt a bit off
It'd be good to have a little bit of padding around the thumbnail, and a slight border radius. I'd also drop the different background color on the textarea.
Border radius might require more thought because it's actually a GtkPicture that takes as much space as it can get currently while keeping the aspect ratio, so I'm not going to block it on this.
I re-added the background color for the sake of indicating the editable space. I'll see about adding a placeholder text instead but it'll be hacky. This is what it looks like without the background:
Wrapped
Most interactions was supposed to not be visible if it was empty, which leads me to believe I probably messed up somewhere else.
~~I worked on this way before it was merged so I didn't have real info. Actually, I still don't have any because my instance hasn't generated them yet. Could you send me yours if you don't mind? Run the following in your browser's console while on mastodon.social:
Feel free to redact anything you think is private.~~
nvm got it and fixed!
Changed it to a 'Style' dropdown with preview:
Screencast.From.2024-12-03.20-51-21.mp4
Above is 12px padding
Below is 24px padding
The export to png happens similarly to taking a screenshot of the widgets, so CSS, fonts, accent colors, dark mode, window size do impact it. Hopefully users realize that the style dropdown is meant for the exports and it's not just a random half-implemented window style chooser. That was mostly the reasoning for the 2 dropdowns prior.
Are you sure the button needs to say "Schedule and Publish"? My feeling is just "Schedule" would be enough, but maybe it could also say "Publish Later"? As for the title, I think it could just be "Schedule Post", no?
Changed it to "Schedule", though my only concern was that users might not realize that by clicking this button, it will schedule it and close the composer, instead of returning back to the composer and continue editing their post.
I'd also go for a more standard time chooser (like e.g. the one in Railway), the multi-row layout is a bit hard to parse.
Feels a bit empty 🤔
The timezone dropdown exists mostly for org account where the person managing it wants to set the time in UTC rather than their local timezone which might require them doing timezone calculations themselves.
The row layout for scheduled posts would look better with a divider line between the header and the post itself. I'd also drop the bold and the colon in the header, and just go for a normal label like "Scheduled for March 20, 2025 ...".
LGTM
I ended up breaking the feature freeze for 1-2 more things:
- Mutual followings
Screencast.From.2024-12-03.21-58-48.mp4
This is similar to twitter's
It shows you which ones of the people you follow also follow this account. I think the way I've done it's a bit too much info but also I don't know where to place it otherwise. Adding it below the 'Follow' button will create spacing between the profile pic and the name/handle. Placing it in the same row as the name/handle (but still positioned below the follow button), will wrap a lot on narrow window sizes + long names. Placing it above/below the fields might be better but also gives it a bit too much attention.
'10 Mutuals' also doesn't feel too descriptive, as it's more like 'people you follow that also follow this person'
- Account suggestions
This is still very WIP so I don't have any screenshots, but mastodon shows a small carousel of suggested accounts (based on the Explore tab's For You accounts) when you don't follow many people:
The wip looks like the scheduled posts card with the title "Suggested Accounts", a trash icon button on the end with the tooltip "Don't show me again" and a horizontal scrollable list of accounts similar to the ones in the screenshots above, with left and right osd arrows similar to the gnome-software banners one. It's not a carousel because its carousel page can only have one widget which feels too much for 5+ accounts, 1 per page. While a horizontal scrollable box will show 2-3+ at a time
🤷 they can both wait for 0.10
these should probably change positions to: Style ... Save As, Share
Account suggestions
Almost done
Screencast.From.2024-12-04.07-15-40.mp4
Should probably center the display name
edit: pushed