prefs: use Dijit stuff

diff --git a/prefs.js b/prefs.js
index d858b6e71c63901c5a013565aff9f40ee97e645e..be5cb0a930ab347bf565cf28ea4296f9c48cca2b 100644 (file)
--- a/prefs.js
+++ b/prefs.js
@@ -1,5 +1,4 @@
 var active_feed_cat = false;
-var active_tab = false;
 
 var init_params = new Array();
 
@@ -17,7 +16,7 @@ function feedlist_callback2(transport) {
 
        try {   
 
-               var container = $('prefContent');       
+               var container = $('feedConfigTab');     
                container.innerHTML=transport.responseText;
                selectTab("feedConfig", true);
 
@@ -38,7 +37,7 @@ function feedlist_callback2(transport) {
 }
 
 function filterlist_callback2(transport) {
-       var container = $('prefContent');
+       var container = $('filterConfigTab');
        container.innerHTML=transport.responseText;
        notify("");
        remove_splash();
@@ -71,7 +70,7 @@ function labellist_callback2(transport) {
 
        try {
 
-               var container = $('prefContent');
+               var container = $('labelConfigTab');
                        closeInfoBox();
                        container.innerHTML=transport.responseText;
 
@@ -87,7 +86,7 @@ function labellist_callback2(transport) {
 
 function userlist_callback2(transport) {
        try {
-               var container = $('prefContent');
+               var container = $('userConfigTab');
                if (transport.readyState == 4) {
                        container.innerHTML=transport.responseText;
                        notify("");
@@ -100,7 +99,7 @@ function userlist_callback2(transport) {
 
 function prefslist_callback2(transport) {
        try {
-               var container = $('prefContent');
+               var container = $('genConfigTab');
                container.innerHTML=transport.responseText;
                notify("");
                remove_splash();
@@ -1062,20 +1061,8 @@ function updatePrefsList() {
 }
 
 function selectTab(id, noupdate, subop) {
-
-//     alert(id);
-
-       if (!id) id = active_tab;
-
        try {
 
-               try {
-                       if (id != active_tab) {
-                               var c = $('prefContent');       
-                               c.scrollTop = 0;
-                       }
-               } catch (e) { };
-
                if (!noupdate) {
 
                        console.log("selectTab: " + id + "(NU: " + noupdate + ")");
@@ -1102,6 +1089,10 @@ function selectTab(id, noupdate, subop) {
                        } else if (id == "userConfig") {
                                updateUsersList();
                        }
+
+                       var tab = dijit.byId(id + "Tab");
+                       dijit.byId("pref-tabs").selectChild(tab);
+
                }
 
                /* clean selection from all tabs */
@@ -1112,8 +1103,6 @@ function selectTab(id, noupdate, subop) {
 
                $(id + "Tab").addClassName("Selected");
        
-               active_tab = id;
-
        } catch (e) {
                exception_error("selectTab", e);
        }
@@ -1122,7 +1111,7 @@ function selectTab(id, noupdate, subop) {
 function init_second_stage() {
 
        try {
-               active_tab = getInitParam("prefs_active_tab");
+               var active_tab = getInitParam("prefs_active_tab");
                if (!$(active_tab+"Tab")) active_tab = "genConfig";
                if (!active_tab || active_tab == '0') active_tab = "genConfig";
 
@@ -1138,20 +1127,15 @@ function init_second_stage() {
                        caller_subop = caller_subop + ":" + getURLParam("subopparam");
                }
 
-               if (tab) {
-                       active_tab = tab;
-               }
-
-               if (navigator.userAgent.match("Opera")) {       
-                       setTimeout("selectTab()", 500);
-               } else {
-                       selectTab(active_tab);
-               }
-               notify("");
+               if (tab) active_tab = tab;
 
                loading_set_progress(60);
 
+               selectTab(active_tab, true);
+               notify("");
+
                setTimeout("hotkey_prefix_timeout()", 5*1000);
+               remove_splash();
 
        } catch (e) {
                exception_error("init_second_stage", e);
@@ -1162,8 +1146,9 @@ function init() {
 
        try {
        
-               //dojo.require("dijit.layout.BorderContainer");
-               //dojo.require("dijit.layout.ContentPane");
+               dojo.require("dijit.layout.TabContainer");
+               dojo.require("dijit.layout.BorderContainer");
+               dojo.require("dijit.layout.ContentPane");
                dojo.require("dijit.Dialog");
                dojo.require("dijit.form.Button");
                //dojo.require("dojo.data.ItemFileReadStore");

diff --git a/prefs.php b/prefs.php
index 12ad10f0a4021395c3ee0a5dc9ba4ab1b529cb67..5bedfb8a33a7ea677e53e47e0a21543088068b8d 100644 (file)
--- a/prefs.php
+++ b/prefs.php
@@ -61,6 +61,9 @@
 
 </head>
 
+<div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
+<div id="cmdline" style="display : none"></div>
+
 <body id="ttrssPrefs" class="claro">
 
 <div id="overlay">
@@ -87,61 +90,51 @@
 
 <img id="piggie" src="images/piggie.png" style="display : none" alt="piggie"/>
 
-<div id="prefHeader">
+<div id="main" dojoType="dijit.layout.BorderContainer">
+
+<div id="header" dojoType="dijit.layout.ContentPane" region="top">
        <div class="topLinks">
                <?php if (!SINGLE_USER_MODE) { ?>
                        <?php echo __('Hello,') ?> <b><?php echo $_SESSION["name"] ?></b> |
                <?php } ?>
-               <a href="#" onclick="gotoMain()"><?php echo __('Exit preferences') ?></a>
+               <a href="#" onclick="gotoMain()"><?php echo __('Exit preferences') ?></a> | 
+               <a href='#' onclick="Effect.Appear('hotkey_help_overlay', {duration: 0.3})"><?php echo __("Keyboard shortcuts") ?></a>
                <?php if (!SINGLE_USER_MODE) { ?>
                        | <a href="logout.php"><?php echo __('Logout') ?></a>
                <?php } ?>
+
        </div>
        <img src="<?php echo theme_image($link, 'images/ttrss_logo.png') ?>" alt="Tiny Tiny RSS"/>      
 </div>
 
-<div id="prefTabs">
-               <div class='prefKbdHelp'>
-                       <img src="<?php echo theme_image($link, 'images/small_question.png') ?>" alt="?"/> <a href='#' onclick="Effect.Appear('hotkey_help_overlay', {duration: 0.3})"><?php echo __("Keyboard shortcuts") ?></a>
-               </div>
-
-               <div class="firstTab">&nbsp;</div>
-
-               <div id="genConfigTab" class="prefsTab" 
-                       onclick="selectTab('genConfig')"><?php echo __('Preferences') ?></div>
-               <div id="feedConfigTab" class="prefsTab" 
-                       onclick="selectTab('feedConfig')"><?php echo __('Feeds') ?></div>
-               <div id="filterConfigTab" class="prefsTab" 
-                       onclick="selectTab('filterConfig')"><?php echo __('Filters') ?></div>
-               <div id="labelConfigTab" class="prefsTab" 
-                       onclick="selectTab('labelConfig')"><?php echo __('Labels') ?></div>
-               <?php if ($_SESSION["access_level"] >= 10) { ?>
-               <div id="userConfigTab" class="prefsTab" 
-                       onclick="selectTab('userConfig')"><?php echo __('Users') ?></div>
-               <?php } ?>              
+<div dojoType="dijit.layout.TabContainer" region="center" id="pref-tabs">
+<div id="genConfigTab" dojoType="dijit.layout.ContentPane" 
+       href="backend.php?op=pref-prefs"
+       title="<?php echo __('Preferences') ?>"></div>
+<div id="feedConfigTab" dojoType="dijit.layout.ContentPane" 
+       href="backend.php?op=pref-feeds"
+       title="<?php echo __('Feeds') ?>"></div>
+<div id="filterConfigTab" dojoType="dijit.layout.ContentPane" 
+       href="backend.php?op=pref-filters"
+       title="<?php echo __('Filters') ?>"></div>
+<div id="labelConfigTab" dojoType="dijit.layout.ContentPane" 
+       href="backend.php?op=pref-labels"
+       title="<?php echo __('Labels') ?>"></div>
+<?php if ($_SESSION["access_level"] >= 10) { ?>
+       <div id=userConfigTab" dojoType="dijit.layout.ContentPane" 
+               href="backend.php?op=pref-users"
+               title="<?php echo __('Users') ?>"></div>
+<?php } ?>
 </div>
 
-<div id="prefContentOuter">
-<div id="prefContent">
-       <p><?php echo __('Loading, please wait...') ?></p>
-       <noscript>
-               <div class="error">
-               <?php echo __("Your browser doesn't support Javascript, which is required
-               for this application to function properly. Please check your
-               browser settings.") ?></div>
-       </noscript>
-</div>
-</div>
-
-<div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
-<div id="cmdline" style="display : none"></div>
-
-<div id="prefFooter">
+<div id="footer" dojoType="dijit.layout.ContentPane" region="bottom">
        <a href="http://tt-rss.org/">Tiny Tiny RSS</a>
        <?php if (!defined('HIDE_VERSION')) { ?>
                 v<?php echo VERSION ?> 
        <?php } ?>
        &copy; 2005&ndash;<?php echo date('Y') ?> <a href="http://fakecake.org/">Andrew Dolgov</a>
+</div> <!-- footer -->
+
 </div>
 
 <?php db_close($link); ?>

diff --git a/tt-rss.css b/tt-rss.css
index 5c9b1f14b77e03867869bed53b711fc67c38c52e..e1623444e6cfbb05c4be69d2a61d3090b81c761f 100644 (file)
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -402,10 +402,7 @@ pre {
        margin : 5px;
 }
 
-input.extSearch {
-       width : 100%;
-}
-
+/*
 div.firstTab {
        width : 10px;
        float : left;
@@ -456,7 +453,7 @@ div.prefsTab.Selected {
        bottom : -1px;
        z-index : 3;
        height : 30px;
-}
+} */
 
 div.notice {
        background : #ffffff;
@@ -910,6 +907,14 @@ html, body#ttrssMain, #main {
        margin: 0;
 } 
 
+html, body#ttrssPrefs, #main {
+       width: 100%; 
+       height: 100%;
+       border: 0; 
+       padding: 0; 
+       margin: 0;
+} 
+
 #toolbar div.actionChooser {
        display : table-cell;
        text-align : right;
@@ -918,7 +923,7 @@ html, body#ttrssMain, #main {
 
 /* preferences layout */
 
-#prefFooter {
+/* #prefFooter {
        position : absolute;
        bottom : 0px;
        height : 20px;
@@ -956,7 +961,7 @@ html, body#ttrssMain, #main {
        font-size : 12px;
        margin : 10px;
        height : 33px;
-}
+} */
 
 div.return {
        float : right;
@@ -972,7 +977,7 @@ div.return a:hover {
        color : black;
 }
 
-#prefContentOuter {
+/* #prefContentOuter {
        clear : left;
        position : absolute;
        bottom : 41px;
@@ -998,8 +1003,7 @@ div.return a:hover {
        right : 0px;
        padding : 1em;
        overflow : auto;
-
-}
+} */
 
 div.topLinks img {
        vertical-align : middle;
@@ -1197,16 +1201,6 @@ div#hotkey_help_overlay table.hho td.bottom {
        font-size : 11px;
 }
 
-div.prefKbdHelp {
-       float : right;
-       font-size : 12px;
-       margin-right : 15px;
-}
-
-div.prefKbdHelp img {
-       vertical-align : middle;
-}
-
 div#l_progress_o {
        width : 200px;
        border : 1px solid black;
@@ -1488,7 +1482,7 @@ div.fatalError textarea {
 #footer {
        text-align : center;
        color : gray;
-       padding : 4px;
+       padding : 4px 4px 8px 4px;
        border-width : 0px;
 }
 
@@ -1522,3 +1516,16 @@ div#feedlistLoading {
        padding : 5px;
        color : gray;
 }
+
+div#pref-tabs .dijitContentPane {
+       font-size : 12px;
+}
+
+div#pref-tabs {
+       margin : 0px 5px 0px 5px;
+}
+
+div#pref-tabs .dijitContentPane h3 {
+       font-size : 14px;
+       font-weight : bold;
+}