Added six new theme properties for sizing and placement of the helpsystem when a menu is open

es-core/src/HelpStyle.cpp

@@ -16,16 +16,24 @@ HelpStyle::HelpStyle()
     : position {Renderer::getScreenWidth() * 0.012f,
                 Renderer::getScreenHeight() *
                     (Renderer::getIsVerticalOrientation() ? 0.975f : 0.9515f)}
+    , positionDimmed {position}
     , origin {glm::vec2 {0.0f, 0.0f}}
+    , originDimmed {origin}
     , textColor {0x777777FF}
     , textColorDimmed {0x777777FF}
     , iconColor {0x777777FF}
     , iconColorDimmed {0x777777FF}
     , font {Renderer::getIsVerticalOrientation() ? Font::get(0.025f * Renderer::getScreenWidth()) :
                                                    Font::get(FONT_SIZE_SMALL)}
+    , fontDimmed {Renderer::getIsVerticalOrientation() ?
+                      Font::get(0.025f * Renderer::getScreenWidth()) :
+                      Font::get(FONT_SIZE_SMALL)}
     , entrySpacing {0.00833f}
+    , entrySpacingDimmed {entrySpacing}
     , iconTextSpacing {0.00416f}
+    , iconTextSpacingDimmed {iconTextSpacing}
     , opacity {1.0f}
