Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace old GIFs with symbols #208

Merged
merged 3 commits into from
Nov 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@
</dependencyManagement>

<dependencies>
<dependency>
<groupId>io.jenkins.plugins</groupId>
<artifactId>emoji-symbols-api</artifactId>
</dependency>
<dependency>
<groupId>io.jenkins.plugins</groupId>
<artifactId>ionicons-api</artifactId>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
package com.jenkinsci.plugins.badge.action;

import edu.umd.cs.findbugs.annotations.NonNull;
import hudson.PluginWrapper;
import hudson.model.Action;
import java.io.File;
import io.jenkins.plugins.emoji.symbols.Emojis;
import io.jenkins.plugins.ionicons.Ionicons;
import java.io.IOException;
import java.io.Serial;
import java.io.Serializable;
Expand Down Expand Up @@ -95,13 +95,24 @@ public String getIcon() {
return icon;
}

// try plugin images dir, fallback to Jenkins images dir
PluginWrapper wrapper = Jenkins.get().getPluginManager().getPlugin("badge");
boolean pluginIconExists =
(wrapper != null) && new File(wrapper.baseResourceURL.getPath() + "/images/" + icon).exists();
return pluginIconExists
? "/plugin/" + wrapper.getShortName() + "/images/" + icon
: Jenkins.RESOURCE_PATH + "/images/16x16/" + icon;
// backwards compatible replacement for old GIFs
return switch (icon) {
case "completed.gif" -> "symbol-status-blue";
case "db_in.gif" -> Ionicons.getIconClassName("cloud-upload-outline");
case "db_out.gif" -> Ionicons.getIconClassName("cloud-download-outline");
case "delete.gif" -> "symbol-trash";
case "error.gif" -> "symbol-status-red";
case "folder.gif" -> "symbol-folder";
case "green.gif" -> Emojis.getIconClassName("green_square");
case "info.gif" -> "symbol-information-circle";
case "red.gif" -> Emojis.getIconClassName("red_square");
case "save.gif" -> Ionicons.getIconClassName("save-outline");
case "success.gif" -> "symbol-status-blue";
case "text.gif" -> "symbol-document-text";
case "warning.gif" -> "symbol-status-yellow";
case "yellow.gif" -> Emojis.getIconClassName("yellow_square");
default -> Jenkins.RESOURCE_PATH + "/images/16x16/" + icon;
};
}

@Whitelisted
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<div>
<p>
The plugin supports symbols from the <a href="https://ionic.io/ionicons">ionicons library</a> through the <a href="https://plugins.jenkins.io/ionicons-api/">ionicons-api-plugin</a>.
More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api">font-awesome-api-plugin</a> or <a href="https://plugins.jenkins.io/custom-folder-icon">custom-folder-icon-plugin</a>.
The plugin supports symbols from the <a href="https://plugins.jenkins.io/ionicons-api/">Ionicons API</a> as well as the <a href="https://plugins.jenkins.io/emoji-symbols-api/">Emoji Symbols API</a>.
More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api/">Font Awesome API</a> or <a href="https://plugins.jenkins.io/oss-symbols-api/">IT Symbols API</a>.
Symbols from plugins are referenced as "symbol-<i>icon-name</i> plugin-<i>plugin-name</i>" and Jenkins Core icons as "icon-<i>icon-name</i>" or "symbol-<i>icon-name</i>" - see <a href="https://weekly.ci.jenkins.io/design-library">Jenkins Design Library</a> for more details.
For example, the following are all valid references to symbols:
<ul>
<li><code>addBadge icon: 'symbol-alert-circle-outline plugin-ionicons-api', text: 'This is an alert symbol'</code></li>
<li><code>addBadge icon: 'symbol-bar-chart-filled plugin-ionicons-api', text: 'This is a bar chart symbol'</code></li>
<li><code>addBadge icon: 'symbol-battery-half-sharp plugin-ionicons-api', text: 'This is a half filled battery symbol'</code></li>
<li><code>addBadge icon: 'symbol-sloth plugin-emoji-symbols-api', text: 'This is a sloth symbol'</code></li>
<li><code>addBadge icon: 'symbol-cube', text: 'This is a Jenkins Core symbol'</code></li>
<li><code>addBadge icon: 'icon-gear', text: 'This is a Jenkins Core icon'</code></li>
</ul>
Expand All @@ -23,13 +23,13 @@
</p>

<p>
The plugin includes icons as GIF images and also supports the <a href="https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16">16x16 icons</a> that are offered by Jenkins.
The plugin also supports the <a href="https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16">16x16 icons</a> that are offered by Jenkins.
These icons are listed in the <a href="https://plugins.jenkins.io/badge/#plugin-content-icons">plugin documentation</a> and are referenced as "<i>image-name</i>.gif".
For example, the following are all valid references to icons included with the plugin:
<ul>
<li><code>addBadge icon: 'completed.gif', text: 'This is a completed symbol'</code></li>
<li><code>addBadge icon: 'success.gif', text: 'This is a success icon'</code></li>
<li><code>addBadge icon: 'warning.gif', text: 'This is a warning icon'</code></li>
<li><code>addBadge icon: 'aborted.gif', text: 'This is a aborted symbol'</code></li>
<li><code>addBadge icon: 'folder-open.gif', text: 'This is a folder icon'</code></li>
<li><code>addBadge icon: 'document_edit.gif', text: 'This is a document icon'</code></li>
</ul>
</p>
</div>
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<div>
<p>
The plugin supports symbols from the <a href="https://ionic.io/ionicons">ionicons library</a> through the <a href="https://plugins.jenkins.io/ionicons-api/">ionicons-api-plugin</a>.
More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api">font-awesome-api-plugin</a> or <a href="https://plugins.jenkins.io/custom-folder-icon">custom-folder-icon-plugin</a>.
The plugin supports symbols from the <a href="https://plugins.jenkins.io/ionicons-api/">Ionicons API</a> as well as the <a href="https://plugins.jenkins.io/emoji-symbols-api/">Emoji Symbols API</a>.
More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api/">Font Awesome API</a> or <a href="https://plugins.jenkins.io/oss-symbols-api/">IT Symbols API</a>.
Symbols from plugins are referenced as "symbol-<i>icon-name</i> plugin-<i>plugin-name</i>" and Jenkins Core icons as "icon-<i>icon-name</i>" or "symbol-<i>icon-name</i>" - see <a href="https://weekly.ci.jenkins.io/design-library">Jenkins Design Library</a> for more details.
For example, the following are all valid references to symbols:
<ul>
<li><code>addSummary icon: 'symbol-alert-circle-outline plugin-ionicons-api', text: 'This is an alert symbol'</code></li>
<li><code>addSummary icon: 'symbol-bar-chart-filled plugin-ionicons-api', text: 'This is a bar chart symbol'</code></li>
<li><code>addSummary icon: 'symbol-battery-half-sharp plugin-ionicons-api', text: 'This is a half filled battery symbol'</code></li>
<li><code>addSummary icon: 'symbol-sloth plugin-emoji-symbols-api', text: 'This is a sloth symbol'</code></li>
<li><code>addSummary icon: 'symbol-cube', text: 'This is a Jenkins Core symbol'</code></li>
<li><code>addSummary icon: 'icon-gear', text: 'This is a Jenkins Core icon'</code></li>
</ul>
Expand All @@ -25,11 +25,11 @@
<p>
The plugin includes icons as GIF images and also supports the <a href="https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16">16x16 icons</a> that are offered by Jenkins.
These icons are listed in the <a href="https://plugins.jenkins.io/badge/#plugin-content-icons">plugin documentation</a> and are referenced as "<i>image-name</i>.gif".
For example, the following are all valid references to icons included with the plugin:
For example, the following are all valid references to icons that can be used with the plugin:
<ul>
<li><code>addSummary icon: 'completed.gif', text: 'This is a completed symbol'</code></li>
<li><code>addSummary icon: 'success.gif', text: 'This is a success icon'</code></li>
<li><code>addSummary icon: 'warning.gif', text: 'This is a warning icon'</code></li>
<li><code>addSummary icon: 'aborted.gif', text: 'This is a aborted symbol'</code></li>
<li><code>addSummary icon: 'folder-open.gif', text: 'This is a folder icon'</code></li>
<li><code>addSummary icon: 'document_edit.gif', text: 'This is a document icon'</code></li>
</ul>
</p>
</div>
Binary file removed src/main/webapp/images/completed.gif
Binary file not shown.
Binary file removed src/main/webapp/images/db_in.gif
Binary file not shown.
Binary file removed src/main/webapp/images/db_out.gif
Binary file not shown.
Binary file removed src/main/webapp/images/delete.gif
Binary file not shown.
Binary file removed src/main/webapp/images/error.gif
Binary file not shown.
Binary file removed src/main/webapp/images/folder.gif
Binary file not shown.
Binary file removed src/main/webapp/images/green.gif
Binary file not shown.
Binary file removed src/main/webapp/images/info.gif
Binary file not shown.
Binary file removed src/main/webapp/images/red.gif
Binary file not shown.
Binary file removed src/main/webapp/images/save.gif
Binary file not shown.
Binary file removed src/main/webapp/images/success.gif
Binary file not shown.
Binary file removed src/main/webapp/images/text.gif
Binary file not shown.
Binary file removed src/main/webapp/images/warning.gif
Binary file not shown.
Binary file removed src/main/webapp/images/yellow.gif
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@
import hudson.markup.EscapedMarkupFormatter;
import hudson.markup.MarkupFormatter;
import hudson.markup.RawHtmlMarkupFormatter;
import io.jenkins.plugins.emoji.symbols.Emojis;
import io.jenkins.plugins.ionicons.Ionicons;
import java.io.IOException;
import java.io.Writer;
import jenkins.model.Jenkins;
Expand Down Expand Up @@ -81,14 +83,34 @@ void icon(@SuppressWarnings("unused") JenkinsRule r) {
action.setIcon("https://host.domain/icon.png");
assertEquals("https://host.domain/icon.png", action.getIcon());

action.setIcon("completed.gif");
assertEquals("symbol-status-blue", action.getIcon());
action.setIcon("db_in.gif");
assertEquals(Ionicons.getIconClassName("cloud-upload-outline"), action.getIcon());
action.setIcon("db_out.gif");
assertEquals(Ionicons.getIconClassName("cloud-download-outline"), action.getIcon());
action.setIcon("delete.gif");
assertEquals("symbol-trash", action.getIcon());
action.setIcon("error.gif");
assertEquals("symbol-status-red", action.getIcon());
action.setIcon("folder.gif");
assertEquals("symbol-folder", action.getIcon());
action.setIcon("green.gif");
assertEquals(Emojis.getIconClassName("green_square"), action.getIcon());
action.setIcon("info.gif");

// work around some odd behavior in local tests
if (Jenkins.get().getPluginManager().getPlugin("badge") != null) {
assertEquals("/plugin/badge/images/info.gif", action.getIcon());
} else {
assertEquals(Jenkins.RESOURCE_PATH + "/images/16x16/info.gif", action.getIcon());
}
assertEquals("symbol-information-circle", action.getIcon());
action.setIcon("red.gif");
assertEquals(Emojis.getIconClassName("red_square"), action.getIcon());
action.setIcon("save.gif");
assertEquals(Ionicons.getIconClassName("save-outline"), action.getIcon());
action.setIcon("success.gif");
assertEquals("symbol-status-blue", action.getIcon());
action.setIcon("text.gif");
assertEquals("symbol-document-text", action.getIcon());
action.setIcon("warning.gif");
assertEquals("symbol-status-yellow", action.getIcon());
action.setIcon("yellow.gif");
assertEquals(Emojis.getIconClassName("yellow_square"), action.getIcon());

action.setIcon("blue.gif");
assertEquals(Jenkins.RESOURCE_PATH + "/images/16x16/blue.gif", action.getIcon());
Expand Down