Skip to content

Refine Scriptler run/edit form styling for modern Jenkins themes #186

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.

Sign up for GitHub

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

Open
BobDu wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Refine Scriptler run/edit form styling for modern Jenkins themes #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3af4098
Refine Scriptler run/edit form styling for modern Jenkins themes
BobDu Mar 3, 2026
9193c55
Normalize Jelly formatting and add EditorConfig
BobDu Mar 5, 2026
2813061
Move presentational table attributes to CSS
BobDu Mar 5, 2026
d4ee44b
Deduplicate build-step usage icon wrapper in index view
BobDu Mar 5, 2026
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
9 changes: 9 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true

[*.jelly]
indent_style = tab
18 changes: 10 additions & 8 deletions src/main/resources/org/jenkinsci/plugins/scriptler/ScriptlerManagement/catalog.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@
</j:forEach>
</l:tabBar>
<div class="excerpt">
<table class="pane">
<table class="jenkins-table scriptler-catalog-table">
<tbody>
<j:forEach var="t" items="${it.getCatalogByName(catalogName).entries}">
<tr valign="center" style="border-top: 0px;">
<td class="pane" width="20">
<tr>
<td class="scriptler-catalog-import">
<form method="post" action="downloadScript" class="scriptler-inline">
<input type="hidden" name="id" value="${t.id}" />
<input type="hidden" name="catalog" value="${catalogName}" />
Expand All @@ -56,33 +57,34 @@
</button>
</form>
</td>
<td class="pane-header">
<td class="scriptler-catalog-name">
${t.name} <j:if test="${!empty(c.info.scriptDetailUrl)}"> (<a target="_blank" href="${c.info.getReplacedDetailUrl(t.name, t.id)}">details</a>)</j:if>
</td>
<td class="pane-header">
<td class="scriptler-catalog-authors">
by:
<j:forEach var="a" items="${t.authors}">
${a.name}
</j:forEach>
</td>
</tr>
<tr>
<td colspan="2">
<td colspan="2" class="scriptler-catalog-meta">
required core: ${t.core}
</td>
<td rowspan="2" valign="top">
<td rowspan="2" class="scriptler-catalog-params">
<b>Parameters:</b><br />
<j:forEach var="p" items="${t.parameters}">
${p}<br />
</j:forEach>
</td>
</tr>
<tr>
<td colspan="2" style="white-space: normal;">
<td colspan="2" class="scriptler-catalog-comment">
<j:out value="${it.markupFormatter.translate(t.comment)}" />
</td>
</tr>
</j:forEach>
</tbody>
</table>
</div>
</l:main-panel>
Expand Down
22 changes: 14 additions & 8 deletions src/main/resources/org/jenkinsci/plugins/scriptler/ScriptlerManagement/edit.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,15 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"
xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:p="/lib/scriptler">

<l:layout title="Scriptler - ${%title}" permission="${it.scriptlerConfigure}" norefresh="true">
<st:once>
<link rel="stylesheet" href="${resURL}/plugin/scriptler/scriptler.css" />
</st:once>
<st:include page="sidepanel.jelly" />
<l:main-panel>
<h1>${%title}</h1>
<f:form name="scriptAdd" method="post" action="scriptAdd">
<f:form name="scriptAdd" method="post" action="scriptAdd" class="scriptler-edit-form">
<f:entry title="${%Id}" description="${%IdDescription}">
<f:textbox name="id" value="${script.id}" />
</f:entry>
Expand All @@ -49,13 +52,16 @@ THE SOFTWARE.
<f:checkbox name="onlyBuiltIn" checked="${script.onlyBuiltIn}" />
</f:entry>
<f:block>
<div>
<div class="scriptler-edit-params">
<f:optionalBlock name="defineParams" title="${%ParametersDescription}" checked="${!empty(script.parameters)}">
<f:entry title="${%Parameters}" field="parameters">
<j:set var="deleteText" value="${%DeleteParameter}" />
<f:repeatable var="param" items="${script.parameters}" name="parameters" add="${%AddParameter}"
minimum="1">
<div class="show-if-not-only">
<f:repeatableDeleteButton value="${%DeleteParameter}"/>
<button class="repeatable-delete danger" type="button" title="${deleteText}" aria-label="${deleteText}">
<l:icon src="symbol-close" />
</button>
</div>
<f:entry title="${%ParameterName}">
<f:textbox name="name" value="${param.name}"/>
Expand All @@ -67,7 +73,7 @@ THE SOFTWARE.
</f:entry>
</f:optionalBlock>
</div>
</f:block>
</f:block>
<f:entry title="${%Script}">
<textarea id="script" name="script" class="script">
<j:choose>
Expand All @@ -90,14 +96,14 @@ THE SOFTWARE.
<j:otherwise>
<div class="warning">${%NotApprovedYet}</div>
</j:otherwise>
</j:choose>
</j:choose>
<br />
</j:if>
<f:submit value="${%Save}" />
</f:block>
</f:form>
</l:main-panel>
</l:layout>
<st:adjunct includes="org.kohsuke.stapler.codemirror.mode.clike.clike"/>
<st:adjunct includes="org.kohsuke.stapler.codemirror.theme.default"/>
<st:adjunct includes="org.kohsuke.stapler.codemirror.mode.clike.clike" />
<st:adjunct includes="org.kohsuke.stapler.codemirror.theme.default" />
</j:jelly>
131 changes: 64 additions & 67 deletions src/main/resources/org/jenkinsci/plugins/scriptler/ScriptlerManagement/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,75 +32,72 @@
${%noScriptsAvailable}
</h3>
</j:if>
<table class="pane">
<j:set var="items" value="${it.configuration.sortedScripts}" />
<j:forEach var="i" items="${items}">
<j:set var="approved" value="${i.approved}" />
<j:set var="t" value="${i.script}" />
<tr valign="center" style="border-top: 0px;">
<td class="pane scriptler-toolbar" width="1%">
<j:choose>
<j:when test="${approved == null}">
<l:icon tooltip="${%fileNotAvailable}" src="symbol-remove-circle plugin-ionicons-api" class="icon-sm jenkins-!-error-color" />
</j:when>
<j:when test="${approved == true}">
<l:icon tooltip="${%scriptApproved}" src="symbol-checkmark-circle plugin-ionicons-api" class="icon-sm jenkins-!-success-color" />
</j:when>
<j:otherwise>
<l:icon tooltip="${%scriptNotYetApproved}" src="symbol-warning plugin-ionicons-api" class="icon-sm jenkins-!-warning-color"/>
</j:otherwise>
</j:choose>
<j:choose>
<j:when test="${t.nonAdministerUsing}">
<a class="scriptler-icon-slot">
<l:icon tooltip="${%usableInBuildStep}" src="symbol-construct-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
<table class="jenkins-table scriptler-list-table">
<tbody>
<j:set var="items" value="${it.configuration.sortedScripts}" />
<j:forEach var="i" items="${items}">
<j:set var="approved" value="${i.approved}" />
<j:set var="t" value="${i.script}" />
<tr>
<td class="scriptler-toolbar">
<j:choose>
<j:when test="${approved == null}">
<l:icon tooltip="${%fileNotAvailable}" src="symbol-remove-circle plugin-ionicons-api" class="icon-sm jenkins-!-error-color" />
</j:when>
<j:when test="${approved == true}">
<l:icon tooltip="${%scriptApproved}" src="symbol-checkmark-circle plugin-ionicons-api" class="icon-sm jenkins-!-success-color" />
</j:when>
<j:otherwise>
<l:icon tooltip="${%scriptNotYetApproved}" src="symbol-warning plugin-ionicons-api" class="icon-sm jenkins-!-warning-color"/>
</j:otherwise>
</j:choose>
<span class="scriptler-icon-slot">
<j:choose>
<j:when test="${t.nonAdministerUsing}">
<l:icon tooltip="${%usableInBuildStep}" src="symbol-construct-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</j:when>
<j:otherwise>
<l:icon tooltip="${%notUsableInBuildStep}" src="symbol-lock-closed-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</j:otherwise>
</j:choose>
</span>
<l:hasPermission permission="${it.scriptlerRunScripts}">
<a href="runScript?id=${t.id}" class="scriptler-icon-slot">
<l:icon tooltip="${%runScript} ${t.name}" src="symbol-terminal-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</a>
</j:when>
<j:otherwise>
<a class="scriptler-icon-slot">
<l:icon tooltip="${%notUsableInBuildStep}" src="symbol-lock-closed-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</l:hasPermission>
<l:hasPermission permission="${it.scriptlerConfigure}">
<a href="editScript?id=${t.id}" class="scriptler-link-button scriptler-icon-slot">
<l:icon tooltip="${%editScript} ${t.name}" src="symbol-create-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</a>
</j:otherwise>
</j:choose>
<l:hasPermission permission="${it.scriptlerRunScripts}">
<a href="runScript?id=${t.id}" class="scriptler-icon-slot">
<l:icon tooltip="${%runScript} ${t.name}" src="symbol-terminal-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</a>
</l:hasPermission>
<l:hasPermission permission="${it.scriptlerConfigure}">
<a href="editScript?id=${t.id}" class="scriptler-link-button scriptler-icon-slot">
<l:icon tooltip="${%editScript} ${t.name}" src="symbol-create-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</a>
<st:adjunct includes="org.jenkinsci.plugins.scriptler.ScriptlerManagement.confirm-remove" />
<form method="post" action="removeScript" class="scriptler-inline scriptler-icon-slot scriptler-remove-script-form" data-name="${t.name}">
<input type="hidden" name="id" value="${t.id}" />
<button type="submit" name="submit_param" value="submit_value" class="scriptler-link-button">
<l:icon tooltip="${%removeScript} ${t.name}" src="symbol-trash-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</button>
</form>
</l:hasPermission>
</td>
<td class="pane-header">
${t.name}
</td>
<td class="pane-header">
<j:if test="${!empty(t.originScript)}">
Origin info:
<a target="_blank" href="${it.getCatalogInfoByName(t.originCatalog).getReplacedDetailUrl(t.id, t.originScript)}">
${t.originScript}
</a>
, import date:
${t.originDate}
</j:if>
</td>
</tr>
<tr valign="left">
<td class="pane" />
<td colspan="5" style="white-space: normal;">
<j:out value="${it.markupFormatter.translate(empty(t.comment) ? '-' : t.comment)}" />
</td>
</tr>
</j:forEach>
<st:adjunct includes="org.jenkinsci.plugins.scriptler.ScriptlerManagement.confirm-remove" />
<form method="post" action="removeScript" class="scriptler-inline scriptler-icon-slot scriptler-remove-script-form" data-name="${t.name}">
<input type="hidden" name="id" value="${t.id}" />
<button type="submit" name="submit_param" value="submit_value" class="scriptler-link-button">
<l:icon tooltip="${%removeScript} ${t.name}" src="symbol-trash-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
</button>
</form>
</l:hasPermission>
</td>
<td>
<div class="scriptler-script-name">${t.name}</div>
<div class="scriptler-script-comment">
<j:out value="${it.markupFormatter.translate(empty(t.comment) ? '-' : t.comment)}" />
</div>
</td>
<td class="scriptler-origin-cell">
<j:if test="${!empty(t.originScript)}">
Origin info:
<a target="_blank" href="${it.getCatalogInfoByName(t.originCatalog).getReplacedDetailUrl(t.id, t.originScript)}">
${t.originScript}
</a>
, import date:
${t.originDate}
</j:if>
</td>
</tr>
</j:forEach>
</tbody>
</table>
</div>
</l:main-panel>
Expand Down
107 changes: 50 additions & 57 deletions src/main/resources/org/jenkinsci/plugins/scriptler/ScriptlerManagement/runScript.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ THE SOFTWARE.
xmlns:p="/lib/hudson/scriptler">

<l:layout title="Scriptler - ${%title}" permission="${it.scriptlerRunScripts}" norefresh="true">
<st:once>
<link rel="stylesheet" href="${resURL}/plugin/scriptler/scriptler.css" />
</st:once>
<st:include page="sidepanel.jelly" />

<l:main-panel>
Expand All @@ -49,65 +52,55 @@ THE SOFTWARE.
<j:out value="${it.markupFormatter.translate(script.comment)}" />
</p>

<form action="triggerScript" method="post" name="triggerscript">
<form action="triggerScript" method="post" name="triggerscript" class="scriptler-run-form">
<input type="hidden" value="${script.id}" name="id" />
<table class="pane">
<tr>
<td colspan="3">
<p>
${%executiononclient}
</p>
</td>
</tr>
<tr>
<td>
<j:set var="currentNode" value="${currentNode}" />
<f:entry name="node" title="${%SelectionNode}">
<select name="node">
<j:forEach var="aNode" items="${it.getSlaveAlias(script)}" varStatus="loop">
<j:choose>
<j:when test="${currentNode==aNode}">
<option value="${aNode}" selected="selected">${aNode}</option>
</j:when>
<j:otherwise>
<option value="${aNode}">${aNode}</option>
</j:otherwise>
</j:choose>
</j:forEach>
</select>
</f:entry>
</td>
</tr>
<tr>
<td>
<f:optionalBlock name="defineParams" title="${%ParametersDescription}" checked="${!empty(script.parameters)}">
<f:entry title="${%Parameters}" field="parameters">
<f:repeatable var="param" items="${script.parameters}" name="parameters" noAddButton="true" minimum="1">
<table width="100%">
<f:entry>
${%ParameterName}
<input type="text" name="name" value="${param.name}" size="50" />
${%ParameterValue}
<input type="text" name="value" value="${param.value}" size="80" />
</f:entry>
</table>
</f:repeatable>
</f:entry>
</f:optionalBlock>
</td>
</tr>
</table>
<p class="scriptler-runscript-hint">
${%executiononclient}
</p>
<j:set var="currentNode" value="${currentNode}" />
<f:entry name="node" title="${%SelectionNode}">
<div class="jenkins-select scriptler-node-select">
<select name="node" class="jenkins-select__input">
<j:forEach var="aNode" items="${it.getSlaveAlias(script)}" varStatus="loop">
<j:choose>
<j:when test="${currentNode==aNode}">
<option value="${aNode}" selected="selected">${aNode}</option>
</j:when>
<j:otherwise>
<option value="${aNode}">${aNode}</option>
</j:otherwise>
</j:choose>
</j:forEach>
</select>
</div>
</f:entry>
<f:optionalBlock name="defineParams" title="${%ParametersDescription}" checked="${!empty(script.parameters)}">
<f:entry title="${%Parameters}" field="parameters">
<div class="scriptler-param-list">
<f:repeatable var="param" items="${script.parameters}" name="parameters" noAddButton="true" minimum="1">
<div class="scriptler-param-row">
<span class="scriptler-param-label">${%ParameterName}</span>
<input type="text" name="name" value="${param.name}" class="jenkins-input scriptler-param-input" />
<span class="scriptler-param-label">${%ParameterValue}</span>
<input type="text" name="value" value="${param.value}" class="jenkins-input scriptler-param-input" />
</div>
</f:repeatable>
</div>
</f:entry>
</f:optionalBlock>

<textarea id="script" autofocus="" name="script" class="${h.isUnitTest ? '' : 'script'}">
<j:choose>
<j:when test="${scriptNotFound}">
${%ScriptNotFound}
</j:when>
<j:otherwise>
${script.script}
</j:otherwise>
</j:choose>
</textarea>
<f:entry title="${%Script}">
<textarea id="script" autofocus="" name="script" class="${h.isUnitTest ? '' : 'script'}">
<j:choose>
<j:when test="${scriptNotFound}">
${%ScriptNotFound}
</j:when>
<j:otherwise>
${script.script}
</j:otherwise>
</j:choose>
</textarea>
</f:entry>
<j:if test="${notApprovedYet}">
<j:choose>
<j:when test="${h.hasPermission(it, app.RUN_SCRIPTS)}">
Expand Down
1 change: 1 addition & 0 deletions src/main/resources/org/jenkinsci/plugins/scriptler/ScriptlerManagement/runScript.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ ParameterName=Name:
ParameterValue=Value:
Run=Run
Result=Result
Script=Script
ScriptNotFound=// Script source file was not found
NotApprovedYet=Script not yet approved, consider asking your administrator to approve it.
NotApprovedYetButHasRightWarn=Script not yet approved
Expand Down
Loading
Loading