修改按钮样式与位置,取消按钮无效问题

This commit is contained in:
weike 2024-06-12 15:06:09 +08:00 committed by wangpenglong
parent 364d31c04b
commit eaff505018
4 changed files with 126 additions and 36 deletions

View File

@ -155,15 +155,15 @@
<div class="detailInstallOutputTextbox">
<label for="detailInstallOutputTextbox">安装详情</label>
<button class="switchInstallOutput" id="switchInstallOutput">
<img src="./media/switch.png" style="display: inline-block;" alt="切换" width="10px" height="8px"/>
<div style="display: inline; margin-left: 4px; margin-right: 0px; padding: 0px;">切换输出</div>
</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>

View File

@ -248,9 +248,11 @@ class deployWindow {
console.log("progressNum:" + this.progressNum + " extInstallState.size:" + this.extInstallState.size)
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("progressinfoValue")[0].innerHTML = ((this.progressNum / this.extInstallState.size) * 100).toFixed(2) + "%";
if (this.finishFlag !== 0) {
let progressViews = document.getElementsByClassName("progress-view") as HTMLCollectionOf<HTMLProgressElement>;
progressViews[0].value = (this.progressNum / this.extInstallState.size) * 100;
document.getElementsByClassName("progressinfoValue")[0].innerHTML = ((this.progressNum / this.extInstallState.size) * 100).toFixed(2) + "%";
}
}
for (const [key, value] of this.extInstallState) {
@ -341,6 +343,7 @@ class deployWindow {
document.getElementById("installLogPre")!.style.display = 'none';
document.getElementById("detailInstallPre")!.style.display = 'none';
document.getElementById("extInstallLogPre")!.style.display = 'none';
document.getElementById("progressInfoCancel")!.style.display = 'none';
document.getElementById("progressInfoCancel")!.style.display = 'none';
document.getElementById("progressInfoFinish")!.style.display = 'inline-block';
@ -373,6 +376,7 @@ class deployWindow {
};
listenerCancelInstall = (event: IpcRendererEvent, msg: any) => {
if (msg.type == "cancelinstall") {
console.log("取消安装");
this.finishFlag = 0;
let preFinish = document.getElementById("finishPage");
let showContext = '';
@ -383,6 +387,7 @@ class deployWindow {
document.getElementById("installLogPre")!.style.display = 'none';
document.getElementById("detailInstallPre")!.style.display = 'none';
document.getElementById("extInstallLogPre")!.style.display = 'none';
document.getElementById("progressInfoCancel")!.style.display = 'none';
this.nextBtn!.innerText = "结束";
this.nextBtn!.disabled = false;
@ -466,6 +471,33 @@ class deployWindow {
console.log("custom_print ==> " + msg);
}
reset() {
this.onlineInstallTabArrayIndex = 0;
this.justDownLoadTabArrayIndex = 0;
this.localInstallTabArrayIndex = 0;
this.firstClassList = {};
this.currentTab = 0;
this.finishFlag = -1;
this.gExtDownNum = 0;
this.gSoftInstNum = 0;
this.gExtInst = 0;
this.extAddressPath = '';
this.extInstallState = new Map();
this.extMap = {};
this.extDownloadDoneCounter = 0;
this.extInstallDoneCounter = 0;
this.logShow = 0;
this.progressNum = 0;
this.downState = new Map();
this.configList = {};
this.extList = [];
this.depList = [];
this.scriptList = [];
this.configData = [];
}
async nextPrev(n: number) {
// This function will figure out which tab to display
// let x = document.getElementsByClassName('tab');
@ -610,7 +642,7 @@ class deployWindow {
this.nextBtn!.disabled = true;
this.nextBtn!.innerHTML = "确定";
this.cancelBtn!.innerText = "取消";
this.cancelBtn!.style.display = "inline";
// this.cancelBtn!.style.display = "inline";
}
}
}
@ -685,7 +717,9 @@ class deployWindow {
console.log('closeBtn clicked');
if (this.onlineInstallRadio instanceof HTMLInputElement && this.onlineInstallRadio!.checked
&& this.onlineInstallTabArray[this.onlineInstallTabArrayIndex] == "onlineInstallTab4"
&& this.cancelBtn!.disabled == false) {
&& this.finishFlag !== 0
// && this.cancelBtn!.disabled == false
) {
ipcRenderer.send('kylinide.installWizard.show', { type: "info", message: "正在进行安装操作,若关闭窗口,则需先点击取消按钮中断安装过程。", title: "提示" });
//检查是否有进程正在安装,如果是,则提醒用户先点击取消安装,停止后台程序。然后再关闭程序
// ipcRenderer.send('kylinide.installWizard.closeBefore', { type: "processterm" });
@ -726,6 +760,7 @@ class deployWindow {
this.notNowRadio!.style.display = 'none';
document.getElementById('lablenotNow')!.style.display = 'none';
}
this.reset();
})
document.getElementById('progressInfoCancel')?.addEventListener('click', () => {
console.log('cancel');
@ -1145,7 +1180,7 @@ class deployWindow {
ipcRenderer.removeListener('kylinide.installWizard.msg', this.listenerMsg);
ipcRenderer.removeListener('kylinide.installWizard.removeFileLister', this.listenerRemoveFileLister);
ipcRenderer.removeListener('kylinide.installWizard.Auth', this.listenerAuth);
ipcRenderer.removeListener('kylinide.installWizard.cancelinstall', this.listenerCancelInstall);
ipcRenderer.removeListener('kylinide.installWizard.cancelInstall', this.listenerCancelInstall);
}
}

View File

@ -943,6 +943,7 @@ input[readonly] {
margin-left: 32px;
margin-right: 32px;
margin-top: 12px;
position: relative;
}
.detailInstallOutputTextbox>label {
@ -958,29 +959,34 @@ input[readonly] {
.detailInstallOutputTextbox>div {
background-color: #1E1E1E;
height: 251px;
height: 245px;
width: 100%;
margin: 0px;
position: relative;
margin-top: 6px;
}
.switchInstallOutput {
position: absolute; /* 2 */
height: 28px;
width: 86px;
top: 8px;
right: 18px;
position: absolute;
/* height: 28px; */
/* width: 86px; */
top: 0px;
right: 0px;
padding: 0px;
border: none;
margin-top: -6px;
margin-right: -5px;
border-radius: 1px;
background-color: rgb(255, 255, 255, .12);
/* background-color: rgb(255, 255, 255, .12); */
background-color: transparent;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.switchInstallOutput:hover {
background-color: rgb(255, 255, 255, .2);
color: fff;
/* background-color: rgb(255, 255, 255, .2); */
color: rgba(255,255,255, 1);
}
.switchInstallOutput img {
opacity: 0.7;

View File

@ -155,15 +155,7 @@ export class DeployMainService implements IDeployMainService {
// @IThemeService private readonly themeService: IThemeService,
// @INativeWorkbenchEnvironmentService private readonly environmentService: INativeWorkbenchEnvironmentService,
) {
this.sysinfo = { IDEVersion: this.productService.IDEVersion || "", localConfigFile: "", addNewPage: 0, localosinfo: "", urlosinfo: "", urlConfigFile: "" }
this.localConfigObject = { depConfigInfo: "", res: 0, g_index_Object: "", osinfo: "", localConfigMatch: 0 };
this.updateConfigObject = { res: 0, g_index_Object: {}, osinfo: "", ConfigMatch: 0, base_url: "", depConfigInfo: "" };
this.localConfigDir = installUtils.localConfigPath();
this.installConfig = installUtils.installConfigDirPre();//installconfig
this.updateConfigDir = installUtils.installConfigDirPre() + "/" + installUtils.getDateDir();
this.logFile0 = this.installConfig + '/log/install.1.log';
this.resultFile = this.installConfig + '/resultFile';
this.extLogFile0 = this.installConfig + '/log/extInstall.1.log';
this.reset();
this.logger = loggerMainService.createLogger(URI.file(this.installConfig + "/log/installguide.log"));
this.removeListeners();
this.registerListeners();
@ -386,13 +378,14 @@ export class DeployMainService implements IDeployMainService {
this.installQueue.splice(0);
//结束插件下载及安装
if (this.DeployWindow) {
this.DeployWindow.webContents.send("kylinide.installWizard.cancelinstall", { type: "cancelinstall" });
this.DeployWindow.webContents.send("kylinide.installWizard.cancelInstall", { type: "cancelinstall" });
}
}
console.log('kill Exit code:', code);
});
console.log("取消安装after");
} else {
console.log("取消安装其他情况");
if (this.DeployWindow) {
this.DeployWindow.webContents.send("kylinide.installWizard.removeFileLister", { type: 'installFile' });
this.DeployWindow.webContents.send("kylinide.installWizard.removeFileLister", { type: 'extFile' });
@ -403,13 +396,32 @@ export class DeployMainService implements IDeployMainService {
this.installQueue.splice(0);
//结束插件下载及安装
if (this.DeployWindow) {
this.DeployWindow.webContents.send("kylinide.installWizard.cancelinstall", { type: "cancelinstall" });
this.DeployWindow.webContents.send("kylinide.installWizard.cancelInstall", { type: 'cancelinstall' });
}
}
}
};
listenerRemoveFileLister = (event: IpcMainEvent, msg: any) => {
if (msg.type === 'installFile') {
if (this.installFsWatcher) {
this.installFsWatcher.close();
this.installFsWatcher = null;
}
} else if (msg.type === 'extFile') {
if (this.extlogFsWatcher) {
this.extlogFsWatcher.close();
this.extlogFsWatcher = null;
}
} else if (msg.type === 'pkgFile') {
if (this.pkglogFsWatcher) {
this.pkglogFsWatcher.close();
this.pkglogFsWatcher = null;
}
}
};
handleInitConfigVersify = async (event: IpcMainInvokeEvent, msg: any) => {
//start configverify
// updateConfigDir = msg.dst;
@ -1048,9 +1060,7 @@ export class DeployMainService implements IDeployMainService {
validatedIpcMain.removeListener('kylinide.installWizard.minw', this.listenerMiniWindow);
validatedIpcMain.removeListener('kylinide.installWizard.closeWizard', this.listenerCloseWindow);
validatedIpcMain.removeListener('kylinide.installWizard.msg.process', this.listenerInstallProcess);
validatedIpcMain.removeListener('kylinide.installWizard.msg.deplist', this.listenerDepInfo);
validatedIpcMain.removeListener('kylinide.installWizard.checkInstall', this.listenerCheckInstall);
validatedIpcMain.removeListener('kylinide.installWizard.downloadExt', this.listenerDownExten);
validatedIpcMain.removeListener('kylinide.installWizard.removeFileLister', this.listenerRemoveFileLister);
}
private registerListeners(): void {
//接收从渲染进程发送的消息
@ -1058,9 +1068,7 @@ export class DeployMainService implements IDeployMainService {
validatedIpcMain.on('kylinide.installWizard.minw', this.listenerMiniWindow);
validatedIpcMain.on('kylinide.installWizard.closeWizard', this.listenerCloseWindow);
validatedIpcMain.on('kylinide.installWizard.msg.process', this.listenerInstallProcess);
validatedIpcMain.on('kylinide.installWizard.msg.deplist', this.listenerDepInfo);
validatedIpcMain.on('kylinide.installWizard.checkInstall', this.listenerCheckInstall);
validatedIpcMain.on('kylinide.installWizard.downloadExt', this.listenerDownExten);
validatedIpcMain.on('kylinide.installWizard.removeFileLister', this.listenerRemoveFileLister);
//handle从渲染进程发送的消息
validatedIpcMain.handle('kylinide.installWizard.init.configVersify', this.handleInitConfigVersify);
validatedIpcMain.handle('kylinide.installWizard.init.configSelect', this.handleInitConfigSelect);
@ -1212,17 +1220,58 @@ export class DeployMainService implements IDeployMainService {
this.DeployWindow.minimize();
}
}
closeWindow() {
if (this.DeployWindow) {
this.DeployWindow.close();
}
}
reset() {
this.sysinfo = { IDEVersion: this.productService.IDEVersion || "", localConfigFile: "", addNewPage: 0, localosinfo: "", urlosinfo: "", urlConfigFile: "" }
this.localConfigObject = { depConfigInfo: "", res: 0, g_index_Object: "", osinfo: "", localConfigMatch: 0 };
this.updateConfigObject = { res: 0, g_index_Object: {}, osinfo: "", ConfigMatch: 0, base_url: "", depConfigInfo: "" };
this.localConfigDir = installUtils.localConfigPath();
this.installConfig = installUtils.installConfigDirPre();//.kylin-ide/installconfig
this.updateConfigDir = installUtils.installConfigDirPre() + "/" + installUtils.getDateDir();
this.logFile0 = this.installConfig + '/log/install.1.log';
this.resultFile = this.installConfig + '/resultFile';
this.extLogFile0 = this.installConfig + '/log/extInstall.1.log';
this.baseUrl = "";
this.extDownloadPath = "";
// public extensionsGalleryConfiguration!: IExtensionsGalleryConfiguration;
// private preExtensionsGalleryConfig: IExtensionsGalleryConfiguration;
this.extMap = {};
this.depList = [];
this.extList = [];
this.lastLogPosition = 0;
//文件监听;
this.installFsWatcher = null;
this.extlogFsWatcher = null;
this.pkglogFsWatcher = null;
//执行安装脚本的进程号;
this.installProcessId = null;
this.cancelFlag = false;
this.offset = 0;
this.resultIndex = 0;
this.flagPkexec = 0;
this.lastExtLogPosition = 0;
this.startInstallDepWatch = 0;
this.controller = new AbortController();
}
//#region Used by renderer
async openDeployWindow(flag: boolean = true): Promise<void> {
return new Promise(async (resolve, reject) => {
if (!this.DeployWindow) {
this.reset();
const data = {} as DeployData;
const DeployDisposables = new DisposableStore();
const deployWindowConfigUrl = DeployDisposables.add(this.protocolMainService.createIPCObjectUrl<DeployWindowConfiguration>());