Brand new options page with tabs.

chrome_point_plus/css/point-plus.css

@@ -1,3 +1,4 @@
+/* Point.Im */
 /* MarkItUp margin fix */
 div#markItUpText-input {
     margin-top: 30px;
@@ -7,3 +8,96 @@ div#markItUpText-input {
 .markItUp  {
     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;
+}

chrome_point_plus/js/jquery.idTabs.min.js

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

chrome_point_plus/options.html

@@ -1,10 +1,23 @@
 <html>
-    <head><title>Point Plus options</title></head>
+    <head>
+        <title>Point Plus options</title>
         
-    <body style="width: 400px;">
+        <link rel="stylesheet" href="css/point-plus.css" type="text/css"/>
-        <h2>Point+ options</h2>
+        <script src="js/jquery-1.10.1.min.js"></script>
+        <script src="js/jquery.idTabs.min.js"></script>
+    </head>
 
-        <h4>Fancybox pop-up</h4>
+    <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>
@@ -14,11 +27,9 @@
                     <p>
                         <label><input type="checkbox" id="option-fancybox-posts">Use for post links (including comments)</label>
                     </p>
-        <h4>Hotkeys</h4>
+                </div>
-        <p>
+
-            <label><input type="checkbox" id="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
+                <div id="look-and-feel">
-        </p>
-        <h4>Look and feel</h4>
                     <p>
                         <label><input type="checkbox" id="option-layout-fluid">Fluid layout</label>
                     </p>
@@ -31,15 +42,28 @@
                     <p>
                         <label><input type="checkbox" id="option-search-with-google">Use Google search in header
                     </p>
-        <br>
+                </div>
-        <div id="status"></div>
-        <button id="save">Save</button>
 
+                <div id="other">
                     <p>
-            <a href="https://bitbucket.org/skobkin/chrome_point_plus/issues?status=new&status=open" target="_blank">Send bug report</a>
+                        <label><input type="checkbox" id="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
                     </p>
-    </body>
+                </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>
 </html>