pixl-xyapp 2.1.6 → 2.1.7

package/README.md

@@ -355,7 +355,7 @@ The pagination links work by constructing self-referencing URL to the current pa
 
 Since the `limit` is set to 5 items per page, and `offset` starts at `0`, then the next page (page 2) will be at offset `5`.  This link is simply a hashtag anchor tag, which doesn't reload the browser page, but will instead be caught by the navigation system, and call your page's `onDeactivate()` then its `onActivate()` with the new values.  It is up to your page code to redraw the table with the new data chunk and new `offset` value.
 
-Instead of generating hashtag anchor links, you can optionally provide a custom JavaScript function in a `pagination_link` property, which will be written into the HTML as an `onMouseUp` handler on each link, and called instead of a standard link.  Note that it must be a string and globally accessible, so remember the `$P()` shortcut to get access to the current page.  Example:
+Instead of generating hashtag anchor links, you can optionally provide a custom JavaScript function in a `pagination_link` property, which will be written into the HTML as an `onClick` handler on each link, and called instead of a standard link.  Note that it must be a string and globally accessible, so remember the `$P()` shortcut to get access to the current page.  Example:
 
 ```javascript
 	pagination_link: '$P().tableNavClick'
@@ -370,7 +370,7 @@ Notification messages are shown in a fixed bar at the top of the screen, regardl
 To use the notification system in your app, make sure this markup is in your main HTML page:
 
 ```html
