277 lines
2.5 KiB
JavaScript
277 lines
2.5 KiB
JavaScript
|
|
|
|
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
|
|
|
|
|
|
}
|