matomo-mirror/matomo-injector
Archived
1
0
Fork 0
Code Releases Activity

added popup teaxtarea for external scripts & css soft tabs set to 2

Browse source
This commit is contained in:
Dan Hromada 2014-05-09 08:51:48 +02:00
parent d2f753708d
commit 035addbdb6
3 changed files with 104 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
css/style.css
View file

@ -4,40 +4,42 @@
*/ */
.cutomjs { .cutomjs {
padding: 15px 25px; position: relative;
min-width: 500px; overflow: hidden;
min-height: 500px; padding: 12px 24px;
color: #4A4A4A; width: 548px;
font-size: 14px; height: 570px;
font-family: Arial, Helvetica, sans-serif; color: #4A4A4A;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
} }
a, a,
a:hover, a:hover,
.blue-text, .blue-text,
.blue-text:hover { .blue-text:hover {
color: #0F14F3; color: #0F14F3;
} }
.red-text, .red-text,
.red-text:hover { .red-text:hover {
color: #f10000; color: #f10000;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
.is-hidden { .is-hidden {
opacity: 0; display: none;
} }
.pure-g { .pure-g {
padding: 10px 0; padding: 10px 0;
} }
@ -49,24 +51,23 @@ a:hover {
} }
.host__name select { .host__name select {
min-width: 220px; min-width: 220px;
} }
.host__name a { .host__name a {
margin-left: 5px; margin-left: 5px;
font-size: 12px; font-size: 12px;
} }
.host__enable { .host__enable {
text-align: right; text-align: right;
font-size: 12px; line-height: 34px;
line-height: 34px;
} }
.host__enable input { .host__enable input {
position: relative; position: relative;
bottom: -2px; bottom: -2px;
margin-left: 2px; margin-left: 2px;
} }
@ -75,16 +76,50 @@ a:hover {
*/ */
.include { .include {
text-align: right; text-align: right;
} }
.include__body { .include__body {
color: #999; color: #999;
line-height: 35px; font-size: 12px;
line-height: 35px;
} }
.include__body select { .include__body select {
min-width: 110px; min-width: 110px;
}
.include__popbox {
}
.include__popbox__body {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
margin: -150px 0 0 -250px;
width: 500px;
height: 300px;
}
.include__popbox__body textarea {
width: 100%;
height: 100%;
color: #777;
font-size: 12px;
line-height: 180%;
resize: none;
}
.include__popbox__screenmask {
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 100%;
background-color: #ddd;
opacity: 0.4;
} }
@ -96,13 +131,13 @@ a:hover {
} }
.source__editor { .source__editor {
border: 1px solid #EBEBEB; border: 1px solid #EBEBEB;
} }
.source__editor pre { .source__editor pre {
margin: 0; margin: 0;
min-height: 380px; min-height: 380px;
width: 100%; width: 100%;
} }
/** /**
@ -112,74 +147,39 @@ a:hover {
.controls { .controls {
} }
.controls__save-version input { .controls__save-revision input {
font-size: 18px; font-size: 18px;
} }
.controls__save-version em { .controls__save-revision em {
margin-left: 10px; margin-left: 10px;
} }
.controls__versions { .controls__revisions {
line-height: 39px; text-align: right;
text-align: right; line-height: 39px;
} }
.controls__versions a { .controls__revisions a {
margin-right: 10px; margin-right: 10px;
} }
/** /**
* Font icons * Font icons
*/ */
@font-face { @font-face {
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-family: 'customjs'; font-family: 'customjs';
src: url('../font/customjs.svg?96127482#customjs') format('svg'); src: url('../font/customjs.svg?96127482#customjs') format('svg');
} }
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'customjs';
src: url('../font/customjs.svg?96127482#customjs') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
[class^="icon-"]:before, [class*=" icon-"]:before {
display: inline-block; display: inline-block;
margin-right: .2em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
width: 1em;
text-align: center;
text-decoration: inherit;
text-transform: none;
font-weight: normal;
font-style: normal;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal; font-variant: normal;
font-family: "customjs"; font-family: "customjs";
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
speak: none;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
} }
.icon-plus:before { content: '\e802'; } /* '' */ .icon-plus:before { content: '\e802'; } /* '' */

8
lib/popup.js
View file

