@dualbox/editor 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/js/src/GraphEditor.js +159 -0
- package/js/src/c/GraphController.js +646 -0
- package/js/src/libs/CodeMirror.js +8 -0
- package/js/src/libs/fontawesome.js +1 -0
- package/js/src/libs/jsoneditor.css +2 -0
- package/js/src/libs/jsoneditor.js +4 -0
- package/js/src/m/DualboxUtils.js +35 -0
- package/js/src/m/GraphModel.js +2167 -0
- package/js/src/m/History.js +94 -0
- package/js/src/m/Merger.js +357 -0
- package/js/src/v/AppManager.js +61 -0
- package/js/src/v/CanvasSizeHandler.js +136 -0
- package/js/src/v/ContextMenu.css +45 -0
- package/js/src/v/ContextMenu.js +239 -0
- package/js/src/v/GraphView.js +928 -0
- package/js/src/v/PlumbStyle.js +254 -0
- package/js/src/v/Selector.js +239 -0
- package/js/src/v/TemplateManager.js +79 -0
- package/js/src/v/Translater.js +174 -0
- package/js/src/v/Utils.js +7 -0
- package/js/src/v/Zoomer.js +201 -0
- package/js/src/v/templates/addNode.css +45 -0
- package/js/src/v/templates/addNode.html +62 -0
- package/js/src/v/templates/addNode.js +34 -0
- package/js/src/v/templates/debugNodeInfos.css +5 -0
- package/js/src/v/templates/debugNodeInfos.html +336 -0
- package/js/src/v/templates/debugNodeInfos.js +31 -0
- package/js/src/v/templates/editMainSettings.css +67 -0
- package/js/src/v/templates/editMainSettings.html +265 -0
- package/js/src/v/templates/editMainSettings.js +240 -0
- package/js/src/v/templates/editNodeSettings.css +86 -0
- package/js/src/v/templates/editNodeSettings.html +539 -0
- package/js/src/v/templates/editNodeSettings.js +356 -0
- package/js/src/v/templates/graphNode.css +333 -0
- package/js/src/v/templates/graphNode.html +227 -0
- package/js/src/v/templates/graphNode.js +412 -0
- package/js/src/v/templates/main.css +353 -0
- package/js/src/v/templates/main.html +149 -0
- package/js/src/v/templates/main.js +511 -0
- package/js/src/v/templates/searchResults.css +50 -0
- package/js/src/v/templates/searchResults.html +46 -0
- package/js/src/v/templates/searchResults.js +176 -0
- package/package.json +3 -2
|
@@ -0,0 +1,353 @@
|
|
|
1
|
+
.code-panel {
|
|
2
|
+
width: 30%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
vertical-align: top;
|
|
5
|
+
float: left;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.application-container {
|
|
9
|
+
width: calc(70% - 5px);
|
|
10
|
+
height: 100%;
|
|
11
|
+
display: inline-block;
|
|
12
|
+
vertical-align: top;
|
|
13
|
+
float: right;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.code-controls, .run-options {
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 60px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.application {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: calc(100% - 60px);
|
|
24
|
+
background-color: #ccc;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dragbar {
|
|
28
|
+
height: 100%;
|
|
29
|
+
width: 5px;
|
|
30
|
+
background-color: #e7e7e7;
|
|
31
|
+
display: inline-block;
|
|
32
|
+
cursor: col-resize;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.code-content {
|
|
36
|
+
position: relative;
|
|
37
|
+
height: calc(100% - 56px);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.code-html-container {
|
|
41
|
+
position: relative;
|
|
42
|
+
height: 50%;
|
|
43
|
+
border-bottom: 1px solid #e7e7e7;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.code-css-container {
|
|
47
|
+
position: relative;
|
|
48
|
+
height: calc(50% - 1px);
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.code-css {
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100%;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.code-html {
|
|
58
|
+
height: calc(100% - 40px);
|
|
59
|
+
width: 100%;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.CodeMirror {
|
|
63
|
+
height: 100%;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.code-badge {
|
|
67
|
+
position: absolute;
|
|
68
|
+
top: 10px;
|
|
69
|
+
right: 10px;
|
|
70
|
+
padding: 10px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.btn-light.focus, .btn-light:focus {
|
|
74
|
+
box-shadow: none!important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.button-bar {
|
|
78
|
+
width: 60px;
|
|
79
|
+
padding: 10px;
|
|
80
|
+
border-bottom: 1px solid #e7e7e7;
|
|
81
|
+
width: 100%;
|
|
82
|
+
background-color: white;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.noselect {
|
|
86
|
+
-webkit-user-select: none; /* Chrome/Safari */
|
|
87
|
+
-moz-user-select: none; /* Firefox */
|
|
88
|
+
-ms-user-select: none; /* IE10+ */
|
|
89
|
+
-o-user-select: none;
|
|
90
|
+
user-select: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.btn + .btn {
|
|
94
|
+
margin-left: 5px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btn-graph-goto {
|
|
98
|
+
box-shadow: none!important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.nav-tabs {
|
|
102
|
+
border-bottom: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.main-navigation a.nav-link {
|
|
106
|
+
color: white;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.main-navigation a.nav-link.active {
|
|
110
|
+
color: #212529;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.dualbox-editor-body {
|
|
114
|
+
width: 100%;
|
|
115
|
+
height: 100%;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.dualbox-graph-left-section {
|
|
120
|
+
height: 100%;
|
|
121
|
+
width: 500px;
|
|
122
|
+
float: left;
|
|
123
|
+
position: relative;
|
|
124
|
+
overflow: hidden;
|
|
125
|
+
margin-left: -465px;
|
|
126
|
+
transition: margin-left 0.3s ease;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.dualbox-graph-left-window {
|
|
130
|
+
width: calc(100% - 35px);
|
|
131
|
+
height: calc(100% - 20px);
|
|
132
|
+
margin-top: 10px;
|
|
133
|
+
margin-bottom: 30px;
|
|
134
|
+
/* background-color: #ECF2F8; */
|
|
135
|
+
background-color: #f8f9fa;
|
|
136
|
+
border: 1px solid grey;
|
|
137
|
+
border-radius: 5px;
|
|
138
|
+
position: relative;
|
|
139
|
+
float: left;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.dualbox-graph-left-panel {
|
|
143
|
+
width: 100%;
|
|
144
|
+
height: 100%;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.btn-toggle-left-window {
|
|
148
|
+
position: absolute;
|
|
149
|
+
right: 0;
|
|
150
|
+
top: 0;
|
|
151
|
+
margin-right: -35px;
|
|
152
|
+
z-index: 100;
|
|
153
|
+
border-top-left-radius: 0px;
|
|
154
|
+
border-bottom-left-radius: 0px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.dualbox-graph-right-section {
|
|
158
|
+
height: 100%;
|
|
159
|
+
width: 500px;
|
|
160
|
+
float: right;
|
|
161
|
+
position: relative;
|
|
162
|
+
overflow: hidden;
|
|
163
|
+
margin-right: -465px;
|
|
164
|
+
transition: margin-right 0.3s ease;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.dualbox-graph-right-window {
|
|
168
|
+
width: calc(100% - 35px);
|
|
169
|
+
height: calc(100% - 20px);
|
|
170
|
+
margin-top: 10px;
|
|
171
|
+
margin-bottom: 30px;
|
|
172
|
+
/* background-color: #ECF2F8; */
|
|
173
|
+
background-color: #f8f9fa;
|
|
174
|
+
border: 1px solid grey;
|
|
175
|
+
border-radius: 5px;
|
|
176
|
+
position: relative;
|
|
177
|
+
float: right;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.dualbox-graph-right-panel {
|
|
181
|
+
width: 100%;
|
|
182
|
+
height: 100%;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.btn-toggle-right-window {
|
|
186
|
+
position: absolute;
|
|
187
|
+
left: 0;
|
|
188
|
+
top: 0;
|
|
189
|
+
margin-left: -35px;
|
|
190
|
+
z-index: 100;
|
|
191
|
+
border-top-right-radius: 0px;
|
|
192
|
+
border-bottom-right-radius: 0px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.dualbox-graph-tab {
|
|
196
|
+
height: 100%;
|
|
197
|
+
width: 100%;
|
|
198
|
+
background-color: #555!important;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.dualbox-graph-main {
|
|
202
|
+
height: 100%;
|
|
203
|
+
width: calc(100% - 70px);
|
|
204
|
+
float: right;
|
|
205
|
+
background-color: #555!important;
|
|
206
|
+
transition: width 0.3s ease;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.dualbox-graph-main.left-panel-expanded {
|
|
210
|
+
width: calc(100% - 535px);
|
|
211
|
+
margin-left: -465px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.dualbox-graph-main.right-panel-expanded {
|
|
215
|
+
width: calc(100% - 535px);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.dualbox-graph-main.left-panel-expanded.right-panel-expanded {
|
|
219
|
+
width: calc(100% - 1000px);
|
|
220
|
+
margin-left: -465px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.dualbox-graph-canvas {
|
|
224
|
+
height: 100%;
|
|
225
|
+
width: 100%;
|
|
226
|
+
background-color: #eee;
|
|
227
|
+
position: relative;
|
|
228
|
+
outline-color: transparent!important;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.opacity0 {
|
|
232
|
+
opacity: 0;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.btn-xs {
|
|
236
|
+
width: 18px;
|
|
237
|
+
padding : 3px;
|
|
238
|
+
line-height : .5;
|
|
239
|
+
border-radius : 2px;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.btn-xs > i {
|
|
243
|
+
font-size : 10px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.btn-outline-discrete {
|
|
247
|
+
border-color: rgba(0,0,0,0.05);
|
|
248
|
+
border-color: transparent;
|
|
249
|
+
color: rgba(0,0,0,0.3);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.dualbox-app-navigation {
|
|
253
|
+
background-color: transparent;
|
|
254
|
+
margin-bottom: 0;
|
|
255
|
+
vertical-align: middle;
|
|
256
|
+
padding-top: 7px;
|
|
257
|
+
padding-bottom: 7px;
|
|
258
|
+
font-weight: bold;
|
|
259
|
+
user-select: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.dualbox-graph-container {
|
|
263
|
+
padding: 0px 0px 30px 0px;
|
|
264
|
+
margin-left: -25px;
|
|
265
|
+
margin-right: -25px;
|
|
266
|
+
height: 100%;
|
|
267
|
+
width: calc(100% + 50px);
|
|
268
|
+
overflow: hidden;
|
|
269
|
+
transform: translateZ(0); /* chrome hack to avoid glitches */
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.dualbox-graph-container.translating {
|
|
273
|
+
cursor: move;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.dualbox-graph-canvas {
|
|
277
|
+
min-height: 100%;
|
|
278
|
+
min-width: 100%;
|
|
279
|
+
border-radius: 5px;
|
|
280
|
+
position: relative;
|
|
281
|
+
|
|
282
|
+
background-color: #ECF2F8;
|
|
283
|
+
border: 1px solid #2e6da4;
|
|
284
|
+
display: inline-block; /* fix padding pb: https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par */
|
|
285
|
+
margin-bottom: -7px;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.app-topbar {
|
|
289
|
+
border-bottom: none;
|
|
290
|
+
padding-left: 15px;
|
|
291
|
+
padding-right: 15px;
|
|
292
|
+
display: flex;
|
|
293
|
+
width: 100%;
|
|
294
|
+
height: 58px;
|
|
295
|
+
padding-top: 10px;
|
|
296
|
+
padding-bottom: 10px;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.dark, .graph-tab.active {
|
|
300
|
+
color: white!important;
|
|
301
|
+
background-color: #555!important;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.light {
|
|
305
|
+
color: #4d4d4d!important;
|
|
306
|
+
background-color: #f8f9fa!important;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.main-navigation .nav-link, .main-navigation .nav-link.active {
|
|
310
|
+
border-bottom: none;
|
|
311
|
+
border-left: none;
|
|
312
|
+
border-top: none;
|
|
313
|
+
border-right: none;
|
|
314
|
+
position: relative;
|
|
315
|
+
top: 1px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.btn:focus {
|
|
319
|
+
outline: none;
|
|
320
|
+
box-shadow: none;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.btn-transparent, .btn-transparent:hover, .btn-transparent:focus {
|
|
324
|
+
background-color: transparent;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.connection-control {
|
|
328
|
+
position: absolute;
|
|
329
|
+
height: 14px;
|
|
330
|
+
width: 14px;
|
|
331
|
+
background-color: transparent;
|
|
332
|
+
z-index: 19;
|
|
333
|
+
cursor: move;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.connection-control.selected {
|
|
337
|
+
border-color: #0066ff;
|
|
338
|
+
box-shadow: 1px 1px 10px #0066ff;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.connection-label {
|
|
342
|
+
z-index: 22!important;
|
|
343
|
+
color: #004d00!important;
|
|
344
|
+
background-color: white!important;
|
|
345
|
+
padding: 4px 4px;
|
|
346
|
+
border: 2px solid #004d00;
|
|
347
|
+
font-size: 16px!important;
|
|
348
|
+
border-radius: 5px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.dualbox-graph-container span {
|
|
352
|
+
pointer-events: none;
|
|
353
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
@!(attrs)
|
|
2
|
+
<div class="dualbox-editor-body">
|
|
3
|
+
<nav class="main-navigation navbar navbar-default" style="position: relative; margin-bottom: 0px; padding: 0; padding-top: 5px; background-color: #2e6da4;">
|
|
4
|
+
<ul class="nav nav-tabs">
|
|
5
|
+
<li class="nav-item">
|
|
6
|
+
<a class="nav-link active graph-tab" href="#1" data-toggle="tab">Application Graph</a>
|
|
7
|
+
</li>
|
|
8
|
+
<li class="nav-item">
|
|
9
|
+
<a class="nav-link interface-tab" href="#2" data-toggle="tab">Interface Editor</a>
|
|
10
|
+
</li>
|
|
11
|
+
</ul>
|
|
12
|
+
|
|
13
|
+
@if (attrs.showLoadSaveButtons) {
|
|
14
|
+
<div class="nav navbar-right" style="vertical-align: top; margin-top: 5px; margin-right: 10px; margin-bottom: 5px;">
|
|
15
|
+
<button class="load-app btn btn-sm btn-light" style="position: relative; bottom: 3px;">Load App</button>
|
|
16
|
+
<button class="save-app btn btn-sm btn-light" style="position: relative; bottom: 3px;">Save App</button>
|
|
17
|
+
</div>
|
|
18
|
+
}
|
|
19
|
+
</nav>
|
|
20
|
+
<div class="tab-content dualbox-graph-tab" style="width: 100%; height: calc(100% - 46px);">
|
|
21
|
+
<div class="tab-pane active" id="1" style="width: 100%; height: 100%;">
|
|
22
|
+
<div class="dualbox-graph-left-section dark">
|
|
23
|
+
<div class="dualbox-graph-left-window">
|
|
24
|
+
<button class="btn btn-light btn-toggle-left-window" title="shrink window" data-expanded="false"><i class="fa fa-angle-double-right"></i></button>
|
|
25
|
+
<div class="dualbox-graph-left-panel light"></div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="dualbox-graph-right-section dark">
|
|
29
|
+
<div class="dualbox-graph-right-window">
|
|
30
|
+
<button class="btn btn-light btn-toggle-right-window" title="shrink window" data-expanded="false"><i class="fa fa-angle-double-left"></i></button>
|
|
31
|
+
<div class="dualbox-graph-right-panel light"></div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="container-fluid dualbox-graph-main">
|
|
35
|
+
<div class="row">
|
|
36
|
+
<div class="app-topbar dark">
|
|
37
|
+
<div class="justify-content-left">
|
|
38
|
+
<div class="dropdown">
|
|
39
|
+
<button class="btn btn-primary dropdown-toggle" type="button" id="add-node-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-right: 5px;">
|
|
40
|
+
Add
|
|
41
|
+
</button>
|
|
42
|
+
<div class="dropdown-menu" aria-labelledby="add-node-dropdown">
|
|
43
|
+
<a class="dropdown-item add-box" href="#" data-toggle="modal" data-target="#add-node-modal">Add box</a>
|
|
44
|
+
<a class="dropdown-item add-metabox" href="#">Add metabox</a>
|
|
45
|
+
<a class="dropdown-item add-input" href="#">Add input</a>
|
|
46
|
+
<a class="dropdown-item add-output" href="#">Add output</a>
|
|
47
|
+
<a class="dropdown-item import-metabox" href="#">Import metabox</a>
|
|
48
|
+
</div>
|
|
49
|
+
<button class="btn btn-light btn-undo" title="undo (ctrl-z)"><i class="fa fa-undo"></i></button>
|
|
50
|
+
<button class="btn btn-light btn-redo" title="redo (ctrl-y)"><i class="fa fa-repeat fa-redo"></i></button>
|
|
51
|
+
<div class="form-check d-inline-block ml-2">
|
|
52
|
+
<label class="form-check-label">
|
|
53
|
+
<input class="form-check-input show-events" type="checkbox" value="false">
|
|
54
|
+
<span class="noselect">Show events</span>
|
|
55
|
+
</label>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="justify-content-center mx-auto">
|
|
61
|
+
<ol class="dualbox-app-navigation breadcrumb"></ol>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="justify-content-right">
|
|
65
|
+
<div class="dropdown selection-menu" style="display: none;">
|
|
66
|
+
<button class="btn btn-primary dropdown-toggle" type="button" id="selection-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
67
|
+
Selection
|
|
68
|
+
</button>
|
|
69
|
+
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="add-node-dropdown">
|
|
70
|
+
<a class="dropdown-item dualbox-merge-selection" href="#">Merge</a>
|
|
71
|
+
<a class="dropdown-item dualbox-remove-selection" href="#" style="color: red;">Delete</a>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="row" style="height: calc(100% - 58px);">
|
|
78
|
+
<div class="grid-bg dualbox-graph-container dark" tabindex=1>
|
|
79
|
+
<div id="dualbox-graph-canvas" class="canvas-wide jtk-surface jtk-surface-nopan dualbox-graph-canvas"></div>
|
|
80
|
+
<button class="btn btn-xs btn-outline-dark btn-graph-goto btn-goto-topleft" style="position: absolute; top: 0; left: 0px; border-radius: 0px; border-top-left-radius: 5px; margin: 0;"><i class="fa fa-arrows-alt"></i></button>
|
|
81
|
+
<button class="btn btn-xs btn-outline-dark btn-graph-goto btn-goto-topright" style="position: absolute; top: 0; right: 0px; border-radius: 0px; border-top-right-radius: 5px; margin: 0;"><i class="fa fa-arrows-alt"></i></button>
|
|
82
|
+
<button class="btn btn-xs btn-outline-dark btn-graph-goto btn-goto-bottomleft" style="position: absolute; bottom: 30px; left: 0px; border-radius: 0px; border-bottom-left-radius: 5px; margin: 0;"><i class="fa fa-arrows-alt"></i></button>
|
|
83
|
+
<button class="btn btn-xs btn-outline-dark btn-graph-goto btn-goto-bottomright" style="position: absolute; bottom: 30px; right: 0px; border-radius: 0px; border-bottom-right-radius: 5px; margin: 0;"><i class="fa fa-arrows-alt"></i></button>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="tab-pane" id="2" style="width 100%; height: 100%; background-color: white;">
|
|
89
|
+
<div class="main" style="width: 100%; height: 100%; overflow: hidden;">
|
|
90
|
+
<div class="code-panel">
|
|
91
|
+
<div class="button-bar form-inline code-controls" style="position: relative;">
|
|
92
|
+
<button class="btn btn-primary btn-save-interface-element">Save changes</button>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="code-content">
|
|
95
|
+
<div class="code-html-container">
|
|
96
|
+
<div style="padding-top: 5px; padding-bottom: 5px; height: 50px; position: relative;">
|
|
97
|
+
<h3 style="position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100; display: inline-block; margin-top: 5px;">HTML</h3>
|
|
98
|
+
<div class="d-inline-block ml-auto form-inline mr-2 mt-2" style="position: absolute; top: 0; right: 0;">
|
|
99
|
+
<button class="btn btn-success btn-sm btn-add-interface"><i class="fas fa-plus"></i></button>
|
|
100
|
+
<select class="form-control btn-sm app-interface-select" style="width: 150px; height: 32px;">
|
|
101
|
+
<option>Load UI...</option>
|
|
102
|
+
</select>
|
|
103
|
+
<button class="btn btn-sm btn-light btn-edit-panel-description"><i class="fas fa-info" style="padding-left: 8px; padding-right: 8px;"></i></button>
|
|
104
|
+
<button class="btn btn-danger btn-sm btn-remove-interface"><i class="fas fa-minus"></i></button>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="code-html-text-container" style="position: relative; height: calc(100% - 50px);">
|
|
108
|
+
<textarea class="code-html"></textarea>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="code-css-container">
|
|
112
|
+
<div style="height: 30px;">
|
|
113
|
+
<h3 style="position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100;">CSS</h3>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="colde-css-text-container" style="position: relative; height: calc(100% - 30px);">
|
|
116
|
+
<textarea class="code-css"></textarea>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="dragbar"></div>
|
|
122
|
+
<div class="application-container">
|
|
123
|
+
<div class="button-bar form-inline run-options" style="position: relative;">
|
|
124
|
+
<button class="btn btn-success btn-run mr-2">Run</button>
|
|
125
|
+
|
|
126
|
+
<select class="form-control run-loglevel mr-1 ml-2">
|
|
127
|
+
<option>error</option>
|
|
128
|
+
<option>warn</option>
|
|
129
|
+
<option>info</option>
|
|
130
|
+
<option>log</option>
|
|
131
|
+
<option>debug</option>
|
|
132
|
+
</select>
|
|
133
|
+
|
|
134
|
+
<input class="form-control run-noversioncheck mr-1 ml-3" type="checkbox" checked>No version checking</input>
|
|
135
|
+
<input class="form-control run-removetrycatch mr-1 ml-3" type="checkbox">Remove Try/catch</input>
|
|
136
|
+
<input class="form-control run-makesynchrone mr-1 ml-3" type="checkbox">Make Synchrone</input>
|
|
137
|
+
|
|
138
|
+
<div class="ml-auto">
|
|
139
|
+
<input class="form-control run-profiler mr-1 ml-3" type="checkbox">Profiler</input>
|
|
140
|
+
<input class="form-control run-record mr-1 ml-3" type="checkbox">Record</input>
|
|
141
|
+
<button class="btn btn-secondary btn-snapshot">Snapshot</button>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="application capture-left-click capture-right-click"></div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|