From a1e295c266a06171fc5db1b3952fe869b8e657f8 Mon Sep 17 00:00:00 2001 From: LucasC Date: Thu, 11 Jul 2024 15:01:25 +0200 Subject: [PATCH] XWIKI-22316: Some elements keep main theme CSS values * Updated the Applications Panel to use the document style * Updated the Notification displayer UIX to use the document style * Removed style for the Colibri skin in order to use new color theme variables in the application panel. * Removed useless calls to colorThemeInit.vm at the start of ssxs (and set the parsing off for those.) --- .../Code/Macro/NotificationsMacro.xml | 4 +- .../Code/NotificationsDisplayerUIX.xml | 13 ++-- .../main/resources/Panels/Applications.xml | 62 ++++--------------- 3 files changed, 23 insertions(+), 56 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml index 8d11b7f8b040..c9af9cb661b9 100644 --- a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml +++ b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml @@ -772,7 +772,7 @@ require(['jquery', 'XWikiAsyncNotificationsMacro', 'xwiki-events-bridge'], funct long - #template('colorThemeInit.vm') + /*********************************************** * Notification Container ***********************************************/ @@ -914,7 +914,7 @@ require(['jquery', 'XWikiAsyncNotificationsMacro', 'xwiki-events-bridge'], funct CSS - 1 + 0 currentPage diff --git a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml index bafbf5f66d04..e18f2d98a72b 100644 --- a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml +++ b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml @@ -553,7 +553,7 @@ Get the actual notifications. long - #template('colorThemeInit.vm') + /*********************************************** * Notifications Header ***********************************************/ @@ -644,7 +644,7 @@ Get the actual notifications. LESS - 1 + 0 currentPage @@ -784,8 +784,13 @@ Get the actual notifications. #if ("$!xcontext.userReference" != '' && $services.notification.isEnabled()) #set ($discard = $xwiki.jsx.use('XWiki.Notifications.Code.Macro.NotificationsMacro')) #set ($discard = $xwiki.jsx.use('XWiki.Notifications.Code.NotificationsDisplayerUIX')) - #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.Macro.NotificationsMacro')) - #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.NotificationsDisplayerUIX')) + ## We make sure to use the color theme of the document where this UIX is used. + #set ($colorTheme = $xwiki.getUserPreference('colorTheme')) + #if ("$!colorTheme" != '') + #set ($colorTheme = $services.model.resolveDocument($colorTheme, $doc.documentReference)) + #end + #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.Macro.NotificationsMacro', {'colorTheme': $colorTheme})) + #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.NotificationsDisplayerUIX', {'colorTheme': $colorTheme})) {{html clean="false"}} ## We need the clean false to avoid getting a supplementary ul element. <li class="notification-uix loading"></li> {{/html}} diff --git a/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml b/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml index 0194b812cf67..b2152f963dfd 100644 --- a/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml +++ b/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml @@ -164,6 +164,7 @@ + doc.reference icon.theme locale request.wiki @@ -226,7 +227,12 @@ {{/velocity}} {{velocity}} -#set ($discard = $xwiki.ssx.use('Panels.Applications')) +## We make sure to use the color theme of the document where this UIX is used. +#set ($colorTheme = $xwiki.getUserPreference('colorTheme')) +#if ("$!colorTheme" != '') + #set ($colorTheme = $services.model.resolveDocument($colorTheme, $doc.documentReference)) +#end +#set ($discard = $xwiki.ssx.use('Panels.Applications', {'colorTheme': $colorTheme})) #set ($discard = $xwiki.jsx.use('Panels.Applications')) #panelheader($services.localization.render('panels.applications.title')) @@ -532,9 +538,7 @@ require(['scriptaculous/effects'], function() { long - #template('colorThemeInit.vm') - -.applicationsPanel li img { + .applicationsPanel li img { float: left; width: 16px; height: 16px; @@ -555,7 +559,7 @@ require(['scriptaculous/effects'], function() { padding: 0; margin: 10px 0 0 0; border: 0; - color: $theme.linkColor; + color: @link-color; box-shadow: none; background-color: transparent; width: 100%; @@ -565,7 +569,7 @@ require(['scriptaculous/effects'], function() { .applicationPanelMoreButton:hover, .applicationPanelMoreButton:focus { - background-color: $theme.highlightColor; + color: @link-hover-color; } .applicationPanelMoreButton .application-label { @@ -692,12 +696,6 @@ require(['scriptaculous/effects'], function() { float: left; width: 33%; } - - /* no responsive design for colibri */ - .skin-colibri .panel-width-Small .applicationsPanel li { - float: none; - width: inherit; - } } @media (min-width: 768px) and (max-width: 992px) { @@ -705,53 +703,17 @@ require(['scriptaculous/effects'], function() { float: left; width: 20%; } - - /* no responsive design for colibri */ - .skin-colibri .panel-width-Small .applicationsPanel li { - float: none; - width: inherit; - } -} - -/* for colibri */ - -.skin-colibri .panel-width-Small .applicationsPanel { - margin: 0; -} - -.skin-colibri .panel-width-Small .applicationsPanel li { - padding: 15px 0; - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - border-radius: 7px; - margin: 1px 0; -} - -.skin-colibri .panel-width-Small .applicationsPanel li.active { - background-color: $theme.buttonPrimaryBackgroundColor; -} - -.skin-colibri .panel-width-Small .applicationsPanel li.active a { - color: $theme.buttonPrimaryTextColor -} - -.skin-colibri .panel-width-Small .applicationsPanel li:hover { - background-color: $theme.highlightColor; -} - -.skin-colibri .panel-width-Small .applicationsPanel li:hover a { - color: $theme.textPrimaryColor; } - + LESS Applications Panel - 1 + 0 onDemand