From d91fd19d5a2f97583e1a89007a86e12ada05ee7d Mon Sep 17 00:00:00 2001
From: didierfred <didierfred@gmail.com>
Date: Wed, 7 Feb 2018 09:02:27 +0100
Subject: [PATCH] New config User Interface
---
popup/config.html | 60 +++++++++++++++++++++++++++++++++++++++--------
popup/config.js | 27 +++++++++++----------
popup/menu.html | 24 ++++++++++++++++---
3 files changed, 86 insertions(+), 25 deletions(-)
diff --git a/popup/config.html b/popup/config.html
index 725e26c..58fc168 100644
--- a/popup/config.html
+++ b/popup/config.html
@@ -3,21 +3,62 @@
<html>
<head>
<meta charset="utf-8">
-
+ <title> Simple Modify Headers</title>
+ <style type="text/css">
+.button {
+ background-color: #008CBA; /* Blue */
+ border: none;
+ color: white;
+ padding: 1px 5px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 14px;
+ border-radius: 4px;
+}
+.button:hover {
+ background-color: #0070A0;
+}
+
+
+.colonne{
+background-color: #008CBA; /* Blue */
+color: white;
+}
+
+.title{
+color: #008CBA;
+}
+</style>
</head>
<body>
<table>
<tr>
-<td width="450">
- <h2> SIMPLE MODIFY HEADERS </h2>
- Url Pattern : <input id="targetPage" type="text" value=""></input>
+<td width="680" align="left">
+<h2 class="title"> SIMPLE MODIFY HEADERS </h2>
</td>
<td width="50">
<br>
-<img id="start_img" src="img/start.png" align="right" valign="center"> </img>
+<img id="start_img" src="img/start.png" align="left" valign="top"> </img>
+<br>
+</td>
+</tr>
+</table>
+<br>
+<table>
+<tr>
+
+<td width="450">
+
+ Url Pattern : <input size="50" id="targetPage" type="text" value=""></input>
+</td>
+
+<td width="270" align="right">
+<input type="button" class="button" style="width:100px" id="export_button" value="Export"></input> 
+<input type="button" class="button" style="width:100px" id="import_button" value="Import"></input>
</td>
</tr>
</table>
@@ -25,7 +66,7 @@
<br>
<br>
<table id="config_tab" id="config">
- <tr>
+ <tr class="colonne">
<td> Action </td>
<td> Header Field Name </td>
<td> Header Field Value </td>
@@ -35,10 +76,9 @@
</table>
<center>
<br>
-<input type="button" id="add_button" value="ADD NEW LINE" ></input>
-<input type="button" id="save_button" value="SAVE"></input>
-<input type="button" id="export_button" value="EXPORT"></input>
-<input type="button" id="import_button" value="IMPORT"></input>
+<input type="button" class="button" style="width:100px" id="add_button" value="Add new line" ></input>
+<input type="button" class="button" style="width:100px" id="save_button" value="Save"></input>
+
<iframe id="download" width="0" height="0" frameBorder="0">
</iframe>
diff --git a/popup/config.js b/popup/config.js
index 2664947..5f5a075 100644
--- a/popup/config.js
+++ b/popup/config.js
@@ -18,7 +18,7 @@ window.onload = function() {
document.getElementById('save_button').addEventListener('click',function (e) {save_data();});
document.getElementById('export_button').addEventListener('click',function (e) {export_data();});
document.getElementById('import_button').addEventListener('click',function (e) {import_data(e);});
- document.getElementById('add_button').addEventListener('click',function (e) {appendLine("add","-","-","off");});
+ document.getElementById('add_button').addEventListener('click',function (e) {appendLine("add","-","-","","off");});
document.getElementById('start_img').addEventListener('click',function (e) {start_modify();});
document.getElementById('targetPage').value=config.target_page;
started = localStorage.getItem("started");
@@ -30,10 +30,10 @@ function appendLine(action,header_name,header_value,comment,status) {
var html = "<td><select id=\"select_action" + line_number + "\" disable=false><option value=\"add\">add</option><option value=\"modify\">modify</option><option value=\"delete\">delete</option></select></td>";
html = html + "<td><input id=\"header_name"+ line_number + "\"></input></td>";
-html = html + "<td><input id=\"header_value"+ line_number + "\"></input></td>";
-html = html + "<td><input id=\"comment"+ line_number + "\"></input></td>";
+html = html + "<td><input size=\"30\" id=\"header_value"+ line_number + "\"></input></td>";
+html = html + "<td><input size=\"30\" id=\"comment"+ line_number + "\"></input></td>";
html = html + "<td><select id=\"select_status" + line_number + "\"><option value=\"on\"> on </option><option value=\"off\">off</option></select></td>";
-html = html + "<td><input type=\"button\" value=\"DELETE\" id=\"delete_button" + line_number + "\"></input> </td>";
+html = html + "<td><input class=\"button\" type=\"button\" value=\"Delete\" id=\"delete_button" + line_number + "\"></input> </td>";
var newTR = document.createElement("tr");
newTR.id="line" + line_number;
@@ -78,6 +78,7 @@ function save_data ()
function export_data()
{
+ save_data();
// Create file data
var to_export= create_configuration_data();
@@ -97,13 +98,16 @@ function export_data()
function import_data(evt)
{
// create an input field in the iframe
- var input = document.createElement("input");
- input.type="file";
- input.addEventListener('change', readSingleFile, false);
- var myf = document.getElementById("download");
- myf = myf.contentWindow.document || myf.contentDocument;
- myf.body.appendChild(input);
- input.click();
+ if (window.confirm("This will erase your actual configuration, do you want to continue ?"))
+ {
+ var input = document.createElement("input");
+ input.type="file";
+ input.addEventListener('change', readSingleFile, false);
+ var myf = document.getElementById("download");
+ myf = myf.contentWindow.document || myf.contentDocument;
+ myf.body.appendChild(input);
+ input.click();
+ }
}
@@ -123,7 +127,6 @@ function readSingleFile(e)
config = JSON.parse(contents);
if (config.format_version && config.target_page)
{
- alert("ok");
// store the conf in the local storage
localStorage.setItem("config",contents);
// load the new conf
diff --git a/popup/menu.html b/popup/menu.html
index e89ad4a..c3acab6 100644
--- a/popup/menu.html
+++ b/popup/menu.html
@@ -3,14 +3,32 @@
<html>
<head>
<meta charset="utf-8">
-
+ <style type="text/css">
+.button {
+ background-color: #008CBA; /* Blue */
+ border: none;
+ color: white;
+ padding: 1px 5px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 14px;
+ border-radius: 4px;
+ transition-duration: 0.4s;
+ width="100px";
+}
+
+.button:hover {
+ background-color: #0070A0;
+}
+</style>
</head>
<body>
+<input type="button" class="button" style="width:100px" id="config" value="Configure"></input>
+<input type="button" class="button" style="width:100px" id="start_stop" value="Start" ></input>
-<input type="button" id="start_stop" value="Start" ></input>
-<input type="button" id="config" value="Configure"></input>
</center>
<script type="text/javascript" src="menu.js"> </script>
--
GitLab