use codeflask for user css editor

classes/pref/prefs.php

@@ -993,12 +993,7 @@ class Pref_Prefs extends Handler_Protected {
 		print_hidden("method", "setpref");
 		print_hidden("key", "USER_STYLESHEET");
 
-		print "<table width='100%'><tr><td>";
+		print "<div class='panel' id='user-css-editor'>$value</div>";
-		print "<textarea dojoType=\"dijit.form.SimpleTextarea\"
-			style='font-size : 12px; width : 98%; height: 200px;'
-			placeHolder='body#ttrssMain { font-size : 14px; };'
-			name='value'>$value</textarea>";
-		print "</td></tr></table>";
 
 		print "<div class='dlgButtons'>";
 		print "<button dojoType=\"dijit.form.Button\"

css/default.css

@@ -1434,6 +1434,12 @@ body.ttrss_prefs #header img {
   vertical-align: middle;
   cursor: pointer;
 }
+body.ttrss_prefs #user-css-editor {
+  height: 300px;
+}
+body.ttrss_prefs #user-css-editor .codeflask {
+  position: relative;
+}
 body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon,
 body.ttrss_prefs .dijitTree#labelTree .dijitTreeIcon,
 body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon {

css/prefs.less

@@ -28,6 +28,14 @@ body.ttrss_prefs {
 		cursor : pointer;
 	}
 
+	#user-css-editor {
+		height : 300px;
+
+		.codeflask {
+			position : relative;
+		}
+	}
+
 	.dijitTree#filterTree .dijitTreeIcon,
 	.dijitTree#labelTree .dijitTreeIcon,
 	.dijitTree#filterTree .dijitTreeIcon {

js/PrefHelpers.js

@@ -103,27 +103,39 @@ define(["dojo/_base/declare"], function (declare) {
 			dialog.show();
 		},
 		customizeCSS: function() {
-			const query = "backend.php?op=pref-prefs&method=customizeCSS";
+			require(["codeflask"], function(CodeFlask) {
 
-			if (dijit.byId("cssEditDlg"))
+				const query = "backend.php?op=pref-prefs&method=customizeCSS";
-				dijit.byId("cssEditDlg").destroyRecursive();
 
-			const dialog = new dijit.Dialog({
+				if (dijit.byId("cssEditDlg"))
-				id: "cssEditDlg",
+					dijit.byId("cssEditDlg").destroyRecursive();
-				title: __("Customize stylesheet"),
-				style: "width: 600px",
-				execute: function () {
-					Notify.progress('Saving data...', true);
 
-					xhrPost("backend.php", this.attr('value'), () => {
+				const dialog = new dijit.Dialog({
-						window.location.reload();
+					id: "cssEditDlg",
-					});
+					title: __("Customize stylesheet"),
+					style: "width: 600px",
+					execute: function () {
+						Notify.progress('Saving data...', true);
 
-				},
+						const params = this.attr('value');
-				href: query
+						params.value = this._flask.getCode();
+
+						xhrPost("backend.php", params, () => {
+							window.location.reload();
+						});
+
+					},
+					href: query
+				});
+
+				dojo.connect(dialog, "onShow", function () {
+					setTimeout(() => {
+						dialog._flask = new CodeFlask('#user-css-editor', {language: 'css'});
+					}, 250);
+				});
+
+				dialog.show();
 			});
-
-			dialog.show();
 		},
 		confirmReset: function() {
 			if (confirm(__("Reset to defaults?"))) {

prefs.php

@@ -59,6 +59,9 @@
 			packages: [
 				{ name: "lib", location: "../" },
 				{ name: "fox", location: "../../js" },
+			],
+			aliases: [
+				[ "codeflask", "lib/codeflask.min.js" ]
 			]
 		};
 	</script>

themes/night.css

@@ -1434,6 +1434,12 @@ body.ttrss_prefs #header img {
   vertical-align: middle;
   cursor: pointer;
 }
+body.ttrss_prefs #user-css-editor {
+  height: 300px;
+}
+body.ttrss_prefs #user-css-editor .codeflask {
+  position: relative;
+}
 body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon,
 body.ttrss_prefs .dijitTree#labelTree .dijitTreeIcon,
 body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon {