added popup teaxtarea for external scripts & css soft tabs set to 2
This commit is contained in:
Dan Hromada
parent
d2f753708d
commit
035addbdb6
3 changed files with 104 additions and 89 deletions
152
css/style.css
152
css/style.css
|
|
@ -4,40 +4,42 @@
|
|||
*/
|
||||
|
||||
.cutomjs {
|
||||
padding: 15px 25px;
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
color: #4A4A4A;
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 12px 24px;
|
||||
width: 548px;
|
||||
height: 570px;
|
||||
color: #4A4A4A;
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
.blue-text,
|
||||
.blue-text:hover {
|
||||
color: #0F14F3;
|
||||
color: #0F14F3;
|
||||
}
|
||||
|
||||
.red-text,
|
||||
.red-text:hover {
|
||||
color: #f10000;
|
||||
color: #f10000;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pure-g {
|
||||
padding: 10px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -49,24 +51,23 @@ a:hover {
|
|||
}
|
||||
|
||||
.host__name select {
|
||||
min-width: 220px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.host__name a {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.host__enable {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
line-height: 34px;
|
||||
text-align: right;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.host__enable input {
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -75,16 +76,50 @@ a:hover {
|
|||
*/
|
||||
|
||||
.include {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.include__body {
|
||||
color: #999;
|
||||
line-height: 35px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border: 1px solid #EBEBEB;
|
||||
border: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.source__editor pre {
|
||||
margin: 0;
|
||||
min-height: 380px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
min-height: 380px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -112,74 +147,39 @@ a:hover {
|
|||
.controls {
|
||||
}
|
||||
|
||||
.controls__save-version input {
|
||||
font-size: 18px;
|
||||
.controls__save-revision input {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.controls__save-version em {
|
||||
margin-left: 10px;
|
||||
.controls__save-revision em {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.controls__versions {
|
||||
line-height: 39px;
|
||||
text-align: right;
|
||||
.controls__revisions {
|
||||
text-align: right;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.controls__versions a {
|
||||
margin-right: 10px;
|
||||
.controls__revisions a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Font icons
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'customjs';
|
||||
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;
|
||||
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-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'; } /* '' */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
// /jquery/1.11.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) {
|
||||
var cjs = $('#cutomjs'),
|
||||
tsc = $('textarea[name="editor"]', cjs);
|
||||
|
|
|
|||
33
popup.html
33
popup.html
|
|
@ -2,11 +2,14 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Custom JavaScript</title>
|
||||
|
||||
<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/forms-nr-min.css" rel="stylesheet">
|
||||
<link href="css/pure/0.4.2/buttons-min.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>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -16,7 +19,7 @@
|
|||
<div class="pure-g host">
|
||||
<div class="pure-u-3-5 host__name">
|
||||
<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 class="pure-u-2-5 host__enable">
|
||||
<label for="enable">
|
||||
|
|
@ -28,9 +31,15 @@
|
|||
|
||||
<div class="pure-g include">
|
||||
<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>
|
||||
</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 class="pure-g source">
|
||||
|
|
@ -40,21 +49,19 @@
|
|||
</div><!-- .source -->
|
||||
|
||||
<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">
|
||||
<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 class="pure-u-3-5 controls__versions">
|
||||
<a class="red-text" id="delete-version" href="">
|
||||
delete current revision
|
||||
</a>
|
||||
<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 class="pure-u-3-5 controls__revisions">
|
||||
<a class="red-text" id="delete-revision" href="#">delete current revision</a>
|
||||
<button id="prev-revision" class="pure-button icon-left-open pure-button-disabled"></button>
|
||||
<button id="next-revision" class="pure-button icon-right-open"></button>
|
||||
</div>
|
||||
</div><!-- .controls -->
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="lib/popup.js"></script>
|
||||
</div>
|
||||
<script src="lib/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue