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

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"]));
+		$topic = basename(clean($_REQUEST["topic"])); // only one for now
 
-		switch ($topic) {
+		if ($topic == "main") {
-		case "main":
+			$info = get_hotkeys_info();
-			$this->display_main_help();
+			$imap = get_hotkeys_map();
-			break;
+			$omap = array();
-		case "prefs":
+
-			//$this->display_prefs_help();
+			foreach ($imap[1] as $sequence => $action) {
-			break;
+				if (!isset($omap[$action])) $omap[$action] = array();
-		default:
+
-			print "<p>".__("Help topic not found.")."</p>";
+				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 "<div class='dlgButtons'>";
-		print "<button dojoType=\"dijit.form.Button\"
+		print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/InterfaceTips\")'>
-			onclick=\"return dijit.byId('helpDlg').hide()\">".
+			<i class='material-icons'>help</i> ".__("More info...")."</button>";
-			__('Close this window')."</button>";
-		print "</div>";
 
-		/* if (file_exists("help/$topic.php")) {
+		print "<button dojoType='dijit.form.Button'
-			include("help/$topic.php");
+			onclick=\"return dijit.byId('helpDlg').hide()\">".__('Close this window')."</button>";
-		} else {
+		print "</div>";
-			print "<p>".__("Help topic not found.")."</p>";
-		} */
-		/* print "<div align='center'>
-			<button onclick=\"javascript:window.close()\">".
-			__('Close this window')."</button></div>"; */
 
 	}
 }

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\" onclick=\"return CommonDialogs.genUrlChangeKey('$feed_id', '$is_cat')\">".
+		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')\">".
 			__('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>";

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\">
+			print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/SearchSyntax\")'>
-				<a class=\"visibleLink\" target=\"_blank\" href=\"http://tt-rss.org/wiki/SearchSyntax\">".__("Search syntax")."</a>
+				<i class='material-icons'>help</i> ".__("Search syntax")."</button>";
-				</div>";
 		}
 
 		print "<button dojoType=\"dijit.form.Button\" type=\"submit\" class=\"alt-primary\" onclick=\"dijit.byId('searchDlg').execute()\">".__('Search')."</button>

classes/pref/feeds.php

@@ -1357,42 +1357,39 @@ class Pref_Feeds extends Handler_Protected {
 
 		print "</div>"; # feeds pane
 
-		print "<div dojoType=\"dijit.layout.AccordionPane\" 
+		print "<div dojoType='dijit.layout.AccordionPane' 
-			title=\"<i class='material-icons'>import_export</i> ".__('OPML')."\">";
+			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.") .
+		print "<h3>" . __("Using OPML you can export and import your feeds, filters, labels and Tiny Tiny RSS settings.") . "</h3>";
-			__("Only main settings profile can be migrated using OPML.");
 
-		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\"
+		print "<form  name='opml_form' style='display : inline-block' target='upload_iframe'
-			enctype=\"multipart/form-data\" method=\"POST\"
+			enctype='multipart/form-data' method='POST'
-			action=\"backend.php\">
+			action='backend.php'>
-			<label class=\"dijitButton\">".__("Choose file...")."
+			<label class='dijitButton'>".__("Choose file...")."
-				<input style=\"display : none\" id=\"opml_file\" name=\"opml_file\" type=\"file\">&nbsp;
+				<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='op' value='dlg'>
-			<input type=\"hidden\" name=\"method\" value=\"importOpml\">
+			<input type='hidden' name='method' value='importOpml'>
-			<button dojoType=\"dijit.form.Button\" onclick=\"return Helpers.OPML.import();\" type=\"submit\">" .
+			<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' class='alt-primary' onclick=\"return App.displayDlg('".__("Show as feed")."','generatedFeed', '$rss_url')\">".
-
-		print "<button dojoType=\"dijit.form.Button\" 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");
 

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>";

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
 

css/cdm.less

@@ -1,4 +1,8 @@
 .cdm {
+	i.material-icons {
+		color : @color-icon;
+	}
+
 	.header, .footer {
 		display : flex;
 		flex-direction : row;

css/default.css

@@ -51,6 +51,7 @@ body.ttrss_main div.post div.header img,
 body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
+  color: #777;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
@@ -208,6 +209,9 @@ body.ttrss_main .hl .right i.material-icons {
   user-select: none;
   font-size: 21px;
 }
+body.ttrss_main .hl .right i.material-icons {
+  color: #777;
+}
 body.ttrss_main .hl div.title {
   cursor: pointer;
   flex-grow: 2;
@@ -1013,6 +1017,9 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
+.cdm i.material-icons {
+  color: #777;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1725,7 +1732,6 @@ body.ttrss_utility.share_popup .content {
   /* Preferred icon size */
   display: inline-block;
   line-height: 1;
-  color: #777;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;

css/defines.less

@@ -12,6 +12,7 @@
 @color-checked: #69C671;
 @border-default : #ddd;
 @default-text: #555;
+@color-icon: #777;
 
 body.ttrss_main,
 body.ttrss_prefs,
@@ -49,7 +50,7 @@ body.ttrss_prefs,
   font-size: 18px;  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
-  color : #777;
+  //color : #777;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;

css/tt-rss.less

@@ -43,6 +43,7 @@ body.ttrss_main {
 			img, i.material-icons {
 				margin : 0px 4px;
 				vertical-align: middle;
+				color : @color-icon;
 			}
 
 			.title {
@@ -236,6 +237,12 @@ body.ttrss_main {
 			}
 		}
 
+		.right {
+			i.material-icons {
+				color : @color-icon;
+			}
+		}
+
 		div.title {
 			cursor : pointer;
 			flex-grow : 2;

plugins/bookmarklets/init.php

@@ -20,7 +20,7 @@ class Bookmarklets extends Plugin {
 		print "<div dojoType=\"dijit.layout.AccordionPane\" 
 			title=\"<i class='material-icons'>bookmark</i> ".__('Bookmarklets')."\">";
 
-		print __("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.");
+		print "<h3>" . __("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.") . "</h3>";
 
 		$bm_subscribe_url = str_replace('%s', '', Pref_Feeds::subscribe_to_feed_url());
 
@@ -32,12 +32,15 @@ class Bookmarklets extends Plugin {
 		print "<a href=\"$bm_url\">" . __('Subscribe in Tiny Tiny RSS'). "</a>";
 		print "</label></p>";
 
-		print "<p>" . __("Use this bookmarklet to publish arbitrary pages using Tiny Tiny RSS") . "</p>";
+		print "<h3>" . __("Use this bookmarklet to publish arbitrary pages using Tiny Tiny RSS") . "</h3>";
 
-		print "<p><label class='dijitButton'>";
+		print "<label class='dijitButton'>";
 		$bm_url = htmlspecialchars("javascript:(function(){var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='".get_self_url_prefix()."/public.php?op=sharepopup',l=d.location,e=encodeURIComponent,g=f+'&title='+((e(s))?e(s):e(document.title))+'&url='+e(l.href);function a(){if(!w.open(g,'t','toolbar=0,resizable=0,scrollbars=1,status=1,width=500,height=250')){l.href=g;}}a();})()");
 		print "<a href=\"$bm_url\">" . __('Share with Tiny Tiny RSS'). "</a>";
-		print "</label></p>";
+		print "</label>";
+
+		print "<button dojoType='dijit.form.Button' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/ShareAnything\")'>
+					<i class='material-icons'>help</i> ".__("More info...")."</button>";
 
 		print "</div>"; #pane
 

plugins/share/init.php

@@ -42,9 +42,7 @@ class Share extends Plugin {
 	function hook_prefs_tab_section($id) {
 		if ($id == "prefFeedsPublishedGenerated") {
 
-			print "<hr/>";
+			print "<h3>" . __("You can disable all articles shared by unique URLs here.") . "</h3>";
-
-			print "<p>" . __("You can disable all articles shared by unique URLs here.") . "</p>";
 
 			print "<button class=\"alt-danger\" dojoType=\"dijit.form.Button\" onclick=\"return Plugins.Share.clearKeys()\">".
 				__('Unshare all articles')."</button> ";

themes/night.css

@@ -52,6 +52,7 @@ body.ttrss_main div.post div.header img,
 body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
+  color: #777;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
@@ -209,6 +210,9 @@ body.ttrss_main .hl .right i.material-icons {
   user-select: none;
   font-size: 21px;
 }
+body.ttrss_main .hl .right i.material-icons {
+  color: #777;
+}
 body.ttrss_main .hl div.title {
   cursor: pointer;
   flex-grow: 2;
@@ -1014,6 +1018,9 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
+.cdm i.material-icons {
+  color: #777;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1726,7 +1733,6 @@ body.ttrss_utility.share_popup .content {
   /* Preferred icon size */
   display: inline-block;
   line-height: 1;
-  color: #777;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;

themes/night_blue.css

@@ -52,6 +52,7 @@ body.ttrss_main div.post div.header img,
 body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
+  color: #777;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
@@ -209,6 +210,9 @@ body.ttrss_main .hl .right i.material-icons {
   user-select: none;
   font-size: 21px;
 }
+body.ttrss_main .hl .right i.material-icons {
+  color: #777;
+}
 body.ttrss_main .hl div.title {
   cursor: pointer;
   flex-grow: 2;
@@ -1014,6 +1018,9 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
+.cdm i.material-icons {
+  color: #777;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1726,7 +1733,6 @@ body.ttrss_utility.share_popup .content {
   /* Preferred icon size */
   display: inline-block;
   line-height: 1;
-  color: #777;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;