+    , opacityDimmed {opacity}
     , legacyTheme {false}
     , letterCase {"uppercase"}
 {
@@ -43,9 +51,20 @@ void HelpStyle::applyTheme(const std::shared_ptr<ThemeData>& theme, const std::s
         position = elem->get<glm::vec2>("pos") *
                    glm::vec2 {Renderer::getScreenWidth(), Renderer::getScreenHeight()};
 
+    if (elem->has("posDimmed"))
+        positionDimmed = elem->get<glm::vec2>("posDimmed") *
+                         glm::vec2 {Renderer::getScreenWidth(), Renderer::getScreenHeight()};
+    else
+        positionDimmed = position;
+
     if (elem->has("origin"))
         origin = elem->get<glm::vec2>("origin");
 
+    if (elem->has("originDimmed"))
+        originDimmed = elem->get<glm::vec2>("originDimmed");
+    else
+        originDimmed = origin;
+
     if (elem->has("textColor"))
         textColor = elem->get<unsigned int>("textColor");
 
@@ -62,21 +81,45 @@ void HelpStyle::applyTheme(const std::shared_ptr<ThemeData>& theme, const std::s
     else
         iconColorDimmed = iconColor;
 
-    if (elem->has("fontPath") || elem->has("fontSize"))
+    if (elem->has("fontPath") || elem->has("fontSize")) {
         font = Font::getFromTheme(elem, ThemeFlags::ALL, font, 0.0f, false, theme->isLegacyTheme());
+        if (!elem->has("fontSizeDimmed"))
+            fontDimmed = Font::getFromTheme(elem, ThemeFlags::ALL, font, 0.0f, false,
+                                            theme->isLegacyTheme());
+    }
+
+    if (elem->has("fontSizeDimmed")) {
+        fontDimmed = Font::getFromTheme(elem, ThemeFlags::ALL, font, 0.0f, false,
+                                        theme->isLegacyTheme(), 1.0f, true);
+    }
 
     if (elem->has("entrySpacing"))
         entrySpacing = glm::clamp(elem->get<float>("entrySpacing"), 0.0f, 0.04f);
 
+    if (elem->has("entrySpacingDimmed"))
+        entrySpacingDimmed = glm::clamp(elem->get<float>("entrySpacingDimmed"), 0.0f, 0.04f);
+    else
+        entrySpacingDimmed = entrySpacing;
+
     if (elem->has("iconTextSpacing"))
         iconTextSpacing = glm::clamp(elem->get<float>("iconTextSpacing"), 0.0f, 0.04f);
 
+    if (elem->has("iconTextSpacingDimmed"))
+        iconTextSpacingDimmed = glm::clamp(elem->get<float>("iconTextSpacingDimmed"), 0.0f, 0.04f);
+    else
+        iconTextSpacingDimmed = iconTextSpacing;
+
     if (elem->has("letterCase"))
         letterCase = elem->get<std::string>("letterCase");
 
     if (elem->has("opacity"))
         opacity = glm::clamp(elem->get<float>("opacity"), 0.2f, 1.0f);
 
+    if (elem->has("opacityDimmed"))
+        opacityDimmed = glm::clamp(elem->get<float>("opacityDimmed"), 0.2f, 1.0f);
+    else
+        opacityDimmed = opacity;
+
     // Load custom button icons.
     // The names may look a bit strange when combined with the PREFIX string "button_" but it's
     // because ThemeData adds this prefix to avoid name collisions when using XML attributes.

es-core/src/HelpStyle.h

@@ -19,15 +19,21 @@ class ThemeData;
 
 struct HelpStyle {
     glm::vec2 position;
+    glm::vec2 positionDimmed;
     glm::vec2 origin;
+    glm::vec2 originDimmed;
     unsigned int textColor;
     unsigned int textColorDimmed;
     unsigned int iconColor;
     unsigned int iconColorDimmed;
     std::shared_ptr<Font> font;
+    std::shared_ptr<Font> fontDimmed;
     float entrySpacing;
+    float entrySpacingDimmed;
     float iconTextSpacing;
+    float iconTextSpacingDimmed;
     float opacity;
+    float opacityDimmed;
     bool legacyTheme;
     std::string letterCase;
 

es-core/src/ThemeData.cpp

@@ -498,18 +498,24 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>>
        {"allowDuplicates", BOOLEAN}}},
      {"helpsystem",
       {{"pos", NORMALIZED_PAIR},
+       {"posDimmed", NORMALIZED_PAIR},
        {"origin", NORMALIZED_PAIR},
+       {"originDimmed", NORMALIZED_PAIR},
        {"textColor", COLOR},
        {"textColorDimmed", COLOR},
        {"iconColor", COLOR},
        {"iconColorDimmed", COLOR},
        {"fontPath", PATH},
        {"fontSize", FLOAT},
+       {"fontSizeDimmed", FLOAT},
        {"entrySpacing", FLOAT},
+       {"entrySpacingDimmed", FLOAT},
        {"iconTextSpacing", FLOAT},
+       {"iconTextSpacingDimmed", FLOAT},
        {"letterCase", STRING},
        {"textStyle", STRING},                      // For backward compatibility with legacy themes.
        {"opacity", FLOAT},
+       {"opacityDimmed", FLOAT},
        {"customButtonIcon", PATH}}},
      {"navigationsounds",
       {{"systembrowseSound", PATH},

es-core/src/components/HelpComponent.cpp

@@ -243,7 +243,9 @@ void HelpComponent::updateGrid()
         return;
     }
 
-    std::shared_ptr<Font>& font {mStyle.font};
+    const bool isDimmed {mWindow->isBackgroundDimmed()};
+
+    std::shared_ptr<Font>& font {isDimmed ? mStyle.fontDimmed : mStyle.font};
     mGrid = std::make_shared<ComponentGrid>(glm::ivec2 {static_cast<int>(mPrompts.size()) * 5, 1});
 
     std::vector<std::shared_ptr<ImageComponent>> icons;
@@ -251,14 +253,13 @@ void HelpComponent::updateGrid()
 
     float width {0.0f};
     float height {font->getLetterHeight() * 1.25f};
-    bool isDimmed {mWindow->isBackgroundDimmed()};
 
     for (auto it = mPrompts.cbegin(); it != mPrompts.cend(); ++it) {
         auto icon = std::make_shared<ImageComponent>();
         icon->setImage(getIconTexture(it->first.c_str()), false);
         icon->setColorShift(isDimmed ? mStyle.iconColorDimmed : mStyle.iconColor);
         icon->setResize(0, height);
-        icon->setOpacity(mStyle.opacity);
+        icon->setOpacity(isDimmed ? mStyle.opacityDimmed : mStyle.opacity);
         icons.push_back(icon);
 
         // Apply text style and color from the theme to the label and add it to the label list.
@@ -271,12 +272,14 @@ void HelpComponent::updateGrid()
             lblInput = Utils::String::toUpper(lblInput);
         auto lbl = std::make_shared<TextComponent>(
             lblInput, font, isDimmed ? mStyle.textColorDimmed : mStyle.textColor);
-        lbl->setOpacity(mStyle.opacity);
+        lbl->setOpacity(isDimmed ? mStyle.opacityDimmed : mStyle.opacity);
         labels.push_back(lbl);
 
         width += icon->getSize().x + lbl->getSize().x +
-                 ((mStyle.iconTextSpacing * mRenderer->getScreenWidth() +
+                 (((isDimmed ? mStyle.iconTextSpacingDimmed : mStyle.iconTextSpacing) *
-                   mStyle.entrySpacing * mRenderer->getScreenWidth()));
+                       mRenderer->getScreenWidth() +
+                   (isDimmed ? mStyle.entrySpacingDimmed : mStyle.entrySpacing) *
+                       mRenderer->getScreenWidth()));
     }
 
     mGrid->setSize(width, height);
@@ -285,10 +288,14 @@ void HelpComponent::updateGrid()
         const int col {i * 5};
         mGrid->setColWidthPerc(col, icons.at(i)->getSize().x / width);
         mGrid->setColWidthPerc(col + 1,
-                               (mStyle.iconTextSpacing * mRenderer->getScreenWidth()) / width);
+                               ((isDimmed ? mStyle.iconTextSpacingDimmed : mStyle.iconTextSpacing) *
+                                mRenderer->getScreenWidth()) /
+                                   width);
         mGrid->setColWidthPerc(col + 2, labels.at(i)->getSize().x / width);
         mGrid->setColWidthPerc(col + 3,
-                               (mStyle.entrySpacing * mRenderer->getScreenWidth()) / width);
+                               ((isDimmed ? mStyle.entrySpacingDimmed : mStyle.entrySpacing) *
+                                mRenderer->getScreenWidth()) /
+                                   width);
 
         mGrid->setEntry(icons.at(i), glm::ivec2 {col, 0}, false, false);
         mGrid->setEntry(labels.at(i), glm::ivec2 {col + 2, 0}, false, false);
@@ -300,6 +307,12 @@ void HelpComponent::updateGrid()
     if (mStyle.legacyTheme) {
         mGrid->setPosition({mStyle.position.x, mStyle.position.y, 0.0f});
     }
+    else if (isDimmed) {
+        mGrid->setPosition(
+            {mStyle.positionDimmed.x + ((mStyle.entrySpacingDimmed * mRenderer->getScreenWidth()) *
+                                        mStyle.originDimmed.x),
+             mStyle.positionDimmed.y, 0.0f});
+    }
     else {
         mGrid->setPosition(
             {mStyle.position.x +
@@ -307,7 +320,7 @@ void HelpComponent::updateGrid()
              mStyle.position.y, 0.0f});
     }
 
-    mGrid->setOrigin(mStyle.origin);
+    mGrid->setOrigin(isDimmed ? mStyle.originDimmed : mStyle.origin);
 }
 
 std::shared_ptr<TextureResource> HelpComponent::getIconTexture(const char* name)
