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

修改 步骤框显示

This commit is contained in:
weike 2024-06-04 14:59:14 +08:00 committed by wangpenglong
parent b92abf4e3c
commit 85b8f712e0
3 changed files with 68 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -169,9 +169,9 @@
</div>
</div>
<!-- <div class="indicator" id="indicator">
<div class="indicator" id="indicator">
</div> -->
</div>
<div class="footer">
<div class="helpLink" id="helpLink" style="float: left;" ></div>
<div class="btn-group" style="float: right;">

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

@ -581,9 +581,8 @@ class deployWindow {
if (this.onlineInstallTabArrayIndex == 0) {
this.custom_print("在线安装");
ipcRenderer.send("kylinide.installWizard.init", { type: "httpVerify" });
// removeStepIndicator();
// createStepIndicator(this.onlineInstallTabArray.length - 1);
// fixStepIndicator(onlineInstallTabArray.length - 1);
this.removeStepIndicator();
this.createStepIndicator(this.onlineInstallTabArray.length - 1, 0);
} else {
this.custom_print("this.onlineInstallTabArrayIndex != 0")
let preTab = document.getElementById(this.onlineInstallTabArray[this.onlineInstallTabArrayIndex]) as HTMLDivElement;
@ -608,6 +607,35 @@ class deployWindow {
}
}
createStepIndicator(length: number, currentIndex: number) {
var indicatorDiv = document.getElementById('indicator');
while (indicatorDiv!.firstChild) {
indicatorDiv!.removeChild(indicatorDiv!.firstChild);
}
for (let i = 0; i < length; i++) {
let indicatorItem = document.createElement('div');
indicatorItem.classList.add('indicator-item');
indicatorDiv!.appendChild(indicatorItem);
}
indicatorDiv!.children[currentIndex].classList.add('active');
}
removeStepIndicator() {
var indicatorDiv = document.getElementById('indicator');
while (indicatorDiv!.firstChild) {
indicatorDiv!.removeChild(indicatorDiv!.firstChild);
}
}
fixStepIndicator(index: number) {
var indicatorDiv = document.getElementById('indicator');
if (index < 0 || index > indicatorDiv!.children.length - 1)
return;
let activeItem = indicatorDiv!.querySelector('.active');
if (activeItem) {
activeItem.classList.remove('active');
}
indicatorDiv!.children[index].classList.add('active');
}
showTabFromIndex(tabArray: string[], Index: number) {
let tab = document.getElementById(tabArray[Index]) as HTMLDivElement;
tab.style.display = 'flex';
@ -623,13 +651,12 @@ class deployWindow {
} else {
if (this.nextBtn) { this.nextBtn.innerHTML = "下一步" }
}
// if (Index === 0) {
// removeStepIndicator();
// }
// if (Index > 0) {
// fixStepIndicator(Index - 1);
// }
if (Index === 0) {
this.removeStepIndicator();
}
if (Index > 0) {
this.fixStepIndicator(Index - 1);
}
}
registerEventListener() {
/**

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

@ -344,12 +344,40 @@ button#prevStep:disabled {
}
/* 用圆圈表示表格的步骤： */
.indicator {
/* .indicator {
position: absolute;
bottom: 65px;
text-align: center;
left: 50%;
transform: translate(-50%);
} */
.indicator {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 100%;
/* height: 40px; */
display: flex;
justify-content: center;
align-items: start;
margin-top: -11px;
}
.indicator-item {
border-radius: 50%;
margin: 0px 5px 0px 0px;
transition: all 0.3s ease;
width: 5px;
height: 5px;
background: rgba(255,255,255,0.3);
}
.indicator-item.active {
width: 15px;
height: 5px;
background: #2777FF;
border-radius: 3px;
}
.step {