tabbed preferences

diff --git a/backend.php b/backend.php
index 353062d193b19b600ca5dfd2353f1e80998c27ab..8b8a90709735f631055142f3612f1f3abe3a5faa 100644 (file)
--- a/backend.php
+++ b/backend.php
@@ -947,6 +947,13 @@
                
                        }
 
+               print "<h3>OPML Import</h3>
+               <form   enctype=\"multipart/form-data\" method=\"POST\" action=\"opml.php\">
+                       File: <input id=\"opml_file\" name=\"opml_file\" type=\"file\">&nbsp;
+                       <input class=\"button\" name=\"op\" onclick=\"return validateOpmlImport();\"
+                               type=\"submit\" value=\"Import\">
+                       </form>";
+
        }
 
        if ($op == "pref-filters") {

diff --git a/prefs.js b/prefs.js
index 1b52776745406337f666267e10d01d39b1d5ab31..0f545b7f88fcc9edf59f3fb9a000751b2039997c 100644 (file)
--- a/prefs.js
+++ b/prefs.js
@@ -9,6 +9,8 @@ var active_feed = false;
 var active_filter = false;
 var active_label = false;
 
+var active_tab = false;
+
 /*@cc_on @*/
 /*@if (@_jscript_version >= 5)
 // JScript gives us Conditional compilation, we can cope with old IE versions.
@@ -29,10 +31,9 @@ if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 }
 
 function feedlist_callback() {
-       var container = document.getElementById('feedConfPane');
+       var container = document.getElementById('prefContent');
        if (xmlhttp.readyState == 4) {
                container.innerHTML=xmlhttp.responseText;
-
                if (active_feed) {
                        var row = document.getElementById("FEEDR-" + active_feed);
                        if (row) {
@@ -45,12 +46,14 @@ function feedlist_callback() {
                                checkbox.checked = true;
                        }
                }
+               p_notify("");
        }
 }
 
 function filterlist_callback() {
-       var container = document.getElementById('filterConfPane');
+       var container = document.getElementById('prefContent');
        if (xmlhttp.readyState == 4) {
+
                container.innerHTML=xmlhttp.responseText;
 
                if (active_filter) {
@@ -66,11 +69,12 @@ function filterlist_callback() {
                                checkbox.checked = true;
                        }
                }
+               p_notify("");
        }
 }
 
 function labellist_callback() {
-       var container = document.getElementById('labelConfPane');
+       var container = document.getElementById('prefContent');
        if (xmlhttp.readyState == 4) {
                container.innerHTML=xmlhttp.responseText;
 
@@ -87,6 +91,7 @@ function labellist_callback() {
                                checkbox.checked = true;
                        }
                }
+               p_notify("");
        }
 }
 function notify_callback() {
@@ -104,7 +109,9 @@ function updateFeedList() {
                return
        }
 
-       document.getElementById("feedConfPane").innerHTML = "Loading feeds, please wait...";
+//     document.getElementById("prefContent").innerHTML = "Loading feeds, please wait...";
+
+       p_notify("Loading, please wait...");
 
        xmlhttp.open("GET", "backend.php?op=pref-feeds", true);
        xmlhttp.onreadystatechange=feedlist_callback;
@@ -670,7 +677,9 @@ function updateFilterList() {
                return
        }
 
-       document.getElementById("filterConfPane").innerHTML = "Loading filters, please wait...";
+//     document.getElementById("prefContent").innerHTML = "Loading filters, please wait...";
+
+       p_notify("Loading, please wait...");
 
        xmlhttp.open("GET", "backend.php?op=pref-filters", true);
        xmlhttp.onreadystatechange=filterlist_callback;
@@ -685,28 +694,43 @@ function updateLabelList() {
                return
        }
 
-       document.getElementById("labelConfPane").innerHTML = "Loading labels, please wait...";
+       p_notify("Loading, please wait...");
+
+//     document.getElementById("prefContent").innerHTML = "Loading labels, please wait...";
 
        xmlhttp.open("GET", "backend.php?op=pref-labels", true);
        xmlhttp.onreadystatechange=labellist_callback;
        xmlhttp.send(null);
-
 }
 
+function selectTab(id) {
 
-function expandPane(id) {
-
-       var container;
-
-       container = document.getElementById(id);
-
-       if (id == "feedConfPane") {
+       if (id == "feedConfig") {
                updateFeedList();
-       } else if (id == "filterConfPane") {
+       } else if (id == "filterConfig") {
                updateFilterList();
-       } else if (id == "labelConfPane") {
+       } else if (id == "labelConfig") {
                updateLabelList();
        }
+
+       var tab = document.getElementById(active_tab + "Tab");
+
+       if (tab) {
+               if (tab.className.match("Selected")) {
+                       tab.className = "prefsTab";
+               }
+       }
+
+       tab = document.getElementById(id + "Tab");
+
+       if (tab) {
+               if (!tab.className.match("Selected")) {
+                       tab.className = tab.className + "Selected";
+               }
+       }
+
+       active_tab = id;
+
 }
 
 function init() {
@@ -720,7 +744,8 @@ function init() {
                return;
        }
 
-//     updateFeedList();
+       selectTab("feedConfig");
+
        document.onkeydown = hotkey_handler;
        notify("");
 

diff --git a/prefs.php b/prefs.php
index 17b93f47a1d8ec740230a591ef3db2ec0b8e8a22..2e3d9632621270be5bc325e357e684155c6a0d7c 100644 (file)
--- a/prefs.php
+++ b/prefs.php
@@ -31,50 +31,24 @@
 </tr>
 <? } ?>
 <tr>
-       <td class="prefsToolbar" valign="middle" align="right">
+       <td class="prefsTabs" align="left" valign="bottom">
+               <input id="feedConfigTab" class="prefsTab" type="submit" value="Feed Configuration"
+                       onclick="selectTab('feedConfig')">
+               <input id="filterConfigTab" class="prefsTab" type="submit" value="Content Filtering"
+                       onclick="selectTab('filterConfig')">
+               <? if (ENABLE_LABELS) { ?>
+               <input id="labelConfigTab" class="prefsTab" type="submit" value="Label Editor"
+                       onclick="selectTab('labelConfig')">
+               <? } ?>
+       </td>
+       <td class="prefsToolbar" valign="middle" align="right"> 
                <input type="submit" onclick="gotoMain()" class="button" value="Return to main">
        </td>
+       </tr>
 </tr>
-</tr>
-       <td id="prefContent" class="prefContent" valign="top">
-               <h2>Feed Configuration</h2><div id="piggie">&nbsp;</div>
-
-               <div class="expPane" id="feedConfPane">
-                       <a class="button" 
-                               href="javascript:expandPane('feedConfPane')">Expand section &gt;</a>
-               </div>
-
-               <h2>OPML Import</h2>
-
-               <div class="expPane">
-       
-               <form   enctype="multipart/form-data" method="POST" action="opml.php">
-                       File: <input id="opml_file" name="opml_file" type="file">&nbsp;
-                       <input class="button" name="op" onclick="return validateOpmlImport();"
-                               type="submit" value="Import">
-                       </form>
-
-               </div>
-
-               <h2>Content Filtering</h2>
+       <td id="prefContent" class="prefContent" valign="top" colspan="2">
 
-               <div class="expPane" id="filterConfPane">
-                       <a class="button" 
-                               href="javascript:expandPane('filterConfPane')">Expand section &gt;</a>
-
-               </div>
-
-               <? if (ENABLE_LABELS) { ?>
-
-               <h2>Label Editor</h2>
-
-               <div class="expPane" id="labelConfPane">
-                       <a class="button" 
-                               href="javascript:expandPane('labelConfPane')">Expand section &gt;</a>
-
-               </div>
-
-               <? } ?>
+               <p>Loading, please wait...</p>
 
        </td>
 </tr>

diff --git a/tt-rss.css b/tt-rss.css
index 67c6b549c1882e90e7b73209193f1d681e3dc236..dd55bbc70a129860e60c37891ee30dbb2b514852 100644 (file)
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -29,10 +29,7 @@ table.main td.mainToolbar {
 }
 
 table.main td.prefsToolbar {
-       border-width : 0px 0px 0px 0px;
-       border-style : solid;
-       border-color : #c0c0c0;
-       padding : 0px 10px 10px 5px;
+       padding : 0px 5px 5px 0px;
 }
 
 table.main td.feeds {
@@ -174,6 +171,14 @@ h2 {
        border-color : #e0e0e0;
 }
 
+h3 {
+       font-size : 12pt;
+       font-weight : bold;
+       border-width : 0px 0px 1px 0px;
+       border-style : solid;
+       border-color : #e0e0e0;
+}
+
 hr {
        border-width : 0px 0px 1px 0px;
        border-style : dashed;
@@ -406,3 +411,35 @@ pre {
 input.extSearch {
        width : 200px;
 }
+
+table.main td.prefsTabs {
+       padding-left : 15px;
+}
+
+input.prefsTab {
+       border-width : 1px 1px 0px 1px;
+       border-color : #c0c0c0; 
+       padding : 2px 7px 2px 7px;
+       margin : 0px 1px 0px 0px;
+       width : 150px;
+       background-image : url("images/vgrad_light_rev2.png");
+       background-position : top left;
+       background-repeat : repeat-x;
+}
+
+input.prefsTabSelected {
+       border-width : 1px 1px 0px 1px;
+       border-color : #c0c0c0; 
+       padding : 2px 7px 2px 7px;
+       margin : 0px 1px 0px 0px;
+       width : 150px;
+       background : white;
+       font-weight : bold;
+       background-position : top left;
+       background-repeat : repeat-x;
+}
+
+
+input.prefsTab:hover {
+       background : white;
+}

diff --git a/tt-rss_compact.css b/tt-rss_compact.css
index 724c28a42c5fa0b92283fddc3bc1346f3577fae2..29bf8e3d508cfaa20c6f6bfd36c0468c6bf838a8 100644 (file)
--- a/tt-rss_compact.css
+++ b/tt-rss_compact.css
@@ -194,6 +194,14 @@ h2 {
        border-color : #e0e0e0;
 }
 
+h3 {
+       font-size : 12pt;
+       font-weight : bold;
+       border-width : 0px 0px 1px 0px;
+       border-style : solid;
+       border-color : #e0e0e0;
+}
+
 hr {
        border-width : 0px 0px 1px 0px;
        border-style : dashed;
@@ -429,3 +437,39 @@ pre {
 #qafInput {
        width : 300px;
 }
+
+input.extSearch {
+       width : 200px;
+}
+
+table.main td.prefsTabs {
+       padding-left : 15px;
+}
+
+input.prefsTab {
+       border-width : 1px 1px 0px 1px;
+       border-color : #c0c0c0; 
+       padding : 2px 7px 2px 7px;
+       margin : 0px 1px 0px 0px;
+       width : 150px;
+       background-image : url("images/vgrad_light_rev2.png");
+       background-position : top left;
+       background-repeat : repeat-x;
+}
+
+input.prefsTabSelected {
+       border-width : 1px 1px 0px 1px;
+       border-color : #c0c0c0; 
+       padding : 2px 7px 2px 7px;
+       margin : 0px 1px 0px 0px;
+       width : 150px;
+       background : white;
+       font-weight : bold;
+       background-position : top left;
+       background-repeat : repeat-x;
+}
+
+
+input.prefsTab:hover {
+       background : white;
+}