mirror of
https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git
synced 2026-06-19 05:40:12 +10:00
Update Shell.
This commit is contained in:
Bruce
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>App Launch List</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="libs/winjs/2.0/css/ui-light.css">
|
||||
<script src="js/bridge.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div [role=template] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", "Ebrima", "Nirmala", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo", "Leelawadee", "Microsoft JhengHei", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
.applist-font-title {
|
||||
color: black;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.applist-font-text {
|
||||
color: black;
|
||||
font-size: 11pt;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.applist-window {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 2px solid rgb(42, 42, 42);
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.applist-title {
|
||||
position: absolute;
|
||||
height: 65px;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.applist-control {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 11px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.applist-listview {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
|
||||
.applist-list-item {
|
||||
height: 60px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
background-color: rgba(0, 255, 255, 0);
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-ms-transition: all 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
transition: all 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
|
||||
.applist-list-item:hover {
|
||||
background-color: rgb(222, 222, 222);
|
||||
}
|
||||
|
||||
.applist-list-item:active {
|
||||
-ms-transform: scale(0.9696);
|
||||
transform: scale(0.9696);
|
||||
-ms-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.applist-item-divide {
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.applist-item-picbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
background-color: #001020;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.applist-item-pic {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.applist-item-title {
|
||||
padding-top: 11pt;
|
||||
padding-bottom: 0pt;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 3.9em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.applist-btn-cancel {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.applist-item-img-border {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(254, 254, 254, 0.1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.win10 .applist-font-title {
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.win10.applist-window {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.win10 .applist-title {
|
||||
height: 56px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.win10 .applist-control {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.win10 .applist-listview {
|
||||
bottom: 118px;
|
||||
}
|
||||
|
||||
.win10 .applist-list-item {
|
||||
height: 50px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.win10 .applist-list-item:active {
|
||||
transform: scale(0.9709);
|
||||
}
|
||||
|
||||
.win10 .applist-item-divide {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.win10 .applist-item-title {
|
||||
padding-top: 5pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div role="template" id="applist-item-template">
|
||||
<div class="applist-list-item">
|
||||
<div class="applist-item-picbox" style="background-color: rgb(0,0,0);">
|
||||
<img class="applist-item-pic" src="./Images/AppLogoDefault.png" width="32" height="32">
|
||||
<div class="applist-item-img-border"></div>
|
||||
</div>
|
||||
<div class="applist-item-divide"></div>
|
||||
<div class="applist-item-title">
|
||||
<span class="applist-font-text">My Application0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="applist-window win10">
|
||||
<div class="applist-title">
|
||||
<span class="applist-font-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="EventCancelWindow()" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(global) {
|
||||
"use strict";
|
||||
"App Select List, For Internet Explorer 10 and above.";
|
||||
var AppListElements = new function() {
|
||||
Object.defineProperty(this, "template", {
|
||||
get: function() {
|
||||
return document.getElementById("applist-item-template").querySelector(".applist-list-item").cloneNode(true);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(this, "listview", {
|
||||
get: function() {
|
||||
return document.querySelector(".applist-listview");
|
||||
}
|
||||
});
|
||||
}();
|
||||
|
||||
function AppListNodeElement(node) {
|
||||
var _node = node;
|
||||
var _appid = "";
|
||||
var _title = "";
|
||||
var _logo = "";
|
||||
var _color = "";
|
||||
Object.defineProperty(this, "node", {
|
||||
get: function() {
|
||||
return _node;
|
||||
},
|
||||
set: function(value) {
|
||||
_node = value;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(this, "appid", {
|
||||
get: function() {
|
||||
if (this.node) return this.node.getAttribute("data-appid");
|
||||
else return _appid;
|
||||
},
|
||||
set: function(value) {
|
||||
_appid = value;
|
||||
if (this.node) this.node.setAttribute("data-appid", value);
|
||||
}
|
||||
})
|
||||
Object.defineProperty(this, "title", {
|
||||
get: function() {
|
||||
if (this.node) return this.node.querySelector(".applist-item-title").textContent;
|
||||
else return _title;
|
||||
},
|
||||
set: function(value) {
|
||||
_title = value;
|
||||
if (this.node) this.node.querySelector(".applist-item-title").textContent = value;
|
||||
}
|
||||
})
|
||||
Object.defineProperty(this, "logo", {
|
||||
get: function() {
|
||||
if (this.node) return this.node.querySelector(".applist-item-pic").getAttribute("src");
|
||||
else return _logo;
|
||||
},
|
||||
set: function(value) {
|
||||
_logo = value;
|
||||
if (this.node) this.node.querySelector(".applist-item-pic").setAttribute("src", value);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(this, "color", {
|
||||
get: function() {
|
||||
if (this.node) return this.node.querySelector(".applist-item-picbox").style.backgroundColor;
|
||||
else return _color;
|
||||
},
|
||||
set: function(value) {
|
||||
_color = value;
|
||||
if (this.node) this.node.querySelector(".applist-item-picbox").style.backgroundColor = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createItem(title, logo, appid, color) {
|
||||
var item = AppListElements.template.cloneNode(true);
|
||||
var inode = new AppListNodeElement(item);
|
||||
inode.title = title;
|
||||
inode.logo = logo;
|
||||
inode.appid = appid;
|
||||
inode.color = color;
|
||||
return item;
|
||||
}
|
||||
|
||||
function addItem(node) {
|
||||
AppListElements.listview.appendChild(node);
|
||||
}
|
||||
global.AppList = {
|
||||
Item: {
|
||||
create: createItem
|
||||
},
|
||||
List: {
|
||||
add: addItem
|
||||
}
|
||||
};
|
||||
})(this);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user