New iteration of Tweak options UI (#355)

res/styles/common/_style.css

@@ -6,3 +6,5 @@
 @import url("views/GamesView.css");
 
 @import url("widgets/settings/SettingsGroup.css");
+
+@import url("widgets/tweaks/TweakOptionsPopover.css");

res/styles/common/dialogs/SettingsDialog.css

@@ -10,50 +10,50 @@
 .settings-dialog:dir(ltr)
 {
 	background-image: linear-gradient(to right,
-		                              shade(@theme_bg_color, 0.95) 202px,
+	                                  shade(@theme_bg_color, 0.95) 202px,
 	                                  @settings_separator 202px, @settings_separator 203px,
 	                                  transparent 203px, transparent);
 }
 .settings-dialog > headerbar:dir(ltr)
 {
 	background-image: linear-gradient(to right,
-		                              alpha(shade(@theme_bg_color, 0.1), 0.05) 202px,
+	                                  alpha(shade(@theme_bg_color, 0.1), 0.05) 202px,
 	                                  @settings_separator 202px, @settings_separator 203px,
 	                                  transparent 203px, transparent);
 }
 .settings-dialog:dir(rtl)
 {
 	background-image: linear-gradient(to left,
-		                              shade(@theme_bg_color, 0.95) 202px,
+	                                  shade(@theme_bg_color, 0.95) 202px,
 	                                  @settings_separator 202px, @settings_separator 203px,
 	                                  transparent 203px, transparent);
 }
 .settings-dialog > headerbar:dir(rtl)
 {
 	background-image: linear-gradient(to left,
-		                              alpha(shade(@theme_bg_color, 0.1), 0.05) 202px,
+	                                  alpha(shade(@theme_bg_color, 0.1), 0.05) 202px,
 	                                  @settings_separator 202px, @settings_separator 203px,
 	                                  transparent 203px, transparent);
 }
 
 .settings-dialog > headerbar > .vertical:dir(ltr)
 {
-    padding-left: 200px;
+	padding-left: 200px;
 }
 
 .settings-dialog > headerbar > .vertical:dir(rtl)
 {
-    padding-right: 200px;
+	padding-right: 200px;
 }
 
 .settings-dialog > headerbar switch
 {
-    margin: 0px;
+	margin: 0px;
 }
 
 .settings-dialog .settings-sidebar-row
 {
-    padding: 8px;
+	padding: 8px;
 }
 
 .settings-dialog .settings-pages-sidebar list

res/styles/common/widgets/settings/SettingsGroup.css

@@ -1,6 +1,6 @@
 .settings-group
 {
-    padding: 12px 18px;
+	padding: 12px 18px;
 }
 
 .settings-group > .title,
@@ -11,22 +11,22 @@
 }
 .settings-group-standalone-title
 {
-    margin-top: 12px;
-    margin-left: 18px;
-    margin-right: 18px;
+	margin-top: 12px;
+	margin-left: 18px;
+	margin-right: 18px;
 }
 
 .settings-group .setting:not(.custom-widget-setting) > box,
 .settings-group .setting:not(.custom-widget-setting) > grid,
 .settings-group .setting.label-setting > label
 {
-    padding: 6px 12px;
-    min-height: 36px;
+	padding: 6px 12px;
+	min-height: 36px;
 }
 
 .settings-group .setting .description
 {
-    font-size: 0.9em;
+	font-size: 0.9em;
 }
 
 .settings-group .setting.list-row,
