Brand new options page with tabs.

This commit is contained in:
skobkin 2014-03-20 13:01:59 -07:00
parent 1722478df8
commit 5fa6c94c91
3 changed files with 161 additions and 42 deletions

View file

@ -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;
}

View file

@ -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)})();

View file

@ -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 &amp; 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>