GNOME Bugzilla – Bug 774297
Revamp empty states
Last modified: 2018-01-22 15:34:14 UTC
We should follow the empty states design: https://wiki.gnome.org/Design/OS/EmptyStates
This is a newcomers bug. The file that needs more changes is located in: src/photos-empty-results-box.c Bonus points if the structure will be similar to the EmptyResultsBox class of GNOME Documents. You can find its code here: https://git.gnome.org/browse/gnome-documents/tree/src/overview.js#n239 If you have any question please ask in the IRC channel #photos on the server irc.gnome.org. https://wiki.gnome.org/Community/GettingInTouch/IRC
Created attachment 341356 [details] [review] icons: Rename PHOTOS_ICON_PHOTOS_SYMBOLIC
Created attachment 341357 [details] [review] icons: Add PHOTOS_ICON_SYSTEM_SEARCH
Created attachment 341358 [details] [review] empty-results-box: Use PHOTOS_ICON_SYSTEM_SEARCH with PHOTOS_WINDOW_MODE_SEARCH
Created attachment 341363 [details] [review] empty-results-box: Add icon image to labels_grid
Created attachment 341364 [details] [review] empty-results-box: Make similar to EmptyResultsBox in Documents Increase icon image size, add bottom margin to icon image and top margin to title_label
Created attachment 341365 [details] [review] empty-results-box: Make struct similar to EmptyResultsBox class in Documents Increase icon image size, add bottom margin to icon image and top margin to title_label
Review of attachment 341356 [details] [review]: You didn't change PHOTOS_ICON_PHOTOS_SYMBOLIC, what about PHOTOS_ICON_CAMERA_PHOTO_SYMBOLIC ?
Review of attachment 341357 [details] [review]: _SYMBOLIC is missing
Review of attachment 341358 [details] [review]: Doing so, we end up with the same icon (a looking glass) for both the search and the overview views. What we want is: overview -> camera-photo-symbolic collection/albums -> emblem-photos-symbolic search -> system-search-symbolic favorites -> starred-symbolic
(In reply to Alessandro Bono from comment #8) > Review of attachment 341356 [details] [review] [review]: > > You didn't change PHOTOS_ICON_PHOTOS_SYMBOLIC, what about > PHOTOS_ICON_CAMERA_PHOTO_SYMBOLIC ? Maybe I should change the commit message to "Change the value of PHOTOS_ICON_PHOTOS_SYMBOLIC" ?
Created attachment 341528 [details] [review] icons: Add PHOTOS_ICON_SYSTEM_SEARCH_SYMBOLIC
(In reply to Shivam Tripathi from comment #11) > (In reply to Alessandro Bono from comment #8) > > Review of attachment 341356 [details] [review] [review] [review]: > > > > You didn't change PHOTOS_ICON_PHOTOS_SYMBOLIC, what about > > PHOTOS_ICON_CAMERA_PHOTO_SYMBOLIC ? > > Maybe I should change the commit message to "Change the value of > PHOTOS_ICON_PHOTOS_SYMBOLIC" ? Sorry, I misunderstood your point.
Created attachment 341530 [details] [review] icons: Add PHOTOS_ICON_CAMERA_PHOTO_SYMBOLIC
Created attachment 341543 [details] [review] empty-results-box: Revamp the UI Follow code flow of EmptyResultsBox class from +Documents. Change icons for search and overview. Increase maximum character length for secondary overview label. Change horizontal align of primary overview label to center.
Created attachment 341545 [details] [review] empty-results-box: Remove labels_grid
Review of attachment 341365 [details] [review]: Obsolete
Review of attachment 341364 [details] [review]: Obsolete
Review of attachment 341363 [details] [review]: Obsolete
Please review.
(In reply to Alessandro Bono from comment #10) > Review of attachment 341358 [details] [review] [review]: > > Doing so, we end up with the same icon (a looking glass) for both the search > and the overview views. What we want is: > overview -> camera-photo-symbolic > collection/albums -> emblem-photos-symbolic > search -> system-search-symbolic > favorites -> starred-symbolic Can you please tell me what exactly is the overview view? I have managed to change the search symbol but am stuck in the overview part.
*** Bug 725623 has been marked as a duplicate of this bug. ***
Review of attachment 341543 [details] [review]: Thanks for the patch, Shivam. I am sorry that it slipped through the cracks and had to sit in bugzilla for so long. Note, that we recently added the --empty-results switch, which makes it easier to hack EmptyResultsBox. This looks like a good first iteration. There are some remnants of the old design here and there, but otherwise looks good. ::: src/photos-empty-results-box.c @@ +117,1 @@ gtk_label_set_max_width_chars (GTK_LABEL (details), 24); The label for collections isn't "Name your first album" anymore. It's "No albums found". @@ +142,1 @@ details = gtk_label_new (details_str); This label isn't same either. See below. @@ +219,3 @@ + align = GTK_ALIGN_CENTER; + else + align = GTK_ALIGN_START; These alignments aren't necessary anymore. @@ +256,3 @@ + case PHOTOS_WINDOW_MODE_OVERVIEW: + if (!photos_source_manager_has_online_sources (PHOTOS_SOURCE_MANAGER (self->src_mngr))) + photos_empty_results_box_add_system_settings_label (self); This part is done a bit differently these days. See gnome-documents for an example. Specifically, this is no longer predicated on the presence of online accounts. We always show the same label no matter what. The label is also a bit different now - Online Accounts instead of Settings, and it mentions the Pictures folder. @@ +285,3 @@ + gtk_widget_set_vexpand (GTK_WIDGET (self), TRUE); + gtk_orientable_set_orientation (GTK_ORIENTABLE (self), GTK_ORIENTATION_VERTICAL); + gtk_grid_set_column_spacing (GTK_GRID (self), 12); Typo alert: should be row_spacing, not column_spacing. :)
Review of attachment 341545 [details] [review]: Should be folded into the previous patch.
Created attachment 367223 [details] [review] empty-results-box: Implement the new empty states design Rebased against master and made the above changes.
Created attachment 367224 [details] Screenshot of empty Photos
Created attachment 367225 [details] Screenshot of empty Albums
Created attachment 367226 [details] Screenshot of empty Favorites
Created attachment 367227 [details] Screenshot of empty search results
Alessandro, Shivam: thanks for helping with this!