add a bunch of button icons

classes/pref/prefs.php

@@ -301,7 +301,8 @@ class Pref_Prefs extends Handler_Protected {
 			<hr/>
 
 			<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>
-				<?= __("Save data") ?>
+				<?= \Controls\icon("save") ?>
+				<?= __("Save") ?>
 			</button>
 		</form>
 		<?php
@@ -373,6 +374,7 @@ class Pref_Prefs extends Handler_Protected {
 				<hr/>
 
 				<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>
+					<?= \Controls\icon("security") ?>
 					<?= __("Change password") ?>
 				</button>
 			</form>
@@ -396,12 +398,14 @@ class Pref_Prefs extends Handler_Protected {
 		<hr>
 
 		<button style='float : left' class='alt-primary' dojoType='dijit.form.Button' onclick="Helpers.AppPasswords.generate()">
-			<?= __('Generate new password') ?>
+		<?= \Controls\icon("add") ?>
+			<?= __('Generate password') ?>
 		</button>
 
 		<button style='float : left' class='alt-danger' dojoType='dijit.form.Button'
 			onclick="Helpers.AppPasswords.removeSelected()">
-			<?= __('Remove selected passwords') ?>
+			<?= \Controls\icon("delete") ?>
+			<?= __('Remove selected') ?>
 		</button>
 
 		<?php
@@ -444,6 +448,7 @@ class Pref_Prefs extends Handler_Protected {
 					<hr/>
 
 					<button dojoType='dijit.form.Button' type='submit' class='alt-danger'>
+						<?= \Controls\icon("lock_open") ?>
 						<?= __("Disable OTP") ?>
 					</button>
 
@@ -507,6 +512,7 @@ class Pref_Prefs extends Handler_Protected {
 					<hr/>
 
 					<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>
+						<?= \Controls\icon("lock") ?>
 						<?= __("Enable OTP") ?>
 					</button>
 
@@ -623,30 +629,27 @@ class Pref_Prefs extends Handler_Protected {
 
 					} else if ($pref_name == "USER_CSS_THEME") {
 
-						$themes = array_merge(glob("themes/*.php"), glob("themes/*.css"), glob("themes.local/*.css"));
-						$themes = array_map("basename", $themes);
-						$themes = array_filter($themes, "theme_exists");
-						asort($themes);
+						$theme_files = array_map("basename",
+							array_merge(glob("themes/*.php"),
+								glob("themes/*.css"),
+								glob("themes.local/*.css")));
 
-						if (!theme_exists($value)) $value = "";
+						asort($theme_files);
 
-						print "<select name='$pref_name' id='$pref_name' dojoType='fox.form.Select'>";
+						$themes = [ "" => __("default") ];
 
-						$issel = $value == "" ? "selected='selected'" : "";
-						print "<option $issel value=''>".__("default")."</option>";
-
-						foreach ($themes as $theme) {
-							$issel = $value == $theme ? "selected='selected'" : "";
-							print "<option $issel value='$theme'>$theme</option>";
+						foreach ($theme_files as $file) {
+							$themes[$file] = basename($file, ".css");
 						}
+						?>
 
-						print "</select>";
+						<?= \Controls\select_hash($pref_name, $value, $themes) ?>
+						<?= \Controls\button_tag(\Controls\icon("palette") . " " . __("Customize"), "",
+								["onclick" => "Helpers.Prefs.customizeCSS()"]) ?>
+						<?= \Controls\button_tag(\Controls\icon("open_in_new") . " " . __("More themes..."), "",
+								["class" => "alt-info", "onclick" => "window.open(\"https://tt-rss.org/wiki/Themes\")"]) ?>
 
-						print " <button dojoType=\"dijit.form.Button\" class='alt-info'
-							onclick=\"Helpers.Prefs.customizeCSS()\">" . __('Customize') . "</button>";
-
-						print " <button dojoType='dijit.form.Button' onclick='window.open(\"https://tt-rss.org/wiki/Themes\")'>
-							<i class='material-icons'>open_in_new</i> ".__("More themes...")."</button>";
+						<?php
 
 					} else if ($pref_name == "DEFAULT_UPDATE_INTERVAL") {
 
@@ -674,7 +677,8 @@ class Pref_Prefs extends Handler_Protected {
 							["disabled" => $is_disabled], "CB_$pref_name");
 
 						if ($pref_name == Prefs::DIGEST_ENABLE) {
-							print \Controls\button_tag(__('Preview'), '', ['onclick' => 'Helpers.Digest.preview()', 'style' => 'margin-left : 10px']);
+							print \Controls\button_tag(\Controls\icon("info") . " " . __('Preview'), '',
+								['onclick' => 'Helpers.Digest.preview()', 'style' => 'margin-left : 10px']);
 						}
 
 					} else if (in_array($pref_name, ['FRESH_ARTICLE_MAX_AGE',
@@ -699,11 +703,11 @@ class Pref_Prefs extends Handler_Protected {
 						$cert_serial = htmlspecialchars(self::_get_ssl_certificate_id());
 						$has_serial = ($cert_serial) ? true : false;
 
-						print \Controls\button_tag(__('Register'), "", [
+						print \Controls\button_tag(\Controls\icon("security") . " " . __('Register'), "", [
 							"disabled" => !$has_serial,
 							"onclick" => "dijit.byId('SSL_CERT_SERIAL').attr('value', '$cert_serial')"]);
 
-						print \Controls\button_tag(__('Clear'), "", [
+						print \Controls\button_tag(\Controls\icon("clear") . " " . __('Clear'), "", [
 							"class" => "alt-danger",
 							"onclick" => "dijit.byId('SSL_CERT_SERIAL').attr('value', '')"]);
 
@@ -763,19 +767,21 @@ class Pref_Prefs extends Handler_Protected {
 				<div dojoType="dijit.layout.ContentPane" region="bottom">
 
 					<div dojoType="fox.form.ComboButton" type="submit" class="alt-primary">
-						<span><?= __('Save configuration') ?></span>
+						<span>	<?= __('Save configuration') ?></span>
 						<div dojoType="dijit.DropDownMenu">
 							<div dojoType="dijit.MenuItem" onclick="dijit.byId('changeSettingsForm').onSubmit(null, true)">
-								<?= __("Save and exit preferences") ?>
+								<?= __("Save and exit") ?>
 							</div>
 						</div>
 					</div>
 
 					<button dojoType="dijit.form.Button" onclick="return Helpers.Profiles.edit()">
+						<?= \Controls\icon("settings") ?>
 						<?= __('Manage profiles') ?>
 					</button>
 
 					<button dojoType="dijit.form.Button" class="alt-danger" onclick="return Helpers.Prefs.confirmReset()">
+						<?= \Controls\icon("clear") ?>
 						<?= __('Reset to defaults') ?>
 					</button>
 
@@ -978,9 +984,12 @@ class Pref_Prefs extends Handler_Protected {
 				</div>
 				<div dojoType="dijit.layout.ContentPane" region="bottom">
 					<button dojoType='dijit.form.Button' class="alt-info pull-left" onclick='window.open("https://tt-rss.org/wiki/Plugins")'>
-						<i class='material-icons'>help</i> <?= __("More info...") ?>
+						<i class='material-icons'>help</i>
+						<?= __("More info...") ?>
 					</button>
+
 					<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>
+						<?= \Controls\icon("save") ?>
 						<?= __("Enable selected") ?>
 					</button>
 					<?php if ($_SESSION["access_level"] >= 10) { ?>

js/CommonDialogs.js

@@ -474,7 +474,7 @@ const	CommonDialogs = {
 									<fieldset>
 										<input dojoType='dijit.form.ValidationTextBox' required='1'
 											placeHolder="${__("Feed title")}"
-											style='font-size : 16px; width: 500px' name='title' value="${App.escapeHtml(feed.title)}">
+											style='font-size : 16px; width: 530px' name='title' value="${App.escapeHtml(feed.title)}">
 									</fieldset>
 
 									<fieldset>
@@ -565,19 +565,21 @@ const	CommonDialogs = {
 							<div dojoType="dijit.layout.ContentPane" title="${__('Icon')}">
 								<div><img class='feedIcon' style="${feed.icon ? "" : "display : none"}" src="${feed.icon ? App.escapeHtml(feed.icon) : ""}"></div>
 
-								<label class="dijitButton">${__("Upload new icon...")}
+								<label class="dijitButton">
+									${App.FormFields.icon("file_upload")}
+									${__("Upload new icon...")}
 									<input style="display: none" type="file" onchange="App.dialogOf(this).uploadIcon(this)">
 								</label>
 
-								${App.FormFields.submit_tag(__("Remove"), {class: "alt-danger", onclick: "App.dialogOf(this).removeIcon("+feed_id+")"})}
+								${App.FormFields.submit_tag(App.FormFields.icon("delete") + " " + __("Remove"), {class: "alt-danger", onclick: "App.dialogOf(this).removeIcon("+feed_id+")"})}
 							</div>
 							<div dojoType="dijit.layout.ContentPane" title="${__('Plugins')}">
 								${reply.plugin_data}
 							</div>
 						</div>
 						<footer>
-							${App.FormFields.button_tag(__("Unsubscribe"), "", {class: "pull-left alt-danger", onclick: "App.dialogOf(this).unsubscribe()"})}
-							${App.FormFields.submit_tag(__("Save"), {onclick: "App.dialogOf(this).execute()"})}
+							${App.FormFields.button_tag(App.FormFields.icon("delete") + " " + __("Unsubscribe"), "", {class: "pull-left alt-danger", onclick: "App.dialogOf(this).unsubscribe()"})}
+							${App.FormFields.submit_tag(App.FormFields.icon("save") + " " + __("Save"), {onclick: "App.dialogOf(this).execute()"})}
 							${App.FormFields.cancel_dialog_tag(__("Cancel"))}
 						</footer>
 					</form>

js/CommonFilters.js

@@ -229,7 +229,7 @@ const	Filters = {
 								<footer>
 									${App.FormFields.button_tag(App.FormFields.icon("help") + " " + __("More info"), "", {class: 'pull-left alt-info',
 										onclick: "window.open('https://tt-rss.org/wiki/ContentFilters')"})}
-									${App.FormFields.submit_tag(__("Save rule"), {onclick: "App.dialogOf(this).execute()"})}
+									${App.FormFields.submit_tag(App.FormFields.icon("save") + " " + __("Save"), {onclick: "App.dialogOf(this).execute()"})}
 									${App.FormFields.cancel_dialog_tag(__("Cancel"))}
 								</footer>
 
@@ -313,7 +313,7 @@ const	Filters = {
 									"filterDlg_actionParamPlugin")}
 							</section>
 							<footer>
-								${App.FormFields.submit_tag(__("Save action"), {onclick: "App.dialogOf(this).execute()"})}
+								${App.FormFields.submit_tag(App.FormFields.icon("save") + " " + __("Save"), {onclick: "App.dialogOf(this).execute()"})}
 								${App.FormFields.cancel_dialog_tag(__("Cancel"))}
 							</footer>
 						</form>
@@ -511,13 +511,13 @@ const	Filters = {
 						<footer>
 							${filter_id ?
 							`
-								${App.FormFields.button_tag(__("Remove"), "", {class: "pull-left alt-danger", onclick: "App.dialogOf(this).removeFilter()"})}
-								${App.FormFields.button_tag(__("Test"), "", {class: "alt-info", onclick: "App.dialogOf(this).test()"})}
-								${App.FormFields.submit_tag(__("Save"), {onclick: "App.dialogOf(this).execute()"})}
+								${App.FormFields.button_tag(App.FormFields.icon("delete") + " " + __("Remove"), "", {class: "pull-left alt-danger", onclick: "App.dialogOf(this).removeFilter()"})}
+								${App.FormFields.button_tag(App.FormFields.icon("check_circle") + " " + __("Test"), "", {class: "alt-info", onclick: "App.dialogOf(this).test()"})}
+								${App.FormFields.submit_tag(App.FormFields.icon("save") + " " + __("Save"), {onclick: "App.dialogOf(this).execute()"})}
 								${App.FormFields.cancel_dialog_tag(__("Cancel"))}
 							` : `
-								${App.FormFields.button_tag(__("Test"), "", {class: "alt-info", onclick: "App.dialogOf(this).test()"})}
-								${App.FormFields.submit_tag(__("Create"), {onclick: "App.dialogOf(this).execute()"})}
+								${App.FormFields.button_tag(App.FormFields.icon("check_circle") + " " + __("Test"), "", {class: "alt-info", onclick: "App.dialogOf(this).test()"})}
+								${App.FormFields.submit_tag(App.FormFields.icon("add") + " " + __("Create"), {onclick: "App.dialogOf(this).execute()"})}
 								${App.FormFields.cancel_dialog_tag(__("Cancel"))}
 							`}
 						</footer>

js/PrefLabelTree.js

@@ -69,7 +69,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 				const dialog = new fox.SingleUseDialog({
 					id: "labelEditDlg",
 					title: __("Edit label"),
-					style: "width: 650px",
 					setLabelColor: function (id, fg, bg) {
 
 						let kind = '';
@@ -121,10 +120,10 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 					content: `
 						<form onsubmit='return false'>
 
-						<header>${__("Caption")}</header>
 						<section>
-							<input style='font-size : 16px; color : ${fg_color}; background : ${bg_color}; transition : background 0.1s linear'
+							<input style='font-size : 16px; width : 550px; color : ${fg_color}; background : ${bg_color}; transition : background 0.1s linear'
 								id='labelEdit_caption'
+								placeholder="${__("Caption")}"
 								name='caption'
 								dojoType='dijit.form.ValidationTextBox'
 								required='true'
@@ -138,7 +137,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 						${App.FormFields.hidden_tag('fg_color', fg_color, {}, 'labelEdit_fgColor')}
 						${App.FormFields.hidden_tag('bg_color', bg_color, {}, 'labelEdit_bgColor')}
 
-						<header>${__("Colors")}</header>
 						<section>
 							<table width='100%'>
 								<tr>
@@ -168,6 +166,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 
 						<footer>
 							<button dojoType='dijit.form.Button' type='submit' class='alt-primary' onclick='App.dialogOf(this).execute()'>
+								${App.FormFields.icon("save")}
 								${__('Save')}
 							</button>
 							<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>

js/PrefUsers.js

@@ -115,6 +115,7 @@ const	Users = {
 
 						<footer>
 							<button dojoType='dijit.form.Button' class='alt-primary' type='submit' onclick='App.dialogOf(this).execute()'>
+								${App.FormFields.icon("save")}
 								${__('Save')}
 							</button>
 							<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>

themes/compact.css

@@ -1427,13 +1427,6 @@ body.ttrss_prefs {
   background-color: #f5f5f5;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  /*.dijitContentPane {
-		h1:first-of-type,
-		h2:first-of-type,
-		h3:first-of-type {
-			margin-top: 0px;
-		}
-	}*/
 }
 body.ttrss_prefs h1,
 body.ttrss_prefs h2,
@@ -1443,6 +1436,11 @@ body.ttrss_prefs h4 {
   font-weight: 600;
   color: #555;
 }
+body.ttrss_prefs .dijitContentPane > h1:first-of-type,
+body.ttrss_prefs .dijitContentPane > h2:first-of-type,
+body.ttrss_prefs .dijitContentPane > h3:first-of-type {
+  margin-top: 0;
+}
 body.ttrss_prefs #footer,
 body.ttrss_prefs #header {
   padding: 8px;

themes/compact_night.css

@@ -1427,13 +1427,6 @@ body.ttrss_prefs {
   background-color: #222;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  /*.dijitContentPane {
-		h1:first-of-type,
-		h2:first-of-type,
-		h3:first-of-type {
-			margin-top: 0px;
-		}
-	}*/
 }
 body.ttrss_prefs h1,
 body.ttrss_prefs h2,
@@ -1443,6 +1436,11 @@ body.ttrss_prefs h4 {
   font-weight: 600;
   color: #ccc;
 }
+body.ttrss_prefs .dijitContentPane > h1:first-of-type,
+body.ttrss_prefs .dijitContentPane > h2:first-of-type,
+body.ttrss_prefs .dijitContentPane > h3:first-of-type {
+  margin-top: 0;
+}
 body.ttrss_prefs #footer,
 body.ttrss_prefs #header {
   padding: 8px;

themes/light.css

@@ -1427,13 +1427,6 @@ body.ttrss_prefs {
   background-color: #f5f5f5;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  /*.dijitContentPane {
-		h1:first-of-type,
-		h2:first-of-type,
-		h3:first-of-type {
-			margin-top: 0px;
-		}
-	}*/
 }
 body.ttrss_prefs h1,
 body.ttrss_prefs h2,
@@ -1443,6 +1436,11 @@ body.ttrss_prefs h4 {
   font-weight: 600;
   color: #555;
 }
+body.ttrss_prefs .dijitContentPane > h1:first-of-type,
+body.ttrss_prefs .dijitContentPane > h2:first-of-type,
+body.ttrss_prefs .dijitContentPane > h3:first-of-type {
+  margin-top: 0;
+}
 body.ttrss_prefs #footer,
 body.ttrss_prefs #header {
   padding: 8px;

themes/light/prefs.less

@@ -9,13 +9,13 @@ body.ttrss_prefs {
 		color : @default-text;
 	}
 
-	/*.dijitContentPane {
-		h1:first-of-type,
-		h2:first-of-type,
-		h3:first-of-type {
-			margin-top: 0px;
+	.dijitContentPane {
+		> h1:first-of-type,
+		> h2:first-of-type,
+		> h3:first-of-type {
+			margin-top: 0;
 		}
-	}*/
+	}
 
 	#footer, #header {
 		padding : 8px;

themes/night.css

@@ -1428,13 +1428,6 @@ body.ttrss_prefs {
   background-color: #222;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  /*.dijitContentPane {
-		h1:first-of-type,
-		h2:first-of-type,
-		h3:first-of-type {
-			margin-top: 0px;
-		}
-	}*/
 }
 body.ttrss_prefs h1,
 body.ttrss_prefs h2,
@@ -1444,6 +1437,11 @@ body.ttrss_prefs h4 {
   font-weight: 600;
   color: #ccc;
 }
+body.ttrss_prefs .dijitContentPane > h1:first-of-type,
+body.ttrss_prefs .dijitContentPane > h2:first-of-type,
+body.ttrss_prefs .dijitContentPane > h3:first-of-type {
+  margin-top: 0;
+}
 body.ttrss_prefs #footer,
 body.ttrss_prefs #header {
   padding: 8px;

themes/night_blue.css

@@ -1428,13 +1428,6 @@ body.ttrss_prefs {
   background-color: #222;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  /*.dijitContentPane {
-		h1:first-of-type,
-		h2:first-of-type,
-		h3:first-of-type {
-			margin-top: 0px;
-		}
-	}*/
 }
 body.ttrss_prefs h1,
 body.ttrss_prefs h2,
@@ -1444,6 +1437,11 @@ body.ttrss_prefs h4 {
   font-weight: 600;
   color: #ccc;
 }
+body.ttrss_prefs .dijitContentPane > h1:first-of-type,
+body.ttrss_prefs .dijitContentPane > h2:first-of-type,
+body.ttrss_prefs .dijitContentPane > h3:first-of-type {
+  margin-top: 0;
+}
 body.ttrss_prefs #footer,
 body.ttrss_prefs #header {
   padding: 8px;