rework preferences to use dijit stuff

diff --git a/modules/pref-feeds.php b/modules/pref-feeds.php
index 38f7b5777e6589946f99454b1b6105259b638d7f..d8df49ab3053dd2d3e9424f76c34ca35db476633 100644 (file)
--- a/modules/pref-feeds.php
+++ b/modules/pref-feeds.php
@@ -955,6 +955,9 @@
 
                if ($quiet) return;
 
+               print "<div dojoType=\"dijit.layout.AccordionContainer\" region=\"center\">";
+               print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Feeds')."\">";
+
                set_pref($link, "_PREFS_ACTIVE_TAB", "feedConfig");
 
                $result = db_query($link, "SELECT COUNT(id) AS num_errors
@@ -976,6 +979,8 @@
                        $feed_search = $_SESSION["prefs_feed_search"];
                }
 
+               print "<div dojoType=\"dijit.Toolbar\">";
+
                print "<div style='float : right'> 
                        <input id=\"feed_search\" size=\"20\" type=\"search\"
                                onfocus=\"disableHotkeys();\" 
@@ -1018,6 +1023,8 @@
 
                }
 
+               print "</div>"; # toolbar
+
                $feeds_sort = db_escape_string($_REQUEST["sort"]);
 
                if (!$feeds_sort || $feeds_sort == "undefined") {
@@ -1229,17 +1236,9 @@
 
                }
 
-               print "<h3>".__('OPML')."</h3>";
+               print "</div>"; # feeds pane
 
-/*             print "<div style='float : left'>
-               <form   enctype=\"multipart/form-data\" method=\"POST\" action=\"opml.php\">
-               ".__('File:')." <input id=\"opml_file\" name=\"opml_file\" type=\"file\">&nbsp;
-                       <input type=\"hidden\" name=\"op\" value=\"Import\">
-                       <button onclick=\"return validateOpmlImport();\"
-                               type=\"submit\">".__('Import')."</button>
-                               </form></div>";
-
-               print "&nbsp;"; */
+               print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('OPML')."\">";
 
                print "<p>" . __("Using OPML you can export and import your feeds and Tiny Tiny RSS settings.");
 
@@ -1262,8 +1261,7 @@
                        </form>";
                print "</div>&nbsp;";
 
-               print "<button onclick=\"gotoExportOpml()\">".
-                       __('Export OPML')."</button>";
+               print "<button onclick=\"gotoExportOpml()\">".__('Export OPML')."</button>";
 
                print "<p>".__('Your OPML can be published publicly and can be subscribed by anyone who knows the URL below.');
 
@@ -1273,9 +1271,11 @@
                        __('Display URL')."</button> ";
 
 
-               if (strpos($_SERVER['HTTP_USER_AGENT'], "Firefox") !== false) {
-       
-                       print "<h3>" . __("Firefox Integration") . "</h3>";
+               print "</div>"; # pane
+
+               if (true || strpos($_SERVER['HTTP_USER_AGENT'], "Firefox") !== false) {
+
+                       print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Firefox integration')."\">";
                 
                        print "<p>" . __('This Tiny Tiny RSS site can be used as a Firefox Feed Reader by clicking the link below.') . "</p>";
 
@@ -1288,10 +1288,12 @@
                                "</button>";
 
                        print "</p>";
-               }
 
-               print "<h3>".__("Subscribing via bookmarklet")."</h3>";
+                       print "</div>"; # pane
+               }
 
+               print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Subscribing using bookmarklet')."\">";
+               
                print "<p>" . __("Drag the link below to your browser toolbar, open the feed you're interested in in your browser and click on the link to subscribe to it.") . "</p>";
 
                $bm_subscribe_url = str_replace('%s', '', add_feed_url());
@@ -1302,7 +1304,9 @@
 
                print "<a href=\"$bm_url\" class='visibleLink'>" . __('Subscribe in Tiny Tiny RSS'). "</a>";
 
-               print "<h3>".__("Published articles")."</h3>";
+               print "</div>"; #pane
+
+               print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Published articles and generated feeds')."\">";
 
                print "<p>".__('Published articles are exported as a public RSS feed and can be subscribed by anyone who knows the URL specified below.')."</p>";
 
@@ -1315,6 +1319,9 @@
                print "<button onclick=\"return clearFeedAccessKeys()\">".
                        __('Clear all generated URLs')."</button> ";
 
+               print "</div>"; #pane
+               print "</div>"; #container
+
        }
 
        function print_feed_browser($link, $search, $limit, $mode = 1) {

diff --git a/modules/pref-filters.php b/modules/pref-filters.php
index b50b0410f69879359ae034d27f31fe3939083364..d796d84e44a3e1720d79cf9e603f75556983d48f 100644 (file)
--- a/modules/pref-filters.php
+++ b/modules/pref-filters.php
@@ -298,16 +298,17 @@
                } else {
                        $filter_search = $_SESSION["prefs_filter_search"];
                }
+               
+               print "<div id=\"pref-filter-wrap\" dojoType=\"dijit.layout.BorderContainer\" gutters=\"false\">";
+               print "<div id=\"pref-filter-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
+               print "<div id=\"pref-filter-toolbar\" dojoType=\"dijit.Toolbar\">";
 
-               print "<div style='float : right'>
+               print "<div style='float : right; padding-right : 4px;'>
                        <input id=\"filter_search\" size=\"20\" type=\"search\"
                                onfocus=\"javascript:disableHotkeys();\" 
                                onblur=\"javascript:enableHotkeys();\"
                                onchange=\"javascript:updateFilterList()\" value=\"$filter_search\">
                        <button onclick=\"javascript:updateFilterList()\">".__('Search')."</button>
-                       &nbsp;
-                       <a class='helpLinkPic' href=\"javascript:displayHelpInfobox(2)\">
-                       <img style='vertical-align : top;' src='".theme_image($link, "images/sign_quest.png")."'></a>
                </div>";
 
                print "<button onclick=\"return quickAddFilter()\">".
@@ -324,6 +325,10 @@
                                __('Rescore articles')."</button> "; 
                }
 
+               print "</div>"; # toolbar
+               print "</div>"; # toolbar-frame
+               print "<div id=\"pref-filter-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
+
                if ($filter_search) {
                        $filter_search = split(' ', db_escape_string($filter_search));
 
@@ -523,6 +528,9 @@
                        print "</p>";
 
                }
+
+               print "</div>"; #pane
+               print "</div>"; #container
        }
 
 ?>

diff --git a/modules/pref-labels.php b/modules/pref-labels.php
index ac25d01e186aa1828d96c16aa1c85cf8ea29e50a..e683ab6154491206b56f9c1a09bd7f4fed9daae5 100644 (file)
--- a/modules/pref-labels.php
+++ b/modules/pref-labels.php
@@ -150,7 +150,11 @@
                        $label_search = $_SESSION["prefs_label_search"];
                }
 
-               print "<div style='float : right'>
+               print "<div id=\"pref-label-wrap\" dojoType=\"dijit.layout.BorderContainer\" gutters=\"false\">";
+               print "<div id=\"pref-label-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
+               print "<div id=\"pref-label-toolbar\" dojoType=\"dijit.Toolbar\">";
+
+               print "<div style='float : right; padding-right : 4px'>
                        <input id=\"label_search\" size=\"20\" type=\"search\"
                                onfocus=\"javascript:disableHotkeys();\" 
                                onblur=\"javascript:enableHotkeys();\"
@@ -158,19 +162,19 @@
                        <button onclick=\"javascript:updateLabelList()\">".__('Search')."</button>
                        </div>";
 
-               print "<div class=\"prefGenericAddBox\">";
-
                print"<button onclick=\"return addLabel()\">".
                        __('Create label')."</button> ";
 
-               print "<button onclick=\"javascript:removeSelectedLabels()\">".
+               print "<button onclick=\"removeSelectedLabels()\">".
                        __('Remove')."</button> ";
 
                print "<button onclick=\"labelColorReset()\">".
                        __('Clear colors')."</button>";
 
 
