timamsk/App-Installer-For-Windows-8.x-Reset
1
0
Fork 0
mirror of https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git synced 2026-04-11 17:57:19 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update Theme Settings.

Browse Source
This commit is contained in:
Bruce
2025-12-14 01:53:02 +08:00
parent 1c831854b3
commit 975c8ee9e3
21 changed files with 1220 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
shared/config.ini
View File

Binary file not shown.

150
shared/html/applist.html
View File

@@ -60,7 +60,7 @@
right: 0;
bottom: 0;
border: 2px solid rgb(42, 42, 42);
background-color: white;
/* background-color: white; */
overflow: hidden;
box-sizing: border-box;
}
@@ -77,7 +77,7 @@
align-items: center;
padding: 0 23px;
box-sizing: border-box;
background: white;
/* background: white; */
z-index: 1;
}
@@ -88,7 +88,7 @@
width: 100%;
height: 118px;
box-sizing: border-box;
background: white;
/* background: white; */
z-index: 1;
padding-bottom: 24px;
padding-top: 11px;
@@ -244,16 +244,36 @@
padding-top: 5pt;
font-weight: normal;
}
.applist-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<link rel="stylesheet" type="text/css" href="theme/light/default/default.css" id="theme-style">
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/params.js"></script>
<script>
OnLoad.add(function() {
window.displayMode = "normal";
window.setThemeId = "default";
window.setThemeColor = 0xFFFFFF;
try {
var p = params;
var keys = Object.keys(p);
var hasidparam = false;
var hascolorparam = false;
try {
displayMode = p["mode"];
} catch (e) {}
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
if (key.indexOf("color") >= 0) {
@@ -264,16 +284,75 @@
}
}
if (hasidparam && hascolorparam) {
window.setThemeColor = p["color"];
window.setThemeId = p["id"];
Theme.currentColor = parseInt(p["color"]);
Theme.currentTheme = p["id"];
} else {
throw new Error("Invalid parameters.");
}
} catch (e) {
Theme.refresh();
try {
Theme.refresh();
} catch (e) {}
}
if (displayMode === "preview") {
var applist = document.querySelector(".applist-window");
applist.style.left = "10px";
applist.style.top = "10px";
applist.style.right = "10px";
applist.style.bottom = "10px";
var applistbg = document.querySelector(".applist-background");
applistbg.style.left = "10px";
applistbg.style.top = "10px";
applistbg.style.right = "10px";
applistbg.style.bottom = "10px";
document.body.style.backgroundColor = "gray";
var cancelbtn = document.querySelector(".applist-btn-cancel");
cancelbtn.style.width = "auto";
window.Bridge = {
String: {
tolower: function(str) {
return str;
}
}
};
var winjsCss = document.getElementById("winjs-style");
if (winjsCss) {
winjsCss.setAttribute("href", "libs/winjs/2.0/css/ui-" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + ".css");
}
var themeCss = document.getElementById("theme-style");
if (themeCss) {
themeCss.setAttribute("href", "theme/" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + "/" + window.setThemeId + "/" + window.setThemeId + ".css");
}
var previewpanel = document.getElementById("preview-operator-panel");
if (previewpanel) {
previewpanel.style.display = "";
}
var itemslen = 10;
var colorstrformat = "rgb({0},{1},{2})";
for (var i = 0; i < itemslen; i++) {
var title = "My Application" + i;
var logo = "images/applogo.default.png";
var appid = "appid" + i;
var color = colorstrformat.replace("{0}", Math.floor(Math.random() * 256) % 256).replace("{1}", Math.floor(Math.random() * 256) % 256).replace("{2}", Math.floor(Math.random() * 256) % 256);
addAppToList(title, logo, appid, color);
}
}
});
</script>
<style>
#preview-operator-panel {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
top: 50%;
right: 0;
transform: translateY(-50%);
box-sizing: border-box;
padding: 5px;
color: white;
}
</style>
</head>
<body>
@@ -288,15 +367,16 @@
<span class="applist-font-text">My Application0</span>
</div>
</div>
<div class="applist-window win10">
<div class="applist-title">
<span class="applist-font-title" data-res-byname="IDS_APPLIST_TITLE"></span>
</div>
<div class="applist-listview">
</div>
<div class="applist-control">
<button class="applist-btn-cancel win-commandbutton div-button-size div-std-button-center" onclick="Bridge.Frame.callEvent ('OnPress_CancelButton')" tabindex="0" data-res-byname="IDS_APPLIST_CANCEL"></button>
</div>
</div>
<div class="applist-background"></div>
<div class="applist-window win10">
<div class="applist-title">
<span class="applist-font-title" data-res-byname="IDS_APPLIST_TITLE"></span>
</div>
<div class="applist-listview">
</div>
<div class="applist-control">
<button class="applist-btn-cancel win-commandbutton div-button-size div-std-button-center" onclick="Bridge.Frame.callEvent ('OnPress_CancelButton')" tabindex="0" data-res-byname="IDS_APPLIST_CANCEL"></button>
</div>
</div>
<script>
@@ -426,6 +506,50 @@
global.setWindows10Style = setWindows10Style;
})(this);
</script>
<div id="preview-operator-panel" style="display: none;">
<input type="checkbox" id="preview-operator-win10style" />
<label for="preview-operator-win10style">Windows 10 Style</label>
<script>
(function() {
var preview_operator_panel = document.getElementById("preview-operator-panel");
var preview_operator_win10style = document.getElementById("preview-operator-win10style");
var page = document.querySelector(".applist-window");
Windows.UI.Event.Util.addEvent(preview_operator_win10style, "change", function() {
if (this.checked) page.classList.add("win10");
else page.classList.remove("win10");
});
if (preview_operator_win10style.checked) {
page.classList.add("win10");
} else {
page.classList.remove("win10");
}
OnLoad.add(function() {
setTimeout(function() {
if (displayMode === "preview") {
var subnodes = page.querySelectorAll("*");
for (var i = 0; i < subnodes.length; i++) {
var subnode = subnodes[i];
try {
if (subnode.classList.contains("applist-list-item") || subnode.classList.contains("applist-item-picbox") || subnode.classList.contains("applist-item-pic") || subnode.className.indexOf("applist-item-") >= 0) continue;
} catch (e) {}
var mark = "";
if (subnode.hasAttribute("id")) {
mark += "Id: {" + subnode.getAttribute("id") + "} ";
}
if (subnode.hasAttribute("class")) {
mark += "Class: {" + subnode.getAttribute("class") + "} ";
}
if (subnode.hasAttribute("data-res-byname")) {
mark += "Res: {" + subnode.getAttribute("data-res-byname") + "} ";
}
subnode.appendChild(document.createTextNode(mark));
}
}
}, 0);
});
})();
</script>
</div>
</body>
</html>

