openkylin
/
kylin-code
9
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

修改 界面5样式

This commit is contained in:
weike 2024-06-04 10:39:10 +08:00 committed by wangpenglong
parent eb7881d069
commit b92abf4e3c
5 changed files with 192 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/vs/code/electron-sandbox/deploy/deployWindow-dev.html
View File

@ -138,20 +138,32 @@
</div>
</div>
</div>
<div class="tab" id="onlineInstallTab4">
<div class="tab progressTab" id="onlineInstallTab4">
<div class="progress-container">
<progress class="progress-view" value="50" max="100" style="overflow:hidden;"></progress>
<span class="progressinfo"></span>
<div class="progressinfoContainer">
<div>
<span class="progressinfoTitle">安装进度：</span>
<span class="progressinfoValue">00.00%</span>
</div>
<div>
<span id="progressInfoFinish" class="progressInfoFinish"></span>
<label id="progressInfoCancel" class="progressInfoCancel">取消</label>
</div>
</div>
<progress class="progress-view" value="50" max="100"></progress>
</div>
<div class="detailInstallOutputTextbox">
<label for="detailInstallOutputTextbox">安装详情</label>
<pre id="detailInstallPre" style="display: block"></pre>
<pre id="installLogPre" style="display: none"></pre>
<pre id="extInstallLogPre" style="display: none"></pre>
<pre id="finishPage" style="display: none"></pre>
<div class="btn-group">
<button class="switchInstallOutput" id="switchInstallOutput">切换输出</button>
<div>
<pre id="detailInstallPre" style="display: block"></pre>
<pre id="installLogPre" style="display: none"></pre>
<pre id="extInstallLogPre" style="display: none"></pre>
<pre id="finishPage" style="display: none"></pre>
<button class="switchInstallOutput" id="switchInstallOutput">
<img src="./media/switch.png" style="display: inline-block;" alt="切换" width="10px" height="8px"/>
<div style="display: inline-block; margin-left: 4px;">切换输出</div>
</button>
</div>
</div>
</div>

23
src/vs/code/electron-sandbox/deploy/deployWindowMain.ts
View File

@ -269,17 +269,17 @@ class deployWindow {
if (this.extInstallState.size > 0) {
let progressViews = document.getElementsByClassName("progress-view") as HTMLCollectionOf<HTMLProgressElement>;
progressViews[0].value = (this.progressNum / this.extInstallState.size) * 100;
document.getElementsByClassName("progressinfo")[0].innerHTML = "安装进度:" + ((this.progressNum / this.extInstallState.size) * 100).toFixed(2) + "%";
document.getElementsByClassName("progressinfoValue")[0].innerHTML = ((this.progressNum / this.extInstallState.size) * 100).toFixed(2) + "%";
}
for (const [key, value] of this.extInstallState) {
if (key === undefined) continue;
switch (value) {
case 0:
dTformattedDoc += "<span class='startHighlight'>" + key + "准备中...</span><br>";
dTformattedDoc += "<img class='startHighlightImg'><span class='startHighlight'>" + key + "准备中...</span><br>";
break;
case 1:
dTformattedDoc += "<span class='startHighlight'>" + key + "开始下载</span><br>";
dTformattedDoc += "<img class='startHighlightImg'><span class='startHighlight'>" + key + "开始下载</span><br>";
break;
case 2:
dTformattedDoc += "<span class='downloadHighlight'>" + key + "下载完成</span><br>";
@ -361,6 +361,14 @@ class deployWindow {
document.getElementById("detailInstallPre")!.style.display = 'none';
document.getElementById("extInstallLogPre")!.style.display = 'none';
document.getElementById("progressInfoCancel")!.style.display = 'none';
document.getElementById("progressInfoFinish")!.style.display = 'inline-block';
// 选择包含进度条的元素，并设置伪元素样式
var style = document.createElement('style');
style.textContent = ".progress-view::-webkit-progress-value { background-color: #1AC465; }";
document.head.appendChild(style);
this.nextBtn!.innerText = "结束";
this.nextBtn!.disabled = false;
this.cancelBtn!.disabled = true;
@ -545,7 +553,9 @@ class deployWindow {
console.log("extInstallState.size" + this.extInstallState.size);
let progress_view = document.getElementsByClassName("progress-view") as HTMLCollectionOf<HTMLProgressElement>;
progress_view[0].value = 0;
document.getElementsByClassName("progressinfo")[0].innerHTML = "安装进度:0%";
document.getElementsByClassName("progressinfoValue")[0].innerHTML = "0%";
document.getElementById("progressInfoCancel")!.style.display = 'inline-block';
document.getElementById("progressInfoFinish")!.style.display = 'none';
let extPreElement = document.getElementById("extInstallLogPre");
extPreElement!.innerHTML = "";
@ -671,6 +681,11 @@ class deployWindow {
document.getElementById('lablenotNow')!.style.display = 'none';
}
})
document.getElementById('progressInfoCancel')?.addEventListener('click', () => {
console.log('cancel');
// ipcRenderer.removeAllListeners('kylinide.installWizard.msg');
ipcRenderer.send('kylinide.installWizard.msg.process', { type: "cancel" });
});
document.getElementById('cancel')?.addEventListener('click', () => {
console.log('cancel');
// ipcRenderer.removeAllListeners('kylinide.installWizard.msg');

172
src/vs/code/electron-sandbox/deploy/media/deploy.css
View File

@ -613,6 +613,7 @@ button#prevStep:disabled {
::-webkit-scrollbar {
width: 8px;
/* 设置滚动条宽度 */
height: 8px;
}
::-webkit-scrollbar-track {
@ -772,30 +773,97 @@ input[readonly] {
}
.progress-container {
width: calc(100% - 64px);
margin-top: 20px;
margin-left: 32px;
margin-right: 32px;
}
.progressinfoContainer {
display: flex;
align-items: center;
margin: -8px;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.progressinfoTitle {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
line-height: 18px;
text-align: left;
font-style: normal;
}
.progressinfoValue {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
line-height: 18px;
text-align: left;
font-style: normal;
}
.progressInfoCancel {
width: 32px;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
line-height: 18px;
text-align: center;
font-style: normal;
}
.progressInfoFinish:before {
/*对号*/
content: "\2713";
color: #1AC465;
margin: 0px;
padding: 0px;
}
.progress-view {
height: 4px;
overflow: hidden;
width: 100%;
border: none;
margin: 0px;
padding: 0px;
border-radius: 4px;
margin-bottom: 6px;
}
/* 设置背景色 */
.progress-view::-webkit-progress-bar {
background-color: rgba(255,255,255,0.12);
}
/* 设置前景色 */
.progress-view::-webkit-progress-value {
/* background-color: #1AC465; */
background-color: #5A97FF;
}
.progress-download,
.progress-install,
.pkg-progress-install,
.progressinfo {
.pkg-progress-install {
position: absolute;
/* 添加绝对定位 */
margin-left: 18%;
color: #000000;
}
.download-view,
.install-view,
.pkg-install-view,
.progress-view,
.progressDown {
flex: 1;
height: 50px;
position: relative;
width: 800px;
/* width: 800px; */
margin-left: 8%;
}
@ -803,7 +871,7 @@ input[readonly] {
flex: 1;
height: 26px;
position: relative;
width: 800px;
/* width: 800px; */
margin-left: 8%;
margin-top: 10px;
margin-bottom: 8px;
@ -828,20 +896,73 @@ input[readonly] {
}
.detailInstallOutputTextbox {
margin-left: 8%;
font-weight: bold;
margin-top: 5px;
/* background-color: red; */
height: calc(251 - 12px);
width: calc(100% - 64px);
margin-left: 32px;
margin-right: 32px;
margin-top: 12px;
}
.detailInstallOutputTextbox>label {
height: 20px;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
font-size: 13px;
color: rgba(255,255,255,0.5);
line-height: 18px;
text-align: left;
font-style: normal;
}
.detailInstallOutputTextbox>div {
background-color: #1E1E1E;
height: 251px;
width: 100%;
margin: 0px;
position: relative;
}
.switchInstallOutput {
position: absolute; /* 2 */
height: 28px;
width: 86px;
top: 8px;
right: 18px;
border: none;
border-radius: 1px;
background-color: #333333;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
#detailInstallPre,
#installLogPre,
#extInstallLogPre,
#finishPage {
height: 300px;
width: 700px;
/* width: 700px; */
/* height: 300px; */
height: calc(100% - 16px);
flex: 1;
position: relative;
overflow-y: auto;
overflow: auto;
margin: 0px;
margin-top: 2px;
padding-top: 8px;
padding-right: 11px;
padding-bottom: 8px;
padding-left: 11px;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 13px;
color: rgba(255,255,255,0.9);
line-height: 22px;
text-align: left;
font-style: normal;
}
.dark {
@ -856,13 +977,28 @@ pre .downloadHighlight::before {
margin-right: 5px;
}
pre .startHighlight::before {
content: "\25CF";
/* Unicode实心圆圈字符 */
color: gray;
/* Unicode实心圆圈字符 */
/* pre .startHighlight::before {
content: "\25CF";
color: red;
margin-right: 5px;
} */
.startHighlightImg {
content: url(./loading.png);
animation: rotateAnimation 1s linear infinite;
margin-right: 5px;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg); /* 动画开始时图片的角度 */
}
to {
transform: rotate(360deg); /* 动画结束时图片旋转360度 */
}
}
pre .installedHighlight::before {
content: "\2713";
/* Unicode对号字符 */
@ -883,10 +1019,6 @@ pre .depfailHighlight::before {
margin-right: 5px;
}
.switchInstallOutput {
position: absolute;
}
.center div p {
margin-bottom: 0;
margin-top: 0;

BIN
src/vs/code/electron-sandbox/deploy/media/loading.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 B

BIN
src/vs/code/electron-sandbox/deploy/media/switch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB