downsampling info

assets/config_menu/graphics.rml

@@ -26,6 +26,7 @@
                             <input type="radio" name="downsampling" data-checked="ds_option" value="4" id="ds_4x" style="nav-right:none;nav-up:#tab_graphics"/>
                             <label class="config-option__tab-label" for="ds_4x">4x</label>
                         </div>
+                        <div class="config-option__details">{{ds_info}}</div>
                     </div>
                 </div>
                 <div class="config__row">
@@ -37,6 +38,7 @@
                             <input type="radio" name="aspectratio" data-checked="ar_option" value="Expand" id="ar_expand" style="nav-up:#res_2x"/>
                             <label class="config-option__tab-label" for="ar_expand">Expand</label>
                         </div>
+                        <div class="config-option__details"></div>
                     </div>
                     <div class="config-option">
                         <label class="config-option__title">Window Mode</label>
@@ -46,6 +48,7 @@
                             <input type="radio" name="windowmode" data-checked="wm_option" value="Fullscreen" id="wm_fullscreen" style="nav-right:none"/>
                             <label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
                         </div>
+                        <div class="config-option__details"></div>
                     </div>
                 </div>
                 
@@ -82,6 +85,7 @@
                             <label class="config-option__range-label">{{rr_manual_value}}</label>
                             <input id="rr_manual_input" type="range" min="20" max="360" style="flex:1;margin: 0dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
                         </div>
+                        <div class="config-option__details"></div>
                     </div>
                     <div class="config-option">
                         <label class="config-option__title">MS Anti-Aliasing</label>
@@ -95,6 +99,7 @@
                             <!-- <input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#apply_button"/>
                             <label class="config-option__tab-label" for="msaa_8x">8x</label> -->
                         </div>
+                        <div class="config-option__details"></div>
                     </div>
                 </div>
             </div>

assets/scss/styles/components/Config.scss

@@ -68,7 +68,7 @@
     flex-direction: column;
     flex: 1;
     align-items: flex-start;
-    justify-content: space-between;
+    justify-content: flex-start;
     margin: space(8) 0 space(16);
 }
 
@@ -82,6 +82,7 @@
     padding: 0;
     flex-direction: row;
     width: 100%;
+    height: auto;
     align-items: flex-start;
     justify-content: flex-start;
 
@@ -160,6 +161,13 @@
     }
 }
 
+.config-option__details {
+    @extend %label-xs;
+    color: $color-secondary;
+    margin: space(8) space(12) 0;
+    height: space(18);
+}
+
 .config-option__range-wrapper {
     margin-top: space(4);
     max-width: space(360);

assets/scss/styles/mixins/_typography.scss

@@ -46,6 +46,12 @@ $font-stack: chiaro;
     text-transform: uppercase;
 }
 
+%label-xs {
+    @include set-font-sizing(14, 0.14);
+    font-style: normal;
+	font-weight: 400;
+}
+
 %body {
     @include set-font-sizing(16, 0.0);
     font-style: normal;

src/ui/ui_config.cpp

@@ -45,7 +45,7 @@ template <typename T>
 void bind_option(Rml::DataModelConstructor& constructor, const std::string& name, T* option) {
 	constructor.BindFunc(name,
 		[option](Rml::Variant& out) { get_option(*option, out); },
-		[option](const Rml::Variant& in) { set_option(*option, in); graphics_model_handle.DirtyVariable("options_changed"); }
+		[option](const Rml::Variant& in) { set_option(*option, in); graphics_model_handle.DirtyVariable("options_changed"); graphics_model_handle.DirtyVariable("ds_info"); }
 	);
 };
 
@@ -313,12 +313,36 @@ public:
 			[](const Rml::Variant& in) {
 				new_options.ds_option = in.Get<int>();
 				graphics_model_handle.DirtyVariable("options_changed");
+				graphics_model_handle.DirtyVariable("ds_info");
 			});
 
 		constructor.BindFunc("options_changed",
 			[](Rml::Variant& out) {
 				out = (ultramodern::get_graphics_config() != new_options);
 			});
+		constructor.BindFunc("ds_info",
+			[](Rml::Variant& out) {
+				switch (new_options.res_option) {
+					case ultramodern::Resolution::Auto:
+						out = "Downsampling is not available at auto resolution";
+						return;
+					case ultramodern::Resolution::Original:
+						if (new_options.ds_option == 2) {
+							out = "Rendered in 480p and scaled to 240p";
+						} else if (new_options.ds_option == 4) {
+							out = "Rendered in 960p and scaled to 240p";
+						}
+						return;
+					case ultramodern::Resolution::Original2x:
+						if (new_options.ds_option == 2) {
+							out = "Rendered in 960p and scaled to 480p";
+						} else if (new_options.ds_option == 4) {
+							out = "Rendered in 4K and scaled to 480p";
+						}
+						return;
+				}
+				out = "";
+			});
 
 		graphics_model_handle = constructor.GetModelHandle();
 	}