-
Notifications
You must be signed in to change notification settings - Fork 86
Expand file tree
/
Copy pathindex.jelly
More file actions
153 lines (149 loc) · 6.09 KB
/
index.jelly
File metadata and controls
153 lines (149 loc) · 6.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:l="/lib/layout" xmlns:f="/lib/form">
<s:layout>
<s:section hideBorder="true">
<s:group>
<s:preview>
<dialog class="jenkins-dialog" style="max-width: 475px; min-width: min(550px, 100vw);">
<div class="jenkins-dialog__title">
<span>Create User</span>
<button class="jenkins-dialog__title__button jenkins-dialog__title__close-button jenkins-button">
<span class="jenkins-visually-hidden">Close</span>
<l:icon src="symbol-close" />
</button>
</div>
<div class="jenkins-dialog__contents jenkins-dialog__contents--modal">
<form method="post">
<f:entry title="Username">
<f:textbox />
</f:entry>
<f:entry title="Email">
<f:textbox />
</f:entry>
<f:entry title="Password">
<f:password />
</f:entry>
<f:bottomButtonBar borderless="true">
<button class="jenkins-button jenkins-submit-button jenkins-button--primary">
Create
</button>
</f:bottomButtonBar>
</form>
</div>
</dialog>
</s:preview>
<s:code-panes>
<s:code-pane title="modalDialog.jelly">
<s:code file="modal.jelly">
<button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color"
data-type="dialog-opener"
data-dialog-url="modal"
tooltip="${%Execute code}">
<l:icon src="symbol-play" />
</button>
</s:code>
</s:code-pane>
<s:code-pane title="index.jelly">
<s:code file="button.jelly"/>
</s:code-pane>
</s:code-panes>
</s:group>
<p class="jdl-paragraph">${%modals}</p>
</s:section>
<s:section title="${%Alerts}">
<s:group>
<s:preview>
<dialog class="jenkins-dialog">
<div class="jenkins-dialog__title">Example alert</div>
<div class="jenkins-dialog__contents">
<div class="jenkins-form-item jenkins-!-text-color-secondary">I'm an example of an error alert.</div>
<f:bottomButtonBar borderless="true">
<button data-id="ok" type="button"
class="jenkins-button jenkins-button--primary jenkins-!-destructive-color">OK
</button>
</f:bottomButtonBar>
</div>
</dialog>
</s:preview>
<s:code language="java" file="alert.js" callback="showAlert"/>
</s:group>
<p class="jdl-paragraph">${%alerts}</p>
</s:section>
<s:section title="${%Confirmations}">
<s:group>
<s:preview>
<dialog class="jenkins-dialog" open="" style="max-width: 475px; min-width: 450px;">
<div class="jenkins-dialog__title">Do it</div>
<div class="jenkins-dialog__contents">
<div class="jenkins-form-item jenkins-!-text-color-secondary">Are you sure?</div>
<f:bottomButtonBar borderless="true">
<button data-id="cancel" class="jenkins-button">No</button>
<button data-id="ok" type="button" class="jenkins-button jenkins-button--primary">Yes</button>
</f:bottomButtonBar>
</div>
</dialog>
</s:preview>
<s:code language="java" file="confirm.js" code="showConfirm()" callback="showConfirm"/>
</s:group>
<p class="jdl-paragraph">${%confirmations}</p>
</s:section>
<s:section title="${%Customizing the appearance and behaviour}">
<div class="jdl-paragraph">All dialogs take a second optional parameter with options that allow to change certain
aspects.
</div>
<ul class="jdl-list">
<li><code>message</code>: Adds a message to the dialog
</li>
<li><code>okText</code>: Adjust the text of the OK button, the default depends on the type of dialog
</li>
<li><code>cancelText</code>: Adjust the text of the Cancel button, defaults to
<code>Cancel</code>
</li>
<li><code>type</code>: Change the color of the <code>OK</code> button. Allowed values:
<code>destructive</code>
</li>
<li><code>minWidth</code>: Set the minimum width of the dialog, the default depends on the type of dialog
</li>
<li><code>maxWidth</code>: Set the maximum width of the dialog, defaults to
<code>475px</code>
</li>
<li><code>hideCloseButton</code>: Hides the close button in modal dialogs, defaults to
<code>false</code>
</li>
<li><code>allowEmpty</code>: When set to <code>false</code> the <code>OK</code> button will be disabled in the
prompt dialog as long as the input field is empty or contains only whitespace, defaults to
<code>false</code>
</li>
<li><code>submitButton</code>: Change the behaviour of the submit button in a form dialog. When
<code>true</code>
the form will be submitted to the <code>action</code> attribute of the form. When <code>false</code>, a
<code>FormData</code>
object is passed to the <code>resolve</code> method of the <code>Promise</code>.
Defaults to
<code>true</code>
</li>
</ul>
</s:section>
<s:section title="${%OK Button texts}">
<div class="jdl-paragraph">${%buttontexts}</div>
<ul class="jdl-list">
<li><code>ok</code>: OK
</li>
<li><code>cancel</code>: Cancel
</li>
<li><code>yes</code>: Yes
</li>
<li><code>no</code>: No
</li>
<li><code>add</code>: Add
</li>
<li><code>save</code>: Save
</li>
<li><code>apply</code>: Apply
</li>
<li><code>submit</code>: Submit
</li>
</ul>
</s:section>
</s:layout>
</j:jelly>