First commit

application/elements/gridView/gridView.body.js

@@ -0,0 +1,54 @@
+
+
+
+
+export default class gridViewTableHeader{
+
+	flexFlow			= "column";
+	
+	display				= "table-row-group"
+
+	layers				= 1;
+
+
+	#ifdef WINDOWS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+		background	= "white";
+
+		#endif
+		
+	#endif
+
+
+
+	#ifdef MACOS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+			background		= "#2c2c2c";
+
+			fontWeight		= "bold";
+
+		#endif
+
+		#ifdef LIGHT
+
+
+			background		= "rgb(0 0 0 / 1%)";
+			
+		#endif
+		
+	#endif
+
+}

application/elements/gridView/gridView.body.row.column.js

@@ -0,0 +1,54 @@
+
+
+import tableCell 	from "/elements/tableCell.js";
+
+export default class gridViewBodyColumn extends tableCell{
+
+	useCustomElement	= false;
+
+	layers				= 1;
+
+
+	#ifdef WINDOWS
+
+		padding				= 20;
+
+		#ifdef DARK
+
+			paddingLeft			= 30;
+
+			//borderLeft			= "1px solid #24364e7a";
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		padding					= 12;
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef ANDROID
+
+		padding				= 20;
+
+	#endif
+
+	
+}

application/elements/gridView/gridView.body.row.js

@@ -0,0 +1,13 @@
+
+
+
+
+export default class gridViewRow{
+
+	display				= "table-row";
+	
+	layers				= 1;
+
+	propegateEvent		= false;
+
+}

application/elements/gridView/gridView.header.js

@@ -0,0 +1,59 @@
+
+
+
+
+export default class gridViewHeader{
+
+	display			= "table-header-group"
+
+	layers			= 1;
+
+	flexFlow		= "column";
+
+
+	#ifdef WINDOWS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+
+
+		#endif
+
+		#ifdef LIGHT
+
+			background				= "#ffffffa8"
+
+			borderBottom			= "1px solid rgb(0 0 0 / 5%)"
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+			background	= "#393939";
+
+			borderBottom	= "2px solid #3f3f3f";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background				= "rgb(0 0 0 / 3%)"
+
+			borderBottom			= "1px solid rgb(0 0 0 / 5%)"
+
+		#endif
+		
+	#endif
+
+
+
+}

application/elements/gridView/gridView.header.row.column.js

@@ -0,0 +1,126 @@
+
+
+import tableCell 	from "/elements/tableCell.js";
+
+import sortBy 		from "./gridView.header.row.column.sortBy.js";
+
+
+export default class gridViewRowColumn extends tableCell{
+
+	display					= "table-cell";
+	
+	layers					= 1;
+
+	propegateEvent			= false;
+
+	useCustomElement		= false;
+
+	cursor					= "pointer";
+
+	hoverBackgroundColor	= "#363333"
+
+	async click() {
+
+		var renderCollection		= this.parent.parent.parent.body;
+
+		renderCollection.sort		= this.propertyName;
+
+		this.unselectOtherColumns();
+
+		var direction	= this.selectThisColumn();
+
+		renderCollection.direction	= direction;
+
+		renderCollection.update();
+
+	}
+
+	unselectOtherColumns() {
+
+		var columns	= this.parent.getChildren();
+
+		for (var i = 0; i < columns.length; i++) {
+
+			var column	= columns[i];
+
+			if( column.sortBy ) {
+
+				column.sortBy.text	= "";
+
+			}
+
+		}
+
+	}
+
+	selectThisColumn() {
+
+		if( this.sortBy.type == "asc" ) {
+
+			this.sortBy.transform	= "rotate(90deg)";
+
+			this.sortBy.type = "desc"
+
+		} else {
+
+			this.sortBy.transform	= "rotate(-90deg)";
+
+			this.sortBy.type = "asc"
+
+		}
+
+		this.sortBy.text		= "<";
+
+		return this.sortBy.type;
+
+	}
+
+
+	#ifdef WINDOWS
+
+		padding				= 10;
+
+		paddingRight		= 40;
+
+		paddingLeft			= 20;
+
+		#ifdef DARK
+
+			paddingLeft			= 30;
+
+			//borderLeft			= "1px solid #24364e7a";
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		padding					= 10;
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef ANDROID
+
+		padding				= 20;
+
+	#endif
+
+	sortBy					= new sortBy();
+	
+}

application/elements/gridView/gridView.header.row.column.sortBy.js

@@ -0,0 +1,19 @@
+
+
+import button	from "/elements/button.js";
+
+export default class sortBy{
+	
+	text			= ""
+
+	transition		= "none"
+
+	layers			= 1;
+
+	float			= "right"
+
+	transform;
+
+	type			= "desc"
+
+}

application/elements/gridView/gridView.header.row.js

@@ -0,0 +1,13 @@
+
+
+
+
+export default class gridViewTableRow{
+
+	display				= "table-row";
+	
+	propegateEvent		= false;
+
+	layers				= 1;
+
+}

application/elements/gridView/gridView.js

@@ -0,0 +1,80 @@
+
+
+export default class gridView{
+
+	display					= "table";
+
+	layers					= 1;
+
+	fontSize				= 12;
+
+
+
+	borderCollapse			= "separate";
+
+	borderSpacing			= "0";
+
+	borderRadius			= 12;
+
+	overflow				= "hidden";
+	
+
+
+	#ifdef WINDOWS
+
+		margin				= 30;
+
+		borderRadius		= 4;
+
+		#ifdef DARK
+
+			background		= "#202020"
+
+			color			= "white"
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+	#ifdef MACOS
+
+		margin			= 2;
+
+		borderRadius	= 4;
+
+		#ifdef DARK
+
+			color			= "white"
+		
+			border			= "1px solid #4f4f4f"
+
+		#endif
+
+		#ifdef LIGHT
+
+			border			= "1px solid rgb(0 0 0 / 5%)"
+
+		#endif
+		
+	#endif
+
+	#ifdef ANDROID
+
+
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+
+	#endif
+
+	propegateEvent		= false;
+
+}