pixl-xyapp 2.1.0 → 2.1.2

package/css/base.css

@@ -12,11 +12,11 @@
 	--pink: rgb(232, 62, 140);
 	--red: rgb(220, 53, 69);
 	--orange: rgb(253, 126, 20);
-	--yellow: rgb(255, 193, 7);
+	--yellow: rgb(240, 200, 0);
 	--green: rgb(40, 167, 69);
 	--teal: rgb(32, 201, 151);
 	--cyan: rgb(23, 162, 184);
-	--gray: rgb(108, 117, 125);
+	--gray: rgb(138, 147, 155);
 	--primary: rgb(0, 123, 255);
 	--secondary: rgb(108, 117, 125);
 	--success: rgb(40, 167, 69);
@@ -109,6 +109,9 @@ body.dark {
 	--yellow: rgb(204, 154, 6);
 	--yellow-highlight: color-mix(in srgb, rgb(204, 154, 6) 80%, white);
 	
+	--gray: rgb(98, 107, 115);
+	--gray-highlight: color-mix(in srgb, rgb(98, 107, 115) 80%, white);
+	
 	--border-color: rgb(50, 54, 58);
 	--shadow-color: rgba(0, 0, 0, 0.0);
 	--background-color: rgb(24, 28, 32);
@@ -259,9 +262,6 @@ body.sidebar div.sidebar {
 	left: 0;
 }
 
-body {
-	/* transition: 0.2s ease padding-left; */
-}
 div.sidebar {
 	transition: 0.2s ease left;
 }
@@ -690,6 +690,7 @@ div.toast > span {
 	display: block;
 	position: relative;
 	margin-left: 35px;
+	word-break: break-word;
 }
 
 div.toast.success { background: #44bb44; }
@@ -806,10 +807,6 @@ div.message a:hover {
 
 /* Main */
 
-div.main {
-
-}
-
 div.page_intro {
 	padding: 30px 20px 0px 30px;
 	font-size: 14px;
@@ -975,10 +972,6 @@ body.dark .button {
 	opacity: 1.0;
 	/* text-decoration: underline; */
 }
-body.dark .button:hover {
-	/* background: var(--background-color); */
-}
-
 .button:active {
 	top: 0px;
 	box-shadow: none;
@@ -1105,7 +1098,7 @@ body.dark .button.primary {
 	width: 100%;
 }
 
-.form_row input[type="text"], .form_row input[type="password"], .form_row input[type="email"], .form_row input[type="url"], .form_row input[type="number"], .form_row input[type="date"], .form_row input[type="datetime-local"] {
+.form_row input[type="text"], .form_row input[type="password"], .form_row input[type="email"], .form_row input[type="url"], .form_row input[type="number"], .form_row input[type="date"], .form_row input[type="time"], .form_row input[type="datetime-local"], .form_row input[type="tel"], .form_row input[type="color"] {
 	-moz-appearance: none;
 	-webkit-appearance: none;
 	appearance: none;
@@ -1119,15 +1112,19 @@ body.dark .button.primary {
 	transition: 0.2s ease all;
 	cursor: text;
 }
-.form_row input[type="text"]:focus, .form_row input[type="password"]:focus, .form_row input[type="email"]:focus, .form_row input[type="url"]:focus, .form_row input[type="number"]:focus, .form_row input[type="date"]:focus, .form_row input[type="datetime-local"]:focus {
+.form_row input[type="text"]:focus, .form_row input[type="password"]:focus, .form_row input[type="email"]:focus, .form_row input[type="url"]:focus, .form_row input[type="number"]:focus, .form_row input[type="date"]:focus, .form_row input[type="time"]:focus, .form_row input[type="datetime-local"]:focus, .form_row input[type="tel"]:focus, .form_row input[type="color"]:focus {
 	/* color: var(--theme-color); */
 	border: 1px solid var(--theme-color-half);
 }
 
-.form_row input[type="text"].warning, .form_row input[type="email"].warning, .form_row input[type="url"].warning, .form_row input[type="number"].warning, .form_row input[type="date"].warning, .form_row input[type="datetime-local"].warning {
+.form_row input[type="text"].warning, .form_row input[type="email"].warning, .form_row input[type="url"].warning, .form_row input[type="number"].warning, .form_row input[type="date"].warning, .form_row input[type="time"].warning, .form_row input[type="datetime-local"].warning, .form_row input[type="tel"].warning, .form_row input[type="color"].warning {
 	border: 1px solid red;
 }
 
+.form_row input[type="color"] {
+	cursor: default;
+}
+
 .form_row input[type="text"].regexp {
 	font-size: 12px;
 }
@@ -1149,6 +1146,9 @@ body.dark .button.primary {
 	/* color: var(--theme-color); */
 	border: 1px solid var(--theme-color-half);
 }
+.dialog .form_row textarea {
+	resize: none;
+}
 
 input:disabled, textarea:disabled {
 	/* color: var(--body-text-color) !important; */
@@ -1286,6 +1286,9 @@ body.dark .multiselect.multi {
 body.dark .multiselect > .item {
 	background: var(--border-color);
 }
+body.dark .dialog .multiselect > .item {
+	background: rgba(255, 255, 255, 0.1);
+}
 
 .multiselect > .item > i.mdi-close:hover:before {
 	content: "\F0159"; /* mdi-close-circle */
@@ -1308,6 +1311,10 @@ body.dark .multiselect > .item.inherited {
 	font-style: italic;
 	color: var(--label-color);
 	
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	
 	user-select: none;
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -1322,10 +1329,10 @@ body.dark .multiselect > .item.inherited {
 	padding-top: 2px;
 	padding-bottom: 0px;
 }
-.form_grid .multiselect.single {
+/* .form_grid .multiselect.single {
 	padding-top: 2px;
 	padding-bottom: 0px;
-}
+} */
 
 .multiselect > .single {
 	padding-top: 1px;
@@ -1529,6 +1536,12 @@ div.info_value:last-child {
 	margin-bottom: 0px;
 }
 
+div.info_caption {
+	margin-top: 4px;
+	font-size: 11px;
+	color: var(--label-color);
+}
+
 .checker {
 	position: relative;
 	left: -12px;
@@ -1708,10 +1721,6 @@ body.dark #dialog, body.dark .dialog {
 	color: var(--red);
 }
 
-.dialog_content {
-	
-}
-
 .dialog_help {
 	font-size: 12px;
 	font-style: italic;
@@ -2325,9 +2334,6 @@ body.dark .data_table tr th {
 	
 	background: transparent;
 	/* background: linear-gradient(to top, #efefef 0%, #fff 100%); */
-}
-.data_table tr.highlight td {
-	
 }
 .data_table.extra_padding tr td {
 	padding-top: 10px;
@@ -2354,6 +2360,10 @@ table.data_table.compact th:first-child, table.data_table.compact td:first-child
 	padding-left: 10px;
 }
 
+div.data_table_compact > div.data_grid > ul.grid_row_header > div {
+	margin-bottom: 5px;
+}
+
 div.td_big {
 	line-height: 21px;
 	font-size: 13px;
@@ -2618,10 +2628,6 @@ body.dark .color_label {
 	align-items: center;
 }
 
-.simple_grid_horiz > div {
-	
-}
-
 /* My Account */
 
 .avatar_edit {

package/js/base.js

@@ -42,6 +42,7 @@ var app = {
 		var html = '<div class="header_nav_cont">';
 		
 		items.forEach( function(item, idx) {
+			if (!item) return;
 			if (typeof(item) == 'string') { 
 				if (config.ui.nav[item]) item = config.ui.nav[item];
 				else { html += item; return; }
@@ -161,6 +162,7 @@ var app = {
 			var page = this.page_manager.find(id);
 			if (page && page.onKeyDown) page.onKeyDown(event);
 		}
+		else if (app.onKeyDown) app.onKeyDown(event);
 	},
 	
 	handleUnload: function(event) {
@@ -271,7 +273,7 @@ var app = {
 		
 		request: function(url, opts, callback, errorCallback) {
 			// send HTTP GET to API endpoint
-			Debug.trace('api', "Sending API request: " + url );
+			// Debug.trace('api', "Sending API request: " + url );
 			
 			// default 10 sec timeout
 			var timeout = opts.timeout || 10000;
@@ -634,7 +636,7 @@ window.addEventListener( "click", function(e) {
 
 window.addEventListener( "keydown", function(event) {
 	if (Popover.enabled) Popover.handleKeyDown(event);
-	else if (CodeEditor.handleKeyDown) CodeEditor.handleKeyDown(event);
+	else if (CodeEditor.active) CodeEditor.handleKeyDown(event);
 	else if (Dialog.active) Dialog.confirm_key(event);
 	else app.handleKeyDown(event);
 }, false );

package/js/page.js

@@ -62,13 +62,17 @@ window.Page = class Page {
 		// add localized strings and markdown captions
 		var html = '';
 		
+		// pull in args from localized ui config (for label, caption, etc.)
 		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config (for label, caption, etc.)
-			// merge_hash_into( args, config.ui.dom[args.id] );
 			for (var key in config.ui.dom[args.id]) {
 				if (!args[key]) args[key] = config.ui.dom[args.id][key];
 			}
 		}
+		else if (args.id && config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) {
+			for (var key in config.ui.pages[this.ID][args.id]) {
+				if (!args[key]) args[key] = config.ui.pages[this.ID][args.id][key];
+			}
+		}
 		
 		var label = args.label;
 		var content = args.content;
@@ -98,9 +102,10 @@ window.Page = class Page {
 		if (args.disabled) args.disabled = "disabled";
 		else delete args.disabled;
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		// stupid hack for safari (autofill bug)
@@ -118,9 +123,10 @@ window.Page = class Page {
 		var value = ('value' in args) ? args.value : '';
 		delete args.value;
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		return '<textarea ' + compose_attribs(args) + '>' + encode_entities(value) + '</textarea>';
@@ -130,9 +136,10 @@ window.Page = class Page {
 		// render checkbox for form
 		var html = '';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var label = args.label || '';
@@ -165,9 +172,10 @@ window.Page = class Page {
 		var html = '';
 		html += '<div class="select_chevron mdi mdi-chevron-down" style="top:7px;"></div>';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var opts = args.options;
@@ -197,9 +205,10 @@ window.Page = class Page {
 		var html = '';
 		var opt_values = [];
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var opts = deep_copy_object(args.options);
@@ -269,9 +278,10 @@ window.Page = class Page {
 		// render single-select menu for form
 		var html = '';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var opts = deep_copy_object(args.options);
@@ -299,9 +309,10 @@ window.Page = class Page {
 	
 	getFormFieldset(args) {
 		// get fieldset for form
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var legend = ('legend' in args) ? args.legend : '';
@@ -317,9 +328,10 @@ window.Page = class Page {
 		// get info group pair for fieldset in form
 		var html = '';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		if ('label' in args) html += '<div class="info_label">' + args.label + '</div>';
@@ -331,9 +343,10 @@ window.Page = class Page {
 		// render file field for form
 		if (!args.type) args.type = 'file';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		return '<input ' + compose_attribs(args) + '/>';
@@ -348,9 +361,10 @@ window.Page = class Page {
 		}
 		if (!args.type) args.type = 'hidden';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		return '<input ' + compose_attribs(args) + '/><div class="form_date"></div>';
@@ -364,9 +378,10 @@ window.Page = class Page {
 		var unit = 'seconds';
 		var html = '';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var units = [
@@ -408,9 +423,10 @@ window.Page = class Page {
 		var unit = 'b';
 		var html = '';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
 		var units = [
@@ -454,12 +470,14 @@ window.Page = class Page {
 		if (!args.value) args.value = 0;
 		var html = '';
 		
-		if (args.id && config.ui.dom[args.id]) {
-			// pull in args from localized ui config
-			merge_hash_into( args, config.ui.dom[args.id] );
+		// pull in args from localized ui config
+		if (args.id) {
+			if (config.ui.dom[args.id]) merge_hash_into( args, config.ui.dom[args.id] );
+			else if (config.ui.pages[this.ID] && config.ui.pages[this.ID][args.id]) merge_hash_into( args, config.ui.pages[this.ID][args.id] );
 		}
 		
-		args.onInput = `$P().updateFormRange(this)`;
+		if (args.onInput) args.onInput += ';'; else args.onInput = '';
+		args.onInput += `$P().updateFormRange(this)`;
 		
 		html += '<div class="form_row_range">';
 			html += '<div>' + this.getFormText( merge_objects(args, { type: 'range' }) ) + '</div>';
@@ -1084,7 +1102,7 @@ window.Page = class Page {
 				}
 				else {
 					Debug.trace("User cookie is invalid, redirecting to login page");
-					self.setPref('username', '');
+					app.setPref('username', '');
 					setTimeout( function() { Nav.go('Login'); }, 1 );
 				}
 			} );

package/js/popover.js

@@ -16,6 +16,8 @@ var Popover = {
 		});
 		if (!shrinkwrap) $box.css('width', '' + Math.floor( rect.width ) + 'px');
 		
+		if ($elem.data('popover-z-index')) $box.css('z-index', $elem.data('popover-z-index'));
+		
 		$('body').append( $box );
 		
 		this.$box = $box;
@@ -59,9 +61,11 @@ var Popover = {
 			
 			var $overlay = $('<div id="popoverlay"></div>').css('opacity', 0);
 			$('body').append($overlay);
-			$overlay.fadeTo( 500, 0.5 ).click(function() {
-				Popover.detach();
-			});
+			$overlay.click( function() { Popover.detach(); } );
+			
+			if (!$elem.data('popover-hide-overlay')) {
+				$overlay.fadeTo( 500, 0.5 );
+			}
 			
 			if (!Dialog.active) unscroll();
 		}, 1 );

package/js/tools.js

@@ -969,7 +969,7 @@ function stablePrettyStringify(node) {
 
 function inline_marked(md) {
 	// render text to markdown, trimming and stripping outer <p> tag
-	return marked.parse(md, config.ui.marked_config).trim().replace(/^<p>(.+)<\/p>$/, '$1')
+	return marked.parseInline(md, config.ui.marked_config);
 };
 
 // Debounce Function Generator

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pixl-xyapp",
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"description": "A theme for xyOps.",
 	"author": "Joseph Huckaby <jhuckaby@pixlcore.com>",
 	"homepage": "https://github.com/pixlcore/pixl-xyapp",