Additional games list style options (tkashkin#265)

data/com.github.tkashkin.gamehub.gschema.xml

@@ -86,9 +86,9 @@
 				<default>"Theme-based"</default>
 				<summary>Icon style</summary>
 			</key>
-			<key name="list-compact" type="b">
-				<default>false</default>
-				<summary>Compact list</summary>
+			<key name="list-style" type="as">
+				<default>['installed-icon', 'installed-title-bold', 'installed-status', 'uninstalled-icon', 'uninstalled-dim']</default>
+				<summary>List style</summary>
 			</key>
 			<key name="grid-platform-icons" type="b">
 				<default>true</default>

data/css/app.css

@@ -274,10 +274,32 @@ list:not(:backdrop) row:selected:focus label.category-label
 
 .games-list-header
 {
-	background: alpha(#333, 0.1);
-	margin-top: -1px;
-	border-top: 1px alpha(#333, 0.3) solid;
-	border-bottom: 1px alpha(#333, 0.3) solid;
+	background: shade(@theme_bg_color, 0.95);
+	border-top: 1px shade(@theme_bg_color, 0.7) solid;
+	border-bottom: 1px shade(@theme_bg_color, 0.7) solid;
+}
+.games-list-header.first
+{
+	border-top: none;
+}
+.games-list-header > label
+{
+	padding: 6px 8px;
+}
+
+.game-list-row .title.bold
+{
+	font-weight: bold;
+}
+.game-list-row .status
+{
+	font-size: 8pt;
+	opacity: 0.8;
+}
+
+.game-list-row.dim
+{
+	opacity: 0.6;
 }
 
 .gameinfo-background :not(.igdb-data-container-scrollable-value) > undershoot.left

src/data/adapters/GamesAdapter.vala

@@ -365,14 +365,19 @@ namespace GameHub.Data.Adapters
 			if(prev_item != null && f == pf && (f || s == ps)) row.set_header(null);
 			else
 			{
-				var label = Styled.H4Label(f ? C_("status_header", "Favorites") : item.game.status.header, "games-list-header");
-				list.size_allocate.connect(alloc => {
-					label.set_size_request(alloc.width, -1);
-				});
-				Allocation alloc;
-				list.get_allocation(out alloc);
-				label.set_size_request(alloc.width, -1);
-				row.set_header(label);
+				var header = new Box(Orientation.HORIZONTAL, 0);
+				StyleClass.add(header, "games-list-header");
+				if(prev_item == null) StyleClass.add(header, "first");
+				header.hexpand = true;
+
+				var label = Styled.H4Label(f ? C_("status_header", "Favorites") : item.game.status.header);
+				label.hexpand = true;
+				label.xalign = 0;
+				label.ellipsize = Pango.EllipsizeMode.END;
+
+				header.add(label);
+				header.show_all();
+				row.set_header(header);
 			}
 		}
 

src/settings/UI.vala

@@ -28,9 +28,12 @@ namespace GameHub.Settings.UI
 		public bool dark_theme { get; set; }
 		public Appearance.IconStyle icon_style { get; set; }
 
-		public bool list_compact { get; set; }
 		public bool grid_platform_icons { get; set; }
 
+		public string[] list_style_cache;
+		public string[] list_style { get; set; }
+		public signal void list_style_updated(string[] style);
+
 		public static string symbolic_icon_suffix
 		{
 			owned get
@@ -50,6 +53,14 @@ namespace GameHub.Settings.UI
 		public Appearance()
 		{
 			base(ProjectConfig.PROJECT_NAME + ".ui.appearance");
+			list_style_cache = list_style;
+		}
+
+		public void update_list_style(string[] new_style)
+		{
+			list_style_cache = new_style;
+			list_style_updated(list_style_cache);
+			list_style = list_style_cache;
 		}
 
 		public static Gtk.Settings gtk_settings;

src/ui/dialogs/SettingsDialog/pages/ui/Appearance.vala

@@ -25,6 +25,8 @@ namespace GameHub.UI.Dialogs.SettingsDialog.Pages.UI
 {
 	public class Appearance: SettingsDialogPage
 	{
+		private Settings.UI.Appearance settings;
+
 		public Appearance(SettingsDialog dlg)
 		{
 			Object(
@@ -39,7 +41,7 @@ namespace GameHub.UI.Dialogs.SettingsDialog.Pages.UI
 
 		construct
 		{
-			var settings = Settings.UI.Appearance.instance;
+			settings = Settings.UI.Appearance.instance;
 
 			add_switch(_("Dark theme"), settings.dark_theme, v => { settings.dark_theme = v; });
 
@@ -59,15 +61,66 @@ namespace GameHub.UI.Dialogs.SettingsDialog.Pages.UI
 			icon_style_hbox.add(icon_style);
 			add_widget(icon_style_hbox);
 
-			add_separator();
-
-			add_switch(_("Compact list"), settings.list_compact, v => { settings.list_compact = v; });
-			add_switch(_("Show platform icons in grid view"), settings.grid_platform_icons, v => { settings.grid_platform_icons = v; });
-
 			icon_style.selected = settings.icon_style;
 			icon_style.mode_changed.connect(() => {
 				settings.icon_style = (Settings.UI.Appearance.IconStyle) icon_style.selected;
 			});
+
+			add_switch(_("Show platform icons in grid view"), settings.grid_platform_icons, v => { settings.grid_platform_icons = v; });
+
+			add_separator();
+
+			var hbox = new Box(Orientation.HORIZONTAL, 8);
+
+			var list_installed = new Box(Orientation.VERTICAL, 4);
+			list_installed.hexpand = true;
+
+			var list_uninstalled = new Box(Orientation.VERTICAL, 4);
+			list_uninstalled.hexpand = true;
+
+			hbox.add(list_installed);
+			hbox.add(new Separator(Orientation.VERTICAL));
+			hbox.add(list_uninstalled);
+
+			add_widget(hbox);
+
+			list_installed.add(Styled.H4Label(_("Games list: installed")));
+			list_uninstalled.add(Styled.H4Label(_("Games list: not installed")));
+
+			add_list_style_checkbox(C_("list_style", "Show icon"), "installed-icon", list_installed);
+			add_list_style_checkbox(C_("list_style", "Bold title"), "installed-title-bold", list_installed);
+			add_list_style_checkbox(C_("list_style", "Show status"), "installed-status", list_installed);
+
+			add_list_style_checkbox(C_("list_style", "Show icon"), "uninstalled-icon", list_uninstalled);
+			add_list_style_checkbox(C_("list_style", "Bold title"), "uninstalled-title-bold", list_uninstalled);
+			add_list_style_checkbox(C_("list_style", "Show status"), "uninstalled-status", list_uninstalled);
+			add_list_style_checkbox(C_("list_style", "Dim"), "uninstalled-dim", list_uninstalled);
+		}
+
+		private CheckButton add_list_style_checkbox(string label, string style, Box parent)
+		{
+			var check = new CheckButton.with_label(label);
+			StyleClass.add(check, "default-padding");
+			parent.add(check);
+			check.active = style in settings.list_style;
+			check.toggled.connect(() => {
+				if(!check.active && style in settings.list_style)
+				{
+					string[] new_style = {};
+					foreach(var s in settings.list_style)
+					{
+						if(s != style) new_style += s;
+					}
+					settings.update_list_style(new_style);
+				}
+				else if(check.active && !(style in settings.list_style))
+				{
+					string[] new_style = settings.list_style;
+					new_style += style;
+					settings.update_list_style(new_style);
+				}
+			});
+			return check;
 		}
 	}
 }

src/ui/views/GamesView/GameListRow.vala

@@ -54,7 +54,7 @@ namespace GameHub.UI.Views.GamesView
 		private Image no_icon_indicator;
 
 		private Label label;
-		private Label state_label;
+		private Label status_label;
 		private Image favorite_icon;
 		private Image updated_icon;
 
@@ -69,12 +69,16 @@ namespace GameHub.UI.Views.GamesView
 
 		construct
 		{
-			var hbox = new Box(Orientation.HORIZONTAL, 8);
+			get_style_context().add_class("game-list-row");
+
+			var hbox = new Box(Orientation.HORIZONTAL, 4);
 			hbox.margin = 4;
 			var vbox = new Box(Orientation.VERTICAL, 0);
+			vbox.margin_start = 4;
 			vbox.valign = Align.CENTER;
 
 			icon_overlay = new Overlay();
+			icon_overlay.no_show_all = true;
 
 			no_icon_indicator = new Image.from_icon_name("gamehub-symbolic", IconSize.BUTTON);
 			no_icon_indicator.get_style_context().add_class("no-icon-indicator");
@@ -90,6 +94,9 @@ namespace GameHub.UI.Views.GamesView
 			icon_overlay.add(no_icon_indicator);
 			icon_overlay.add_overlay(icon);
 
+			no_icon_indicator.show_all();
+			icon.show_all();
+
 			hbox.add(icon_overlay);
 
 			var label_hbox = new Box(Orientation.HORIZONTAL, 4);
@@ -101,28 +108,31 @@ namespace GameHub.UI.Views.GamesView
 			favorite_icon.valign = updated_icon.valign = Align.CENTER;
 			favorite_icon.pixel_size = updated_icon.pixel_size = 8;
 
-			label = new Label(null);
-			label.halign = Align.START;
-			label.get_style_context().add_class("category-label");
+			label = Styled.Label(null, "title");
+			label.hexpand = true;
+			label.xalign = 0;
+			label.ellipsize = Pango.EllipsizeMode.END;
 
+			label_hbox.add(label);
 			label_hbox.add(favorite_icon);
 			label_hbox.add(updated_icon);
-			label_hbox.add(label);
 
-			state_label = new Label(null);
-			state_label.halign = Align.START;
-			state_label.no_show_all = true;
+			status_label = Styled.Label(null, "status");
+			status_label.halign = Align.START;
+			status_label.xalign = 0;
+			status_label.ellipsize = Pango.EllipsizeMode.END;
+			status_label.no_show_all = true;
 
 			vbox.add(label_hbox);
-			vbox.add(state_label);
+			vbox.add(status_label);
 
 			hbox.add(vbox);
 
 			notify["is-selected"].connect(update_icon);
 
 			ui_settings = GameHub.Settings.UI.Appearance.instance;
-			ui_settings.notify["list-compact"].connect(update_compact_view);
-			update_compact_view();
+			ui_settings.list_style_updated.connect(update_style);
+			update_style(ui_settings.list_style_cache);
 
 			var ebox = new EventBox();
 			ebox.add(hbox);
@@ -235,7 +245,9 @@ namespace GameHub.UI.Views.GamesView
 		{
 			Idle.add(() => {
 				label.label = game.name;
-				state_label.label = s.description;
+				status_label.label = s.description;
+				tooltip_markup = """<span weight="600">%s</span>""".printf(game.name.replace("&amp;", "&").replace("&", "&amp;")) + "\n" + """<span size="smaller">%s</span>""".printf(s.description.replace("&amp;", "&").replace("&", "&amp;"));
+				update_style(ui_settings.list_style_cache);
 				favorite_icon.visible = game.has_tag(Tables.Tags.BUILTIN_FAVORITES);
 				update_icon();
 				changed();
@@ -251,19 +263,43 @@ namespace GameHub.UI.Views.GamesView
 			}, Priority.LOW);
 		}
 
-		public void update_compact_view()
+		public void update_style(string[] style)
 		{
-			var compact = ui_settings.list_compact;
 			var is_gog_game = game is GameHub.Data.Sources.GOG.GOGGame;
+			var is_installed = game.status.state != Game.State.UNINSTALLED;
+
+			var style_prefix = is_installed ? "installed" : "uninstalled";
+
+			var show_status = @"$(style_prefix)-status" in style;
 
 			// GOG icons are rounded, make them bigger to compensate visual difference
-			var image_size = compact ? (is_gog_game ? 18 : 16) : (is_gog_game ? 38 : 32);
-			var overlay_size = compact ? 18 : 38;
+			var image_size = !show_status ? (is_gog_game ? 18 : 16) : (is_gog_game ? 38 : 32);
+			var overlay_size = !show_status ? 18 : 38;
 
 			icon.set_constraint(image_size, image_size, 1);
 			icon_overlay.set_size_request(overlay_size, overlay_size);
 
-			state_label.visible = !compact;
+			status_label.visible = show_status;
+
+			icon_overlay.visible = @"$(style_prefix)-icon" in style;
+
+			if(@"$(style_prefix)-title-bold" in style)
+			{
+				StyleClass.add(label, "bold");
+			}
+			else
+			{
+				StyleClass.remove(label, "bold");
+			}
+
+			if(@"$(style_prefix)-dim" in style)
+			{
+				StyleClass.add(this, "dim");
+			}
+			else
+			{
+				StyleClass.remove(this, "dim");
+			}
 		}
 
 		private void update_icon()

src/ui/views/GamesView/GamesView.vala

@@ -161,7 +161,7 @@ namespace GameHub.UI.Views.GamesView
 			});
 
 			var games_list_scrolled = new ScrolledWindow(null, null);
-			games_list_scrolled.hscrollbar_policy = PolicyType.EXTERNAL;
+			games_list_scrolled.hscrollbar_policy = PolicyType.NEVER;
 			games_list_scrolled.add(games_list);
 			games_list_scrolled.set_size_request(220, -1);
 

src/ui/widgets/Styles.vala

@@ -64,29 +64,34 @@ namespace GameHub.UI.Widgets
 
 	namespace Styled
 	{
-		public Label Label(string? text, string main_class, va_list classes)
+		private Label label(string? text, string main_class, va_list classes)
 		{
 			var label = new Gtk.Label(text);
 			StyleClass.add(label, main_class);
 			StyleClass.add_va(label, classes);
 			return label;
 		}
 
+		public Label Label(string? text, string main_class, ...)
+		{
+			return label(text, main_class, va_list());
+		}
+
 		public Label H1Label(string? text, ...)
 		{
-			return Styled.Label(text, StyleClass.Label.H1, va_list());
+			return label(text, StyleClass.Label.H1, va_list());
 		}
 		public Label H2Label(string? text, ...)
 		{
-			return Styled.Label(text, StyleClass.Label.H2, va_list());
+			return label(text, StyleClass.Label.H2, va_list());
 		}
 		public Label H3Label(string? text, ...)
 		{
-			return Styled.Label(text, StyleClass.Label.H3, va_list());
+			return label(text, StyleClass.Label.H3, va_list());
 		}
 		public Label H4Label(string? text, ...)
 		{
-			var label = Styled.Label(text, StyleClass.Label.H4, va_list());
+			var label = label(text, StyleClass.Label.H4, va_list());
 			label.halign = Gtk.Align.START;
 			label.xalign = 0;
 			return label;