9
shared/html/css/pages.css
View File

@@ -65,7 +65,7 @@ body * {
margin: 0px;
padding: 0px;
border: 0px;
background-color: #f3f3f3;
/* background-color: #f3f3f3; */
}
.pagecontainer.full {
@@ -78,6 +78,13 @@ body * {
max-height: 100%;
}
.pagecontainer.background {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.pagecontainer>.page {
position: relative;
overflow-x: hidden;

136
shared/html/install.html
View File

@@ -28,13 +28,20 @@
<script type="text/javascript" src="libs/msgbox/msgbox.js"></script>
<link rel="stylesheet" type="text/css" href="theme/light/default/default.css" id="theme-style">
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/params.js"></script>
<script>
OnLoad.add(function() {
window.displayMode = "normal";
window.setThemeId = "default";
window.setThemeColor = 0xFFFFFF;
try {
var p = params;
var keys = Object.keys(p);
var hasidparam = false;
var hascolorparam = false;
try {
displayMode = p["mode"];
} catch (e) {}
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
if (key.indexOf("color") >= 0) {
@@ -45,20 +52,70 @@
}
}
if (hasidparam && hascolorparam) {
window.setThemeColor = p["color"];
window.setThemeId = p["id"];
Theme.currentColor = parseInt(p["color"]);
Theme.currentTheme = p["id"];
} else {
throw new Error("Invalid parameters.");
}
} catch (e) {
Theme.refresh ();
try {
Theme.refresh();
} catch (e) {}
}
if (displayMode === "preview") {
var preview = document.getElementById("preview-operator-panel");
var winjsCss = document.getElementById("winjs-style");
if (winjsCss) {
winjsCss.setAttribute("href", "libs/winjs/2.0/css/ui-" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + ".css");
}
var themeCss = document.getElementById("theme-style");
if (themeCss) {
themeCss.setAttribute("href", "theme/" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + "/" + window.setThemeId + "/" + window.setThemeId + ".css");
}
if (preview) {
preview.style.display = "";
}
}
});
</script>
<style>
#preview-operator-panel {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
top: 50%;
right: 0;
transform: translateY(-50%);
box-sizing: border-box;
padding: 5px;
color: white;
}
</style>
</head>
<body>
<div id="page-container" class="pagecontainer full">
<div id="page-background" class="pagecontainer full background"></div>
<script>
(function() {
var backgroundiv = document.getElementById("page-background");
if (backgroundiv) {
var storage = Bridge.External.Storage;
var path = storage.path;
if (Theme.useCustomBackgroundImage) {
var imgpath = Theme.suitableBackgroundImage;
try {
var imgfile = storage.getFile(imgpath);
if (!imgfile.exist) return;
var relative = imgfile.relativePath(path.combine(path.root, "html"));
var backgroundImage = "url('" + relative.replace("\\", "/") + "')";
backgroundiv.style.backgroundImage = backgroundImage;
} catch (e) {}
}
}
})();
</script>
<div id="page-container" class="pagecontainer full main">
<div class="page splash">
<!-- Splash Screen -->
<img class="splash" src="images/splash.default.png" alt="Splash Screen" width="620" height="300">
@@ -368,6 +425,81 @@
});
})();
</script>
<div id="preview-operator-panel" style="display: none;">
<label>Please select the page: </label><br>
<select id="preview-operator-select" value="splash">
<option value="splash">Splash Screen</option>
<option value="select">Package Select</option>
<option value="preinstall">Pre-install</option>
<option value="installing">Installing</option>
<option value="installsuccess">Install Successfully</option>
<option value="installfailed">Install Failed</option>
</select><br>
<input type="checkbox" id="preview-operator-checkbox">
<label for="preview-operator-checkbox">Multiple Package Page</label><br>
<input type="checkbox" id="preview-operator-progress">
<label for="preview-operator-progress">Show Progress Bar with Value</label>
<script>
(function() {
var preview_operator_panel = document.getElementById("preview-operator-panel");
var preview_operator_select = document.getElementById("preview-operator-select");
var preview_operator_checkbox = document.getElementById("preview-operator-checkbox");
var preview_operator_progress = document.getElementById("preview-operator-progress");
var eventutils = Windows.UI.Event.Util;
var page = document.querySelector("#page-container .page");
function clearPageClass() {
page.setAttribute("class", "page");
}
eventutils.addEvent(preview_operator_select, "change", function() {
clearPageClass();
page.classList.add(preview_operator_select.value);
if (preview_operator_checkbox.checked) {
page.classList.add("multiple");
} else {
page.classList.remove("multiple");
}
});
eventutils.addEvent(preview_operator_checkbox, "change", function() {
clearPageClass();
page.classList.add(preview_operator_select.value);
if (preview_operator_checkbox.checked) {
page.classList.add("multiple");
} else {
page.classList.remove("multiple");
}
});
eventutils.addEvent(preview_operator_progress, "change", function() {
if (preview_operator_progress.checked) {
page.querySelector(".progress.installing progress").value = 50;
} else {
page.querySelector(".progress.installing progress").removeAttribute("value");
}
});
OnLoad.add(function() {
setTimeout(function() {
if (displayMode === "preview") {
var subnodes = page.querySelectorAll("*");
for (var i = 0; i < subnodes.length; i++) {
var subnode = subnodes[i];
var mark = "";
if (subnode.hasAttribute("id")) {
mark += "Id: {" + subnode.getAttribute("id") + "} ";
}
if (subnode.hasAttribute("class")) {
mark += "Class: {" + subnode.getAttribute("class") + "} ";
}
if (subnode.hasAttribute("data-res-byname")) {
mark += "Res: {" + subnode.getAttribute("data-res-byname") + "} ";
}
subnode.appendChild(document.createTextNode(mark));
}
}
}, 100);
});
})();
</script>
</div>
</body>
</html>

2
shared/html/js/pages.js
View File

