ui improvements
This commit is contained in:
parent
e785801106
commit
c8abebedc8
4 changed files with 21 additions and 16 deletions
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
}
|
||||
|
|
13
js/popup.js
13
js/popup.js
|
@ -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;
|
||||
});
|
||||
|
|
16
popup.html
16
popup.html
|
@ -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">
|
||||
|
|
Reference in a new issue