-               print "</div>";
+               print "</div>"; #toolbar
+               print "</div>"; #pane
+               print "<div id=\"pref-label-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
 
                if ($label_search) {
 
@@ -269,6 +273,9 @@
                        print "</p>";
 
                }
+
+               print "</div>"; #pane
+               print "</div>"; #container
        }
 
        function print_color_picker($id) {

diff --git a/modules/pref-prefs.php b/modules/pref-prefs.php
index 2133715a2df99e0eb8eeae98cf9d4426e566ecce..18a3363961f171ea429ecfd1aed484355697352e 100644 (file)
--- a/modules/pref-prefs.php
+++ b/modules/pref-prefs.php
@@ -195,10 +195,12 @@
 
                                $_SESSION["prefs_op_result"] = "";
 
+                               print "<div dojoType=\"dijit.layout.AccordionContainer\" region=\"center\">";
+                               print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Personal data')."\">";
+
                                print "<form onsubmit='return false' id='change_email_form'>";
        
                                print "<table width=\"100%\" class=\"prefPrefsList\">";
-                               print "<tr><td colspan='3'><h3>".__("Personal data")."</h3></tr></td>";
 
                                $result = db_query($link, "SELECT email,full_name,
                                        access_level FROM ttrss_users
@@ -240,11 +242,13 @@
                                print "<p><button onclick=\"return changeUserEmail()\">".
                                        __("Save data")."</button>";
 
+                               print "</div>"; # pane
+                               print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Authentication')."\">";
+
                                print "<form onsubmit=\"return false\" 
                                        name=\"change_pass_form\" id=\"change_pass_form\">";
        
                                print "<table width=\"100%\" class=\"prefPrefsList\">";
-                               print "<tr><td colspan='3'><h3>".__("Authentication")."</h3></tr></td>";
        
                                print "<tr><td width=\"40%\">".__("Old password")."</td>";
                                print "<td class=\"prefValue\"><input class=\"editbox\" type=\"password\"
@@ -279,8 +283,12 @@
                                print "<p><button       onclick=\"return changeUserPassword()\">".
                                        __("Change password")."</button>";
 
+
+                               print "</div>"; #pane
                        }
 
+                       print "<div dojoType=\"dijit.layout.AccordionPane\" selected=\"true\" title=\"".__('Preferences')."\">";
+
                        if ($_SESSION["profile"]) {
                                initialize_user_prefs($link, $_SESSION["uid"], $_SESSION["profile"]);
                                $profile_qpart = "profile = '" . $_SESSION["profile"] . "'";
@@ -325,7 +333,7 @@
                                                print "</table>";
                                        }
 
-                                       print "<p><table width=\"100%\" class=\"prefPrefsList\">";
+                                       print "<table width=\"100%\" class=\"prefPrefsList\">";
 
                                        $active_section = $line["section_name"];                                
                                        
@@ -434,6 +442,9 @@
 
                        print "</form>";
 
+                       print "</div>"; #pane
+                       print "</div>"; #container
+
                }
        }
 ?>

diff --git a/modules/pref-users.php b/modules/pref-users.php
index f1f25c66589d5f75778d7e4aea4985b90d44ccf0..a97bd3108caa33544e98ce1be9e6251e1cfab64c 100644 (file)
--- a/modules/pref-users.php
+++ b/modules/pref-users.php
@@ -347,6 +347,10 @@
                        }
                }
 
+               print "<div id=\"pref-user-wrap\" dojoType=\"dijit.layout.BorderContainer\" gutters=\"false\">";
+               print "<div id=\"pref-user-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
+               print "<div id=\"pref-user-toolbar\" dojoType=\"dijit.Toolbar\">";
+
                set_pref($link, "_PREFS_ACTIVE_TAB", "userConfig");
 
                $user_search = db_escape_string($_REQUEST["search"]);
