UI fix bundle XIII (#4138)

* UI fixes && Icon support for powerups

* Better loading icon size

* Fix #4145

* Fix a small bug

* Add alternative icon support & avoid duplicating icons

data/gui/screens/help3.stkgui

@@ -32,57 +32,57 @@
                 <spacer height="2%" width="10"/>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/bubblegum-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/bubblegum_icon.png" alt_icon="models/bubblegum-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="BubbleGum - protect yourself with a shield, or use while looking back to leave a sticky pink puddle behind you."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                     <icon align="center" width="8%" height="100%" icon="models/zipper_collect.png"/>
+                     <icon align="center" width="8%" height="100%" icon="gui/icons/zipper_collect.png" alt_icon="models/zipper_collect.png"/>
                      <spacer width="3%" height="100%"/>
                      <bubble proportion="1" height="100%" text="Zipper - will give you a strong speed boost. But beware of not losing control of your kart!"/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/cake-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/cake_icon.png" alt_icon="models/cake-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             text="Cake - thrown at the closest rival, best on short ranges and long straights. It also affects other karts close to the explosion."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/plunger-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/plunger_icon.png" alt_icon="models/plunger-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Plunger - throw straight to pull an opponent back, or throw while looking back to make one lose sight."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/bowling-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/bowling_icon.png" alt_icon="models/bowling-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             text="Bowling Ball - goes straight until it strikes, it can bounce off walls. If you are looking back, it will be thrown backwards."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/parachute-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/parachute_icon.png" alt_icon="models/parachute-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Parachute - slows down all karts in a better position."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/swap-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/swap_icon.png" alt_icon="models/swap-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Swapper - gift boxes are transformed into bananas, nitro cans into bubblegums, and vice versa for a short time."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                     <icon align="center" width="8%" height="100%" icon="models/rubber_ball-icon.png"/>
+                     <icon align="center" width="8%" height="100%" icon="gui/icons/rubber_ball_icon.png" alt_icon="models/rubber_ball-icon.png"/>
                      <spacer width="3%" height="100%"/>
                      <bubble proportion="1" height="100%" text="Basket Ball - bounces after the leader, and might squash and slow down karts down on the way."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                     <icon align="center" width="8%" height="100%" icon="models/swatter-icon.png"/>
+                     <icon align="center" width="8%" height="100%" icon="gui/icons/swatter_icon.png" alt_icon="models/swatter-icon.png"/>
                      <spacer width="3%" height="100%"/>
                      <bubble proportion="1" height="100%" text="Swatter - will squash karts close by, slowing them down. Can also be used to remove parachutes and bombs."/>
                 </div>

data/gui/screens/help4.stkgui

@@ -32,7 +32,7 @@
                 <spacer height="2%" width="10"/>                
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/anchor-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/anchor_icon.png" alt_icon="models/anchor-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
@@ -40,7 +40,7 @@
                 </div>
                 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="8%" height="100%" icon="models/parachute-icon.png"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/parachute_icon.png" alt_icon="models/parachute-icon.png"/>
                     <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"

data/gui/screens/options_video.stkgui

@@ -34,7 +34,7 @@
 
                 <!-- ************ GRAPHICAL EFFECTS SETTINGS ************ -->
                 <div width="100%" height="fit" layout="horizontal-row">
-                    <spacer width="20" height="100%" />
+                    <spacer width="3%" height="100%" />
                     <div layout="vertical-row" width="8f" height="fit">
                         <gauge id="gfx_level" min_value="1" max_value="8" width="100%" align="center" />
                     </div>
@@ -46,7 +46,7 @@
                 <spacer width="5" height="1%"/>
 
                 <div width="100%" height="fit" layout="horizontal-row">
-                    <spacer width="20" height="100%" />
+                    <spacer width="3%" height="100%" />
                     <div layout="vertical-row" width="8f" height="fit">
                         <gauge id="blur_level" min_value="0" max_value="2" width="100%" align="center" />
                     </div>
@@ -59,7 +59,7 @@
 
                 <!-- ************ VSYNC ************ -->
                 <div width="100%" height="fit" layout="horizontal-row" id="outer_box" >
-                    <spacer width="20" height="100%" />
+                    <spacer width="3%" height="100%" />
                     <div layout="vertical-row" width="8f" height="fit" id="inner_box">
                         <spinner id="vsync" width="100%" align="center" />
                     </div>
@@ -72,12 +72,8 @@
 				
                 <!-- ************ CUSTOM SETTINGS ************ -->
                 <div width="100%" height="fit" layout="horizontal-row" id="outer_box" >
-                    <spacer width="20" height="100%" />
+                    <spacer width="5%" height="100%" />
-                    <div layout="vertical-row" width="8f" height="fit" id="inner_box">
+                    <button id="custom" text="Custom settings..." I18N="In the video settings" align="center"/>
-                        <button id="custom" text="Custom settings..." I18N="In the video settings" align="center"/>
-                    </div>
-                    <div layout="vertical-row" proportion="1" height="100%">
-                    </div>
                 </div>
 
                 <spacer width="5" height="3%"/>
@@ -93,23 +89,23 @@
                 <spacer width="5" height="1%"/>
 
                 <div width="75%" height="fit" layout="horizontal-row" >
-                    <spacer width="40" height="100%" />
+                    <spacer width="5%" height="100%" />
                     <checkbox id="fullscreen"/>
-                    <spacer width="20" height="100%" />
+                    <spacer width="1%" height="100%" />
                     <label id="fullscreenText" height="100%" I18N="In the video settings" text="Fullscreen"/>
                 </div>
 
                 <div width="75%" layout="horizontal-row" height="fit">
-                    <spacer width="40" height="100%" />
+                    <spacer width="5%" height="100%" />
                     <checkbox id="rememberWinpos"/>
-                    <spacer width="20" height="100%" />
+                    <spacer width="1%" height="100%" />
                     <label id="rememberWinposText" height="100%" I18N="In the video settings" text="Remember window location"/>
                 </div>
 
                 <spacer width="5" height="1%"/>
 
                 <div width="100%" height="fit" layout="horizontal-row" >
-                    <spacer width="40" height="100%" />
+                    <spacer width="5%" height="100%" />
                     <button id="apply_resolution"
                         I18N="In the video settings" text="Apply new resolution" />
                 </div>

src/guiengine/engine.cpp

@@ -1375,6 +1375,7 @@ namespace GUIEngine
         }
         const int texture_w = loading->getSize().Width;
         const int texture_h = loading->getSize().Height;
+        const int stretched_size = getTitleFontHeight() * 1.5f;
 
         core::dimension2d<u32> frame_size =
             GUIEngine::getDriver()->getCurrentRenderTargetSize();
@@ -1382,10 +1383,10 @@ namespace GUIEngine
         const int screen_h = frame_size.Height;
 
         const core::rect< s32 > dest_area =
-            core::rect< s32 >(screen_w/2 - texture_w/2,
+            core::rect< s32 >(screen_w/2 - stretched_size/2,
-                              screen_h/2 - texture_h/2,
+                              screen_h/2 - stretched_size/2,
-                              screen_w/2 + texture_w/2,
+                              screen_w/2 + stretched_size/2,
-                              screen_h/2 + texture_h/2);
+                              screen_h/2 + stretched_size/2);
 
         const core::rect< s32 > source_area =
             core::rect< s32 >(0, 0, texture_w, texture_h);
@@ -1398,7 +1399,7 @@ namespace GUIEngine
         // the Material2D
         irr_driver->getVideoDriver()->enableMaterial2D();
         g_title_font->draw(_("Loading"),
-                           core::rect< s32 >( 0, screen_h/2 + texture_h/2,
+                           core::rect< s32 >( 0, screen_h/2 + stretched_size/2,
                                               screen_w, screen_h ),
                            SColor(255,255,255,255),
                            true/* center h */, false /* center v */ );

src/guiengine/screen_loader.cpp

@@ -216,6 +216,7 @@ if(prop_name != NULL) widget.m_properties[prop_flag] = core::stringc(prop_name).
                 READ_PROPERTY(icon_align,     PROP_ICON_ALIGN);
 
                 READ_PROPERTY(icon,           PROP_ICON);
+                READ_PROPERTY(alt_icon,       PROP_ALT_ICON);
                 READ_PROPERTY(focus_icon,     PROP_FOCUS_ICON);
                 READ_PROPERTY(text_align,     PROP_TEXT_ALIGN);
                 READ_PROPERTY(text_valign,    PROP_TEXT_VALIGN);

src/guiengine/widget.hpp

@@ -99,6 +99,7 @@ namespace GUIEngine
         PROP_ALIGN,
         // PROP_TEXT, // this one is a bit special, can't go along others since it's wide strings
         PROP_ICON,
+        PROP_ALT_ICON,
         PROP_FOCUS_ICON,
         PROP_TEXT_ALIGN,
         PROP_TEXT_VALIGN,

src/guiengine/widgets/icon_button_widget.cpp

@@ -82,6 +82,25 @@ void IconButtonWidget::add()
         }
     }
 
+    // ---- Alternative icon
+    if (m_texture == NULL)
+    {
+        // Use the alternative icon in case of original icon not found
+        if (m_properties[PROP_ALT_ICON] != "")
+        {
+            if (m_icon_path_type == ICON_PATH_TYPE_ABSOLUTE)
+            {
+                setTexture(irr_driver->getTexture(m_properties[PROP_ALT_ICON]));
+            }
+            else if (m_icon_path_type == ICON_PATH_TYPE_RELATIVE)
+            {
+                std::string file =
+                    GUIEngine::getSkin()->getThemedIcon(m_properties[PROP_ALT_ICON]);
+                setTexture(irr_driver->getTexture(file));
+            }
+        }
+    }
+
     if (m_texture == NULL)
     {
         if (m_properties[PROP_ICON].size() > 0)

src/states_screens/grand_prix_win.cpp

@@ -167,8 +167,8 @@ void GrandPrixWin::init()
 
         const int label_height = GUIEngine::getFontHeight() + 15;
 
-        const int y_from       = frame_size.Height - label_height*2;
+        const int y_from       = frame_size.Height - label_height*2 - GUIEngine::getFontHeight();
-        const int y_to         = frame_size.Height - label_height;
+        const int y_to         = frame_size.Height - label_height - GUIEngine::getFontHeight();
 
         const int label_x_from = frame_size.Width/2 - message_width/2;
         const int label_x_to   = frame_size.Width/2 + message_width/2;