@@ -336,10 +349,12 @@ std::shared_ptr<TextureResource> HelpComponent::getIconTexture(const char* name)
 
 void HelpComponent::setOpacity(float opacity)
 {
-    GuiComponent::setOpacity(opacity * mStyle.opacity);
+    GuiComponent::setOpacity(
+        opacity * (mWindow->isBackgroundDimmed() ? mStyle.opacityDimmed : mStyle.opacity));
 
     for (unsigned int i = 0; i < mGrid->getChildCount(); ++i)
-        mGrid->getChild(i)->setOpacity(opacity * mStyle.opacity);
+        mGrid->getChild(i)->setOpacity(
+            opacity * (mWindow->isBackgroundDimmed() ? mStyle.opacityDimmed : mStyle.opacity));
 }
 
 void HelpComponent::render(const glm::mat4& parentTrans)

es-core/src/resources/Font.cpp

@@ -431,7 +431,8 @@ std::shared_ptr<Font> Font::getFromTheme(const ThemeData::ThemeElement* elem,
                                          const float maxHeight,
                                          const bool linearMagnify,
                                          const bool legacyTheme,
-                                         const float sizeMultiplier)
+                                         const float sizeMultiplier,
+                                         const bool fontSizeDimmed)
 {
     mLegacyTheme = legacyTheme;
 
@@ -446,7 +447,11 @@ std::shared_ptr<Font> Font::getFromTheme(const ThemeData::ThemeElement* elem,
                                 static_cast<float>(Renderer::getScreenWidth()) :
                                 static_cast<float>(Renderer::getScreenHeight())};
 
-    if (properties & FONT_SIZE && elem->has("fontSize")) {
+    if (fontSizeDimmed && properties & FONT_SIZE && elem->has("fontSizeDimmed")) {
+        size = glm::clamp(screenSize * elem->get<float>("fontSizeDimmed"), screenSize * 0.001f,
+                          screenSize * 1.5f);
+    }
+    else if (properties & FONT_SIZE && elem->has("fontSize")) {
         size = glm::clamp(screenSize * elem->get<float>("fontSize"), screenSize * 0.001f,
                           screenSize * 1.5f);
         // This is used by the carousel where the itemScale property also scales the font size.

es-core/src/resources/Font.h

@@ -138,7 +138,8 @@ public:
                                               const float maxHeight = 0.0f,
                                               const bool linearMagnify = false,
                                               const bool legacyTheme = false,
-                                              const float sizeMultiplier = 1.0f);
+                                              const float sizeMultiplier = 1.0f,
+                                              const bool fontSizeDimmed = false);
 
     // Returns an approximation of VRAM used by this font's texture (in bytes).
     size_t getMemUsage() const;