@ -1,6 +1,14 @@
// /jquery/1.11.0/jquery.min.js // /jquery/1.11.0/jquery.min.js
// /jquery/2.1.0/jquery.min.js // /jquery/2.1.0/jquery.min.js
$('#open-popbox').on('click', function() {
$('#include-popbox').removeClass('is-hidden');
})
$('#screen-mask').on('click', function() {
$('#include-popbox').addClass('is-hidden');
});
$('#external-scripts').val("# Uncomment address of script below or type your own (one per line) \n" + "# cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js");
chrome.tabs.getSelected(null, function(tab) { chrome.tabs.getSelected(null, function(tab) {
var cjs = $('#cutomjs'), var cjs = $('#cutomjs'),
tsc = $('textarea[name="editor"]', cjs); tsc = $('textarea[name="editor"]', cjs);

33
popup.html
View file

@ -2,11 +2,14 @@
<html> <html>
<head> <head>
<title>Custom JavaScript</title> <title>Custom JavaScript</title>
<link href="css/pure/0.4.2/base-min.css" rel="stylesheet"> <link href="css/pure/0.4.2/base-min.css" rel="stylesheet">
<link href="css/pure/0.4.2/grids-nr-min.css" rel="stylesheet"> <link href="css/pure/0.4.2/grids-nr-min.css" rel="stylesheet">
<link href="css/pure/0.4.2/forms-nr-min.css" rel="stylesheet"> <link href="css/pure/0.4.2/forms-nr-min.css" rel="stylesheet">
<link href="css/pure/0.4.2/buttons-min.css" rel="stylesheet"> <link href="css/pure/0.4.2/buttons-min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="lib/ace/ace.js" charset="utf-8"></script> <script type="text/javascript" src="lib/ace/ace.js" charset="utf-8"></script>
</head> </head>
<body> <body>
@ -16,7 +19,7 @@
<div class="pure-g host"> <div class="pure-g host">
<div class="pure-u-3-5 host__name"> <div class="pure-u-3-5 host__name">
<select id="host" name="host"></select> <select id="host" name="host"></select>
<a class="is-hidden" id="goto-host" href="">go to</a> <a class="is-hidden" id="goto-host" href="#">go to</a>
</div> </div>
<div class="pure-u-2-5 host__enable"> <div class="pure-u-2-5 host__enable">
<label for="enable"> <label for="enable">
@ -28,9 +31,15 @@
<div class="pure-g include"> <div class="pure-g include">
<div class="pure-u-1 include__body"> <div class="pure-u-1 include__body">
You can inject <a id="include-custom">your own external scripts</a> or <label for="include">one of predefined:</label> You can inject <a href="#" id="open-popbox">your own external scripts</a> or <label for="include">one of predefined:</label>
<select id="include" name="include"></select> <select id="include" name="include"></select>
</div> </div>
<div class="include__popbox is-hidden" id="include-popbox">
<div class="include__popbox__body">
<textarea name="external-scripts" id="external-scripts"></textarea>
</div>
<div class="include__popbox__screenmask" id="screen-mask"></div>
</div>
</div><!-- .include --> </div><!-- .include -->
<div class="pure-g source"> <div class="pure-g source">
@ -40,21 +49,19 @@
</div><!-- .source --> </div><!-- .source -->
<div class="pure-g controls"> <div class="pure-g controls">
<div class="pure-u-2-5 controls__save-version"> <div class="pure-u-2-5 controls__save-revision">
<input type="submit" class="pure-button pure-button-primary" name="save" value="save"> <input type="submit" class="pure-button pure-button-primary" name="save" value="save">
<em>revision <span id="versions-counter">1 of 1</span> </em> <em id="revision-name">revision <span id="revision-counter">1 of 1</span></em>
</div> </div>
<div class="pure-u-3-5 controls__versions"> <div class="pure-u-3-5 controls__revisions">
<a class="red-text" id="delete-version" href=""> <a class="red-text" id="delete-revision" href="#">delete current revision</a>
delete current revision <button id="prev-revision" class="pure-button icon-left-open pure-button-disabled"></button>
</a> <button id="next-revision" class="pure-button icon-right-open"></button>
<button id="prev-version" class="pure-button icon-left-open pure-button-disabled"></button>
<button id="next-version" class="pure-button icon-right-open"></button>
</div> </div>
</div><!-- .controls --> </div><!-- .controls -->
</form> </form>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="lib/popup.js"></script>
<script src="lib/popup.js"></script>
</body> </body>
</html> </html>