diff --git a/instance/index.html b/instance/index.html
index 99631eeefaa9318e6ff528b349b9c7f2064e8daf..048d4e2250ca9e182624093d36f493457b93c47a 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -17,14 +17,37 @@
href="../style/fontawesome-free-5.15.1-web/css/all.min.css"
/>
<script src="./main.js"></script>
- <style>
- ::-webkit-scrollbar {
- display: none;
- }
- </style>
<script></script>
</head>
<body>
+ <div
+ id="modal-settings"
+ class="modal bd-example-modal-lg"
+ tabindex="-1"
+ role="dialog"
+ >
+ <div
+ class="modal-dialog modal-lg modal-dialog-centered"
+ role="document"
+ >
+ <div class="modal-content">
+ <div class="modal-header">
+ <h2 class="modal-title">Amadeus settings</h2>
+ <button
+ type="button"
+ class="btn btn-outline-primary btn-lg modal-close"
+ aria-label="Close"
+ >
+ <i class="fas fa-window-close"></i>
+ </button>
+ </div>
+ <div class="modal-body">
+ <p>Some text in the Modal Body</p>
+ <p>Some other text...</p>
+ </div>
+ </div>
+ </div>
+ </div>
<div id="mainFrame" class="container-fluid">
<div
id="buttonPanelListLeft"
diff --git a/instance/main.js b/instance/main.js
index 514a386c7dacee2bb2f8a354b445d5bdb8b9daba..30a1088d4db1d389f3b260a1ad6733c5f3627a6e 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -134,7 +134,33 @@ function createButtonList(list) {
<div class="p-1 bd-highlight mb-1 mr-auto ml-auto" style="width: 60%;-webkit-app-region: no-drag;">
<input id="filterInput" type="text" class="form-control filterInput" placeholder="Filter...">
</div>
- <div class="btn-group" role="group">${renderHtmlRight}</div>`;
+ <div class="btn-group" role="group">
+ <button id="btn-settings" type="button" class="btn btn-secondary p-2 bd-highlight"
+ style="-webkit-app-region: no-drag" data-toggle="tooltip"
+ data-placement="bottom" title="Open settings">
+ <i class="fas fa-cogs"></i>
+ </button>
+ ${renderHtmlRight}
+ </div>`;
+
+ /* Set things up for the settings modal*/
+ var modal = document.getElementById('modal-settings');
+ var btn = document.getElementById('btn-settings');
+ var span = document.getElementsByClassName('modal-close')[0];
+
+ btn.onclick = function () {
+ modal.style.display = 'block';
+ };
+
+ span.onclick = function () {
+ modal.style.display = 'none';
+ };
+
+ window.onclick = function (event) {
+ if (event.target == modal) {
+ modal.style.display = 'none';
+ }
+ };
}
/* Create the left panel */
diff --git a/style/css/instance.css b/style/css/instance.css
index a7b997213a6a819fcae72d5475c83b41719ab0e6..417ad3462ae6ec5297a6b73f4a44b9ebc3447294 100644
--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -5,6 +5,10 @@
url("../fonts/LinotypeIPACustom3.svg") format('svg');
}
+::-webkit-scrollbar {
+ display: none;
+}
+
body {
overflow: hidden;
height: 100vh;