-	<div id="d_message" class="message" style="display:none" onMouseUp="app.hideMessage(250)">
+	<div id="d_message" class="message" style="display:none" onClick="app.hideMessage(250)">
 		<div id="d_message_inner" class="message_inner"></div>
 	</div>
 ```

package/css/base.css

@@ -112,22 +112,22 @@ body.dark {
 	--gray: rgb(98, 107, 115);
 	--gray-highlight: color-mix(in srgb, rgb(98, 107, 115) 80%, white);
 	
-	--border-color: rgb(50, 54, 58);
+	--border-color: rgb(50, 50, 58);
 	--shadow-color: rgba(0, 0, 0, 0.0);
-	--background-color: rgb(24, 28, 32);
-	--header-background-color: rgb(32, 34, 38);
-	--header-text-color: rgb(125, 135, 150);
-	--box-background-color: rgb(32, 34, 38);
-	--form-background-color: rgb(40, 44, 48);
+	--background-color: rgb(24, 24, 32);
+	--header-background-color: rgb(32, 32, 38);
+	--header-text-color: rgb(125, 125, 150);
+	--box-background-color: rgb(32, 32, 38);
+	--form-background-color: rgb(40, 40, 48);
 	--table-header-background-color: rgba(200, 225, 255, 0.03);
 	
-	--sidebar-background-color: rgb(32, 34, 38);
-	--sidebar-text-color: rgb(125, 135, 150);
+	--sidebar-background-color: rgb(32, 32, 38);
+	--sidebar-text-color: rgb(125, 125, 150);
 	
-	--body-text-color: rgb(170, 180, 200);
-	--link-color: rgb(145, 155, 170);
-	--label-color: rgb(145, 155, 170);
-	--alt-label-color: rgb(120, 125, 130);
+	--body-text-color: rgb(170, 170, 200);
+	--link-color: rgb(145, 145, 170);
+	--label-color: rgb(145, 145, 170);
+	--alt-label-color: rgb(120, 120, 130);
 	--icon-color: rgb(115, 115, 130);
 	--icon-color-half: rgba(115, 115, 130, 0.5);
 }
@@ -695,17 +695,12 @@ div.toast > span {
 	word-break: break-word;
 }
 
-div.toast.success { background: #44bb44; }
-div.toast.warning { background: #bbbb44; }
+div.toast.success { background: var(--green); }
+div.toast.warning { background: var(--yellow); }
 div.toast.error { background: var(--red); }
-div.toast.critical { background: #bb44bb; }
-div.toast.info { background: #5890db; }
-
-body.dark div.toast.success { background: rgb(20, 128, 20); }
-body.dark div.toast.warning { background: rgb(128, 128, 20); }
-body.dark div.toast.error { background-color:var(--red); }
-body.dark div.toast.critical { background: rgb(128, 20, 128); }
-body.dark div.toast.info { background: rgb(28, 84, 160); }
+div.toast.critical { background: var(--purple); }
+div.toast.info { background: var(--theme-color); }
+div.toast.suspended { background: var(--orange); }
 
 div.toast.channel { 
 	background: var(--box-background-color); 
@@ -787,6 +782,7 @@ div.message.error { background: var(--red); }
 div.message.critical { background: var(--purple); }
 div.message.abort { background: var(--red); }
 div.message.info { background: var(--blue); }
+div.message.suspended { background: var(--orange); }
 
 /* body.dark div.message.success { background: rgb(20, 128, 20); }
 body.dark div.message.warning { background: rgb(128, 128, 20); }
@@ -1911,6 +1907,10 @@ div.progress_bar_label.second_half {
 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
 }
 
+.progress_bar_label i.mdi:before {
+	transform: scale(1.5);
+}
+
 div.progress_bar_container.indeterminate div.progress_bar_label {
 	display: none;
 }
@@ -2587,6 +2587,10 @@ body.dark .data_grid > ul.grid_row_header > div {
 	padding-right: 1px;
 }
 
+.data_grid > ul > div .progress_bar_container {
+	margin: 1px 0 2px 0; /* Nudge height from 18px to 21px to match std grid units */
+}
+
 .data_grid ul.disabled div {
 	opacity: 0.6;
 }

package/js/base.js

@@ -225,9 +225,11 @@ var app = {
 		var icon = '';
 		switch (type) {
 			case 'success': icon = 'check-circle'; break;
-			case 'warning': icon = 'alert-circle'; break;
+			case 'warning': icon = 'alert-rhombus'; break;
 			case 'error': icon = 'alert-decagram'; break;
 			case 'info': icon = 'information-outline'; break;
+			case 'critical': icon = 'fire-alert'; break;
+			case 'suspended': icon = 'motion-pause-outline'; break;
 			
 			default:
 				if (type.match(/^(\w+)\/(.+)$/)) { type = RegExp.$1; icon = RegExp.$2; }
@@ -259,7 +261,11 @@ var app = {
 		$toast.on('click', function() {
 			if (timer) clearTimeout(timer);
 			$toast.fadeOut( 250, function() { $(this).remove(); } );
-			if (loc) Nav.go(loc);
+			if (loc) {
+				$toast.addClass('clicky');
+				if (typeof(loc) == 'function') loc();
+				else if (typeof(loc) == 'string') Nav.go(loc);
+			}
 		} );
 		
 		if ((type == 'success') || (type == 'info') || lifetime) {
@@ -271,9 +277,7 @@ var app = {
 	},
 	
 	hideMessage: function(animate) {
-		// if (animate) $('#d_message').hide(animate);
-		// else $('#d_message').hide();
-		
+		// hide all toasts
 		if (animate) $('div.toast').fadeOut( animate, function() { $(this).remove(); } );
 		else $('div.toast').remove();
 	},

package/js/calendar.js

@@ -46,9 +46,9 @@ var Calendar = {
 		
 		html += '<div class="calendar">';
 			html += '<div class="cal_header">';
-				html += '<div class="ch_nav ch_prev" onMouseUp="Calendar.prevMonth()" title="Previous Month"><i class="mdi mdi-chevron-double-left"></i></div>';
+				html += '<div class="ch_nav ch_prev" onClick="Calendar.prevMonth()" title="Previous Month"><i class="mdi mdi-chevron-double-left"></i></div>';
 				html += '<div class="ch_title"></div>';
-				html += '<div class="ch_nav ch_next" onMouseUp="Calendar.nextMonth()" title="Next Month"><i class="mdi mdi-chevron-double-right"></i></div>';
+				html += '<div class="ch_nav ch_next" onClick="Calendar.nextMonth()" title="Next Month"><i class="mdi mdi-chevron-double-right"></i></div>';
 			html += '</div>';
 			html += '<div class="cal_days">';
 				_short_day_names.forEach( function(ddd) {

package/js/page.js

@@ -557,7 +557,7 @@ window.Page = class Page {
 			// html += 'Page: ';
 			if (current_page > 1) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -587,7 +587,7 @@ window.Page = class Page {
 				}
 				else {
 					if (cpl) {
-						html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
+						html += '<span class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
 					}
 					else {
 						html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -601,7 +601,7 @@ window.Page = class Page {
 			html += '&nbsp;&nbsp;';
 			if (current_page < num_pages) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -717,7 +717,7 @@ window.Page = class Page {
 			// html += 'Page: ';
 			if (current_page > 1) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -748,7 +748,7 @@ window.Page = class Page {
 				}
 				else {
 					if (cpl) {
-						html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
+						html += '<span class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
 					}
 					else {
 						html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -763,7 +763,7 @@ window.Page = class Page {
 			
 			if (current_page < num_pages) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {

package/js/tools.js

@@ -560,7 +560,7 @@ function expando_text(text, max, link) {
 	var after = text.substring(max);
 	
 	return before + 
-		'<span>... <a href="javascript:void(0)" onMouseUp="$(this).parent().hide().next().show()">'+link+'</a></span>' + 
+		'<span>... <a href="javascript:void(0)" onClick="$(this).parent().hide().next().show()">'+link+'</a></span>' + 
 		'<span style="display:none">' + after + '</span>';
 };
 

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "pixl-xyapp",
-	"version": "2.1.6",
+	"version": "2.1.7",
 	"description": "A theme for xyOps.",
 	"author": "Joseph Huckaby <jhuckaby@pixlcore.com>",
 	"homepage": "https://github.com/pixlcore/pixl-xyapp",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/pixlcore/pixl-xyapp"
+		"url": "git+https://github.com/pixlcore/pixl-xyapp.git"
 	},
 	"bugs": {
 		"url": "https://github.com/pixlcore/pixl-xyapp/issues"