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.
xwiki · Jan 25, 2024 · b316699 · b316699
1 parent 22047df
commit b316699
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 26 deletions.
diff --git a/...xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/extension.vm b/...xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/extension.vm
@@ -576,6 +576,14 @@ $namespace##
   </dd>
 #end
 
+#macro (spinner)
+  #if ($services.icon.currentIconSetName == 'Font Awesome')
+    <span class="fa fa-spinner fa-spin"></span>
+  #else
+    <img src="$escapetool.xml($xwiki.getSkinFile('icons/xwiki/spinner.gif'))"/>
+  #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 = "<a href=""$dependencyURL"" class=""extension-link"">#displayExtensionName($dependencyExtension)</a>")
   #end
   <div class="dependency-item extension-item-$dependencyStatus">
+    #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
     <span class="extension-name">${dependencyName}</span><span class="extension-version">$!dependencyVersion</span>
     #if ($extensionNamespace.startsWith('wiki:'))
       <span class="extension-namespace">$services.localization.render('extensions.info.dependency.wiki', ["#wikiHomePageLink($extensionNamespace)"])</span>
@@ -1038,6 +1069,24 @@ $namespace##
     </div>
     <div class="extension-header">
       <h2 class="extension-title">
+        #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
         <span class="extension-name">#displayExtensionName($extension)</span>
         <span class="extension-version">$escapetool.xml($extension.id.version)</span>
         #if ($extensionStatusMessage)

diff --git a/...web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.css b/...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/...-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/extension/extension.js b/...-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 = '<img  src="'+ loadPath + '" alt=""/>';
+        dependency.update(loadIcon + dependency.innerHTML);
       },
       onSuccess : function(response) {
         // Update the dependency if it's still attached to the document.