Accéder au contenu principal

Boxes' thumbnails overhaul

I recently spent quite some time reworking the overall look of Boxes' machine thumbnails. Here is the result.

Boxes' new thumbnails

Stopped boxes

Up until now, Boxes' stopped machines were represented by a black box. It was nice as it represented the idea of a shut down screen, but it was pretty hard to differentiate a stopped machine from a running one displaying a black screen. This was stated in bug #730258 where Jimmac suggested to follow this design where thumbnails are draw as gray frames with a medium sized emblem in their center, using the system-shutdown-symbolic icon to suggest the stopped state.

Boxes' old thumbnail for stopped machines Boxes' new thumbnail for stopped machines
Boxes' thumbnail for stopped machines: old (left) and new (right)

Updating the other thumbnails

Machines under construction used to simply display their thumbnail with a spinner on top. This doesn't change but stopped machines being constructed now display their spinner in a frame, to be consistent with the new thumbnail for stopped machines.

Boxes' old thumbnail for machines being imported Boxes' new thumbnail for machines being imported
Boxes' thumbnail for machines being imported: old (left) and new (right)

The default thumbnail for machines was a big computer-symbolic icon. It have been changed to the new gray frame style, keeping the computer-symbolic icon as the thumbnail's emblem.

Boxes' old default machine thumbnail Boxes' new default machine thumbnail
Boxes' default machine thumbnail: old (left) and new (right)

Thumnails are now consistent, elegant, and the machine's status is more understandable.

Working on this feature helped me to discover bug #751494: GDMainIconView draw pictures without their last column of pixel.


The way a machine is shown as favorite has also been revamped. A big heart shaped icon (the emblem-favorite-symbolic icon) was added to the bottom right corner of the thumbnail, and this was causing multiple problems (see bug #745757):

  • the standard icon to show something is favorited is a star (the starred-symbolic icon),
  • and more importantly, its position was conflicting with the one of the selection checkbox!
Boxes' old emblem for favorite machines Boxes' new emblem for favorite machines
Boxes' emblem for favorite machines: old (left) and new (right)

A machine is now shown as favorited by adding a tiny star to the bottom left corner of its thumbnail.

Unfortunately, problems still exist as the white star becomes invisible on a white thumbnail (see bug #751478). I tried to solve this problem, by making the star casting a shadow, which worked well but it required me to implement a blurring function into Boxes' code, adding 100 lines of Vala to an already complex codebase for one tiny functionality which has nothing to do with the application's domain, hence this solution haven't been retained.

The emblem for favorite machines is invisible on a white thumbnail Adding a shadow under the emblem solves this problem
The 'favorites' emblem with and without a shadow

Zeeshan suggested trying to solve this by using the image's energy, as the code to do such a thing already exists. This solution still has to be explored.


Posts les plus consultés de ce blog

GTK+ Apps on Phones

As some of you may already know, I recently joined Purism to help developing GTK+ apps for the upcoming Librem 5 phone.Purism and GNOME share a lot of ideas and values, so the GNOME HIG and GNOME apps are what we will focus on primarily: we will do all we can to not fork nor to reinvent the wheel but to help allowing existing GTK+ applications to work on phones.How Fit are Existing GTK+ Apps?Phones are very different from laptops and even tablets: their screen is very small and their main input method is a single thumb on a touchscreen. Luckily, many GNOME applications are touch-friendly and are fit for small screens. Many applications present you a tree of information you can browse and I see two main layouts used by for GNOME applications to let you navigate it.A first kind of layout is found in applications like Documents, I'll call it stack UI: it uses all the available space to display the collection of information sources (in that case, documents), clicking an element from t…

One Widget to Adapt Them All and to The Librem 5 Port Them

In my previous article I shared my plans to help porting existing GTK+ applications to Purism's upcoming Librem 5 phone without having to fork them. This article will present the GTK+ widget I developed for Purism to make this happen.For more information on what Purism is working on for the Librem 5, please check Nicole Faerber's latest article.C'est pas sorcierThe underlying idea is to allow applications to dynamically switch between the two main GNOME application layouts: a row of panels — each panel being the view of an element from the previous one — and a stack of panels. The goal isn't to changes applications using the stack paradigm but the ones using the row one, allowing them to reach smaller sizes and to be usable on constrained sizes while keeping their initial paradigm and design when the screen space is sufficient. The development cost to port the applications to this adaptive design should be as low as possible.To achieve that, I wrote a GTK+ widget which…

Adaptive GNOME Web

I started working on making GNOME Web work well on the Librem 5; to be sure it fits a phone's screen I want the windows to fit in a 360 points width, which is definitely small. To do so I started with the advices from Tobias Bernard to make Web have two modes that I named normal and narrow. The normal mode is Web as you know it, while the narrow mode moves all buttons from the header bar but the hamburger menu to a new action bar at the bottom, letting the windows reach yet unreachable widths. Web autmatically adapting to small sizes. And now, with device rotation on a tablet. The code is overall ready, I still need to break it into reviewable bits before submitting it upstream.Once this get merged:we want to not show tabs in narrow mode and instead to display a popover listing the available pages,we want to make the search bar shrink rather than to limit the minimum window size,we consider migrating away from the application menu model.A quick layout test of the pages popover. P.S.…