Skip to content

Commit 27b526e

Browse files
srambachsrambach
committedJan 4, 2019
Partial implementation of original object list map design
1 parent bf3f921 commit 27b526e

4 files changed

+984
-1
lines changed
 

‎CNAME

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
bapm-srambach.surge.sh
1+
bpam-frontend.surge.sh

‎DMN-CustomDataTypes.html

+450
Large diffs are not rendered by default.

‎DMN-exampleEditList

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script id="row-template" type="text/template">
2+
<div class="list-group-item list-view-pf-editable">
3+
<div class="list-view-pf-main-info">
4+
<div class="list-view-pf-left">
5+
<span class="fa fa-plane list-view-pf-icon-sm"></span>
6+
</div>
7+
<div class="list-view-pf-body">
8+
<div class="list-view-pf-description">
9+
<div class="list-group-item-text list-view-pf-value"></div>
10+
<input type="text" value="Event XXX - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
11+
</div>
12+
<div class="list-view-pf-additional-info">
13+
<div class="list-view-pf-additional-info-item">
14+
<span class="list-view-pf-value"></span>
15+
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
16+
<option>Host</option>
17+
<option>Cluster</option>
18+
<option>Node</option>
19+
<option>Image</option>
20+
</select>
21+
</div>
22+
<div class="list-view-pf-additional-info-item">
23+
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date"></span>
24+
</div>
25+
<div class="list-view-pf-additional-info-item">
26+
<span class="list-view-pf-value"></span>
27+
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="list-view-pf-actions">
33+
<button class="btn btn-default list-view-pf-edit">Edit</button>
34+
<div class="dropdown pull-right dropdown-kebab-pf">
35+
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
36+
<span class="fa fa-ellipsis-v"></span>
37+
</button>
38+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
39+
<li><a href="#">Action</a></li>
40+
<li><a href="#">Another Action</a></li>
41+
<li><a href="#">Something Else Here</a></li>
42+
<li role="separator" class="divider"></li>
43+
<li><a href="#">Separated Link</a></li>
44+
</ul>
45+
</div>
46+
47+
<button type="button" class="btn btn-link list-view-pf-save" aria-label="Save"><i class="fa fa-check"></i></button>
48+
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
49+
</div>
50+
</div>
51+
</script>

‎drools-scenario-popup.html

