From b3166995b4396abab3b26567dae3a3f3728d9ef8 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Thu, 25 Jan 2024 17:01:54 +0100 Subject: [PATCH 1/2] XWIKI-14342: Make Extension Manager use IconThemes * Removed the Hardcoded silk icons from the CSS * Fixed style to fit actual icon nodes in the same place as they used to be as background. * Added them in the velocity template instead * Fixed the behavior of status switch when loading dependencies. --- .../src/main/resources/templates/extension.vm | 49 +++++++++++++++++++ .../uicomponents/extension/extension.css | 38 +++++--------- .../uicomponents/extension/extension.js | 6 +++ 3 files changed, 67 insertions(+), 26 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/extension.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/extension.vm index e071f0d7fc56..a29a9a472e44 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/extension.vm +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/extension.vm @@ -576,6 +576,14 @@ $namespace## #end +#macro (spinner) + #if ($services.icon.currentIconSetName == 'Font Awesome') + + #else + + #end +#end + #** * NOTE: We explicitly overwrite the $extensionNamespace global variable because we want the dependency status to be * determined for the given namespace. See #determineExtensionStatus() macro. @@ -613,6 +621,29 @@ $namespace## #set ($dependencyName = "#displayExtensionName($dependencyExtension)") #end
+ #if($!dependencyStatus == 'core' || + $!dependencyStatus == 'remote-core' || + $!dependencyStatus == 'remote-core-incompatible') + $services.icon.renderHTML('cog') + #end + #if($!dependencyStatus == 'installed' || + $!dependencyStatus == 'remote-installed' || + $!dependencyStatus == 'installed-invalid' || + $!dependencyStatus == 'remote-installed-invalid' || + $!dependencyStatus == 'installed-dependency' || + $!dependencyStatus == 'remote-installed-dependency' || + $!dependencyStatus == 'remote-installed-incompatible') + $services.icon.renderHTML('plugin') + #end + #if($!dependencyStatus == 'remote') + $services.icon.renderHTML('world') + #end + #if($!dependencyStatus == 'loading') + #spinner() + #end + #if($!dependencyStatus == 'unknown') + $services.icon.renderHTML('error') + #end ${dependencyName}$!dependencyVersion #if ($extensionNamespace.startsWith('wiki:')) $services.localization.render('extensions.info.dependency.wiki', ["#wikiHomePageLink($extensionNamespace)"]) @@ -1038,6 +1069,24 @@ $namespace##

+ #if($!extensionStatus == 'core' || + $!extensionStatus == 'remote-core') + $services.icon.renderHTML('cog') + #end + #if($!extensionStatus == 'installed' || + $!extensionStatus == 'remote-installed' || + $!extensionStatus == 'installed-dependency' || + $!extensionStatus == 'remote-installed-dependency' || + $!extensionStatus == 'installed-invalid' || + $!extensionStatus == 'remote-installed-invalid') + $services.icon.renderHTML('plugin') + #end + #if($!extensionStatus == 'remote') + $services.icon.renderHTML('world') + #end + #if($!extensionStatus == 'loading') + #spinner() + #end #displayExtensionName($extension) $escapetool.xml($extension.id.version) #if ($extensionStatusMessage) diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.css index f538a270ce5b..e1c8af4b0e7a 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.css +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.css @@ -22,7 +22,12 @@ border: none; background: none no-repeat scroll 0.2em 0.3em transparent; margin: 0 0 0 -1.8em; - padding: 2px 0 2px 1.8em; + padding: 2px 0 2px 0; +} + +/* Style the icon at the start of the title. */ +.extension-title > *:first-child{ + margin-right: .8em; } .extension-version, .extension-namespace { @@ -170,37 +175,18 @@ ul.dependencies li:hover { background: transparent none no-repeat left; border-bottom: 1px dotted #E8E8E8; border-right: 7px solid $theme.pageContentBackgroundColor; - padding: 0.3em 0 0.3em 20px; + padding: 0.3em 0 0.3em 0; position: relative; -} -.dependency-item { line-height: 1.4em; } + +.dependency-item > *:first-child { + margin-right: .3em; +} + .dependency-item .extension-status { margin: 0; } -.extension-item-core .extension-title, .extension-item-remote-core .extension-title, -.dependency-item.extension-item-core, .dependency-item.extension-item-remote-core, .dependency-item.extension-item-remote-core-incompatible { - background-image: url("$xwiki.getSkinFile('icons/silk/cog.png')"); -} -.extension-item-installed .extension-title, .extension-item-remote-installed .extension-title, -.extension-item-installed-dependency .extension-title, .extension-item-remote-installed-dependency .extension-title, -.extension-item-installed-invalid .extension-title, .extension-item-remote-installed-invalid .extension-title, -.dependency-item.extension-item-installed, .dependency-item.extension-item-remote-installed, -.dependency-item.extension-item-installed-invalid, .dependency-item.extension-item-remote-installed-invalid, -.dependency-item.extension-item-installed-dependency, .dependency-item.extension-item-remote-installed-dependency, -.dependency-item.extension-item-remote-installed-incompatible { - background-image: url("$xwiki.getSkinFile('icons/silk/plugin.png')"); -} -.extension-item-remote .extension-title, .dependency-item.extension-item-remote { - background-image: url("$xwiki.getSkinFile('icons/silk/world.png')"); -} -.extension-item-loading .extension-title, .dependency-item.extension-item-loading { - background-image: url("$xwiki.getSkinFile('icons/xwiki/spinner.gif')"); -} -.dependency-item.extension-item-unknown { - background-image: url("$xwiki.getSkinFile('icons/silk/plugin_error.png')"); -} .extension-item-core, .extension-item-installed-dependency { diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js index e234fd9e8816..244b4cd1cb88 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js @@ -495,6 +495,12 @@ XWiki.ExtensionBehaviour = Class.create({ parameters : formData, onCreate : function() { dependency.removeClassName('extension-item-unknown').addClassName('extension-item-loading'); + // Remove the unknown icon. + dependency.removeChild(dependency.childNodes[1]); + // Add the load icon + let loadPath = '$xwiki.getSkinFile("icons/xwiki/spinner.gif")'; + let loadIcon = ''; + dependency.update(loadIcon + dependency.innerHTML); }, onSuccess : function(response) { // Update the dependency if it's still attached to the document. From 69424e0eb80e25fcb27079d1626ed21b2e14323e Mon Sep 17 00:00:00 2001 From: LucasC Date: Tue, 17 Dec 2024 17:49:22 +0100 Subject: [PATCH 2/2] XWIKI-14342: Make Extension Manager use IconThemes * Improve code quality Co-authored-by: Manuel Leduc --- .../main/webapp/resources/uicomponents/extension/extension.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js index 244b4cd1cb88..44a4e4da3f1f 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js @@ -498,8 +498,8 @@ XWiki.ExtensionBehaviour = Class.create({ // Remove the unknown icon. dependency.removeChild(dependency.childNodes[1]); // Add the load icon - let loadPath = '$xwiki.getSkinFile("icons/xwiki/spinner.gif")'; - let loadIcon = ''; + const loadPath = '$xwiki.getSkinFile("icons/xwiki/spinner.gif")'; + const loadIcon = ''; dependency.update(loadIcon + dependency.innerHTML); }, onSuccess : function(response) {