Skip to content

GitLab

Verified Commit c9efdce0 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Add button, so the user can save with a click

parent 3419b49c
Hide whitespace changes
Inline Side-by-side
src/options.css deleted 100644 → 0
View file @ 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;
}
}
src/options.html
View file @ c9efdce0
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
<div class="files-container"> <div class="files-container">
<ol class="files"></ul> <ol class="files"></ul>
</div> </div>
<button class="btn-save">Save</button>
<h2>.. when the hostname matches</h2> <h2>.. when the hostname matches</h2>
<p> <p>
A comma separated list of hostnames that have to match, A comma separated list of hostnames that have to match,
......
src/options.js
View file @ c9efdce0
...@@ -90,6 +90,8 @@ ...@@ -90,6 +90,8 @@
const getSelectedFiletype = n => n.options[n.selectedIndex].value; const getSelectedFiletype = n => n.options[n.selectedIndex].value;
const save = function(msg) { const save = function(msg) {
msg = typeof msg === "string" ? msg : "Configuration saved.";
const files = []; const files = [];
$$("li.file").forEach((item) => { $$("li.file").forEach((item) => {
const hostnames = []; const hostnames = [];
...@@ -390,7 +392,7 @@ ...@@ -390,7 +392,7 @@
} }
if (evt.key === "s") { if (evt.key === "s") {
evt.preventDefault(); evt.preventDefault();
save("Configuration saved."); save();
return false; return false;
} }
} }
...@@ -411,6 +413,8 @@ ...@@ -411,6 +413,8 @@
} }
}; };
$(".btn-save").addEventListener("click", save, { passive: true });
window.addEventListener("keydown", onKeyDownCallback, { window.addEventListener("keydown", onKeyDownCallback, {
passive: false passive: false
}); });
......
src/options.scss
View file @ c9efdce0
...@@ -74,6 +74,10 @@ input[type="checkbox"] { ...@@ -74,6 +74,10 @@ input[type="checkbox"] {
background-color: #de6a73; background-color: #de6a73;
} }
.btn-save {
background-color: #19cf85;
}
button:focus { button:focus {
outline: none; 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