+482
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,482 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>jBPM Suite</title>
8+
9+
<link href="css/kie-main.css" rel="stylesheet" media="screen, print">
10+
11+
<!-- debugging tool -->
12+
<link rel="stylesheet" href="https://cdn.rawgit.com/srambach/classbxr/5456df40/css/classbxr.css">
13+
14+
<!-- jQuery -->
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
16+
17+
<!-- Bootstrap JS -->
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
19+
20+
<!-- For the graphs -->
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.1/js/patternfly.min.js"></script>
24+
25+
</head>
26+
<body>
27+
28+
<div class="kie-page">
29+
<a class="kie-skiplink" href="#kie-main-content">Skip to main content</a>
30+
31+
<!-- Masthead -->
32+
<nav class="kie-page__masthead navbar navbar-default navbar-pf " role="navigation">
33+
<div class="navbar-header ">
34+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
35+
<span class="sr-only">Toggle navigation</span>
36+
<span class="icon-bar"></span>
37+
<span class="icon-bar"></span>
38+
<span class="icon-bar"></span>
39+
</button>
40+
<a href="/" class="navbar-brand">
41+
<img class="kie-brand-icon" src="images/kie-ide.png" alt="JBoss BPM Suite"/>
42+
</a>
43+
</div>
44+
45+
<div class="collapse navbar-collapse navbar-collapse-1">
46+
47+
<ul class="nav navbar-nav navbar-iconic">
48+
<li>
49+
<a class="nav-item-iconic" href="bpm-home-rh.html" title="Home"><i class="pficon pficon-home"></i></a>
50+
</li>
51+
</ul>
52+
53+
<ul class="nav navbar-nav kie-yamm">
54+
<li class="dropdown kie-yamm--fw">
55+
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
56+
aria-expanded="true" tabindex="0">
57+
Menu
58+
<span class="caret"></span>
59+
</a>
60+
<ul class="dropdown-menu kie-yamm__dropdown-menu" aria-labelledby="dropdownMenu2">
61+
62+
<!-- mega menu sections -->
63+
<li class="kie-yamm__section col-xs-12 col-md-3">
64+
<h3 class="kie-yamm__title">Design</h3>
65+
<ul class="kie-yamm__subsection">
66+
<li><a href="#">Projects</a></li>
67+
<li><a href="#">Dashboards</a></li>
68+
</ul>
69+
</li>
70+
<li class="kie-yamm__section col-xs-12 col-md-3">
71+
<h3 class="kie-yamm__title">Configure</h3>
72+
<ul class="kie-yamm__subsection">
73+
<li><a href="#">Deployments</a></li>
74+
<li><a href="#">Execution Servers</a></li>
75+
</ul>
76+
</li>
77+
<li class="kie-yamm__section col-xs-12 col-md-3 ">
78+
<h3 class="kie-yamm__title">Manage</h3>
79+
<ul class="kie-yamm__subsection">
80+
<li><a href="#">Process Definitions</a></li>
81+
<li><a href="#">Process Instances</a></li>
82+
<li><a href="#">Jobs</a></li>
83+
</ul>
84+
</li>
85+
<li class="kie-yamm__section col-xs-12 col-md-3">
86+
<h3 class="kie-yamm__title">Track</h3>
87+
<ul class="kie-yamm__subsection">
88+
<li><a href="#">Task Lists</a></li>
89+
<li><a href="#">Task Reports</a></li>
90+
<li><a href="#">Process Reports</a></li>
91+
<li><a href="#">Business Dashboards</a></li>
92+
</ul>
93+
</li>
94+
95+
</ul>
96+
</li>
97+
</ul>
98+
99+
<ul class="nav navbar-nav navbar-right navbar-iconic">
100+
<li class="dropdown">
101+
<a href="#" class="dropdown-toggle nav-item-iconic" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true">
102+
<span title="Applications" class="fa fa-th"></span>
103+
</a>
104+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
105+
<li><a href="">Application 1</a></li>
106+
<li><a href="">Application 2</a></li>
107+
<li><a href="">Application 3</a></li>
108+
</ul>
109+
</li>
110+
<li>
111+
<a class="nav-item-iconic" href="#help" data-toggle="modal" title="Help"><i class="fa fa-question"></i></a>
112+
</li>
113+
<li>
114+
<a class="nav-item-iconic" href="settings.html" title="Settings"><i class="pficon pficon-equalizer"></i></a>
115+
</li>
116+
<li class="dropdown">
117+
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true"
118+
aria-expanded="true" tabindex="0">
119+
<span title="Username" class="pficon pficon-user"></span>
120+
Brian Johnson
121+
<span class="caret"></span>
122+
</a>
123+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
124+
<li><a href="#about" data-toggle="modal">About</a></li>
125+
<li><a href="#">Log Out</a></li>
126+
</ul>
127+
</li>
128+
</ul>
129+
130+
</div>
131+
</nav>
132+
133+
<main role="main" id="kie-main-content" tabindex="-1" class="kie-page__content ">
134+
135+
<div class="container-fluid ">
136+
137+
<!-- Breadcrumb row -->
138+
<div class="row">
139+
<div class="col-xs-12">
140+
<ol class="breadcrumb">
141+
<li>
142+
<a href="#">Spaces</a>
143+
</li>
144+
<li>
145+
<a href="#">Space Name</a>
146+
</li>
147+
<li>
148+
<a href="#">Mortgage Application</a>
149+
</li>
150+
<li class="active"> <strong>Scenario Test1</strong>
151+
</li>
152+
</ol>
153+
</div>
154+
</div>
155+
156+
<!-- Content - Asset List -->
157+
<div class="row kie-row--tabcontent">
158+
<div class="col-xs-12">
159+
<a href="#confirmation" data-toggle="modal" data-target="#dataTypesList" title="Confirmation">Test the data types list popup</a>
160+
</div>
161+
162+
</div>
163+
164+
</div>
165+
</main>
166+
167+
168+
</div><!-- kie-page -->
169+
170+
<!-- modals -->
171+
172+
<!-- DROOLS 3053 DIALOGS BELOW -->
173+
<div class="modal fade" tabindex="-1" role="dialog" id="dataTypesList">
174+
<div class="modal-dialog" role="document">
175+
<div class="modal-content">
176+
<div class="modal-header">
177+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
178+
<span class="pficon pficon-close"></span>
179+
</button>
180+
<h4 class="modal-title">"favRecipes" (recipes) [list]</h4>
181+
</div>
182+
<div class="modal-body">
183+
184+
<label for="kie-search" class="sr-only">Select Data Object</label>
185+
<div>
186+
<button class="btn btn-default pull-right" type="button" style="margin-left: 2em;">Add</button>
187+
188+
<!-- search box -->
189+
<form role="form" class="search-pf has-button">
190+
<div class="form-group has-clear">
191+
<div class="search-pf-input-group">
192+
<!-- <label for="search1" class="sr-only">Search</label> -->
193+
<input id="search1" type="search" class="form-control" placeholder="Search">
194+
<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
195+
</div>
196+
</div>
197+
<div class="form-group">
198+
<button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
199+
</div>
200+
</form>
201+
<script>
202+
(function ($) {
203+
$(document).ready(function () {
204+
// Hide the clear button if the search input is empty
205+
$(".search-pf .has-clear .clear").each(function () {
206+
if (!$(this).prev('.form-control').val()) {
207+
$(this).hide();
208+
}
209+
});
210+
// Show the clear button upon entering text in the search input
211+
$(".search-pf .has-clear .form-control").keyup(function () {
212+
var t = $(this);
213+
t.next('button').toggle(Boolean(t.val()));
214+
});
215+
// Upon clicking the clear button, empty the entered text and hide the clear button
216+
$(".search-pf .has-clear .clear").click(function () {
217+
$(this).prev('.form-control').val('').focus();
218+
$(this).hide();
219+
});
220+
});
221+
})(jQuery);
222+
</script>
223+
<!-- end search box -->
224+
</div><!-- end outlined data object box -->
225+
<br/>
226+
227+
<!-- start of new stuff -->
228+
<style>
229+
.list-view-pf-description {
230+
flex-grow: 0;
231+
}
232+
.list-view-pf-body {
233+
/* justify-content: space-between; */
234+
}
235+
.list-view-pf-actions {
236+
min-height: 44px;
237+
min-width: 44px;
238+
margin: 0;
239+
display: flex;
240+
}
241+
.list-view-pf-view {
242+
margin-top: 0;
243+
}
244+
.list-view-pf-main-info {
245+
padding-top: 0;
246+
padding-bottom: 0;
247+
}
248+
</style>
249+
250+
<div class="list-group">
251+
<!-- <div class="list-group-item"> -->
252+
253+
<div class="list-group-item"> <!--list-view-pf-->
254+
<div class="list-view-pf-body">
255+
<div class="list-view-pf-description">
256+
Recipe1 [Parsley:30, Garlic:40]
257+
</div>
258+
</div>
259+
<div class="list-view-pf-actions">
260+
<button class="btn btn-link"><span class="fa fa-trash"></span></button>
261+
<button class="btn btn-link"><span class="fa fa-ellipsis-v"></span></button>
262+
</div>
263+
</div>
264+
265+
266+
<div class="list-group-item">
267+
<label for="kie-name">Name (recipe)</label>
268+
<input id="kie-name" type="text" class="form-control" placeholder="Name" value="Recipe2">
269+
<!-- end of new stuff -->
270+
<br/>
271+
272+
<div id="pf-list-simple-expansion" class="list-group tree-list-view-pf-view "
273+
data-field="listContainer">
274+
275+
<!-- ingredients list, expanding list item -->
276+
<div class="list-group-item selected" data-field="listGroupItem" id="listGroupItem-ingredients">
277+
<div class="list-group-item-header list-view-pf-expand-active" data-field="listGroupItemHeader">
278+
<div class="list-view-pf-expand">
279+
<span class="fa fa-angle-right fa-angle-down" data-field="faAngleRight"></span>
280+
</div>
281+
<div class="list-view-pf-main-info" data-field="fullClassName">
282+
Ingredients (Ingredient) [List]
283+
</div>
284+
<div class="list-group-item-container container-fluid" data-field="listGroupItemContainer">
285+
286+
287+
<!-- LIST OF INGREDIENTS -->
288+
<div class="list-group list-view-pf list-view-pf-view">
289+
<div class="list-group-item list-view-pf-item list-pf-title">
290+
<div class="list-view-pf-body">
291+
<div class="list-view-pf-description">Name</div>
292+
<div class="list-view-pf-additional-info">Quantity</div>
293+
</div>
294+
<div class="list-view-pf-actions">
295+
<button class="btn btn-link"><span class="fa fa-plus"></span></button>
296+
</div>
297+
</div>
298+
299+
<div class="list-group-item list-view-pf-item">
300+
<div class="list-view-pf-body">
301+
<div class="list-view-pf-description">Parsley</div>
302+
<div class="list-view-pf-additional-info">30</div>
303+
</div>
304+
<div class="list-view-pf-actions">
305+
<button class="btn btn-link"><span class="fa fa-trash"></span></button>
306+
</div>
307+
</div>
308+
309+
<div class="list-group-item list-view-pf-item">
310+
<div class="list-view-pf-body">
311+
<div class="list-view-pf-description"><input></div>
312+
<div class="list-view-pf-additional-info"><input></div>
313+
</div>
314+
<div class="list-view-pf-actions">
315+
<button class="btn btn-link"><span class="fa fa-trash"></span></button>
316+
</div>
317+
</div>
318+
</div>
319+
<!-- END OF LIST OF INGREDIENTS -->
320+
</div>
321+
</div>
322+
<!-- end of expanding list item for ingredients list -->
323+
324+
325+
326+
</div>
327+
</div>
328+
329+
330+
331+
<!-- JS for list expansion -->
332+
<script>
333+
$(document).ready(function () {
334+
// Row Checkbox Selection
335+
$("#pf-list-simple-expansion input[type='checkbox']").change(function (e) {
336+
if ($(this).is(":checked")) {
337+
$(this).closest('.list-group-item').addClass("active");
338+
} else {
339+
$(this).closest('.list-group-item').removeClass("active");
340+
}
341+
});
342+
// toggle dropdown menu
343+
$("#pf-list-simple-expansion .list-view-pf-actions").on('show.bs.dropdown', function () {
344+
var $this = $(this);
345+
var $dropdown = $this.find('.dropdown');
346+
var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
347+
$dropdown.toggleClass('dropup', space < 10);
348+
});
349+
350+
// click the list-view heading then expand a row
351+
$("#pf-list-simple-expansion .list-group-item-header").click(function (event) {
352+
if (!$(event.target).is("button, a, input, .fa-ellipsis-v")) {
353+
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
354+
.end().parent().toggleClass("list-view-pf-expand-active")
355+
.find(".list-group-item-container").toggleClass("hidden");
356+
} else {
357+
}
358+
})
359+
360+
// click the close button, hide the expand row and remove the active status
361+
$("#pf-list-simple-expansion .list-group-item-container .close").on("click", function () {
362+
$(this).parent().addClass("hidden")
363+
.parent().removeClass("list-view-pf-expand-active")
364+
.find(".fa-angle-right").removeClass("fa-angle-down");
365+
})
366+
367+
});
368+
</script>
369+
<!-- end JS for list expansion -->
370+
371+
372+
<!-- </div> this one -->
373+
374+
375+
<div class="modal-footer">
376+
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
377+
<button type="button" class="btn btn-primary">Insert Values</button>
378+
</div>
379+
</div>
380+
</div>
381+
</div>
382+
</div>
383+
384+
385+
<!-- DROOLS 3053 DIALOGS ABOVE -->
386+
387+
<div class="modal fade" id="help">
388+
<div class="modal-dialog">
389+
<div class="modal-content">
390+
<div class="modal-header">
391+
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
392+
<span class="pficon pficon-close"></span>
393+
</button>
394+
<h4 class="modal-title">Help</h4>
395+
</div>
396+
<div class="modal-body">
397+
<div><img src="img/help.png" alt="" style="width: 568px;"/></div>
398+
</div>
399+
<div class="modal-footer">
400+
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
401+
</div>
402+
</div>
403+
</div>
404+
</div>
405+
406+
<!-- About Modal -->
407+
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
408+
<div class="modal-dialog">
409+
<div class="modal-content about-modal-pf">
410+
<div class="modal-header">
411+
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
412+
<span class="pficon pficon-close"></span>
413+
</button>
414+
</div>
415+
<div class="modal-body">
416+
<h1 id="aboutModalTitle">
417+
<img class="kie-brand-icon" src="images/jbpm_logo_noshadow_100px.png" alt="JBoss BPM Suite"/>
418+
</h1>
419+
<div class="product-versions-pf">
420+
<ul class="list-unstyled" id="aboutModalVersions">
421+
<li><strong>Version</strong> 0.0</li>
422+
</ul>
423+
</div>
424+
<div class="trademark-pf">
425+
jBPM is open source software, released under the <br>
426+
<strong>Apache Software License 2.0</strong>.
427+
</div>
428+
</div>
429+
</div>
430+
</div>
431+
</div>
432+
<!-- END About Modal -->
433+
434+
<div class="modal fade" id="preferences">
435+
<div class="modal-dialog">
436+
<div class="modal-content">
437+
<div class="modal-header">
438+
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
439+
<span class="pficon pficon-close"></span>
440+
</button>
441+
<h4 class="modal-title">Preferences</h4>
442+
</div>
443+
<div class="modal-body">
444+
<div class="form-group">
445+
<label class="control-label">Language</label>
446+
<select class="form-control">
447+
<option value="default">English</option>
448+
<option value="de">German</option>
449+
<option value="es">Spanish</option>
450+
<option value="fr">French</option>
451+
<option value="ja">Japanese</option>
452+
<option value="pt_BR">Portuguese</option>
453+
<option value="zh_CN">Chinese (Simplified)</option>
454+
</select>
455+
</div>
456+
<div class="form-group">
457+
<label class="control-label">View Mode</label>
458+
<div class="radio">
459+
<label><input type="radio" name="optradio">Basic</label>
460+
</div>
461+
<div class="radio">
462+
<label><input type="radio" name="optradio">Compact</label>
463+
</div>
464+
<div class="radio">
465+
<label><input type="radio" name="optradio">Advanced</label>
466+
</div>
467+
</div>
468+
<div class="form-group">
469+
<label class="control-label">Layouts</label>
470+
<p><a href="#">Reset Perspective Layouts</a></p>
471+
</div>
472+
</div>
473+
<div class="modal-footer">
474+
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
475+
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
476+
</div>
477+
</div>
478+
</div>
479+
</div>
480+
481+
</body>
482+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.