From bac3e54583e84266f78afd71e53ebd427b468492 Mon Sep 17 00:00:00 2001 From: weike Date: Fri, 7 Jun 2024 16:02:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BC=80=E5=8F=91=E5=9C=BA?= =?UTF-8?q?=E6=99=AFCheckbox=E6=98=BE=E7=A4=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../deploy/deployWindowMain.ts | 61 ++++++++++++++++--- .../electron-sandbox/deploy/media/deploy.css | 51 +++++++++++----- 2 files changed, 89 insertions(+), 23 deletions(-) diff --git a/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts b/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts index 2bd50f18..a1ba3fd8 100644 --- a/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts +++ b/src/vs/code/electron-sandbox/deploy/deployWindowMain.ts @@ -887,19 +887,35 @@ class deployWindow { checkbox.type = "checkbox"; checkbox.value = item.key; checkbox.id = item.key; + + checkbox.className = "checkbox" + if (jsonSelectKey.indexOf(item.key) > -1) { - checkbox.className = "checkboxselect" + checkbox.classList.add("checkboxselect"); } - else { checkbox.className = "checkbox" } + if (checkbox.id === "JavaScript_key") { checkbox.checked = true; checkbox.disabled = true; } - if (installedPkg.includes(item.val)) { - checkbox.classList.add("installed"); + if (item.key === "selectAll") { + checkbox.classList.add("selectAll"); } + console.log("==> checkbox:" + checkbox.id + ":" + checkbox.className + ":" + checkbox.type + ":" + checkbox.classList.length + ":" + checkbox.value + ":" + checkbox.checked); + // "==> checkbox: selectAll checkbox checkbox selectAll 2 selectAll false + // "==> checkbox: Remote_key checkbox checkboxselect heckbox 2 Remote_key false + // "==> checkbox: C_key checkbox checkbox 1 C_key false + // "==> checkbox: JAVA_key checkbox checkboxselect checkbox 2 JAVA_key false + // "==> checkbox: Python3_key checkbox checkboxselect checkbox 2 Python3_key false + // "==> checkbox: Go_key checkbox checkbox 1 Go_key false + // "==> checkbox: JavaScript_key checkbox checkbox 1 JavaScript_key true + + // 全选 checkbox selectAll + // 非全选:已安装过的 checkbox checkboxselect + // 非全选:未安装过的 checkbox + // 创建label文本 var labelTextNode = document.createElement("label"); labelTextNode.setAttribute("for", item.key); @@ -919,6 +935,31 @@ class deployWindow { return 'zh-cn' } + updateDevSceneCheckState() { + let selectAllVal = document.getElementById("selectAll") as HTMLInputElement; + var checks = document.querySelectorAll(".scenarioSelection > input[type='checkbox']:not([value='selectAll'])"); + var allChecked = true; + var allUnchecked = true; + for (var item of checks) { + var checkbox = item as HTMLInputElement; + if (checkbox.checked) { + allUnchecked = false; + } else { + allChecked = false; + } + } + if (allChecked) { + selectAllVal.checked = true; + selectAllVal.indeterminate = false; + } else if (allUnchecked) { + selectAllVal.checked = false; + selectAllVal.indeterminate = false; + } else { + selectAllVal.checked = false; + selectAllVal.indeterminate = true; + } + } + showDependences(arg: any) { this.configData = []; // this.configData.push(arg); @@ -927,16 +968,22 @@ class deployWindow { let formattedDoc = ''; let selectAllVal = document.getElementById("selectAll") as HTMLInputElement; - var checks = document.querySelectorAll(".scenarioSelection > input"); + var checks = document.querySelectorAll(".scenarioSelection > input[type='checkbox']:not([value='selectAll'])"); selectAllVal.onclick = function () { - // 遍历复选框元素对象 for (var i = 0; i < checks.length; i++) { - // 将复选框的选中状态设置为和全选框一致 if ((checks[i] as HTMLInputElement).value != "JavaScript_key") (checks[i] as HTMLInputElement).checked = selectAllVal.checked; } }; + // this.updateDevSceneCheckState(); + + checks.forEach((check) => { + check.addEventListener('click', () => { + this.updateDevSceneCheckState(); + }); + }); + for (var i = 0; i < elements.length; i++) { elements[i].addEventListener("change", (event) => { // 根据选中不同的checkbox，显示不同输出； diff --git a/src/vs/code/electron-sandbox/deploy/media/deploy.css b/src/vs/code/electron-sandbox/deploy/media/deploy.css index e3a26ee8..b9bb276a 100644 --- a/src/vs/code/electron-sandbox/deploy/media/deploy.css +++ b/src/vs/code/electron-sandbox/deploy/media/deploy.css @@ -1115,9 +1115,8 @@ button#cancel:disabled { font-family: SourceHanSansCN, SourceHanSansCN; font-weight: 400; font-size: 13px; - color: rgba(255,255,255,0.7); - /* color: red; - background-color: orange; */ + /* color: rgba(255,255,255,0.7); */ + /* color: red; */ line-height: 20px; text-align: left; font-style: normal; @@ -1156,7 +1155,7 @@ button#cancel:disabled { vertical-align: middle; } -.checkbox.installed { +.checkbox.checkboxselect { background: rgba(39, 119, 255, 0.5); border: 0px solid rgba(39, 119, 255, 0.5); } @@ -1172,10 +1171,6 @@ button#cancel:disabled { border: 1px solid #686868; } -.checkbox:checked+label { - /* color: red; */ -} - .checkbox:checked::after { content: ""; height: 4px; @@ -1189,7 +1184,23 @@ button#cancel:disabled { transform: rotate(-60deg); } -.checkboxselect { +.checkbox:disabled:checked::after { + opacity: 0.5; +} + +.checkbox+label { + color: rgba(255,255,255,0.7); + +} +.checkbox:checked+label { + color: rgba(255,255,255,0.9); +} + +.checkbox:disabled:checked+label { + color: rgba(255,255,255,0.7); +} + +.selectAll { margin: 0px; padding: 0px; -webkit-appearance: none; @@ -1197,18 +1208,26 @@ button#cancel:disabled { outline: none; width: 16px; height: 16px; - background: rgba(39, 119, 255, 0.5); - border: 0px solid rgba(39, 119, 255, 0.5); + background-color: transparent; + border: 1px solid #686868; border-radius: 1px; vertical-align: middle; } -.checkboxselect:checked { +.selectAll:checked { background: #2777FF; border: 1px solid #2777FF; } -.checkboxselect:checked::after { +.selectAll+label { + color: rgba(255,255,255,0.7); + +} +.selectAll:checked+label { + color: rgba(255,255,255,0.7); +} + +.selectAll:checked::after { content: ""; height: 4px; width: 8px; @@ -1221,11 +1240,11 @@ button#cancel:disabled { transform: rotate(-60deg); } -.checkboxselect:indeterminate::after { +.selectAll:indeterminate::before { content: ""; position: absolute; - margin-top: 5px; - margin-left: 5px; + margin-top: 4px; + margin-left: 4px; width: 6px; height: 6px; background: #2777FF;