UI: add some more info links to relevant wiki pages; minor layout updates

6 files changed, 120 insertions, 70 deletions

diff --git a/classes/backend.php b/classes/backend.php
index 29b2d5048..bd6b1ff19 100644
--- a/classes/backend.php
+++ b/classes/backend.php
@@ -27,10 +27,6 @@ class Backend extends Handler {
 			array_push($omap[$action], $sequence);
 		}
 
-		print_notice("<a target=\"_blank\" href=\"http://tt-rss.org/wiki/InterfaceTips\">".
-			__("Other interface tips are available in the Tiny Tiny RSS wiki.") .
-			"</a>");
-
 		print "<ul class='panel panel-scrollable hotkeys-help' style='height : 300px'>";
 
 		print "<h2>" . __("Keyboard Shortcuts") . "</h2>";
@@ -82,36 +78,84 @@ class Backend extends Handler {
 		}
 
 		print "</ul>";
+
+
 	}
 
 	function help() {
-		$topic = basename(clean($_REQUEST["topic"]));
-
-		switch ($topic) {
-		case "main":
-			$this->display_main_help();
-			break;
-		case "prefs":
-			//$this->display_prefs_help();
-			break;
-		default:
-			print "<p>".__("Help topic not found.")."</p>";
+		$topic = basename(clean($_REQUEST["topic"])); // only one for now
+
+		if ($topic == "main") {
+			$info = get_hotkeys_info();
+			$imap = get_hotkeys_map();
+			$omap = array();
+
+			foreach ($imap[1] as $sequence => $action) {
+				if (!isset($omap[$action])) $omap[$action] = array();
+
+				array_push($omap[$action], $sequence);
+			}
+
+			print "<ul class='panel panel-scrollable hotkeys-help' style='height : 300px'>";
+
+			$cur_section = "";
+			foreach ($info as $section => $hotkeys) {
+
+				if ($cur_section) print "<li>&nbsp;</li>";
+				print "<li><h3>" . $section . "</h3></li>";
+				$cur_section = $section;
+
+				foreach ($hotkeys as $action => $description) {
+
+					if (is_array($omap[$action])) {
+						foreach ($omap[$action] as $sequence) {
+							if (strpos($sequence, "|") !== FALSE) {
+								$sequence = substr($sequence,
+									strpos($sequence, "|")+1,
+									strlen($sequence));
+							} else {
+								$keys = explode(" ", $sequence);
+
+								for ($i = 0; $i < count($keys); $i++) {
+									if (strlen($keys[$i]) > 1) {
+										$tmp = '';
+										foreach (str_split($keys[$i]) as $c) {
+											switch ($c) {
+												case '*':
+													$tmp .= __('Shift') . '+';
+													break;
+												case '^':
+													$tmp .= __('Ctrl') . '+';
+													break;
+												default:
+													$tmp .= $c;
+											}
+										}
+										$keys[$i] = $tmp;
+									}
+								}
+								$sequence = join(" ", $keys);
+							}
+
+							print "<li>";
+							print "<div class='hk'><code>$sequence</code></div>";
+							print "<div class='desc'>$description</div>";
+							print "</li>";
+						}
+					}
+				}
+			}
+
+			print "</ul>";
 		}
 
-		print "<div align='center'>";
-		print "<button dojoType=\"dijit.form.Button\"
-			onclick=\"return dijit.byId('helpDlg').hide()\">".
-			__('Close this window')."</button>";
-		print "</div>";
+		print "<div class='dlgButtons'>";
+		print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/InterfaceTips\")'>
+			<i class='material-icons'>help</i> ".__("More info...")."</button>";
 
-		/* if (file_exists("help/$topic.php")) {
-			include("help/$topic.php");
-		} else {
-			print "<p>".__("Help topic not found.")."</p>";
-		} */
-		/* print "<div align='center'>
-			<button onclick=\"javascript:window.close()\">".
-			__('Close this window')."</button></div>"; */
+		print "<button dojoType='dijit.form.Button'
+			onclick=\"return dijit.byId('helpDlg').hide()\">".__('Close this window')."</button>";
+		print "</div>";
 
 	}
-}
\ No newline at end of file
+}
diff --git a/classes/dlg.php b/classes/dlg.php
index cd8de206b..89b88825e 100644
--- a/classes/dlg.php
+++ b/classes/dlg.php
@@ -177,12 +177,15 @@ class Dlg extends Handler_Protected {
 		print "</div>";
 		print "</div>";
 
-		print "<div align='center'>";
+		print "<div class='dlgButtons'>";
+
+		print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/GeneratedFeeds\")'>
+			<i class='material-icons'>help</i> ".__("More info...")."</button>";
 
-		print "<button dojoType=\"dijit.form.Button\" onclick=\"return CommonDialogs.genUrlChangeKey('$feed_id', '$is_cat')\">".
+		print "<button dojoType='dijit.form.Button' onclick=\"return CommonDialogs.genUrlChangeKey('$feed_id', '$is_cat')\">".
 			__('Generate new URL')."</button> ";
 
-		print "<button dojoType=\"dijit.form.Button\" onclick=\"return CommonDialogs.closeInfoBox()\">".
+		print "<button dojoType='dijit.form.Button' onclick=\"return CommonDialogs.closeInfoBox()\">".
 			__('Close this window')."</button>";
 
 		print "</div>";
diff --git a/classes/feeds.php b/classes/feeds.php
index a7a138992..aac9b627f 100755
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -806,9 +806,8 @@ class Feeds extends Handler_Protected {
 		print "<div class=\"dlgButtons\">";
 
 		if (count(PluginHost::getInstance()->get_hooks(PluginHost::HOOK_SEARCH)) == 0) {
-			print "<div style=\"float : left\">
-				<a class=\"visibleLink\" target=\"_blank\" href=\"http://tt-rss.org/wiki/SearchSyntax\">".__("Search syntax")."</a>
-				</div>";
+			print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/SearchSyntax\")'>
+				<i class='material-icons'>help</i> ".__("Search syntax")."</button>";
 		}
 
 		print "<button dojoType=\"dijit.form.Button\" type=\"submit\" class=\"alt-primary\" onclick=\"dijit.byId('searchDlg').execute()\">".__('Search')."</button>
diff --git a/classes/pref/feeds.php b/classes/pref/feeds.php
index 10f6f057b..a033bf04f 100755
--- a/classes/pref/feeds.php
+++ b/classes/pref/feeds.php
@@ -1357,42 +1357,39 @@ class Pref_Feeds extends Handler_Protected {
 
 		print "</div>"; # feeds pane
 
-		print "<div dojoType=\"dijit.layout.AccordionPane\" 
-			title=\"<i class='material-icons'>import_export</i> ".__('OPML')."\">";
+		print "<div dojoType='dijit.layout.AccordionPane' 
+			title='<i class=\"material-icons\">import_export</i> ".__('OPML')."'>";
 
-		print __("Using OPML you can export and import your feeds, filters, labels and Tiny Tiny RSS settings.") .
-			__("Only main settings profile can be migrated using OPML.");
+		print "<h3>" . __("Using OPML you can export and import your feeds, filters, labels and Tiny Tiny RSS settings.") . "</h3>";
 
-		print "<p/>";
+		print_notice("Only main settings profile can be migrated using OPML.");
 
 		print "<iframe id=\"upload_iframe\"
 			name=\"upload_iframe\" onload=\"Helpers.OPML.onImportComplete(this)\"
 			style=\"width: 400px; height: 100px; display: none;\"></iframe>";
 
-		print "<form  name=\"opml_form\" style='display : block' target=\"upload_iframe\"
-			enctype=\"multipart/form-data\" method=\"POST\"
-			action=\"backend.php\">
-			<label class=\"dijitButton\">".__("Choose file...")."
-				<input style=\"display : none\" id=\"opml_file\" name=\"opml_file\" type=\"file\">&nbsp;
+		print "<form  name='opml_form' style='display : inline-block' target='upload_iframe'
+			enctype='multipart/form-data' method='POST'
+			action='backend.php'>
+			<label class='dijitButton'>".__("Choose file...")."
+				<input style='display : none' id='opml_file' name='opml_file' type='file'>&nbsp;
 			</label>
-			<input type=\"hidden\" name=\"op\" value=\"dlg\">
-			<input type=\"hidden\" name=\"method\" value=\"importOpml\">
-			<button dojoType=\"dijit.form.Button\" onclick=\"return Helpers.OPML.import();\" type=\"submit\">" .
+			<input type='hidden' name='op' value='dlg'>
+			<input type='hidden' name='method' value='importOpml'>
+			<button dojoType='dijit.form.Button' class='alt-primary' onclick=\"return Helpers.OPML.import();\" type=\"submit\">" .
 			__('Import OPML') . "</button>";
 
 		print "</form>";
 
-		print "<hr>";
+		print "<form dojoType='dijit.form.Form' id='opmlExportForm' style='display : inline-block'>";
 
-		print "<form dojoType=\"dijit.form.Form\" id=\"opmlExportForm\">";
-
-		print "<button dojoType=\"dijit.form.Button\"
-			onclick=\"Helpers.OPML.export()\" >" .
+		print "<button dojoType='dijit.form.Button'
+			onclick='Helpers.OPML.export()' >" .
 			__('Export OPML') . "</button>";
 
-		print "<label>";
+		print " <label class='checkbox'>";
 		print_checkbox("include_settings", true, "1", "");
-		print "&nbsp;" . __("Include settings");
+		print " " . __("Include settings");
 		print "</label>";
 
 		print "</form>";
@@ -1405,7 +1402,7 @@ class Pref_Feeds extends Handler_Protected {
 			" " .
 			__("Published OPML does not include your Tiny Tiny RSS settings, feeds that require authentication or feeds hidden from Popular feeds.") . "</p>";
 
-		print "<button dojoType=\"dijit.form.Button\" onclick=\"return App.displayDlg('".__("Public OPML URL")."','pubOPMLUrl')\">".
+		print "<button dojoType='dijit.form.Button' class='alt-primary' onclick=\"return App.displayDlg('".__("Public OPML URL")."','pubOPMLUrl')\">".
 			__('Display published OPML URL')."</button> ";
 
 		PluginHost::getInstance()->run_hooks(PluginHost::HOOK_PREFS_TAB_SECTION,
@@ -1416,21 +1413,17 @@ class Pref_Feeds extends Handler_Protected {
 		print "<div dojoType=\"dijit.layout.AccordionPane\" 
 			title=\"<i class='material-icons'>share</i> ".__('Published & shared articles / Generated feeds')."\">";
 
-		print __('Published articles can be subscribed by anyone who knows the following URL:');
+		print "<h3>" . __('Published articles can be subscribed by anyone who knows the following URL:') . "</h3>";
 
 		$rss_url = '-2::' . htmlspecialchars(get_self_url_prefix() .
 				"/public.php?op=rss&id=-2&view-mode=all_articles");;
 
-		print "<p>";
-
-		print "<button dojoType=\"dijit.form.Button\" onclick=\"return App.displayDlg('".__("Show as feed")."','generatedFeed', '$rss_url')\">".
+		print "<button dojoType='dijit.form.Button' class='alt-primary' onclick=\"return App.displayDlg('".__("Show as feed")."','generatedFeed', '$rss_url')\">".
 			__('Display URL')."</button> ";
 
 		print "<button class=\"alt-danger\" dojoType=\"dijit.form.Button\" onclick=\"return Helpers.clearFeedAccessKeys()\">".
 			__('Clear all generated URLs')."</button> ";
 
-		print "</p>";
-
 		PluginHost::getInstance()->run_hooks(PluginHost::HOOK_PREFS_TAB_SECTION,
 			"hook_prefs_tab_section", "prefFeedsPublishedGenerated");
 
diff --git a/classes/pref/filters.php b/classes/pref/filters.php
index 0951a261d..99bb885cf 100755
--- a/classes/pref/filters.php
+++ b/classes/pref/filters.php
@@ -1019,12 +1019,13 @@ class Pref_Filters extends Handler_Protected {
 
 		print "<div class='dlgButtons'>";
 
-		print "<a style='float : left' target='_blank' href='http://tt-rss.org/wiki/ContentFilters'>".__("Wiki: Filters")."</a>";
+		print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/ContentFilters\")'>
+			<i class='material-icons'>help</i> ".__("More info...")."</button>";
 
-		print "<button dojoType=\"dijit.form.Button\" class=\"alt-primary \" type=\"submit\" onclick=\"return dijit.byId('filterNewRuleDlg').execute()\">".
+		print "<button dojoType='dijit.form.Button' class='alt-primary' type='submit' onclick=\"return dijit.byId('filterNewRuleDlg').execute()\">".
 			($rule ? __("Save rule") : __('Add rule'))."</button> ";
 
-		print "<button dojoType=\"dijit.form.Button\" onclick=\"return dijit.byId('filterNewRuleDlg').hide()\">".
+		print "<button dojoType='dijit.form.Button' onclick=\"return dijit.byId('filterNewRuleDlg').hide()\">".
 			__('Cancel')."</button>";
 
 		print "</div>";
diff --git a/classes/pref/prefs.php b/classes/pref/prefs.php
index aeaf5285b..5b6f522a8 100644
--- a/classes/pref/prefs.php
+++ b/classes/pref/prefs.php
@@ -47,7 +47,7 @@ class Pref_Prefs extends Handler_Protected {
 			"SHORT_DATE_FORMAT" => array(__("Short date format"), ""),
 			"SHOW_CONTENT_PREVIEW" => array(__("Show content preview in headlines list"), ""),
 			"SORT_HEADLINES_BY_FEED_DATE" => array(__("Sort headlines by feed date"), __("Use feed-specified date to sort headlines instead of local import date.")),
-			"SSL_CERT_SERIAL" => array(__("Login with an SSL certificate"), __("Click to register your SSL client certificate with tt-rss")),
+			"SSL_CERT_SERIAL" => array(__("Login with an SSL certificate")),
 			"STRIP_IMAGES" => array(__("Do not embed media in articles"), ""),
 			"STRIP_UNSAFE_TAGS" => array(__("Strip unsafe tags from articles"), __("Strip all but most common HTML tags when reading articles.")),
 			"USER_STYLESHEET" => array(__("Customize stylesheet")),
@@ -550,6 +550,9 @@ class Pref_Prefs extends Handler_Protected {
 
 				print "</select>";
 
+				print " <a href='#' onclick='window.open(\"https://tt-rss.org/wiki/Themes\")'>
+					".__("More themes...")."</a>";
+
 			} else if ($pref_name == "DEFAULT_UPDATE_INTERVAL") {
 
 				global $update_intervals_nodefault;
@@ -603,14 +606,17 @@ class Pref_Prefs extends Handler_Protected {
 				$cert_serial = htmlspecialchars(get_ssl_certificate_id());
 				$has_serial = ($cert_serial) ? "false" : "true";
 
-				print " <button dojoType='dijit.form.Button' class='alt-primary' disabled=\"$has_serial\"
+				print "<button dojoType='dijit.form.Button' disabled=\"$has_serial\"
 					onclick=\"dijit.byId('SSL_CERT_SERIAL').attr('value', '$cert_serial')\">" .
 					__('Register') . "</button>";
 
-				print " <button dojoType='dijit.form.Button' class='alt-danger'
+				print "<button dojoType='dijit.form.Button' class='alt-danger'
 					onclick=\"dijit.byId('SSL_CERT_SERIAL').attr('value', '')\">" .
 					__('Clear') . "</button>";
 
+				print "<button dojoType='dijit.form.Button' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/SSL+Certificate+Authentication\")'>
+					<i class='material-icons'>help</i> ".__("More info...")."</button>";
+
 			} else if ($pref_name == 'DIGEST_PREFERRED_TIME') {
 				print "<input dojoType=\"dijit.form.ValidationTextBox\"
 					id=\"$pref_name\" regexp=\"[012]?\d:\d\d\" placeHolder=\"12:00\"
@@ -761,7 +767,7 @@ class Pref_Prefs extends Handler_Protected {
 			}
 		}
 
-		print "<tr><td colspan='4'><h2>".__("User plugins")."</h2></td></tr>";
+		print "<tr><td colspan='4'><br/><h2>".__("User plugins")."</h2></td></tr>";
 
 		print "<tr>
 				<th width=\"5%\">&nbsp;</th>
@@ -829,7 +835,11 @@ class Pref_Prefs extends Handler_Protected {
 
 		print "</div>"; #content-pane
 		print '<div dojoType="dijit.layout.ContentPane" region="bottom">';
-		print "<button dojoType=\"dijit.form.Button\" type=\"submit\">".
+
+		print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/Plugins\")'>
+			<i class='material-icons'>help</i> ".__("More info...")."</button>";
+
+		print "<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>".
 			__("Enable selected plugins")."</button>";
 		print "</div>"; #pane