diff options
-rw-r--r-- | backend.php | 7 | ||||
-rw-r--r-- | prefs.js | 61 | ||||
-rw-r--r-- | prefs.php | 54 | ||||
-rw-r--r-- | tt-rss.css | 45 | ||||
-rw-r--r-- | tt-rss_compact.css | 44 |
5 files changed, 149 insertions, 62 deletions
diff --git a/backend.php b/backend.php index 353062d19..8b8a90709 100644 --- 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\"> + <input class=\"button\" name=\"op\" onclick=\"return validateOpmlImport();\" + type=\"submit\" value=\"Import\"> + </form>"; + } if ($op == "pref-filters") { @@ -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(""); @@ -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"> </div> - - <div class="expPane" id="feedConfPane"> - <a class="button" - href="javascript:expandPane('feedConfPane')">Expand section ></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"> - <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 ></a> - - </div> - - <? if (ENABLE_LABELS) { ?> - - <h2>Label Editor</h2> - - <div class="expPane" id="labelConfPane"> - <a class="button" - href="javascript:expandPane('labelConfPane')">Expand section ></a> - - </div> - - <? } ?> + <p>Loading, please wait...</p> </td> </tr> diff --git a/tt-rss.css b/tt-rss.css index 67c6b549c..dd55bbc70 100644 --- 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 724c28a42..29bf8e3d5 100644 --- 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; +} |