Merge branch '653-properly-apply-z-index-in-the-system-view'

THEMES-DEV.md

@@ -987,6 +987,8 @@ It's strongly recommended to use the same image dimensions for all badges as var
     - Default is 3
 * `zIndex` - type: FLOAT.
     - z-index value for component.  Components will be rendered in order of z-index value from low to high.
+* `legacyZIndexMode` - type: BOOLEAN
+    - If true, the carousel will ignore zIndex and always render on top of other components.
 
 The help system is a special element that displays a context-sensitive list of actions the user can take at any time.  You should try and keep the position constant throughout every screen.  Keep in mind the "default" settings (including position) are used whenever the user opens a menu.
 

es-app/src/views/SystemView.cpp

@@ -402,16 +402,35 @@ void SystemView::render(const glm::mat4& parentTrans)
 
     glm::mat4 trans{getTransform() * parentTrans};
 
-    renderExtras(trans, INT16_MIN, INT16_MAX);
+    if (mCarousel.legacyZIndexMode) {
+        // Render all extras.
+        renderExtras(trans, INT16_MIN, INT16_MAX);
 
-    // Fade the screen if we're using fade transitions and we're currently transitioning.
-    // This basically renders a black rectangle on top of the currently visible extras
-    // (and beneath the carousel and help prompts).
-    if (mExtrasFadeOpacity)
-        renderFade(trans);
+        // Fade the screen if we're using fade transitions and we're currently transitioning.
+        // This basically renders a black rectangle on top of the currently visible extras
+        // (and beneath the carousel and help prompts).
+        if (mExtrasFadeOpacity)
+            renderFade(trans);
 
-    // Always render the carousel on top so that it's not faded.
-    renderCarousel(trans);
+        // Always render the carousel on top so that it's not faded.
+        renderCarousel(trans);
+    }
+    else {
+        // Render the extras that are below the carousel.
+        renderExtras(trans, INT16_MIN, mCarousel.zIndex);
+
+        // Fade the screen if we're using fade transitions and we're currently transitioning.
+        // This basically renders a black rectangle on top of the currently visible extras
+        // (and beneath the carousel and help prompts).
+        if (mExtrasFadeOpacity)
+            renderFade(trans);
+
+        // Render the carousel.
+        renderCarousel(trans);
+
+        // Render the rest of the extras.
+        renderExtras(trans, mCarousel.zIndex, INT16_MAX);
+    }
 }
 
 std::vector<HelpPrompt> SystemView::getHelpPrompts()
@@ -730,4 +749,11 @@ void SystemView::getCarouselFromTheme(const ThemeData::ThemeElement* elem)
         else
             mCarousel.logoAlignment = ALIGN_CENTER;
     }
+    if (elem->has("legacyZIndexMode")) {
+        mCarousel.legacyZIndexMode =
+            elem->get<std::string>("legacyZIndexMode").compare("true") == 0 ? true : false;
+    }
+    else {
+        mCarousel.legacyZIndexMode = true;
+    }
 }

es-app/src/views/SystemView.h

@@ -47,6 +47,7 @@ struct SystemViewCarousel {
     int maxLogoCount; // Number of logos shown on the carousel.
     glm::vec2 logoSize;
     float zIndex;
+    bool legacyZIndexMode;
 };
 
 class SystemView : public IList<SystemViewData, SystemData*>

es-core/src/ThemeData.cpp

@@ -213,7 +213,8 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>> The
       {"logoSize", NORMALIZED_PAIR},
       {"logoAlignment", STRING},
       {"maxLogoCount", FLOAT},
-      {"zIndex", FLOAT}}}};
+      {"zIndex", FLOAT},
+      {"legacyZIndexMode", STRING}}}};
 
 #define MINIMUM_THEME_FORMAT_VERSION 3
 #define CURRENT_THEME_FORMAT_VERSION 7