mirror of
https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git
synced 2026-04-20 02:34:42 +10:00
Update Theme Settings.
This commit is contained in:
Bruce
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user