Commit c9efdce0 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸

Add button, so the user can save with a click

parent 3419b49c
@font-face {
font-family: "monospace";
font-style: normal;
font-weight: 400;
}
html,
body {
background-color: #272b30;
color: #fff;
}
body {
font-size: 110%;
line-height: 1.8em;
}
a:link,
a:active,
a:visited {
color: #666;
}
.contentwrapper {
margin: 0 auto;
max-width: 100%;
padding-bottom: 42px;
width: 776px;
}
h1 {
border-bottom: 2px solid #f2cf66;
color: #de6a73;
}
h1 span {
color: #19cf85;
}
.hidden {
display: none;
}
.gorilla-heart {
color: #f00;
font-size: 170%;
padding: 5px;
}
.btn-file-add {
background-color: #19cf85;
}
.btn-file-remove {
background-color: #de6a73;
}
button:focus {
outline: none;
}
.hostnames,
.input-file-url {
background-color: #222;
border-radius: 10px;
border: 5px solid #444;
color: #f2cf66;
font-size: 16px;
padding: 10px;
width: 350px;
}
.hostnames {
width: 100%;
}
.hostnames,
.input-file-url:focus {
outline: none;
}
.clickable-url {
cursor: pointer;
text-decoration: underline;
}
.select-file-type {
background-color: #112233;
}
.select-file-type:focus {
outline: none;
}
.select-file-type option:checked {
background-color: #051525;
}
kbd {
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
color: #333;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.4;
margin: 0 0.1em;
padding: 0.1em 0.6em;
text-shadow: 0 1px 0 #fff;
}
select {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
}
button {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
}
button:active {
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
nav {
margin-top: 20px;
}
footer {
bottom: 1%;
color: #666;
display: block;
position: fixed;
right: 1%;
text-align: right;
}
footer a:link,
footer a:visited {
border-bottom: 1px solid;
text-decoration: none;
}
footer a:hover {
border-bottom: 1px solid red;
}
.modal {
display: none;
position: fixed;
z-index: 7;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
.modal-container {
background-color: #272b30;
margin: auto;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
}
.modal-content {
align-items: center;
color: black;
display: flex;
justify-content: center;
flex-direction: column;
h1,
p {
text-align: center;
color: #4dde6e;
text-shadow: -1px -1px 0 #222, 1px -1px 0 #222,
-1px 1px 0 #222, 1px 1px 0 #222;
}
input {
background-color: #222;
border-radius: 10px;
border: 5px solid #444;
color: #f2cf66;
font-size: 16px;
padding: 10px;
width: 90%;
display: block;
margin: {
bottom: 20px;
}
&:focus {
outline: none;
}
}
button {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
&.new-document {
background-color: #0079d3;
}
&.cancel {
background-color: #f44336;
}
&.clipboard {
background-color: #19cf85;
}
&:active {
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
}
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
}
......@@ -13,6 +13,7 @@
<div class="files-container">
<ol class="files"></ul>
</div>
<button class="btn-save">Save</button>
<h2>.. when the hostname matches</h2>
<p>
A comma separated list of hostnames that have to match,
......
......@@ -90,6 +90,8 @@
const getSelectedFiletype = n => n.options[n.selectedIndex].value;
const save = function(msg) {
msg = typeof msg === "string" ? msg : "Configuration saved.";
const files = [];
$$("li.file").forEach((item) => {
const hostnames = [];
......@@ -390,7 +392,7 @@
}
if (evt.key === "s") {
evt.preventDefault();
save("Configuration saved.");
save();
return false;
}
}
......@@ -411,6 +413,8 @@
}
};
$(".btn-save").addEventListener("click", save, { passive: true });
window.addEventListener("keydown", onKeyDownCallback, {
passive: false
});
......
......@@ -74,6 +74,10 @@ input[type="checkbox"] {
background-color: #de6a73;
}
.btn-save {
background-color: #19cf85;
}
button:focus {
outline: none;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment