Skip to content

Commit 20c287a

Browse files
erik-edlingerik-edling
authored
Add sticky buttons and clear all modal (#107)
* Add sticky buttons on rule page * Add modal as warning when deleting all events * Add supported browsers in readme file. * Change colors of borders to default
1 parent 2ebc38e commit 20c287a

File tree

5 files changed

+101
-43
lines changed

5 files changed

+101
-43
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ Potential future features for Eiffel Intelligence Frontend include:
2525
* Web hooks
2626
* Much more
2727

28+
## Supported Browsers
29+
* Edge 17.17619 or later
30+
* Chrome 63.0.3239.132 or later
31+
* Firefox 60.2.0 or later
32+
2833
# About this repository
2934
The contents of this repository are licensed under the [Apache License 2.0](./LICENSE).
3035

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,21 @@ body {
2020
.card-standard {
2121
width: 25rem;
2222
}
23-
.rule-button {
24-
width: auto;
25-
min-width: 150px;
23+
24+
.sticky-button-bar{
25+
position: -webkit-sticky; /* Safari */
26+
position: sticky;
27+
top: 0;
28+
z-index: 10;
29+
max-width: 88%;
30+
}
31+
32+
.footer-buttons{
33+
position: sticky;
34+
z-index: 10;
35+
bottom: 20px;
36+
display: flex;
37+
justify-content: center;
2638
}
2739
.display-inline-table {
2840
display: inline-table;

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,13 +140,23 @@ jQuery(document).ready(
140140
self.clearAllRules = function(){
141141
self.rulesBindingList([]);
142142
self.addRule(ruleTemplate);
143+
$('.delete-warning-modal').modal("hide");
143144
}
144145

145-
// This function is used to remove all events
146+
// This function is used to remove all events
146147
self.clearAllEvents = function(){
147148
self.eventsBindingList([]);
148149
self.addEvent({});
150+
$('.delete-warning-modal').modal("hide");
149151
}
152+
153+
// This function is used to remove all rules
154+
self.clearType = ko.observable("rules");
155+
self.confirmClearAll = function(clearType){
156+
self.clearType(clearType);
157+
$('.delete-warning-modal').modal('show');
158+
}
159+
150160
return self;
151161
}
152162

@@ -162,6 +172,7 @@ jQuery(document).ready(
162172
ko.applyBindings(vm, $("#submitButton")[0]);
163173
ko.applyBindings(vm, $("#testRulesDOMObject")[0]);
164174
ko.applyBindings(vm, $("#testEventsDOMObject")[0]);
175+
ko.applyBindings(vm, $(".delete-warning-modal")[0]);
165176
vm.addRule(ruleTemplate);
166177
vm.addEvent({});
167178

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
162162
</div>
163163
</div>
164164

165-
<div class="p-1 border border-primary form-group">
165+
<div class="p-1 border form-group">
166166
<label class="control-label font-weight-bold">NotificationMessage</label>
167167
<div>
168168
<span class="text-danger font-small" id="noNotificationKeyOrValue"></span>
@@ -237,7 +237,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
237237
</select>
238238
</div>
239239
</div>
240-
<div class="p-1 border border-primary form-group" data-bind="visible: authenticationType() == 'BASIC_AUTH'">
240+
<div class="p-1 border form-group" data-bind="visible: authenticationType() == 'BASIC_AUTH'">
241241
<label class="pt-1 control-label font-weight-bold">Username</label>
242242
<div>
243243
<input id="userNameInput" title="Enter user name" data-bind="textInput:userName" name="userName"
@@ -298,7 +298,7 @@ <h5>OR</h5>
298298
<img class="cursor-pointer" alt="Requirement Information" src="assets/images/information.png" data-toggle="tooltip" data-placement="top"
299299
title="Info: 'AND' is used between Conditions in Requirement groups, and 'OR' is used between Requirement groups."/>
300300
</div>
301-
<div class="p-1 border border-primary form-group">
301+
<div class="p-1 border form-group">
302302
<label class="control-label font-weight-bold">Requirement</label>
303303
<div id="requirementID">
304304

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

Lines changed: 66 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,28 @@
1818
<h1 id="test_rules_header">Test Rules</h1>
1919
</div>
2020
<div class="row px-3">
21-
<div class="p-1 col-lg-6 col-md-6 col-12 border border-right border-success" id="testRulesDOMObject">
22-
<div class="d-flex flex-wrap">
21+
<div class="p-1 col-lg-6 col-md-6 col-12 border border-right" id="testRulesDOMObject">
22+
<div class="d-flex flex-wrap sticky-button-bar">
2323
<div class="col-11">
24+
<button class="btn btn-primary add_rule mr-1 mt-1 d-inline-block" data-bind="click : $root.addRule.bind($data, ruleTemplate)">
25+
Add
26+
<i class="fa fa-fw fa-plus"></i>
27+
</button>
2428
<button class="btn btn-primary upload_rules mr-1 mt-1 d-inline-block">
25-
Load Rules from file
29+
Load From File
2630
<i class="fa fa-fw fa-upload"></i>
2731
</button>
2832
<input class="hide" type='file' id='uploadRulesFile' name='file'/>
29-
<button class="btn btn-primary download_rules_template rule-button mr-1 mt-1 d-inline-block">
30-
Get Template
33+
<button class="btn btn-primary download_rules mr-1 mt-1 d-inline-block">
34+
Download
3135
<i class="fa fa-fw fa-download"></i>
3236
</button>
33-
<button class="btn btn-primary add_rule rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addRule.bind($data, ruleTemplate)">
34-
Add Rule
35-
<i class="fa fa-fw fa-plus"></i>
37+
<button class="btn btn-primary download_rules_template mr-1 mt-1 d-inline-block">
38+
Get Template
39+
<i class="fa fa-fw fa-download"></i>
3640
</button>
37-
<button class="btn btn-danger clear_all_rules rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.clearAllRules.bind()">
38-
Clear All Rules
41+
<button class="btn btn-danger clear_all_rules mr-1 mt-1 d-inline-block" data-bind="click : $root.confirmClearAll.bind($data, 'rules')">
42+
Clear All
3943
<i class="fa fa-fw fa-trash"></i>
4044
</button>
4145
</div>
@@ -60,24 +64,28 @@ <h6>
6064
</div>
6165
</div>
6266
</div>
63-
<div class="p-1 col-lg-6 col-md-6 col-12 border border-right border-success" id="testEventsDOMObject">
64-
<div class="d-flex flex-wrap">
67+
<div class="p-1 col-lg-6 col-md-6 col-12 border border-right" id="testEventsDOMObject">
68+
<div class="d-flex flex-wrap sticky-button-bar">
6569
<div class="col-11">
70+
<button class="btn btn-primary add_event mr-1 mt-1 d-inline-block" data-bind="click : $root.addEvent.bind($data, {})">
71+
Add
72+
<i class="fa fa-fw fa-plus"></i>
73+
</button>
6674
<button class="btn btn-primary upload_events mr-1 mt-1 d-inline-block">
67-
Load Events from file
75+
Load From File
6876
<i class="fa fa-fw fa-upload"></i>
6977
</button>
7078
<input class="hide" type='file' id='uploadEventsFile' name='file'/>
71-
<button class="btn btn-primary download_events_template rule-button mr-1 mt-1 d-inline-block">
72-
Get Template
79+
<button class="btn btn-primary download_events mr-1 mt-1 d-inline-block">
80+
Download
7381
<i class="fa fa-fw fa-download"></i>
7482
</button>
75-
<button class="btn btn-primary add_event rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addEvent.bind($data, {})">
76-
Add Event
77-
<i class="fa fa-fw fa-plus"></i>
83+
<button class="btn btn-primary download_events_template mr-1 mt-1 d-inline-block">
84+
Get Template
85+
<i class="fa fa-fw fa-download"></i>
7886
</button>
79-
<button class="btn btn-danger clear_all_events rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.clearAllEvents.bind()">
80-
Clear All Events
87+
<button class="btn btn-danger clear_all_events mr-1 mt-1 d-inline-block" data-bind="click : $root.confirmClearAll.bind($data, 'events')">
88+
Clear All
8189
<i class="fa fa-fw fa-trash"></i>
8290
</button>
8391
</div>
@@ -103,26 +111,14 @@ <h6>
103111
</div>
104112
</div>
105113
</div>
106-
<div class="row-fluid divpad" id="submitButton">
107-
<div class="row">
108-
<div class="col-4">
109-
<button class="btn btn-success download_rules white-space-normal">
110-
Download Rules
111-
<i class="fa fa-fw fa-download"></i>
112-
</button>
113-
</div>
114-
<div class="col-4 text-center">
114+
<div class="row-fluid divpad footer-buttons" id="submitButton">
115+
<div class="row ">
116+
<div class="text-center">
115117
<button class="btn btn-success find_aggregated_object white-space-normal" data-bind="click : $root.submit.bind($data)">Find Aggregated Object</button>
116118
<button class="rules_info">
117119
<img src="assets/images/information.png"/>
118120
</button>
119121
</div>
120-
<div class="col-4">
121-
<button class="btn btn-success download_events white-space-normal float-right">
122-
Download Events
123-
<i class="fa fa-fw fa-download"></i>
124-
</button>
125-
</div>
126122
</div>
127123
</div>
128124
</div>
@@ -178,5 +174,39 @@ <h5 class="modal-title">Usage Information</h5>
178174
</div>
179175
</div>
180176
</div>
177+
178+
<!-- /. Clear all events -->
179+
<div class="modal delete-warning-modal fade" tabindex="-1" role="dialog">
180+
<div class="modal-dialog" role="document">
181+
<div class="modal-content">
182+
<div class="modal-header">
183+
<h5 class="modal-title">WARNING!</h5>
184+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
185+
<span aria-hidden="true">&times;</span>
186+
</button>
187+
</div>
188+
<div class="modal-body">
189+
<!-- ko if: $root.clearType()=="rules" -->
190+
<p id="delete-warning-modal-text" >Do you really want to remove all rules?</p>
191+
<!-- /ko-->
192+
193+
<!-- ko if: $root.clearType()=="events" -->
194+
<p id="delete-warning-modal-text" >Do you really want to remove all events?</p>
195+
<!-- /ko-->
196+
</div>
197+
<div class="modal-footer">
198+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
199+
200+
<!-- ko if: $root.clearType()=="rules" -->
201+
<button data-bind="click: $root.clearAllRules" type="button" class="btn btn-danger">Clear all rules</button>
202+
<!-- /ko-->
203+
204+
<!-- ko if: $root.clearType()=="events" -->
205+
<button data-bind="click: $root.clearAllEvents" type="button" class="btn btn-danger">Clear all events</button>
206+
<!-- /ko-->
207+
</div>
208+
</div>
209+
</div>
210+
</div>
181211
</body>
182-
</html>
212+
</html>

0 commit comments

Comments
 (0)