@@ -1,7 +1,7 @@
(function(global) {
"use strict";
Object.defineProperty(global, "pagecontainer", {
get: function() { return document.querySelector(".pagecontainer"); }
get: function() { return document.querySelector(".pagecontainer.main"); }
});
function getPage() {

98
shared/html/js/theme.js
View File

@@ -18,6 +18,25 @@
light: 0xFFFFFF,
dark: 0x000000,
};
var strutil = Bridge.External.String;
var nstrutil = Bridge.NString;
var boolTrue = ["true", "1", "yes", "on", "y", "t", "zhen", "真"];
var boolFalse = ["false", "0", "no", "off", "n", "f", "jia", "假"];
function parseBool(str) {
str = "" + str;
for (var i = 0; i < boolTrue.length; i++) {
if (nstrutil.equals(str, boolTrue[i])) {
return true;
}
}
for (var i = 0; i < boolFalse.length; i++) {
if (nstrutil.equals(str, boolFalse[i])) {
return false;
}
}
return null;
};
function getThemeSwitchType() {
var themeType = themeSection.getKey("AppInstaller:ThemeMode").value;
@@ -250,6 +269,47 @@
}
customColor.value = value;
}
function getUseCustomBackgroundImage() {
var useCustomBackground = themeSection.getKey("AppInstaller:UseBackgroundImage");
return parseBool(useCustomBackground.value);
}
function setUseCustomBackgroundImage(use) {
var useCustomBackground = themeSection.getKey("AppInstaller:UseBackgroundImage");
useCustomBackground.value = use ? "true" : "false";
}
function getCustomBackgroundImageLight() {
var customBackgroundImageLight = themeSection.getKey("AppInstaller:BackgroundImageLight");
return customBackgroundImageLight.value;
}
function setCustomBackgroundImageLight(url) {
var customBackgroundImageLight = themeSection.getKey("AppInstaller:BackgroundImageLight");
customBackgroundImageLight.value = url;
}
function getCustomBackgroundImageDark() {
var customBackgroundImageDark = themeSection.getKey("AppInstaller:BackgroundImageDark");
return customBackgroundImageDark.value;
}
function setCustomBackgroundImageDark(url) {
var customBackgroundImageDark = themeSection.getKey("AppInstaller:BackgroundImageDark");
customBackgroundImageDark.value = url;
}
function getSuitableBackgroundImage() {
var useCustomBackground = getUseCustomBackgroundImage();
if (useCustomBackground) {
var color = getCurrentThemeColor();
if (color === ColorType.light) return getCustomBackgroundImageLight();
else return getCustomBackgroundImageDark();
} else {
return "";
}
}
module.exports = {
Theme: {
ThemeType: ThemeType,
@@ -264,7 +324,14 @@
setNightTime: setTimeModeNightTime,
setLightTheme: setLightTheme,
setDarkTheme: setDarkTheme,
setCustomColor: setCustomColor
setCustomColor: setCustomColor,
getUseCustomBackgroundImage: getUseCustomBackgroundImage,
setUseCustomBackgroundImage: setUseCustomBackgroundImage,
getCustomBackgroundImageLight: getCustomBackgroundImageLight,
setCustomBackgroundImageLight: setCustomBackgroundImageLight,
getCustomBackgroundImageDark: getCustomBackgroundImageDark,
setCustomBackgroundImageDark: setCustomBackgroundImageDark,
getSuitableBackgroundImage: getSuitableBackgroundImage
}
};
var themeNS = Theme;
@@ -363,4 +430,33 @@
}, 0);
}
});
Object.defineProperty(themeNS, "useCustomBackgroundImage", {
get: function() {
return themeNS.getUseCustomBackgroundImage();
},
set: function(value) {
return themeNS.setUseCustomBackgroundImage(value);
}
});
Object.defineProperty(themeNS, "customBackgroundImageLight", {
get: function() {
return themeNS.getCustomBackgroundImageLight();
},
set: function(value) {
return themeNS.setCustomBackgroundImageLight(value);
}
});
Object.defineProperty(themeNS, "customBackgroundImageDark", {
get: function() {
return themeNS.getCustomBackgroundImageDark();
},
set: function(value) {
return themeNS.setCustomBackgroundImageDark(value);
}
});
Object.defineProperty(themeNS, "suitableBackgroundImage", {
get: function() {
return themeNS.getSuitableBackgroundImage();
},
});
})(this);

1
shared/html/preview.html
View File

@@ -56,6 +56,7 @@
</head>
<body>
<div id="page-background" class="pagecontainer full background"></div>
<div id="page-container" class="pagecontainer full">
<div class="page preinstall">
<!-- Main Page -->

321
shared/html/settings/appinstaller/cssedit.html
View File