@@ -357,7 +361,7 @@
                        $user_search = $_SESSION["prefs_user_search"];
                }
 
-               print "<div style='float : right'>
+               print "<div style='float : right; padding-right : 4px;'>
                        <input id=\"user_search\" size=\"20\" type=\"search\"
                                onfocus=\"javascript:disableHotkeys();\" 
                                onblur=\"javascript:enableHotkeys();\"
@@ -384,7 +388,9 @@
                        <button onclick=\"javascript:resetSelectedUserPass()\">".
                        __('Reset password')."</button>";
 
-               print "</div>";
+               print "</div>"; #toolbar
+               print "</div>"; #pane
+               print "<div id=\"pref-user-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
 
                if ($user_search) {
 
@@ -485,5 +491,8 @@
 
                }
 
+               print "</div>"; #pane
+               print "</div>"; #container
+
        }
 ?>

diff --git a/prefs.js b/prefs.js
index e9cb8d3649341bfa1242a208cc48fa986edea61a..db84a210d3f702aff7414cf4042c666ba3be0bec 100644 (file)
--- a/prefs.js
+++ b/prefs.js
@@ -1148,8 +1148,11 @@ function init() {
        
                dojo.require("dijit.layout.TabContainer");
                dojo.require("dijit.layout.BorderContainer");
+               dojo.require("dijit.layout.AccordionContainer");
                dojo.require("dijit.layout.ContentPane");
                dojo.require("dijit.Dialog");
+               dojo.require("dijit.form.Button");
+               dojo.require("dijit.Toolbar");
 
                loading_set_progress(30);
 

diff --git a/tt-rss.css b/tt-rss.css
index 40ea6809981a26f10fd7d87dd7ec4d158338b66f..b1d3ea582aeb47ad923e52e6b64d239e06346612 100644 (file)
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -312,6 +312,10 @@ table.prefPrefsList tr:hover td.prefValue input {
        color : #88b0f0;
 }
 
+table.prefPrefsList h3 {
+       margin-top : 0px;
+}
+
 tr.title td {
        border-width : 0px 0px 1px 0px;
        border-color : #ecf4ff;
@@ -396,7 +400,7 @@ table.prefFeedList td.feedSelect {
 div.prefFeedCatHolder {
        height : 250px;
        overflow : auto;
-       border : 1px solid #99d67a;
+       border : 1px solid gray;
        margin : 5px 0px 5px 0px;
        background-color : white;
 }
@@ -679,7 +683,7 @@ div.tagCloudContainer {
 }
 
 div.errorExplained {
-       border : 1px solid #99d67a;
+       border : 1px solid gray;
        background-color : white;
        margin : 5px 0px 5px 0px;
        padding : 5px;
@@ -689,7 +693,7 @@ ul.feedErrorsList {
        height : 300px;
        overflow : auto;
        list-style-type : none;
-       border : 1px solid #99d67a;
+       border : 1px solid gray;
        background-color : white;
        margin : 0px 0px 5px 0px;
        padding : 0px;
@@ -699,7 +703,7 @@ ul.userFeedList {
        height : 300px;
        overflow : auto;
        list-style-type : none;
-       border : 1px solid #99d67a;
+       border : 1px solid gray;
        background-color : white;
        margin : 0px 0px 5px 0px;
        padding : 0px;
@@ -711,7 +715,7 @@ ul.browseFeedList {
        list-style-type : none;
        margin : 0px 0px 5px 0px;
        padding : 0px;
-       border : 1px solid #99d67a;
+       border : 1px solid gray;
        background-color : white;
 }
 
@@ -1547,3 +1551,12 @@ div#pref-tabs .dijitContentPane h3 {
 } */
 
 
+#pref-filter-wrap, #pref-filter-header, #pref-filter-content, 
+#pref-label-wrap, #pref-label-header, #pref-label-content,
+#pref-user-wrap, #pref-user-header, #pref-user-content {
+       margin : 0px;
+       padding : 0px;
+       border-width : 0px;
+}
+
+