202 lines
2.1 KiB
JavaScript
202 lines
2.1 KiB
JavaScript
|
export default class menuButton{
|
||
|
|
|
||
|
|
width = 110;
|
||
|
|
|
||
|
|
color;
|
||
|
|
|
||
|
|
background;
|
||
|
|
|
||
|
|
fontWeight;
|
||
|
|
|
||
|
|
#ifdef ANDROID
|
||
|
|
|
||
|
|
width = "80vw";
|
||
|
|
|
||
|
|
borderRadius = 18;
|
||
|
|
|
||
|
|
textAlign = "center"
|
||
|
|
|
||
|
|
padding = 20;
|
||
|
|
|
||
|
|
margin = "0 auto"
|
||
|
|
|
||
|
|
marginTop = 8;
|
||
|
|
|
||
|
|
fontSize = 20;
|
||
|
|
|
||
|
|
height = 24;
|
||
|
|
|
||
|
|
fontWeight = "600"
|
||
|
|
|
||
|
|
fontColor = "#313131";
|
||
|
|
|
||
|
|
#ifdef LIGHT
|
||
|
|
|
||
|
|
borderBottom = "1px solid #ececec";
|
||
|
|
|
||
|
|
background = "white";
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
#ifdef WINDOWS
|
||
|
|
|
||
|
|
borderRadius = 6;
|
||
|
|
|
||
|
|
width = 160
|
||
|
|
|
||
|
|
padding = 10;
|
||
|
|
|
||
|
|
marginTop = 2;
|
||
|
|
|
||
|
|
marginBottom = 2;
|
||
|
|
|
||
|
|
paddingLeft = 30;
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
|
||
|
|
activated = false;
|
||
|
|
|
||
|
|
propegateEvent = false;
|
||
|
|
|
||
|
|
cursor = "pointer";
|
||
|
|
|
||
|
|
#ifdef WINDOWS
|
||
|
|
|
||
|
|
#ifdef DARK
|
||
|
|
|
||
|
|
hightlightBackgroundColor = "#2d2d2d";
|
||
|
|
|
||
|
|
hightlightBackgroundColor = "#0c0e165c";
|
||
|
|
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
#ifdef LIGHT
|
||
|
|
|
||
|
|
hightlightBackgroundColor = "rgb(141 180 189 / 12%)";
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
#ifdef MACOS
|
||
|
|
|
||
|
|
borderRadius = 8;
|
||
|
|
|
||
|
|
padding = 10;
|
||
|
|
|
||
|
|
paddingLeft = 20;
|
||
|
|
|
||
|
|
fontSize = 16;
|
||
|
|
|
||
|
|
fontWeight = "600";
|
||
|
|
|
||
|
|
|
||
|
|
hightlightBackgroundColor = "rgb(189 193 221 / 22%)"
|
||
|
|
|
||
|
|
|
||
|
|
#ifdef LIGHT
|
||
|
|
|
||
|
|
color = "#343434";
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
#endif
|
||
|
|
|
||
|
|
|
||
|
|
activated = false;
|
||
|
|
|
||
|
|
state activateButton() {
|
||
|
|
|
||
|
|
this.activated = true;
|
||
|
|
|
||
|
|
this.highlightButton();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
state deactivateButton() {
|
||
|
|
|
||
|
|
this.activated = false;
|
||
|
|
|
||
|
|
this.lowlightButton();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
highlightButton() {
|
||
|
|
|
||
|
|
this.background = this.hightlightBackgroundColor;
|
||
|
|
|
||
|
|
if( !this.activated ) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
lowlightButton() {
|
||
|
|
|
||
|
|
if( !this.activated ) {
|
||
|
|
|
||
|
|
this.background = "";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
mouseover() {
|
||
|
|
|
||
|
|
this.highlightButton();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
mouseleave() {
|
||
|
|
|
||
|
|
if( !this.activated ) {
|
||
|
|
|
||
|
|
this.lowLightButtons();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
deactivateButtons() {
|
||
|
|
|
||
|
|
var children = this.parent.getChildren();
|
||
|
|
|
||
|
|
for (var i = 0; i < children.length; i++) {
|
||
|
|
|
||
|
|
var child = children[i];
|
||
|
|
|
||
|
|
if( child.deactivateButton ) {
|
||
|
|
|
||
|
|
child.deactivateButton();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
lowLightButtons() {
|
||
|
|
|
||
|
|
var children = this.parent.getChildren();
|
||
|
|
|
||
|
|
for (var i = 0; i < children.length; i++) {
|
||
|
|
|
||
|
|
var child = children[i];
|
||
|
|
|
||
|
|
if( child.lowlightButton ){
|
||
|
|
|
||
|
|
child.lowlightButton();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|