@@ -194,29 +194,38 @@
<header aria-label="Header content" role="banner" class="titlebanner" id="pagebanner" style="height: 120px;">
<button id="back" class="win-backbutton pagetitlewb-backbutton" onclick="onBack_CssEditPage ()" style="margin-left: 20px; transform: scale(0.72);"></button>
<h2 class="titlearea win-type-ellipsis" id="apptitle" style="">
<span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;">编辑自定义 CSS 样式</span>
<span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;" data-res-fromfile="publicRes (177)"></span>
</h2>
</header>
</aside>
<main class="main bottom padding">
<div class="bottom-compensate" id="page-edit-css" style="height: 100%;">
<p>在这里，编辑自定义的 CSS 样式。</p>
<label id="theme-custom-color">当前主题颜色基于</label>
<p data-res-fromfile="publicRes (178)"></p>
<label id="theme-custom-color" data-res-fromfile="publicRes (179)"></label>
<script>
(function() {
"use strict";
var sect = document.getElementById("theme-custom-color");
var sect = document.getElementById("theme-custom-color").parentNode;
var toggle = new Toggle();
toggle.create();
toggle.parent = sect;
toggle.setColor("#202020");
toggle.showlabel = true;
toggle.setStatusText("深色", "浅色");
toggle.setStatusText(getPublicRes(155), getPublicRes(156));
toggle.addEventListener("change", function() {
saveCurrentEdit();
isSwitching = true;
Theme.setCustomColor(toggle.checked ? Theme.ColorType.dark : Theme.ColorType.light);
reloadCurrentEdit();
var rootDir = document.querySelector(".css-editor-filedir .filedir-rootdir");
var fileList = document.querySelector(".css-editor-filedir .filelist-container");
var storage = Bridge.External.Storage;
var path = storage.path;
var currentColor = Theme.customColor;
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
rootDir.value = customPath;
refreshFileList();
isSwitching = false;
});
OnLoad.add(function() {
@@ -232,7 +241,7 @@
<br>
<div class="editor-container">
<div class="editor-editblock">
<label for="css-editor">编辑样式</label>
<label for="css-editor" data-res-fromfile="publicRes (180)"></label>
<textarea id="css-editor" name="code"></textarea>
<script>
var editor = document.getElementById("css-editor");
@@ -284,12 +293,12 @@
if (content === null || content === void 0) {
content = '\n/* Installer */\n\n.page {\n background-color: #F3F3F3;\n}\n.page.splash {\n background-color: #0078d7;\n}\n.page .content.loading,\n.page .content.main,\n.page .progress,\n.page .reason p,\n.page .controls .checkbox {\n color: black;\n}\n.page .content.main .pkgapplabel {\n color: #0078d7;\n}\n\n/* App Launch List */\n\n.applist-font-title {\n color: black;\n}\n.applist-font-text {\n color: black;\n}\n.applist-window {\n border: 2px solid rgb(42, 42, 42);\n background-color: white;\n}\n.applist-title {\n background: white;\n}\n.applist-control {\n background: white;\n}\n.applist-list-item {\n background-color: rgba(0, 255, 255, 0);\n}\n.applist-list-item:hover {\n background-color: rgb(222, 222, 222);\n}\n.applist-item-picbox {\n background-color: #001020;\n}\n.applist-item-img-border {\n border: 1px solid rgba(254, 254, 254, 0.1);\n}\n.win10.applist-window {\n border: 1px solid #ccc;\n}';
} else {
var idx = content.indexOf("*/");
if (idx >= 0 && idx < content.length / 2) {
content = content.substring(idx + 2);
}
//var idx = content.indexOf("*/");
//if (idx >= 0 && idx < content.length / 2) {
// content = content.substring(idx + 2);
//}
}
var head = "/* The following content is sample content and is for reference only. */";
var head = "/* The following content is sample content and is for reference only. */\n";
editor.codeMirror.setValue(head + content);
} else {
editor.codeMirror.setValue(content);
@@ -298,7 +307,7 @@
</script>
</div>
<div class="editor-filelist">
<label>自定义文件目录</label>
<label data-res-fromfile="publicRes (181)"></label>
<div class="css-editor-filedir">
<input type="text" class="filedir-rootdir" style="direction: rtl; text-align: left;">
<ul class="filelist-container">
@@ -333,47 +342,64 @@
});
}
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
li.setAttribute("role", "file");
li.textContent = files[i];
fileList.appendChild(li);
eventutil.addEvent(li, "dblclick", function(e) {
var self = this;
var filePath = path.combine(root, self.textContent);
editor.codeMirror.replaceSelection(self.textContent);
});
eventutil.addEvent(li, "click", function(e) {
var self = this;
var filePath = path.combine(root, self.textContent);
var objele = document.createElement("object");
objele.data = filePath;
var tipele = document.createElement("param");
tipele.name = "type";
tipele.value = "text/html";
tipele.textContent = "不受 Internet Explorer 支持显示的资源。";
objele.appendChild(tipele);
objele.style.maxWidth = "100%";
var title = Bridge.String.format("预览", this.textContent);
var contentele = document.createElement("div");
var filenameele = document.createElement("p");
filenameele.textContent = this.textContent;
contentele.appendChild(filenameele);
contentele.style.width = "100%";
contentele.appendChild(objele);
messageBoxAsync(contentele, title).then(function() {
if (typeof objele.remove === "function") {
objele.remove();
} else if (typeof objele.removeNode === "function") {
objele.removeNode(true);
} else if (typeof objele.parentNode.removeChild === "function") {
objele.parentNode.removeChild(objele);
}
(function() {
var li = document.createElement("li");
li.setAttribute("role", "file");
li.textContent = files[i];
fileList.appendChild(li);
var CLICK_DELAY = 250;
var clickTimer = null;
var clickCount = 0;
eventutil.addEvent(li, "dblclick", function(e) {
var self = this;
var filePath = path.combine(root, self.textContent);
editor.codeMirror.replaceSelection(self.textContent);
});
});
eventutil.addEvent(li, "click", function(e) {
var self = this;
clickCount++;
if (clickCount === 1) {
clickTimer = setTimeout(function() {
if (clickCount === 1) {
var filePath = path.combine(root, self.textContent);
var objele = document.createElement("object");
objele.data = filePath;
var tipele = document.createElement("param");
tipele.name = "type";
tipele.value = "text/html";
tipele.textContent = getPublicRes(182);
objele.appendChild(tipele);
objele.style.maxWidth = "100%";
objele.style.textAlign = "center";
var title = Bridge.String.format(getPublicRes(183), self.textContent);
var contentele = document.createElement("div");
var filenameele = document.createElement("p");
filenameele.textContent = self.textContent;
contentele.appendChild(filenameele);
contentele.style.width = "100%";
contentele.appendChild(objele);
messageBoxAsync(contentele, title).then(function() {
if (typeof objele.remove === "function") {
objele.remove();
} else if (typeof objele.removeNode === "function") {
objele.removeNode(true);
} else if (typeof objele.parentNode.removeChild === "function") {
objele.parentNode.removeChild(objele);
}
});
}
clickCount = 0;
clearTimeout(clickTimer);
clickTimer = null;
}, CLICK_DELAY);
} else if (clickCount === 2) return;
});
})();
}
}
OnLoad.add(function() {
setTimeout(refreshFileList, 100);
setInterval(refreshFileList, 2000);
});
window.refreshFileList = refreshFileList;
})();
@@ -382,12 +408,42 @@
</div>
</div>
<br>
<h3>向自定义样式中添加自定义文件</h3>
<p>在自定义样式文件目录中，可以添加图片、音效等文件，这些文件将会用于自定义样式中。</p>
<p>添加的文件将在文件列表中显示。双击目录会跳转到该目录，双击文件会将文件名插入到编辑器中。</p>
<p>如果想要删除文件，请在资源管理器中直接删除。</p>
<p>不建议用过大分辨率的图片，因为可能会导致页面加载变慢，而且也用不到。也不要用太大的视频和音频。这些资源都会影响加载速度和内存占用。</p>
<button id="custom-addfile">添加</button>
<h3 data-res-fromfile="publicRes (184)"></h3>
<p data-res-fromfile="publicRes (185)"></p>
<p data-res-fromfile="publicRes (186)"></p>
<button id="custom-preview-install" data-res-fromfile="publicRes (187)"></button>
<button id="custom-preview-applist" data-res-fromfile="publicRes (188)"></button>
<script>
var customPreviewBtn = document.getElementById("custom-preview-install");
var customPreviewApplistBtn = document.getElementById("custom-preview-applist");
Windows.UI.Event.Util.addEvent(customPreviewBtn, "click", function() {
var storage = Bridge.External.Storage;
var path = storage.path;
var currentColor = Theme.customColor;
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
var installPage = path.combine(path.root, "html\\install.html");
var installPageUrl = storage.getFile(installPage).uri;
var uriAndParam = installPageUrl + "?mode=preview&id=custom&color=" + currentColor;
open(uriAndParam, "_blank");
});
Windows.UI.Event.Util.addEvent(customPreviewApplistBtn, "click", function() {
var storage = Bridge.External.Storage;
var path = storage.path;
var currentColor = Theme.customColor;
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
var installPage = path.combine(path.root, "html\\applist.html");
var installPageUrl = storage.getFile(installPage).uri;
var uriAndParam = installPageUrl + "?mode=preview&id=custom&color=" + currentColor;
open(uriAndParam, "_blank");
});
</script>
<br><br>
<h3 data-res-fromfile="publicRes (189)"></h3>
<p data-res-fromfile="publicRes (190)"></p>
<p data-res-fromfile="publicRes (191)"></p>
<p data-res-fromfile="publicRes (192)"></p>
<p data-res-fromfile="publicRes (193)"></p>
<button id="custom-addfile" data-res-fromfile="publicRes (194)"></button>
<script>
var customAddFileBtn = document.getElementById("custom-addfile");
customAddFileBtn.addEventListener("click", function() {
@@ -397,21 +453,31 @@
var currentColor = Theme.customColor;
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
var supportFilterFormat = "{0}|" +
"*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg|" +
"{1}|" +
"*.mp3;*.wav;*.wma;*.aac;*.m4a|" +
"{2}|" +
"*.mp4;*.avi;*.wmv|" +
"{3}|" +
"*.*";
var getfile = JSON.parse(Bridge.External.SelectFilesToJSON(supportFilterFormat, 0x00080000 | 0x00000800, "请选择文件", null));
var supportFilterFormat = "{4}|" +
"*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg;*.mp3;*.wav;*.wma;*.aac;*.m4a*.mp4;*.avi;*.wmv|"
"{0}|" +
"*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg|" +
"{1}|" +
"*.mp3;*.wav;*.wma;*.aac;*.m4a|" +
"{2}|" +
"*.mp4;*.avi;*.wmv|" +
"{3}|" +
"*.*";
supportFilterFormat = Bridge.String.format(
supportFilterFormat,
getPublicRes(195),
getPublicRes(196),
getPublicRes(197),
getPublicRes(163),
getPublicRes(198)
)
var getfile = JSON.parse(Bridge.External.SelectFilesToJSON(supportFilterFormat, 0x00080000 | 0x00000800, getPublicRes(199), null));
for (var i = 0; i < getfile.length; i++) {
var srcfilepath = getfile[i];
var filename = path.getName(srcfilepath);
var fsize = Bridge.External.GetFileSize(srcfilepath);
if (fsize < 0 || fsize > 104857600) { // 100MB 限制
messageBoxAsync("文件大小不符合要求，请选择尺寸较小的文件（不超过100MB）。", "文件无法复制");
messageBoxAsync(getPublicRes(201), getPublicRes(200));
} else {
var destfilepath = path.combine(customPath, filename);
Bridge.External.ShellCopyFile(srcfilepath, destfilepath);
@@ -422,9 +488,130 @@
});
</script>
<br><br>
<h3>导出</h3>
<p>在这里，您可以导出自己的自定义样式，以便分享给其他人。</p>
<button id="custom-export">导出</button>
<h3 data-res-fromfile="publicRes (202)"></h3>
<p data-res-fromfile="publicRes (203)"></p>
<button id="custom-export" data-res-fromfile="publicRes (202)"></button>
<script>
var customExportBtn = document.getElementById("custom-export");
Windows.UI.Event.Util.addEvent(customExportBtn, "click", function() {
var infoinputblock = document.createElement("p");
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = "" +
".info-row { margin-bottom:5px; zoom:1; clear:both; }" +
".info-row label { display:inline-block; width:120px; min-width: 0; vertical-align:middle; }" +
".info-row input, .info-row textarea, .info-row select { display:inline-block; vertical-align:middle; }" +
"";
infoinputblock.appendChild(style);
var infos = {
Id: "string",
DisplayName: "string",
Author: "string",
Version: "version",
Description: "multiline_string",
Homepage: "uri",
/* Color: "enum(dark,light)", */
};
var infoDisplayName = {
Id: getPublicRes(204),
DisplayName: getPublicRes(205),
Author: getPublicRes(206),
Version: getPublicRes(207),
Description: getPublicRes(208),
Homepage: getPublicRes(209),
Color: getPublicRes(210),
};
var infokeys = Object.keys(infos);
var infokeys = [];
var infodata = {
Color: Theme.customColor === Theme.ColorType.dark ? "dark" : "light",
};
for (var k in infos) {
if (infos.hasOwnProperty(k)) {
infokeys.push(k);
}
}
for (var i = 0; i < infokeys.length; i++) {
var key = infokeys[i];
var value = infos[key];
var labelText = infoDisplayName[key] || key;
var row = document.createElement("div");
row.className = "info-row";
var label = document.createElement("label");
label.innerText = labelText + " ";
label.htmlFor = "info_" + key;
var input;
if (value === "multiline_string") {
input = document.createElement("textarea");
} else if (value.indexOf("enum(") === 0) { // ES5 兼容
input = document.createElement("select");
var enumStr = value.substring(5, value.length - 1); // 去掉 enum(...)
var options = enumStr.split(",");
for (var j = 0; j < options.length; j++) {
var opt = document.createElement("option");
opt.value = options[j];
opt.innerText = options[j];
input.appendChild(opt);
}
} else {
input = document.createElement("input");
input.type = "text";
}
input.id = "info_" + key;
input.name = key;
row.appendChild(label);
row.appendChild(input);
Windows.UI.Event.Util.addEvent(input, "change", function() {
var self = this;
infodata[self.name] = self.value;
});
infoinputblock.appendChild(row);
}
var showMsgDialog = function() {
messageBoxAsync(infoinputblock, getPublicRes(211), MBFLAGS.MB_OKCANCEL).then(function(pressid) {
if (pressid === MBRET.IDOK) {
if (Bridge.NString.empty(infodata.Id) || Bridge.NString.empty(infodata.DisplayName) || Bridge.NString.empty(infodata.Author) || Bridge.NString.empty(infodata.Color)) {
messageBoxAsync(getPublicRes(213), getPublicRes(212)).then(function() {
showMsgDialog();
});
return;
}
var jsonstr = JSON.stringify(infodata);
var showFileSaveDialog = function() {
var storage = Bridge.External.Storage;
var path = storage.path;
var currentColor = Theme.customColor;
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
var supportFilterFormat = "{0}|*.zip";
supportFilterFormat = Bridge.String.format(supportFilterFormat, getPublicRes(162))
var getfile = Bridge.External.GetSavePath(supportFilterFormat, "zip", 2054, getPublicRes(214), null);
if (Bridge.NString.empty(getfile)) {
messageBoxAsync(getPublicRes(215), getPublicRes(212)).then(function() {
showMsgDialog();
});
return;
} else {
Bridge.External.CompressTheme(customPath, getfile, jsonstr, infodata.Id);
var displayMsg = "";
if (path.fileExist(getfile)) displayMsg = Bridge.String.format(getPublicRes(216), getfile);
else displayMsg = getPublicRes(217);
messageBoxAsync(displayMsg, getPublicRes(218), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
if (pressid === MBRET.IDOK) {
if (!path.fileExist(getfile)) {
showMsgDialog();
}
}
});
}
};
showFileSaveDialog();
}
});
};
showMsgDialog();
});
</script>
<div class="bottom-compensate"></div>
</div>
</main>

309
shared/html/settings/appinstaller/theme.html
View File

@@ -79,15 +79,18 @@
.settings-listview-item:hover {
background-color: rgba(230, 230, 230, 1);
background-color: rgba(0, 179, 255, 0.225);
}
.settings-listview-item:active {
transform: scale(0.96);
background-color: rgba(204, 204, 204, 1);
background-color: rgba(0, 174, 255, 0.484);
}
.settings-listview-item.selected:hover {
background-color: rgba(187, 187, 187, 1);
background-color: rgba(0, 179, 255, 0.407);
}
.settings-listview-item:focus {
@@ -104,6 +107,7 @@
border-style: solid;
border-width: 4px;
border-color: rgb(119, 119, 119);
border-color: rgb(0, 172, 255);
z-index: 10;
pointer-events: none;
}
@@ -121,6 +125,7 @@
border-right: 30px solid rgb(119, 119, 119);
border-top: 0px solid rgba(0, 0, 0, 0);
border-bottom: 30px solid rgba(0, 0, 0, 0);
border-right: 30px solid rgb(0, 172, 255);
z-index: 11;
width: 0;
height: 0;
@@ -139,6 +144,9 @@
try {
window.parent.setItemHighlight("theme");
} catch (e) {}
try {
messageBoxAsync = window.parent.messageBoxAsync;
} catch (e) {}
</script>
</head>
@@ -149,14 +157,14 @@
<h2 id="page-title" data-res-fromfile="publicRes (102)"></h2>
<div class="win-settings-section">
<br>
<label for="theme-mode">主题模式</label><br>
<label for="theme-mode" data-res-fromfile="publicRes (145)"></label><br>
<select id="theme-mode">
<option value="Theme.ThemeType.light">总是深色</option>
<option value="Theme.ThemeType.dark">总是浅色</option>
<option value="Theme.ThemeType.auto">跟随系统</option>
<option value="Theme.ThemeType.time">跟随时间</option>
<option value="Theme.ThemeType.custom">自定义</option>
</select>
<option value="Theme.ThemeType.light" data-res-fromfile="publicRes (146)"></option>
<option value="Theme.ThemeType.dark" data-res-fromfile="publicRes (147)"></option>
<option value="Theme.ThemeType.auto" data-res-fromfile="publicRes (148)"></option>
<option value="Theme.ThemeType.time" data-res-fromfile="publicRes (149)"></option>
<option value="Theme.ThemeType.custom" data-res-fromfile="publicRes (150)"></option>
</select>
<script>
function refreshSectionDisplay() {
var timeSect = document.getElementById("item-time");
@@ -225,16 +233,16 @@
</div>
<div class="win-settings-section" id="item-time">
<br>
<label>设置变换时间</label>
<label data-res-fromfile="publicRes (151)"></label>
<div class="win-settings-row">
<div class="win-settings-label" style="font-weight: normal;">白天</div>
<div class="win-settings-label" style="font-weight: normal;" data-res-fromfile="publicRes (152)"></div>
<div class="win-settings-control">
<div data-win-control="WinJS.UI.TimePicker" data-win-options="{ hour: 9, minute: 0, clock: '24HourClock' }" id="theme-day-time">
</div>
</div>
</div>
<div class="win-settings-row">
<div class="win-settings-label" style="font-weight: normal;">夜晚</div>
<div class="win-settings-label" style="font-weight: normal;" data-res-fromfile="publicRes (153)"></div>
<div class="win-settings-control">
<div data-win-control="WinJS.UI.TimePicker" data-win-options="{ hour: 18, minute: 0, clock: '24HourClock' }" id="theme-night-time">
</div>
@@ -257,7 +265,7 @@
</div>
<div class="win-settings-section" id="item-custom-theme">
<br>
<label>自定义主题颜色</label><br>
<label data-res-fromfile="publicRes (154)"></label><br>
<script>
(function() {
var sect = document.getElementById("item-custom-theme");
@@ -266,7 +274,7 @@
toggle.parent = sect;
toggle.setColor("#202020");
toggle.showlabel = true;
toggle.setStatusText("深色", "浅色");
toggle.setStatusText(getPublicRes(155), getPublicRes(156));
toggle.addEventListener("change", function() {
Theme.setCustomColor(toggle.checked ? Theme.ColorType.dark : Theme.ColorType.light);
refreshCustomPreview();
@@ -278,10 +286,10 @@
</script>
</div>
<div class="win-settings-section" id="item-theme"> <br>
<h3>选择主题</h3>
<p>浅色主题</p>
<h3 data-res-fromfile="publicRes (157)"></h3>
<p data-res-fromfile="publicRes (158)"></p>
<div class="settings-listview-h" id="light-theme-list"></div>
<p>深色主题</p>
<p data-res-fromfile="publicRes (159)"></p>
<div class="settings-listview-h" id="dark-theme-list"></div>
<script>
var storage = Bridge.External.Storage;
@@ -292,6 +300,7 @@
var themeDarkFolder = path.combine(themeFolder, "dark");
var previewHtml = path.combine(path.root, "html\\preview.html");
var themePath = path.combine(path.root, "html\\theme\\{colormode}\\{themeid}\\{themeid}.css");
var themeInfoPath = path.combine(path.root, "html\\theme\\{colormode}\\{themeid}\\themeinfo.json");
function createThemeItem(id, color) {
var item = document.createElement("div");
@@ -308,11 +317,46 @@
item.appendChild(iframe);
var colorstr = "light";
if (color === Theme.ColorType.dark) colorstr = "dark";
var themeinfo = config.create(themePath.replace("{colormode}", colorstr).replace("{themeid}", id).replace("{themeid}", id));
if (!path.fileExist(themeInfoPath.replace("{colormode}", colorstr).replace("{themeid}", id))) return null;
var themeinfo = storage.getFile(themeInfoPath.replace("{colormode}", colorstr).replace("{themeid}", id));
var themeinfojson = {};
try {
themeinfojson = JSON.parse(themeinfo.content);
themeinfojson.Id;
themeinfojson.DisplayName;
} catch (e) {
return null;
}
var displaNameLabel = document.createElement("p");
displaNameLabel.textContent = themeinfo.getKey("ThemeInfo", "DisplayName").value;
displaNameLabel.textContent = themeinfojson.DisplayName;
if (Bridge.NString.empty(displaNameLabel.textContent)) displaNameLabel.textContent = id;
item.appendChild(displaNameLabel);
Windows.UI.Event.Util.addEvent(item, "click", function() {
var self = this;
var color = parseInt(self.getAttribute("data-item-color"));
var id = self.getAttribute("data-theme-id");
for (var i = 0; i < this.parentNode.children.length; i++) {
var node = this.parentNode.children[i];
if (node.classList.contains("selected")) {
node.classList.remove("selected");
}
}
this.classList.add("selected");
if (color === Theme.ColorType.dark) {
Theme.darkTheme = id;
} else {
Theme.lightTheme = id;
}
});
if (color === Theme.ColorType.dark) {
if (Theme.darkTheme === id) {
item.classList.add("selected");
}
} else {
if (Theme.lightTheme === id) {
item.classList.add("selected");
}
}
return item;
}
@@ -325,27 +369,91 @@
darkThemeList.innerHTML = "";
for (var i = 0; i < lightThemeListItems.length; i++) {
var node = createThemeItem(lightThemeListItems[i], Theme.ColorType.light);
lightThemeList.appendChild(node);
WinJS.UI.Animation.createAddToListAnimation(lightThemeList, node).execute();
if (node) {
lightThemeList.appendChild(node);
WinJS.UI.Animation.createAddToListAnimation(lightThemeList, node).execute();
}
}
for (var i = 0; i < darkThemeListItems.length; i++) {
var node = createThemeItem(darkThemeListItems[i], Theme.ColorType.dark);
darkThemeList.appendChild(node);
WinJS.UI.Animation.createAddToListAnimation(darkThemeList, node).execute();
if (node) {
darkThemeList.appendChild(node);
WinJS.UI.Animation.createAddToListAnimation(darkThemeList, node).execute();
}
}
}
OnLoad.add(function() {
setTimeout(eventInitList, 0);
});
</script>
<p for="theme-loadfrom-file" data-res-fromfile="publicRes (160)"></p>
<button id="theme-loadfrom-file" data-res-fromfile="publicRes (161)"></button>
<script>
var loadFromFileBtn = document.getElementById("theme-loadfrom-file");
Windows.UI.Event.Util.addEvent(loadFromFileBtn, "click", function() {
var self = this;
var filter = "{0}|*.zip|{1}|*.*";
filter = Bridge.String.format(filter, getPublicRes(162), getPublicRes(163));
var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(164), null));
if (files.length > 0) {
var file = files[0];
try {
var tpinf = JSON.parse(Bridge.External.GetThemePkgInfo(file));
var id = tpinf.Id;
if (Bridge.NString.empty(id)) throw new Error("Invalid theme package.");
var displayName = tpinf.DisplayName;
if (Bridge.NString.empty(displayName)) throw new Error("Invalid theme package.");
var color = tpinf.Color;
if (!(Bridge.NString.equals(color, "dark") || Bridge.NString.equals(color, "light"))) throw new Error("Invalid color type.");
var author = tpinf.Author;
if (Bridge.NString.empty(author)) throw new Error("Invalid theme package.");
var version = tpinf.Version;
if (Bridge.NString.empty(version)) throw new Error("Invalid theme package.");
var description = tpinf.Description;
if (Bridge.NString.empty(description)) throw new Error("Invalid theme package.");
var buildpath = path.combine(path.root, "html\\theme\\{colormode}\\{id}").replace("{colormode}", color).replace("{id}", id);
var extractEvent = function() {
try {
Bridge.External.ExtraceThemePkg(file, buildpath);
messageBoxAsync(getPublicRes(165), getPublicRes(166), MBFLAGS.MB_OK);
eventInitList();
} catch (e) {
messageBoxAsync(getPublicRes(167) + (e.message || e), getPublicRes(168));
}
};
if (path.dirExist(buildpath)) {
messageBoxAsync(Bridge.String.format(
getPublicRes(169),
displayName, author, id, (Bridge.NString.equals(color, "dark") ? getPublicRes(155) : getPublicRes(156))
), getPublicRes(170), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
if (pressid === MBRET.IDOK) {
extractEvent();
}
});
} else {
messageBoxAsync(Bridge.String.format(
getPublicRes(171),
displayName, author, version, id, (Bridge.NString.equals(color, "dark") ? getPublicRes(155) : getPublicRes(156)), description
), getPublicRes(172), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
if (pressid === MBRET.IDOK) {
extractEvent();
}
});
}
} catch (e) {
messageBoxAsync(getPublicRes(173) + (e.message || e), getPublicRes(168));
}
}
});
</script>
</div>
<div class="win-settings-section" id="item-custom-theme-edit">
<br>
<h3>编辑当前自定义样式</h3>
<label>预览</label><br>
<h3 data-res-fromfile="publicRes (174)"></h3>
<label data-res-fromfile="publicRes (175)"></label><br>
<iframe src="../../preview.html" id="theme-custom-preview"></iframe>
<br><br>
<button id="jump-editpage">编辑</button>
<button id="jump-editpage" data-res-fromfile="publicRes (176)"></button>
<script>
function refreshCustomPreview() {
var storage = Bridge.External.Storage;
@@ -366,6 +474,159 @@
});
</script>
</div>
<div class="win-settings-section" id="item-custom-background">
<br>
<h3 data-res-fromfile="publicRes (219)"></h3>
<p data-res-fromfile="publicRes (220)"></p>
<label data-res-fromfile="publicRes (221)"></label>
<script>
(function() {
var sect = document.getElementById("item-custom-background");
var toggle = new Toggle();
toggle.create();
toggle.parent = sect;
toggle.setColor("#202020");
toggle.showlabel = true;
var winjsres = Bridge.External.WinJsStringRes;
toggle.setStatusText(winjsres.getString("ms-resource://Microsoft.WinJS.1.0/ui/on"), winjsres.getString("ms-resource://Microsoft.WinJS.1.0/ui/off"));
toggle.addEventListener("change", function() {
var imgsect = document.getElementById("item-custom-background-image");
Theme.useCustomBackgroundImage = toggle.checked;
if (Theme.useCustomBackgroundImage) {
imgsect.style.height = imgsect.scrollHeight + "px";
} else {
imgsect.style.height = "0px";
}
});
OnLoad.add(function() {
toggle.checked = Theme.useCustomBackgroundImage;
var imgsect = document.getElementById("item-custom-background-image");
if (Theme.useCustomBackgroundImage) {
imgsect.style.height = imgsect.scrollHeight + "px";
} else {
imgsect.style.height = "0px";
}
});
})();
</script>
</div>
<div class="win-settings-section" id="item-custom-background-image" style="overflow-x: hidden;">
<br>
<h4 data-res-fromfile="publicRes (222)"></h4>
<p data-res-fromfile="publicRes (223)"></p>
<p data-res-fromfile="publicRes (158)"></p>
<p id="backimg-displaypath-light"> </p>
<button id="backimg-select-light" data-res-fromfile="publicRes (225)"></button>
<br>
<p data-res-fromfile="publicRes (159)"></p>
<p id="backimg-displaypath-dark"></p>
<button id="backimg-select-dark" data-res-fromfile="publicRes (225)"></button>
<br><br>
<h4 data-res-fromfile="publicRes (184)"></h4>
<style>
.background-preview {
width: 100%;
height: auto;
max-width: 300px;
max-height: 300px;
overflow-x: hidden;
overflow-y: hidden;
background-color: rgba(0, 0, 0, 0.2);
position: relative;
}
.background-preview img {
max-width: 100%;
max-height: 0px;
transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
position: relative;
margin: auto;
}
.background-preview img[src] {
max-height: none;
}
</style>
<h5 data-res-fromfile="publicRes (158)"></h5>
<div class="background-preview" id="background-preview-light">
<img alt="Cannot Display Image">
</div>
<br>
<h5 data-res-fromfile="publicRes (159)"></h5>
<div class="background-preview" id="background-preview-dark">
<img alt="Cannot Display Image">
</div>
<script>
var displaypath_light = document.getElementById("backimg-displaypath-light");
var displaypath_dark = document.getElementById("backimg-displaypath-dark");
var lightimg = document.getElementById("background-preview-light").querySelector("img");
var darkimg = document.getElementById("background-preview-dark").querySelector("img");
Windows.UI.Event.Util.addEvent(lightimg, "load", function() {
var imgsect = document.getElementById("item-custom-background-image");
if (Theme.useCustomBackgroundImage) {
imgsect.style.height = imgsect.scrollHeight + "px";
}
});
Windows.UI.Event.Util.addEvent(darkimg, "load", function() {
var imgsect = document.getElementById("item-custom-background-image");
if (Theme.useCustomBackgroundImage) {
imgsect.style.height = imgsect.scrollHeight + "px";
}
});
function refreshCustomBackground() {
var lightimgsrc = Theme.customBackgroundImageLight;
var darkimgsrc = Theme.customBackgroundImageDark;
displaypath_light.textContent = Bridge.String.format(getPublicRes(224), lightimgsrc);
displaypath_dark.textContent = Bridge.String.format(getPublicRes(224), darkimgsrc);
lightimg.setAttribute("src", lightimgsrc + "?timestamp=" + new Date().getTime());
darkimg.setAttribute("src", darkimgsrc + "?timestamp=" + new Date().getTime());
if (lightimg.getAttribute("src") === "") lightimg.removeAttribute("src");
if (darkimg.getAttribute("src") === "") darkimg.removeAttribute("src");
var imgsect = document.getElementById("item-custom-background-image");
if (Theme.useCustomBackgroundImage) {
imgsect.style.height = imgsect.scrollHeight + "px";
}
}
OnLoad.add(refreshCustomBackground);
var lightImgBtn = document.getElementById("backimg-select-light");
var darkImgBtn = document.getElementById("backimg-select-dark");
function copyFile(src, dest, cover) {
if (typeof cover === "undefined") cover = true;
return Bridge.External.CopyFile(src, dest, cover);
}
var customRootFolder = path.combine(path.root, "html\\custom");
Windows.UI.Event.Util.addEvent(lightImgBtn, "click", function() {
var self = this;
var filter = "{0}|*.jpg;*.jpeg;*.png;*.gif;*.bmp|{1}|*.*";
filter = Bridge.String.format(filter, getPublicRes(226), getPublicRes(163));
var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(227), null));
if (files.length > 0) {
var file = files[0];
var savepath = path.combine(customRootFolder, "bglight.pic");
if (copyFile(file, savepath)) {
Theme.customBackgroundImageLight = savepath;
refreshCustomBackground();
}
}
});
Windows.UI.Event.Util.addEvent(darkImgBtn, "click", function() {
var self = this;
var filter = "{0}|*.jpg;*.jpeg;*.png;*.gif;*.bmp|{1}|*.*";
filter = Bridge.String.format(filter, getPublicRes(226), getPublicRes(163));
var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(227), null));
if (files.length > 0) {
var file = files[0];
var savepath = path.combine(customRootFolder, "bgdark.pic");
if (copyFile(file, savepath)) {
Theme.customBackgroundImageDark = savepath;
refreshCustomBackground();
}
}
});
</script>
</div>
</div>
</div>
</div>