@@ -38,16 +38,16 @@
 .settings-group .setting.list-row:last-child,
 .settings-group row.setting:last-child
 {
-    margin-bottom: -1px;
+	margin-bottom: -1px;
 }
 
 .settings-group .setting.provider-setting > box
 {
-    padding: 0;
+	padding: 0;
 }
 .settings-group .setting.provider-setting > box > grid
 {
-    padding: 6px 12px;
+	padding: 6px 12px;
 }
 .settings-group .setting.provider-setting .provider-settings
 {

res/styles/common/widgets/tweaks/TweakOptionsPopover.css

@@ -0,0 +1,28 @@
+.tweak-options-popover
+{
+	padding: 4px;
+}
+
+.tweak-options-popover .list-title
+{
+	font-weight: bold;
+	padding: 4px 8px;
+	margin-bottom: 4px;
+}
+
+.tweak-options-popover list
+{
+	background: transparent;
+}
+
+.tweak-options-popover list row > box,
+.tweak-options-popover list row > grid
+{
+	padding: 4px 8px;
+	min-height: 36px;
+}
+
+.tweak-options-popover list row .description
+{
+	font-size: 0.9em;
+}

res/styles/styles.gresource.xml

@@ -7,6 +7,7 @@
 		<file compressed="true">common/dialogs/SettingsDialog.css</file>
 		<file compressed="true">common/views/GamesView.css</file>
 		<file compressed="true">common/widgets/settings/SettingsGroup.css</file>
+		<file compressed="true">common/widgets/tweaks/TweakOptionsPopover.css</file>
 	</gresource>
 
 	<gresource prefix="/res/styles/"> <!-- elementary -->

src/meson.build

@@ -190,13 +190,16 @@ sources = [
 	'ui/widgets/ModeButton.vala',
 	'ui/widgets/OverlayBar.vala',
 	'ui/widgets/Welcome.vala',
-	'ui/widgets/TweaksList.vala',
 	'ui/widgets/DirectoriesList.vala',
 
 	'ui/widgets/settings/SettingsSidebar.vala',
 	'ui/widgets/settings/SettingsGroup.vala',
 	'ui/widgets/settings/Settings.vala',
 
+	'ui/widgets/tweaks/TweaksList.vala',
+	'ui/widgets/tweaks/TweakRow.vala',
+	'ui/widgets/tweaks/TweakOptionsPopover.vala',
+
 	'utils/Utils.vala',
 
 	'utils/fs/FS.vala',

src/ui/dialogs/GamePropertiesDialog/tabs/Overlays.vala

@@ -31,7 +31,7 @@ namespace GameHub.UI.Dialogs.GamePropertiesDialog.Tabs
 	{
 		public Traits.Game.SupportsOverlays game { get; construct; }
 
-        private Stack stack;
+		private Stack stack;
 
 		private Box disabled_box;
 		private AlertView disabled_alert;
@@ -56,7 +56,7 @@ namespace GameHub.UI.Dialogs.GamePropertiesDialog.Tabs
 
 		construct
 		{
-            stack = new Stack();
+			stack = new Stack();
 			stack.transition_type = StackTransitionType.CROSSFADE;
 
 			content = new Box(Orientation.VERTICAL, 0);

src/ui/dialogs/GameTweaksDialog.vala

@@ -25,6 +25,7 @@ using GameHub.Data.DB;
 using GameHub.Data.Runnables;
 using GameHub.Utils;
 using GameHub.UI.Widgets;
+using GameHub.UI.Widgets.Tweaks;
 
 namespace GameHub.UI.Dialogs
 {

src/ui/dialogs/SettingsDialog/SettingsDialog.vala

@@ -93,7 +93,7 @@ namespace GameHub.UI.Dialogs.SettingsDialog
 			pages.interpolate_size = true;
 
 			pages.notify["visible-child"].connect(() => {
-			    update_current_page((SettingsSidebar.SettingsPage) pages.visible_child);
+				update_current_page((SettingsSidebar.SettingsPage) pages.visible_child);
 			});
 
 			add_page("ui/appearance", new Pages.UI.Appearance(this));
@@ -159,53 +159,53 @@ namespace GameHub.UI.Dialogs.SettingsDialog
 
 		private void update_current_page(SettingsSidebar.SettingsPage page)
 		{
-            if(current_page != null)
-            {
-                current_page.disconnect(current_page_title_handler);
-                current_page.disconnect(current_page_desc_handler);
-                current_page.disconnect(current_page_has_active_switch_handler);
-                if(current_page_active_binding != null)
-                {
-                    current_page_active_binding.unbind();
-                    current_page_active_binding = null;
-                }
-            }
-            current_page = page;
-            current_page_title_handler = current_page.notify["title"].connect(update_current_page_title);
-            current_page_desc_handler = current_page.notify["description"].connect(update_current_page_title);
-            current_page_has_active_switch_handler = current_page.notify["has-active-switch"].connect(update_current_page_active_switch);
-            update_current_page_title();
-            update_current_page_active_switch();
+			if(current_page != null)
+			{
+				current_page.disconnect(current_page_title_handler);
+				current_page.disconnect(current_page_desc_handler);
+				current_page.disconnect(current_page_has_active_switch_handler);
+				if(current_page_active_binding != null)
+				{
+					current_page_active_binding.unbind();
+					current_page_active_binding = null;
+				}
+			}
+			current_page = page;
+			current_page_title_handler = current_page.notify["title"].connect(update_current_page_title);
+			current_page_desc_handler = current_page.notify["description"].connect(update_current_page_title);
+			current_page_has_active_switch_handler = current_page.notify["has-active-switch"].connect(update_current_page_active_switch);
+			update_current_page_title();
+			update_current_page_active_switch();
 		}
 
 		private void update_current_page_title()
 		{
-		    if(headerbar == null || current_page == null) return;
-		    var title = current_page.title;
-		    var desc = current_page.description;
-		    if(desc != null)
-		    {
-                headerbar.subtitle = "%s • %s".printf(title, desc);
-		    }
-		    else
-		    {
-		        headerbar.subtitle = title;
-		    }
+			if(headerbar == null || current_page == null) return;
+			var title = current_page.title;
+			var desc = current_page.description;
+			if(desc != null)
+			{
+				headerbar.subtitle = "%s • %s".printf(title, desc);
+			}
+			else
+			{
+				headerbar.subtitle = title;
+			}
 		}
 
 		private void update_current_page_active_switch()
 		{
-		    if(headerbar_page_active_switch == null || current_page == null) return;
-		    headerbar_page_active_switch.visible = current_page.has_active_switch;
-		    if(current_page_active_binding != null)
-            {
-                current_page_active_binding.unbind();
-                current_page_active_binding = null;
-            }
-            if(current_page.has_active_switch)
-            {
-                current_page_active_binding = current_page.bind_property("active", headerbar_page_active_switch, "active", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
-            }
+			if(headerbar_page_active_switch == null || current_page == null) return;
+			headerbar_page_active_switch.visible = current_page.has_active_switch;
+			if(current_page_active_binding != null)
+			{
+				current_page_active_binding.unbind();
+				current_page_active_binding = null;
+			}
+			if(current_page.has_active_switch)
+			{
+				current_page_active_binding = current_page.bind_property("active", headerbar_page_active_switch, "active", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
+			}
 		}
 
 		private void add_page(string id, SettingsSidebar.SettingsPage page)

src/ui/dialogs/SettingsDialog/pages/general/Collection.vala

@@ -28,7 +28,7 @@ namespace GameHub.UI.Dialogs.SettingsDialog.Pages.General
 {
 	public class Collection: SettingsDialogPage
 	{
-	    private const string EXAMPLE_GAME_NAME = "Factorio";
+		private const string EXAMPLE_GAME_NAME = "Factorio";
 
 		private Paths.Collection collection;
 		private Paths.Collection.GOG gog;
@@ -64,26 +64,26 @@ namespace GameHub.UI.Dialogs.SettingsDialog.Pages.General
 			gog = Paths.Collection.GOG.instance;
 			humble = Paths.Collection.Humble.instance;
 
-            var sgrp_collection = new SettingsGroup();
+			var sgrp_collection = new SettingsGroup();
 			collection_root = sgrp_collection.add_setting(
-			    new FileSetting.bind(
-			        _("Collection directory") + """<span foreground="gray"> • $root</span>""", _("Installers and bonus content will be downloaded in the collection directory"),
-			        file_chooser(_("Select collection root directory"), FileChooserAction.SELECT_FOLDER),
-			        collection, "root"
-			    )
+				new FileSetting.bind(
+					_("Collection directory") + """<span foreground="gray"> • $root</span>""", _("Installers and bonus content will be downloaded in the collection directory"),
+					file_chooser(_("Select collection root directory"), FileChooserAction.SELECT_FOLDER),
+					collection, "root"
+				)
 			);
 			add_widget(sgrp_collection);
 
-            var sgrp_gog = new SettingsGroup("GOG");
-            gog_game_dir = sgrp_gog.add_setting(new EntrySetting.bind(_("Game directory") + """<span foreground="gray"> • $game_dir</span>""", null, entry("source-gog-symbolic"), gog, "game-dir"));
-            gog_installers = sgrp_gog.add_setting(new EntrySetting.bind(_("Installers directory"), null, entry("source-gog-symbolic"), gog, "installers"));
-            gog_dlc = sgrp_gog.add_setting(new EntrySetting.bind(_("DLC directory"), null, entry("folder-download-symbolic"), gog, "dlc"));
-            gog_bonus = sgrp_gog.add_setting(new EntrySetting.bind(_("Bonus content directory"), null, entry("folder-music-symbolic"), gog, "bonus"));
+			var sgrp_gog = new SettingsGroup("GOG");
+			gog_game_dir = sgrp_gog.add_setting(new EntrySetting.bind(_("Game directory") + """<span foreground="gray"> • $game_dir</span>""", null, entry("source-gog-symbolic"), gog, "game-dir"));
+			gog_installers = sgrp_gog.add_setting(new EntrySetting.bind(_("Installers directory"), null, entry("source-gog-symbolic"), gog, "installers"));
+			gog_dlc = sgrp_gog.add_setting(new EntrySetting.bind(_("DLC directory"), null, entry("folder-download-symbolic"), gog, "dlc"));
+			gog_bonus = sgrp_gog.add_setting(new EntrySetting.bind(_("Bonus content directory"), null, entry("folder-music-symbolic"), gog, "bonus"));
 			add_widget(sgrp_gog);
 
-            var sgrp_humble = new SettingsGroup("Humble Bundle");
-            humble_game_dir = sgrp_humble.add_setting(new EntrySetting.bind(_("Game directory") + """<span foreground="gray"> • $game_dir</span>""", null, entry("source-humble-symbolic"), humble, "game-dir"));
-            humble_installers = sgrp_humble.add_setting(new EntrySetting.bind(_("Installers directory"), null, entry("source-humble-symbolic"), humble, "installers"));
+			var sgrp_humble = new SettingsGroup("Humble Bundle");
+			humble_game_dir = sgrp_humble.add_setting(new EntrySetting.bind(_("Game directory") + """<span foreground="gray"> • $game_dir</span>""", null, entry("source-humble-symbolic"), humble, "game-dir"));
+			humble_installers = sgrp_humble.add_setting(new EntrySetting.bind(_("Installers directory"), null, entry("source-humble-symbolic"), humble, "installers"));
 			add_widget(sgrp_humble);
 
 			gog_game_dir.ellipsize_description = gog_installers.ellipsize_description = gog_dlc.ellipsize_description = gog_bonus.ellipsize_description = Pango.EllipsizeMode.START;