added popup teaxtarea for external scripts & css soft tabs set to 2
This commit is contained in:
parent
d2f753708d
commit
035addbdb6
3 changed files with 104 additions and 89 deletions
150
css/style.css
150
css/style.css
|
@ -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,21 +147,21 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -134,52 +169,17 @@ a:hover {
|
||||||
* 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'; } /* '' */
|
||||||
|
|
|
@ -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);
|
||||||
|
|
31
popup.html
31
popup.html
|
@ -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>
|
||||||
|
|
Reference in a new issue