1
0
Fork 0

ui improvements

This commit is contained in:
Lukas Winkler 2017-08-27 12:00:37 +02:00
parent e785801106
commit c8abebedc8
4 changed files with 21 additions and 16 deletions

View file

@ -82,5 +82,9 @@
"site_id_placeholder": {
"message": "site ID",
"description": "placeholder text of site ID input"
},
"expert_mode_label": {
"message": "Expert mode",
"description": "label of expert mode checkbox"
}
}

View file

@ -7,7 +7,7 @@
overflow: hidden;
padding: 12px 24px;
width: 548px;
height: 570px;
/*height: 570px;*/
color: #4A4A4A;
font-size: 14px;
font-family: sans-serif;
@ -94,7 +94,7 @@ a:hover {
.source__editor pre {
margin: 0;
min-height: 380px;
min-height: 200px;
width: 100%;
line-height: 150%;
}

View file

@ -18,9 +18,9 @@ document.addEventListener('DOMContentLoaded', function() {
expertMode: document.getElementById("expert-mode")
},
applyi18n: function() {
var translatableIDs = ["error-message", "error-tip", "save", "reset", "goto-host", "enable-description", "host-label"];
var translatableIDs = ["error-message", "error-tip", "save", "reset", "goto-host", "enable-description", "host-label", "expert-mode-label"];
translatableIDs.forEach(function(id) {
var translateKey = id.replace("-", "_");
var translateKey = id.replace(/-/g, "_");
document.getElementById(id).innerText = chrome.i18n.getMessage(translateKey);
});
var translatableTitles = ["host", "goto_host", "save", "reset", "draft_remove", "piwik_url", "site_id"];
@ -264,15 +264,18 @@ document.addEventListener('DOMContentLoaded', function() {
if (!siteID || !piwikURL) {
return false;
}
console.warn(piwikURL, siteID);
var js = popup.piwik.defaultTrackingCode;
js = js.replace("{{PIWIKURL}}", piwikURL);
js = js.replace("{{SITEID}}", String(siteID));
popup.editor.apply(js)
},
setExpertMode: function(expertMode, onLoad) {
console.warn(expertMode);
popup.editor.editorInstance.setReadOnly(!expertMode);
popup.editor.editorInstance.setOptions({
readOnly: !expertMode,
highlightActiveLine: expertMode,
highlightGutterLine: expertMode
});
popup.editor.editorInstance.container.style.backgroundColor = expertMode ? "white" : "#eaeded";
popup.el.piwikForm.querySelectorAll("input").forEach(function(input) {
input.disabled = expertMode;
});

View file

@ -4,7 +4,7 @@
<title></title>
<link href="libs/purecss/base-min.css" rel="stylesheet">
<link href="libs/purecss/grids-responsive-min.css" rel="stylesheet">
<link href="libs/purecss/grids-min.css" rel="stylesheet">
<link href="libs/purecss/forms-nr-min.css" rel="stylesheet">
<link href="libs/purecss/buttons-min.css" rel="stylesheet">
@ -32,16 +32,14 @@
<input id="piwik-url" title="">
<input type="number" id="site-id" min="0" title="">
</form>
<form class="pure-form" id="piwik-form">
<label for="expert-mode">gffdgkfdglj</label>
<form class="pure-form">
<label for="expert-mode" id="expert-mode-label"></label>
<input type="checkbox" id="expert-mode">
</form>
<div class="pure-g source">
<div class="pure-u-1 source__editor">
<pre id="ace-editor"></pre>
<input type="hidden" name="script" value="">
</div>
</div><!-- .source -->
<div class="source__editor">
<pre id="ace-editor"></pre>
<input type="hidden" name="script" value="">
</div>
<div class="pure-g">
<div class="pure-u-3-5 controls">