Skip to content

Commit 73289ac

Browse files
Christoffer-CortesChristoffer-Cortes
authored
Alert fix (#129)
* Fix margins and restructure how errormessages are handled * Add expandable alert messages * Store messages as old and new * Alert indicator shows new messages * Fixed width to prevent contraction of the dropdown when expanding a single message * Base for alert removal * Removable alert messages * Minor fix * Browser compatibility fix * Fixes to CSS
1 parent b9695de commit 73289ac

File tree

4 files changed

+157
-95
lines changed

4 files changed

+157
-95
lines changed

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

Lines changed: 0 additions & 6 deletions
This file was deleted.

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

Lines changed: 71 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ body {
1818
min-width: 160px;
1919
}
2020
.card-standard {
21-
width: 25rem;
21+
width: 25rem;
2222
}
2323

2424
.sticky-button-bar{
@@ -43,7 +43,7 @@ body {
4343
white-space: normal;
4444
}
4545
.split {
46-
max-width: 50%;
46+
max-width: 50%;
4747
}
4848
.table-responsive>.table-bordered {
4949
border: 1px solid #dee2e6;
@@ -88,7 +88,7 @@ body {
8888
flex-flow: column;
8989
}
9090
.hidden_by_default {
91-
display: none;
91+
display: none;
9292
}
9393
.loader {
9494
border-width: 7px;
@@ -111,11 +111,11 @@ body {
111111
max-width: 410px;
112112
}
113113
.badge-rounded {
114-
display: inline-block;
115-
padding: .1em;
116-
text-align: center;
117-
white-space: nowrap;
118-
border-radius: .25rem;
114+
display: inline-block;
115+
padding: .1em;
116+
text-align: center;
117+
white-space: nowrap;
118+
border-radius: .25rem;
119119
}
120120
.modal-height-fit {
121121
max-height: calc(100vh - 200px);
@@ -141,11 +141,11 @@ body {
141141
font-size: medium;
142142
}
143143
.hide {
144-
position: absolute;
145-
left: -999em;
144+
position: absolute;
145+
left: -999em;
146146
}
147147
.flex-wrap {
148-
flex-wrap: wrap;
148+
flex-wrap: wrap;
149149
}
150150
#back_end_down_warning {
151151
font-size: 12pt;
@@ -217,27 +217,14 @@ input:checked + .slider:before {
217217
100% { transform: rotate(360deg); }
218218
}
219219

220-
@media (max-width: 576px) {
221-
body {
222-
padding-top: 80px;
223-
}
224-
.container {
225-
max-width: 480px;
226-
}
227-
.split {
228-
max-width: 100%;
229-
width: 100%;
230-
}
231-
}
232-
233220
button.rules_info {
234-
text-align: center;
235-
max-height: auto;
236-
max-width: auto;
237-
margin: 0px;
238-
padding: 0px;
239-
background: white;
240-
border: none;
221+
text-align: center;
222+
max-height: auto;
223+
max-width: auto;
224+
margin: 0px;
225+
padding: 0px;
226+
background: white;
227+
border: none;
241228
}
242229

243230
button.rules_info:active {
@@ -250,5 +237,57 @@ button.rules_info:focus {
250237
}
251238

252239
#infoContent{
253-
font: 16px "Calibri";
240+
font: 16px "Calibri";
241+
}
242+
#alertsParent {
243+
width: 65px;
244+
}
245+
#alerts {
246+
width: 350px;
247+
}
248+
.alert-message {
249+
overflow: hidden;
250+
text-overflow: ellipsis;
251+
}
252+
div.alert-message:active {
253+
background-color: grey !important;
254254
}
255+
.badge {
256+
position: absolute;
257+
margin-left: -0.5rem;
258+
top: 0.3rem;
259+
font-size: 0.55rem;
260+
}
261+
.alerts-container {
262+
max-height: 370px;
263+
overflow-y: auto;
264+
overflow-x: hidden;
265+
}
266+
@media (max-width: 576px) {
267+
body {
268+
padding-top: 80px;
269+
}
270+
.container {
271+
max-width: 480px;
272+
}
273+
.split {
274+
max-width: 100%;
275+
width: 100%;
276+
}
277+
}
278+
@media (max-width: 992px) {
279+
#alertsParent {
280+
width: 100%;
281+
}
282+
#alerts {
283+
width: 100%;
284+
}
285+
.badge {
286+
margin-left: 0rem;
287+
top: 0.65rem;
288+
font-size: 0.75rem
289+
}
290+
.alerts-container {
291+
max-height: 185px;
292+
}
293+
}

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

Lines changed: 69 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,76 @@
1-
var errorsStore = new Array();
2-
let msg = JSON.parse(sessionStorage.getItem('errorsStore'));
3-
if(msg){
4-
for(var i=0; i<msg.length; i++){
5-
errorsStore.push(msg[i]);
6-
}
7-
}
8-
function viewModel(message){
1+
function messageModel (message) {
92
this.message = ko.observable(message);
103
}
11-
function model(data){
4+
function viewModel (data) {
125
var self = this;
136
self.errorMessages = ko.observableArray([]);
14-
var json = JSON.parse(ko.toJSON(data));
15-
json.reverse();
16-
for(var i = 0; i < json.length; i++) {
17-
var obj = json[i];
18-
let msgErr = new viewModel(obj.message);
19-
self.errorMessages.push(msgErr);
7+
var storedOld = JSON.parse(sessionStorage.getItem('ei.errorMessages') || '[]');
8+
var storedNew = JSON.parse(sessionStorage.getItem('ei.errorMessagesNew') || '[]');
9+
self.newMessagesLength = ko.observable(storedNew.length);
10+
11+
self.init = function() {
12+
var json = storedOld.concat(storedNew);
13+
for(var i = 0; i < json.length; i++) {
14+
self.addErrorMessage(json[i].message);
15+
}
16+
}
17+
self.addErrorMessage = function (data) {
18+
var model = new messageModel(data);
19+
self.errorMessages.push(model);
20+
}
21+
self.removeErrorMessage = function (index) {
22+
var length = self.errorMessages.length;
23+
var realIndex = length - 1 - index;
24+
self.errorMessages.splice(realIndex,1);
25+
self.mergeErrorMessages();
26+
}
27+
self.storeErrorMessage = function (data) {
28+
storedNew.push({"message": data})
29+
sessionStorage.setItem('ei.errorMessagesNew', JSON.stringify(storedNew));
30+
self.updateNewMessagesLength();
31+
}
32+
self.mergeErrorMessages = function () {
33+
storedOld = ko.toJS(self.errorMessages);
34+
storedNew = [];
35+
sessionStorage.setItem('ei.errorMessages', JSON.stringify(storedOld));
36+
sessionStorage.setItem('ei.errorMessagesNew', JSON.stringify(storedNew));
37+
self.updateNewMessagesLength();
38+
}
39+
self.updateNewMessagesLength = function () {
40+
self.newMessagesLength(storedNew.length);
41+
}
42+
self.expandMessage = function (event) {
43+
if(event.target.classList.contains("white-space-normal")) {
44+
event.target.classList.remove("white-space-normal");
45+
} else {
46+
self.resetExpandMessage();
47+
event.target.classList.add("white-space-normal");
48+
}
49+
}
50+
self.resetExpandMessage = function () {
51+
$(".alert-message").removeClass("white-space-normal");
52+
}
53+
self.stopPropagation = function () {
54+
$('.alerts-container').on('click', function (event) {
55+
event.stopPropagation();
56+
event.preventDefault();
57+
});
2058
}
2159
}
22-
function logMessages(messageErr){
23-
$.jGrowl(messageErr, {sticky: false, theme: 'Error', position:'center'});
24-
errorsStore.push({message:messageErr});
25-
sessionStorage.setItem('errorsStore', JSON.stringify(errorsStore));
26-
$('div.dropdown-menu').replaceWith("<div id=\"alerts\" style=\"display: none;\" class=\"dropdown-menu\" aria-labelledby=\"alertsDropdown\" data-bind=\"foreach: errorMessages\">" +
27-
"<div class=\"dropdown-divider\"> </div>" +
28-
"<a class=\"dropdown-item\">" +
29-
"<div class=\"dropdown-message small\" data-bind=\"text: message, attr: {title: message}\"></div>" +
30-
"</a>" +
31-
"</div>");
32-
ko.cleanNode($("#alerts")[0]);
33-
ko.applyBindings(new model(errorsStore),$("#alerts")[0]);
60+
var vm = new viewModel();
61+
vm.init();
62+
ko.cleanNode($("#alertsParent")[0]);
63+
ko.applyBindings(vm,$("#alertsParent")[0]);
64+
vm.stopPropagation();
65+
66+
function logMessages (message) {
67+
$.jGrowl(message, {sticky: false, theme: 'Error', position:'center'});
68+
vm.addErrorMessage(message);
69+
vm.storeErrorMessage(message);
70+
vm.stopPropagation();
3471
}
35-
$(document).mouseup(function(e){
36-
var container = $("#alerts");
37-
var bell = $("i.fa.fa-fw.fa-bell");
38-
var click = $("#alertsDropdown");
39-
var x = document.getElementById("alerts");
40-
let msg = JSON.parse(sessionStorage.getItem('errorsStore'));
41-
if (!container.is(e.target) && container.has(e.target).length === 0 && x.style.display === "block"){
42-
container.hide();
43-
} else if(msg && x.style.display === "none" && (click.is(e.target) || bell.is(e.target))){
44-
container.show();
45-
}
46-
});
47-
ko.cleanNode($("#alerts")[0]);
48-
ko.applyBindings(new model(errorsStore),$("#alerts")[0]);
72+
73+
$('#alertsDropdown').on('click', function (event) {
74+
vm.resetExpandMessage();
75+
vm.mergeErrorMessages();
76+
});

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
<link href="assets/jquery-confirm/css/jquery-confirm.css" rel="stylesheet"/>
1818
<link href="assets/jgrowl/jquery.jgrowl.min.css" rel="stylesheet"/>
1919
<link href="assets/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
20-
<link href="css/errMsg.css" rel="stylesheet"/>
2120
<link href="css/style.css" rel="stylesheet" />
2221

2322
<title>Eiffel Intelligence</title>
@@ -56,7 +55,7 @@
5655
</a>
5756
</li>
5857
<li class="nav-item">
59-
<a class="nav-link nav-link-collapse" data-toggle="collapse" href="#collapseDocPages" data-parent="#exampleAccordion">
58+
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseDocPages" data-parent="#exampleAccordion">
6059
<i class="fa fa-fw fa-file"></i>
6160
<span class="nav-link-text">Documentation Links</span>
6261
</a>
@@ -65,7 +64,7 @@
6564
</ul>
6665
</li>
6766
<li id="adminBackendInstancesBtn" class="nav-item">
68-
<a class="nav-link nav-link-collapse" data-toggle="collapse" href="#collapseBackEndPages" data-parent="#exampleAccordion">
67+
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseBackEndPages" data-parent="#exampleAccordion">
6968
<i class="fa fa-fw fa-file"></i>
7069
<span class="nav-link-text">Administration back-end instances</span>
7170
</a>
@@ -87,21 +86,23 @@
8786
</li>
8887
</ul>
8988
<ul class="navbar-nav ml-auto">
90-
<li class="nav-item dropdown">
91-
<a class="nav-link dropdown-toggle" id="alertsDropdown">
89+
<li id="alertsParent" class="nav-item dropdown">
90+
<a id="alertsDropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
9291
<i class="fa fa-fw fa-bell"></i>
93-
<span class="d-lg-none">Alerts
94-
<span class="badge badge-pill badge-warning">6 New</span>
95-
</span>
96-
<span class="indicator text-warning d-none d-lg-block">
97-
<i class="fa fa-fw fa-circle"></i>
98-
</span>
92+
<span class="d-lg-none pr-2">Alert</span>
93+
<span class="badge badge-pill badge-warning" data-bind="visible: $root.newMessagesLength() > 0, text: $root.newMessagesLength()"></span>
9994
</a>
100-
<div id="alerts" style="display: none;" class="dropdown-menu" aria-labelledby="alertsDropdown" data-bind="foreach: errorMessages">
101-
<div class="dropdown-divider"> </div>
102-
<a class="dropdown-item">
103-
<div class="dropdown-message small" data-bind="text: message, attr: {title: message}"></div>
104-
</a>
95+
<div class="dropdown-menu dropdown-menu-right alerts-container" aria-labelledby="alertsDropdown">
96+
<div class="text-center" data-bind="if: $root.errorMessages().length == 0">No messages</div>
97+
<div id="alerts" data-bind="foreach: errorMessages.slice(0).reverse()">
98+
<div class="d-flex">
99+
<div class="col-lg-10 col-11 pt-2 pb-2 dropdown-item alert-message small cursor-pointer" data-bind="text: message, click: function(data, event) {$root.expandMessage(event)}"></div>
100+
<div class="col-lg-2 col-1 d-flex justify-content-center align-items-center">
101+
<i class="fa fa-fw fa-minus-circle cursor-pointer" data-bind="click: function(data, event) {$root.removeErrorMessage($index())}"></i>
102+
</div>
103+
</div>
104+
<div class="m-0 dropdown-divider" data-bind="visible: $index() < $root.errorMessages().length - 1"></div>
105+
</div>
105106
</div>
106107
</li>
107108
<li class="nav-item">

0 commit comments

Comments
 (0)