Brand new options page with tabs.
This commit is contained in:
skobkin
parent
1722478df8
commit
5fa6c94c91
|
|
@ -1,3 +1,4 @@
|
|||
/* Point.Im */
|
||||
/* MarkItUp margin fix */
|
||||
div#markItUpText-input {
|
||||
margin-top: 30px;
|
||||
|
|
@ -5,5 +6,98 @@ div#markItUpText-input {
|
|||
|
||||
/* MarkItUp override */
|
||||
.markItUp {
|
||||
width:770px;
|
||||
width: 770px;
|
||||
}
|
||||
|
||||
/* Point+ */
|
||||
/* Options page */
|
||||
body.options {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
/* Tabs style */
|
||||
.usual {
|
||||
width:450px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.usual ul {
|
||||
padding: 0 0 10px 0;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
.usual li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
.usual ul a {
|
||||
display: block;
|
||||
padding: 6px 10px;
|
||||
text-decoration: none!important;
|
||||
margin: 1px;
|
||||
margin-left: 0;
|
||||
font: 12px Georgia;
|
||||
color: #FFF;
|
||||
background: #C8C8C8;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
.usual ul a:hover {
|
||||
color: #FFF;
|
||||
background: #BBB;
|
||||
}
|
||||
.usual ul a.selected {
|
||||
margin-bottom: 0;
|
||||
color: #FFF;
|
||||
background: #A5A5A5;
|
||||
cursor: default;
|
||||
}
|
||||
.usual div#tabs-content {
|
||||
margin: 0 5px 0 0;
|
||||
padding: 5px;
|
||||
background-color: #A5A5A5;
|
||||
border-radius: 0 15px 0 0;
|
||||
|
||||
}
|
||||
.usual #panel {
|
||||
background: #B5B5B5;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 15px 15px;
|
||||
}
|
||||
.usual #panel button.button {
|
||||
background-color: #C8C8C8;
|
||||
border-radius:15px;
|
||||
border:1px solid #dcdcdc;
|
||||
display:inline-block;
|
||||
cursor:pointer;
|
||||
color:#000;
|
||||
font-family:Arial;
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
padding: 5px 25px;
|
||||
text-decoration:none;
|
||||
text-shadow:0px 1px 0px #ffffff;
|
||||
}
|
||||
.usual #panel button.button:hover{
|
||||
background-color:#BBB;
|
||||
}
|
||||
.usual #panel button.button:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
.usual div#tabs-content div {
|
||||
padding: 3px 0 0 0;
|
||||
margin-top: -15px;
|
||||
clear: left;
|
||||
font: 10pt Georgia;
|
||||
color: #FFF;
|
||||
}
|
||||
.usual div#tabs-content div p {
|
||||
padding: 5px 0 0 15px;
|
||||
}
|
||||
.usual div a {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
(function(){var g={jQuery:"http://code.jquery.com/jquery-latest.min.js"};var j=function(){(function(k){k.fn.idTabs=function(){var n={};for(var m=0;m<arguments.length;++m){var l=arguments[m];switch(l.constructor){case Object:k.extend(n,l);break;case Boolean:n.change=l;break;case Number:n.start=l;break;case Function:n.click=l;break;case String:if(l.charAt(0)=="."){n.selected=l}else{if(l.charAt(0)=="!"){n.event=l}else{n.start=l}}break}}if(typeof n["return"]=="function"){n.change=n["return"]}return this.each(function(){k.idTabs(this,n)})};k.idTabs=function(n,m){var q=(k.metadata)?k(n).metadata():{};var o=k.extend({},k.idTabs.settings,q,m);if(o.selected.charAt(0)=="."){o.selected=o.selected.substr(1)}if(o.event.charAt(0)=="!"){o.event=o.event.substr(1)}if(o.start==null){o.start=-1}var l=function(){if(k(this).is("."+o.selected)){return o.change}var u="#"+this.href.split("#")[1];var s=[];var t=[];k("a",n).each(function(){if(this.href.match(/#/)){s.push(this);t.push("#"+this.href.split("#")[1])}});if(o.click&&!o.click.apply(this,[u,t,n,o])){return o.change}for(i in s){k(s[i]).removeClass(o.selected)}for(i in t){k(t[i]).hide()}k(this).addClass(o.selected);k(u).show();return o.change};var p=k("a[href*='#']",n).unbind(o.event,l).bind(o.event,l);p.each(function(){k("#"+this.href.split("#")[1]).hide()});var r=false;if((r=p.filter("."+o.selected)).length){}else{if(typeof o.start=="number"&&(r=p.eq(o.start)).length){}else{if(typeof o.start=="string"&&(r=p.filter("[href*='#"+o.start+"']")).length){}}}if(r){r.removeClass(o.selected);r.trigger(o.event)}return o};k.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};k.idTabs.version="2.2";k(function(){k(".idTabs").idTabs()})})(jQuery)};var a=function(l,k){k=k.split(".");while(l&&k.length){l=l[k.shift()]}return l};var c=document.getElementsByTagName("head")[0];var f=function(k){var l=document.createElement("script");l.type="text/javascript";l.src=k;c.appendChild(l)};var e=document.getElementsByTagName("script");var h=e[e.length-1].src;var b=true;for(d in g){if(a(this,d)){continue}b=false;f(g[d])}if(b){return j()}f(h)})();
|
||||
|
|
@ -1,45 +1,69 @@
|
|||
<html>
|
||||
<head><title>Point Plus options</title></head>
|
||||
|
||||
<body style="width: 400px;">
|
||||
<h2>Point+ options</h2>
|
||||
|
||||
<h4>Fancybox pop-up</h4>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-fancybox-images">Use for images</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-fancybox-videos">Use for videos (YouTube, ...)</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-fancybox-posts">Use for post links (including comments)</label>
|
||||
</p>
|
||||
<h4>Hotkeys</h4>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
|
||||
</p>
|
||||
<h4>Look and feel</h4>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-layout-fluid">Fluid layout</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-images-load-original">Load original images instead of thumbnails
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-visual-editor-post">Show visual editor for posts
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-search-with-google">Use Google search in header
|
||||
</p>
|
||||
<br>
|
||||
<div id="status"></div>
|
||||
<button id="save">Save</button>
|
||||
<head>
|
||||
<title>Point Plus options</title>
|
||||
|
||||
<p>
|
||||
<a href="https://bitbucket.org/skobkin/chrome_point_plus/issues?status=new&status=open" target="_blank">Send bug report</a>
|
||||
</p>
|
||||
<link rel="stylesheet" href="css/point-plus.css" type="text/css"/>
|
||||
<script src="js/jquery-1.10.1.min.js"></script>
|
||||
<script src="js/jquery.idTabs.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="options">
|
||||
<div class="tabs usual">
|
||||
<ul class="idTabs">
|
||||
<li><a href="#popups">Pop-ups</a></li>
|
||||
<li><a href="#look-and-feel">Look & Feel</a></li>
|
||||
<li><a href="#other">Other</a></li>
|
||||
<li><a href="#feedback">Feedback</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="tabs-content">
|
||||
<div id="popups">
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-fancybox-images">Use for images</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-fancybox-videos">Use for videos (YouTube, ...)</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-fancybox-posts">Use for post links (including comments)</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="look-and-feel">
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-layout-fluid">Fluid layout</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-images-load-original">Load original images instead of thumbnails
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-visual-editor-post">Show visual editor for posts
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-search-with-google">Use Google search in header
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="other">
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="feedback">
|
||||
<p>
|
||||
If you find an error do not hesitate to <a href="https://bitbucket.org/skobkin/chrome_point_plus/issues?status=new&status=open" target="_blank">send me a bug report</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="panel">
|
||||
<div id="status"></div>
|
||||
<button id="save" class="button">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/options.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="js/options.js"></script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue