Skip to content

Commit 8d57f9b

Browse files
Christoffer-CortesChristoffer-Cortes
authored
Fixing and adding boostrap tooltips in EI frontend (#81)
* Update frontend example image * Bootstrap tooltips should work now * Tests rules page css changes and removal of general use of tooltip attribute * Fix some errors in class names * Fix in class name * Updated Test Rules page image * Removed unnecessary else if * Add tooltip to subscription modal and remove passive tooltips from all elements * Tooltips can now show links and also close when clicking on other elements
1 parent dfbf6d7 commit 8d57f9b

File tree

9 files changed

+144
-126
lines changed

9 files changed

+144
-126
lines changed

‎src/main/resources/application.properties

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ ei.backendInstancesPath=
2828
ei.eiffelDocumentationUrls={ "EI Frontend GitHub": "https://github.com/eiffel-community/eiffel-intelligence-frontend",\
2929
"EI Backend GitHub": "https://github.com/eiffel-community/eiffel-intelligence",\
3030
"Eiffel Github main page": "https://github.com/eiffel-community/eiffel",\
31-
"Test Rule User Guide": "https://github.com/eiffel-community/eiffel-intelligence/wiki/TestRulesUserGuide" }
31+
"Test Rules User Guide": "https://github.com/eiffel-community/eiffel-intelligence/wiki/TestRulesUserGuide" }
3232

3333
#### LOGGING #########
3434
logging.level.root: INFO

‎src/main/resources/static/assets/images/GUI_frontend_example.png

25.2 KB
Loading

‎src/main/resources/static/css/style.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@media (max-width: 576px) {
2323
.split {
2424
max-width: 100%;
25+
width: 100%;
2526
}
2627
}
2728
.table-responsive>.table-bordered {
@@ -63,6 +64,16 @@
6364
height: 45px;
6465
animation: spin 1s cubic-bezier(.86,0,.07,1) infinite;
6566
}
67+
.cursor-pointer {
68+
cursor: pointer;
69+
}
70+
.badge-rounded {
71+
display: inline-block;
72+
padding: .1em;
73+
text-align: center;
74+
white-space: nowrap;
75+
border-radius: .25rem;
76+
}
6677
/* Safari */
6778
@-webkit-keyframes spin {
6879
0% { -webkit-transform: rotate(0deg); }
@@ -83,6 +94,6 @@ body {
8394
}
8495
@media (max-width: 576px) {
8596
body {
86-
padding-top: 100px;
97+
padding-top: 80px;
8798
}
8899
}

‎src/main/resources/static/js/main.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,4 +180,10 @@ jQuery(document).ready(function() {
180180
});
181181
}
182182
updateBackEndInstanceList();
183+
184+
$('body').on('click', function (e) {
185+
if ($(e.target).data('toggle') !== 'tooltip' && $(e.target)[0].className !== 'tooltip-inner') {
186+
$('[data-toggle="tooltip"]').tooltip('hide');
187+
}
188+
});
183189
});