14
shared/html/theme/dark/default/default.css
View File

@@ -1,21 +1,11 @@
/*
[ThemeInfo]
Id = default
DisplayName = Default Theme
Author = Bruce Winter
Version = 1.0
Description = Default theme.
Url = https://github.com/modernw
Color = Dark
*/
.page,
.page * {
transition: background-color 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), border-color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.page {
.pagecontainer.background {
background-color: #1d1d1d;
transition: background-color 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), border-color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.page.splash {

1
shared/html/theme/dark/default/themeinfo.json Normal file
View File

@@ -0,0 +1 @@
{"Color":"dark","Id":"default","DisplayName":"Default Theme","Author":"Bruce Winter","Version":"1.0","Description":"Default theme.","Homepage":"https://github.com/modernw"}

67
shared/html/theme/light/custom/custom.css
View File

@@ -1,67 +0,0 @@
custom.css/* The following content is sample content and is for reference only. */
/* Installer */
.page {
background-color: #F3F3F3;
}
.page.splash {
background-color: #0078d7;
}
.page .content.loading,
.page .content.main,
.page .progress,
.page .reason p,
.page .controls .checkbox {
color: black;
}
.page .content.main .pkgapplabel {
color: #0078d7;
}
/* App Launch List */
.applist-font-title {
color: black;
}
.applist-font-text {
color: black;
}
.applist-window {
border: 2px solid rgb(42, 42, 42);
background-color: white;
}
.applist-title {
background: white;
}
.applist-control {
background: white;
}
.applist-list-item {
background-color: rgba(0, 255, 255, 0);
}
.applist-list-item:hover {
background-color: rgb(222, 222, 222);
}
.applist-item-picbox {
background-color: #001020;
}
.applist-item-img-border {
border: 1px solid rgba(254, 254, 254, 0.1);
}
.win10.applist-window {
border: 1px solid #ccc;
}

14
shared/html/theme/light/default/default.css
View File

@@ -1,18 +1,6 @@
/*
[ThemeInfo]
Id = default
DisplayName = Default Theme
Author = Bruce Winter
Version = 1.0
Description = Default theme.
Url = https://github.com/modernw
Color = Light
*/
/* Installer */
.page {
.pagecontainer.background {
background-color: #F3F3F3;
}

1
shared/html/theme/light/default/themeinfo.json Normal file
View File

@@ -0,0 +1 @@
{"Color":"light","Id":"default","DisplayName":"Default Theme","Author":"Bruce Winter","Version":"1.0","Description":"Default theme.","Homepage":"https://github.com/modernw"}

2
shared/version
View File

@@ -1 +1 @@
0.2.1.0
0.2.2.0