add theme switch

This commit is contained in:
Vick Scarlet
2021-12-02 14:35:33 +08:00
parent 488a6054ab
commit acf9b92134
21 changed files with 485 additions and 36 deletions
+1
View File
@@ -6,6 +6,7 @@ export default class CyberMain extends ui.view.CyberTheme.CyberMainUI {
this.btnThanks.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.THANKS));
this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
this.btnDiscord.on(Laya.Event.CLICK, this, goto, ['discord']);
this.btnThemes.on(Laya.Event.CLICK, this, ()=>$ui.showDialog(UI.pages.THEMES));
this.on(Laya.Event.RESIZE, this, () => {
const scale = Math.max(
this.width / this.imgBg.width,
+4
View File
@@ -6,6 +6,7 @@ export default class Main extends ui.view.DefaultTheme.MainUI {
this.btnThanks.on(Laya.Event.CLICK, this, ()=>$ui.switchView(UI.pages.THANKS));
this.btnGithub.on(Laya.Event.CLICK, this, goto, ['github']);
this.btnDiscord.on(Laya.Event.CLICK, this, goto, ['discord']);
this.btnThemes.on(Laya.Event.CLICK, this, ()=>$ui.showDialog(UI.pages.THEMES));
}
static load() {
@@ -18,5 +19,8 @@ export default class Main extends ui.view.DefaultTheme.MainUI {
this.btnDiscord.visible =
this.btnAchievement.visible =
this.btnThanks.visible = !!core.times;
const text = this.labSubTitle.text;
this.labSubTitle.text = ' ';
this.labSubTitle.text = text;
}
}
+40
View File
@@ -0,0 +1,40 @@
export default class Themes extends ui.view.ThemesUI {
constructor() {
super();
this.btnClose.on(Laya.Event.CLICK, this, ()=>this.close());
this.btnOK.on(Laya.Event.CLICK, this, async ()=>{
const selected = this.selected;
if(!selected == $ui.theme) return this.close();
$ui.theme = selected;
await this.close();
$ui.switchView(UI.pages.MAIN);
});
}
static load() {
return ["images/atlas/images/radio.atlas"];
}
init() {
this.selected = localStorage.getItem('theme');
}
get selected() {
switch(this.radioTheme.selectedIndex) {
case 0: return 'cyber';
case 1: return 'dark';
case 2: return 'light';
default: return 'default';
}
}
set selected(v) {
let index;
switch(v) {
case 'cyber': index = 0; break;
case 'dark': index = 1; break;
case 'light': index = 2; break;
default: index = -1; break;
}
this.radioTheme.selectedIndex = index;
}
}
+76 -4
View File
@@ -7,6 +7,7 @@ const pages = {
SUMMARY: 'SUMMARY',
ACHIEVEMENT: 'ACHIEVEMENT',
THANKS: 'THANKS',
THEMES: 'THEMES',
};
const popups = {
@@ -24,6 +25,7 @@ const cyber = {
[pages.SUMMARY]: "cyber/summary",
[pages.ACHIEVEMENT]: "cyber/achievement",
[pages.THANKS]: "default/thanks",
[pages.THEMES]: 'themes',
},
popups: {
[popups.ACHIEVEMENT]: "cyber/popup/achievementPopup",
@@ -53,6 +55,14 @@ const cyber = {
],
},
pages: {
[pages.MAIN]: {
vars: {
btnThemes: {
defaultColor: '#cccccc',
radius: 100,
},
}
},
[pages.THANKS]: {
vars: {
btnBack: {
@@ -84,6 +94,24 @@ const cyber = {
radius: 4,
},
},
},
[pages.THEMES]: {
vars: {
btnOK: {
defaultColor: '#28b070',
defaultLabel: '#ffffff',
hoverColor: '#00ff00',
hoverLabel: '#ffffff',
radius: 80,
},
btnClose: {
defaultColor: '#eb3941',
defaultLabel: '#ffffff',
hoverColor: '#ff0000',
hoverLabel: '#ffffff',
radius: 80,
},
}
}
}
}
@@ -99,6 +127,7 @@ const dark = {
[pages.SUMMARY]: "default/summary",
[pages.ACHIEVEMENT]: "default/achievement",
[pages.THANKS]: "default/thanks",
[pages.THEMES]: 'themes',
},
popups: {
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
@@ -340,10 +369,13 @@ const dark = {
[pages.MAIN]: {
vars: {
btnRemake: 'btn_main',
labTitle: 'title',
labSubTitle: 'title',
btnThemes: {
defaultColor: '#cccccc',
radius: 100,
},
},
names: {
title: 'title',
btnSmall: 'btn_small',
}
},
@@ -448,6 +480,24 @@ const dark = {
radius: 4,
},
},
},
[pages.THEMES]: {
vars: {
btnOK: {
defaultColor: '#28b070',
defaultLabel: '#ffffff',
hoverColor: '#00ff00',
hoverLabel: '#ffffff',
radius: 80,
},
btnClose: {
defaultColor: '#eb3941',
defaultLabel: '#ffffff',
hoverColor: '#ff0000',
hoverLabel: '#ffffff',
radius: 80,
},
}
}
},
popups: {
@@ -475,6 +525,7 @@ const light = {
[pages.SUMMARY]: "default/summary",
[pages.ACHIEVEMENT]: "default/achievement",
[pages.THANKS]: "default/thanks",
[pages.THEMES]: 'themes',
},
popups: {
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
@@ -710,10 +761,13 @@ const light = {
[pages.MAIN]: {
vars: {
btnRemake: 'btn_main',
labTitle: 'title',
labSubTitle: 'title',
btnThemes: {
defaultColor: '#cccccc',
radius: 100,
},
},
names: {
title: 'title',
btnSmall: 'btn_small',
}
},
@@ -818,6 +872,24 @@ const light = {
radius: 4,
}
},
},
[pages.THEMES]: {
vars: {
btnOK: {
defaultColor: '#28b070',
defaultLabel: '#ffffff',
hoverColor: '#00ff00',
hoverLabel: '#ffffff',
radius: 80,
},
btnClose: {
defaultColor: '#eb3941',
defaultLabel: '#ffffff',
hoverColor: '#ff0000',
hoverLabel: '#ffffff',
radius: 80,
},
}
}
},
popups: {