From 957c1fa7fced986c821bd7ab9a9ec639a3bc8457 Mon Sep 17 00:00:00 2001 From: shadash Date: Fri, 15 Oct 2021 22:54:04 +0200 Subject: [PATCH 1/3] render extras with z-index higher than the carousel above the carousel Signed-off-by: Sophia Hadash --- es-app/src/views/SystemView.cpp | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/es-app/src/views/SystemView.cpp b/es-app/src/views/SystemView.cpp index 8159bacbd..c186960dd 100644 --- a/es-app/src/views/SystemView.cpp +++ b/es-app/src/views/SystemView.cpp @@ -402,7 +402,8 @@ void SystemView::render(const glm::mat4& parentTrans) glm::mat4 trans{getTransform() * parentTrans}; - renderExtras(trans, INT16_MIN, INT16_MAX); + // 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 @@ -412,6 +413,9 @@ void SystemView::render(const glm::mat4& parentTrans) // Always render the carousel on top so that it's not faded. renderCarousel(trans); + + // Render the rest of the extras. + renderExtras(trans, mCarousel.zIndex, INT16_MAX); } std::vector SystemView::getHelpPrompts() From 3070a66e2c43970fd92c336d4511be8100074920 Mon Sep 17 00:00:00 2001 From: shadash Date: Sat, 23 Oct 2021 17:34:20 +0200 Subject: [PATCH 2/3] introduce 'legacyZIndexMode' tag in carousel Signed-off-by: Sophia Hadash --- es-app/src/views/SystemView.cpp | 44 ++++++++++++++++++++++++--------- es-app/src/views/SystemView.h | 1 + es-core/src/ThemeData.cpp | 3 ++- 3 files changed, 36 insertions(+), 12 deletions(-) diff --git a/es-app/src/views/SystemView.cpp b/es-app/src/views/SystemView.cpp index c186960dd..f60a9a552 100644 --- a/es-app/src/views/SystemView.cpp +++ b/es-app/src/views/SystemView.cpp @@ -402,20 +402,35 @@ void SystemView::render(const glm::mat4& parentTrans) glm::mat4 trans{getTransform() * parentTrans}; - // Render the extras that are below the carousel. - renderExtras(trans, INT16_MIN, mCarousel.zIndex); + 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); - // Render the rest of the extras. - renderExtras(trans, mCarousel.zIndex, 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); + + // Render the carousel. + renderCarousel(trans); + + // Render the rest of the extras. + renderExtras(trans, mCarousel.zIndex, INT16_MAX); + } } std::vector SystemView::getHelpPrompts() @@ -734,4 +749,11 @@ void SystemView::getCarouselFromTheme(const ThemeData::ThemeElement* elem) else mCarousel.logoAlignment = ALIGN_CENTER; } + if (elem->has("legacyZIndexMode")) { + mCarousel.legacyZIndexMode = + elem->get("legacyZIndexMode").compare("true") == 0 ? true : false; + } + else { + mCarousel.legacyZIndexMode = true; + } } \ No newline at end of file diff --git a/es-app/src/views/SystemView.h b/es-app/src/views/SystemView.h index 6e590c971..5e0178a57 100644 --- a/es-app/src/views/SystemView.h +++ b/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 diff --git a/es-core/src/ThemeData.cpp b/es-core/src/ThemeData.cpp index 603a0131b..8c22d1968 100644 --- a/es-core/src/ThemeData.cpp +++ b/es-core/src/ThemeData.cpp @@ -210,7 +210,8 @@ std::map> 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 From 4147c2b98747a35f019a6ab0514005f3b600ec50 Mon Sep 17 00:00:00 2001 From: Sophia Hadash Date: Tue, 26 Oct 2021 16:05:12 +0200 Subject: [PATCH 3/3] documentation for the z-index property --- THEMES-DEV.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/THEMES-DEV.md b/THEMES-DEV.md index e13aea2c4..3bba4fa05 100644 --- a/THEMES-DEV.md +++ b/THEMES-DEV.md @@ -977,6 +977,8 @@ ES-DE borrows the concept of "nine patches" from Android (or "9-Slices"). Curren - 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.