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,6 +103,8 @@ define(["dojo/_base/declare"], function (declare) {
 			dialog.show();
 		},
 		customizeCSS: function() {
+			require(["codeflask"], function(CodeFlask) {
+
 				const query = "backend.php?op=pref-prefs&method=customizeCSS";
 
 				if (dijit.byId("cssEditDlg"))
@@ -115,7 +117,10 @@ define(["dojo/_base/declare"], function (declare) {
 					execute: function () {
 						Notify.progress('Saving data...', true);
 
-					xhrPost("backend.php", this.attr('value'), () => {
+						const params = this.attr('value');
+						params.value = this._flask.getCode();
+
+						xhrPost("backend.php", params, () => {
 							window.location.reload();
 						});
 
@@ -123,7 +128,14 @@ define(["dojo/_base/declare"], function (declare) {
 					href: query
 				});
 
+				dojo.connect(dialog, "onShow", function () {
+					setTimeout(() => {
+						dialog._flask = new CodeFlask('#user-css-editor', {language: 'css'});
+					}, 250);
+				});
+
 				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 {