First commit

application/elements/window/header.js

@@ -0,0 +1,276 @@
+
+
+import icon	from "/elements/icon.js";
+
+
+class maximizeButton extends icon{
+
+	margin	= 20;
+
+	cursor	= "pointer"
+
+	width	= 16;
+
+	height	= 16;
+
+	backgroundSize	= "contain!important";
+
+	#ifdef LIGHT
+
+		filter				= "invert(0)"
+		
+	#endif
+
+	#ifdef DARK
+
+		filter				= "invert(1)"
+
+	#endif
+
+
+	click() {
+
+		var window = this.parent.parent.parent;
+
+
+		if( window.state == "maximized" ) {
+
+			window.restore();
+
+			window.state	= "normal";
+
+			this.setImage("assets/images/icons/maximize.svg")
+
+		} else {
+
+			window.maximize();
+
+			window.state	= "maximized";
+
+			this.setImage("assets/images/icons/restore.svg")
+
+
+		}
+	}
+
+	constructor() {
+
+		super("maximize.svg")
+
+	}
+
+	transition	= "1s"
+
+}
+
+
+
+class closeButton extends icon{
+
+	margin	= 20;
+
+	cursor	= "pointer"
+
+	width	= 16;
+
+	height	= 16;
+
+	backgroundSize	= "contain!important";
+
+	#ifdef LIGHT
+
+		filter				= "invert(0)"
+		
+	#endif
+
+	#ifdef DARK
+
+		filter				= "invert(1)"
+
+	#endif
+
+
+	click() {
+
+		this.parent.parent.parent.hide();
+
+	}
+
+	constructor() {
+
+		super("close.svg")
+
+	}
+
+
+}
+
+
+class leftControl{
+
+
+
+	closeButton		= new closeButton();
+
+	maximizeButton	= new maximizeButton();
+
+	#ifdef DARK
+
+		color		= "#363636";
+
+	#endif
+
+	height		= "40px"
+
+	display		= "flex";
+
+	layers		= 1;
+
+	flex		= "1";
+
+	flexDirection	= "row"
+
+}
+
+class title{
+
+	//background	= "blue";
+
+	setTitle( title ) {
+
+		this.element.innerText = title;
+
+	}
+
+	padding		= 20;
+
+	height		= "40px"
+
+	display		= "block";
+
+	layers		= 1;
+
+}
+
+
+class rightControl{
+
+	//background	= "yellow";
+
+	height		= "40px"
+
+	display		= "block";
+
+	flex		= "1";
+
+	layers		= 1;
+
+}
+
+
+export default class windowHeader{
+
+
+
+	constructor( text, gridName ) {
+
+		this.title.text 		= text;
+		
+		this.gridArea 	= gridName;
+
+	}
+
+
+
+	setTitle( title ) {
+
+		this.title.setTitle( title );
+	}
+
+	boxShadow				= "0px 1px 1px 0px #00000008";
+
+	marginBottom			= 10;
+
+
+	leftControl		= new leftControl();
+
+	title			= new title();
+
+	rightControl	= new rightControl();
+
+
+
+	width			= "100%";
+
+	layers			= 1;
+
+	gridArea		= "passwordLabel";
+
+	color			= "black";
+
+	//padding			= 20;
+
+	fontWeight		= "bold";
+
+	fontSize		= 12;
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color	= "white";
+
+		#endif
+	
+
+	#endif
+
+
+	#ifdef MACOS
+
+		borderTopLeftRadius		= "4px"
+
+		borderTopRightRadius	= "4px" 
+
+		//padding					= 10;
+
+		//paddingLeft				= 0;
+
+		boxWidth				= "100%";
+
+
+
+
+		#ifdef LIGHT
+
+			borderBottom			= "1px solid #f1f1f1";
+
+			background	= "white";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color					= "white";
+
+			borderBottom			= "1px solid black";
+
+			background				= "#1c1c1c";
+
+		#endif
+	
+
+	#endif
+
+
+}