‎src/main/resources/static/js/subscription.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ var defaultFormKeyValuePairAuth = { "formkey": "Authorization", "formvalue": ""
88
jQuery(document).ready(function () {
99

1010
$('.modal-dialog').draggable({ handle: ".modal-header", cursor: 'move' });
11-
$('[data-toggle="tooltip"]').tooltip();
1211

1312
// Fetch injected URL from DOM
1413
frontendServiceUrl = $('#frontendServiceUrl').text();
@@ -192,9 +191,8 @@ jQuery(document).ready(function () {
192191
var data = self.subscription().slice(0);
193192
self.subscription([]);
194193
self.subscription(data);
195-
196194
self.subscription.valueHasMutated();
197-
195+
loadTooltip();
198196
};
199197

200198

@@ -214,6 +212,7 @@ jQuery(document).ready(function () {
214212
self.subscription([]);
215213
self.subscription(data);
216214
self.subscription.valueHasMutated();
215+
loadTooltip();
217216
};
218217

219218
self.addNotificationMsgKeyValuePairAuth = function (data, event) {
@@ -229,6 +228,7 @@ jQuery(document).ready(function () {
229228
self.subscription([]);
230229
self.subscription(data);
231230
self.subscription.valueHasMutated();
231+
loadTooltip();
232232
};
233233

234234

@@ -246,6 +246,7 @@ jQuery(document).ready(function () {
246246
self.subscription([]);
247247
self.subscription(data);
248248
self.subscription.valueHasMutated();
249+
loadTooltip();
249250
};
250251

251252

@@ -385,22 +386,18 @@ jQuery(document).ready(function () {
385386
"data": "repeat"
386387
},
387388
{
388-
"targets": [9], //last column
389+
"targets": [9],
389390
"className": "sub-action-column",
390391
"orderable": false,
391392
"title": "Action",
392393
"data": null,
393394
"render": function (data, type, row, meta) {
394-
if (isSecured == true && row.userName == currentUser && row.userName != null) {
395-
return '<button id="view-' + data.subscriptionName + '" data-toggle="tooltip" title="View subscription" class="btn btn-sm btn-success view_record">View</button> '
396-
+ '<button id="edit-' + data.subscriptionName + '" data-toggle="tooltip" title="Edit subscription" class="btn btn-sm btn-primary edit_record">Edit</button> '
397-
+ '<button id="delete-' + data.subscriptionName + '" data-toggle="tooltip" title="Delete subscription from EI" class="btn btn-sm btn-danger delete_record">Delete</button>';
398-
} else if (isSecured == false) {
399-
return '<button id="view-' + data.subscriptionName + '" data-toggle="tooltip" title="View subscription" class="btn btn-sm btn-success view_record">View</button> '
400-
+ '<button id="edit-' + data.subscriptionName + '" data-toggle="tooltip" title="Edit subscription" class="btn btn-sm btn-primary edit_record">Edit</button> '
401-
+ '<button id="delete-' + data.subscriptionName + '" data-toggle="tooltip" title="Delete subscription from EI" class="btn btn-sm btn-danger delete_record">Delete</button>';
395+
if (isSecured == false || (row.userName == currentUser && row.userName != null)) {
396+
return '<button id="view-' + data.subscriptionName + '" class="btn btn-sm btn-success view_record">View</button> '
397+
+ '<button id="edit-' + data.subscriptionName + '" class="btn btn-sm btn-primary edit_record">Edit</button> '
398+
+ '<button id="delete-' + data.subscriptionName + '" class="btn btn-sm btn-danger delete_record">Delete</button>';
402399
} else {
403-
return '<button id="view-' + data.subscriptionName + '" data-toggle="tooltip" title="View subscription" class="btn btn-sm btn-success view_record">View</button>';
400+
return '<button id="view-' + data.subscriptionName + '" class="btn btn-sm btn-success view_record">View</button>';
404401
}
405402
}
406403
}
@@ -708,6 +705,9 @@ jQuery(document).ready(function () {
708705
}
709706
$('.modal-title').text(title_);
710707
save_method = save_method_in;
708+
$('#modal_form').on('shown.bs.modal', function() {
709+
loadTooltip();
710+
});
711711
}
712712
}
713713

@@ -945,4 +945,8 @@ jQuery(document).ready(function () {
945945
$(".loadingAnimation").hide();
946946
$(".subButtons").show();
947947
}
948+
949+
function loadTooltip() {
950+
$('[data-toggle="tooltip"]').tooltip({ trigger: "click", html: true });
951+
}
948952
});

‎src/main/resources/static/js/testrules.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ jQuery(document).ready(
2424
function() {
2525

2626
frontendServiceUrl = $('#frontendServiceUrl').text();
27+
//load tooltip on hover
28+
$('[data-toggle="tooltip"]').tooltip({ trigger: "click" });
2729

2830
// /Start ## Global AJAX Sender function ##################################
2931
var AjaxHttpSender = function() {
@@ -236,10 +238,10 @@ jQuery(document).ready(
236238
};
237239

238240
var pomEvents = document.getElementById('uploadEventsFile');
239-
pomEvents.onchange = function uploadFinished() {
241+
pomEvents.onchange = function uploadFinished() {
240242
var subscriptionFile = pomEvents.files[0];
241243
validateEventsJsonAndCreateSubscriptions(subscriptionFile);
242-
};
244+
};
243245

244246
//Upload events list json data
245247
$(".container").on("click", "button.upload_rules", function(event) {
@@ -354,7 +356,6 @@ jQuery(document).ready(
354356

355357
// Start to check is backend Test Rule service status
356358
var isEnabled = true;
357-
console.log('Here are my modifications');
358359
$.ajax({
359360
url: frontendServiceUrl + "/rules/rule-check/testRulePageEnabled",
360361
contentType : 'application/json; charset=utf-8',

‎src/main/resources/templates/index.html

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,21 @@
1717
<link href="assets/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
1818
<link href="assets/datatables/responsive.dataTables.min.css" rel="stylesheet" />
1919
<link href="css/sb-admin.css" rel="stylesheet" />
20-
<link href="css/style.css" rel="stylesheet" />
21-
2220
<link href="assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
2321
<link href="assets/jquery-confirm/css/jquery-confirm.css" rel="stylesheet"/>
2422
<link href="assets/jgrowl/jquery.jgrowl.min.css" rel="stylesheet"/>
2523
<link href="assets/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
2624
<link href="css/errMsg.css" rel="stylesheet"/>
25+
<link href="css/style.css" rel="stylesheet" />
2726
</head>
2827

2928
<body class="bg-dark" id="page-top">
30-
31-
3229
<div class="hidden" style="display: none" id="eiffelDocumentationUrlLinks" th:text="${eiffelDocumentationUrlLinks}"></div>
3330
<div class="hidden" style="display: none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
3431
<!-- Navigation-->
3532
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
3633
<a class="navbar-brand" th:href="${frontendServiceUrl}">
37-
<img width="32" alt="Information" src="assets/images/favicon-32x32.png" />Eiffel Intelligence</a>
34+
<img alt="Favorite Icon" src="assets/images/favicon-32x32.png" />Eiffel Intelligence</a>
3835
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
3936
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
4037
<span class="navbar-toggler-icon"></span>
@@ -152,20 +149,14 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
152149
</div>
153150
</div>
154151
</div>
155-
156152
</div>
157153

158154
<script type="text/javascript" src="assets/jquery/jquery.min.js"></script>
159-
<script type="text/javascript" src="assets/bootstrap/js/popper.min.js"></script>
160-
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
161155
<script type="text/javascript" src="assets/jquery-easing/jquery.easing.min.js"></script>
162156
<script type="text/javascript" src="assets/datatables/jquery.dataTables.js"></script>
163157
<script type="text/javascript" src="assets/datatables/dataTables.bootstrap4.js"></script>
164158
<script type="text/javascript" src="assets/datatables/dataTables.responsive.min.js"></script>
165159

166-
<script type="text/javascript" src="assets/js/sb-admin.min.js"></script>
167-
<script type="text/javascript" src="assets/js/sb-admin-datatables.min.js"></script>
168-
169160
<script type="text/javascript" src="assets/knockout/knockout-3.4.2.js"></script>
170161
<script type="text/javascript" src="assets/knockout/knockout.mapping.js"></script>
171162
<script type="text/javascript" src="assets/jquery-ui/jquery-ui.min.js"></script>
@@ -175,8 +166,13 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
175166
<script type="text/javascript" src="assets/dateformat/date.format.js"></script>
176167
<script type="text/javascript" src="assets/jsonlint/jsonlint.js"></script>
177168

169+
<script type="text/javascript" src="assets/bootstrap/js/popper.min.js"></script>
170+
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
171+
172+
<script type="text/javascript" src="assets/js/sb-admin.min.js"></script>
173+
<script type="text/javascript" src="assets/js/sb-admin-datatables.min.js"></script>
174+
178175
<script type="text/javascript" src="js/main.js"></script>
179176
<script type="text/javascript" src="js/errorMessages.js"></script>
180177
</body>
181-
182178
</html>

0 commit comments

Comments
 (0)