diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss index d60f8300b..1b4a895a6 100644 --- a/app/src/assets/scss/business/_config.scss +++ b/app/src/assets/scss/business/_config.scss @@ -10,6 +10,7 @@ margin: 0 24px; } } + &__panel { & > .b3-tab-bar { user-select: none; @@ -148,9 +149,30 @@ } } - &-keymap li .b3-text-field { - width: 124px; - text-align: center; + &-keymap { + &__key { + padding: 2px 4px; + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 1; + color: var(--b3-theme-on-surface); + vertical-align: middle; + background-color: var(--b3-theme-surface); + border: solid 1px var(--b3-theme-surface-lighter); + border-radius: 3px; + box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter); + margin-left: 4px; + cursor: pointer; + height: 14px; + min-width: 17px; + } + + .b3-list__panel .b3-text-field { + margin-left: 4px; + } + + div.b3-list-item > .b3-list-item__text { + padding-left: 4px; + } } &-bazaar__readme { diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss index 4a01aaed8..75a17a36a 100644 --- a/app/src/assets/scss/component/_list.scss +++ b/app/src/assets/scss/component/_list.scss @@ -24,32 +24,20 @@ } &--border { - div { + + .b3-list__panel { margin-left: 34px; position: relative; } - & > div div:before { + .b3-list__panel:before { content: ""; height: 100%; - top: 0; - position: absolute; - border-left: 1px solid var(--b3-theme-background-light); - left: -47px; - } - - & > div label:before { - content: ""; - height: 100%; - top: 0; + top: 0px; position: absolute; border-left: 1px solid var(--b3-theme-background-light); left: -21px; } - - .b3-list-item__text { - padding-left: 4px; - } } &-item { diff --git a/app/src/assets/scss/util/_responsive.scss b/app/src/assets/scss/util/_responsive.scss index 50a66bc9f..5ce4e9cb5 100644 --- a/app/src/assets/scss/util/_responsive.scss +++ b/app/src/assets/scss/util/_responsive.scss @@ -22,10 +22,6 @@ flex-direction: column; min-height: 100%; } - - .b3-form__icona { - margin-top: 8px; - } } &__item { @@ -36,10 +32,29 @@ .b3-slider, & > .b3-button, & > .b3-tooltips, - &-line { + & > .b3-form__icona, + &-line, + .searchByKeyLabel { width: 100%; margin-top: 8px; } } + + &-keymap { + label.b3-list-item { + flex-wrap: wrap; + } + + .b3-list-item__action { + display: flex; + } + + .config-keymap__key, + .b3-text-field { + width: 100%; + margin-left: 0 !important; + text-align: center; + } + } } } diff --git a/app/src/config/account.ts b/app/src/config/account.ts index 7f8fc1ed4..cf44d279b 100644 --- a/app/src/config/account.ts +++ b/app/src/config/account.ts @@ -56,7 +56,7 @@ ${window.siyuan.languages.account2}
- +
`; if (window.siyuan.user.userSiYuanProExpireTime === -1) { activeSubscriptionHTML = ""; diff --git a/app/src/config/keymap.ts b/app/src/config/keymap.ts index 96658e045..d56f3abf1 100644 --- a/app/src/config/keymap.ts +++ b/app/src/config/keymap.ts @@ -15,16 +15,17 @@ export const keymap = { let html = ""; Object.keys(keymap).forEach(key => { if (window.siyuan.languages[key]) { - html += `
-
-
+
${window.siyuan.languages.general}
-
${keymap._genItem(window.siyuan.config.keymap.general, "general")}
+
${keymap._genItem(window.siyuan.config.keymap.general, "general")}
-
+
${window.siyuan.languages.editor}
-
-
`; @@ -147,7 +148,7 @@ export const keymap = { keymap.element.querySelectorAll("#keymapList .b3-list-item--hide-action > .b3-list-item__text").forEach(item => { const liElement = item.parentElement; let matchedKeymap = false; - if (keymapString === "" || (item.nextElementSibling.nextElementSibling as HTMLInputElement).value.indexOf(updateHotkeyTip(keymapString)) > -1) { + if (keymapString === "" || (liElement.querySelector(".b3-text-field") as HTMLInputElement).value.indexOf(updateHotkeyTip(keymapString)) > -1) { matchedKeymap = true; } if ((item.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1 || value === "") && matchedKeymap) { @@ -169,7 +170,7 @@ export const keymap = { } } // 隐藏没有子项的快捷键项目 - if (liElement.parentElement.childElementCount === liElement.parentElement.querySelectorAll(".fn__none").length) { + if (liElement.parentElement.childElementCount === liElement.parentElement.querySelectorAll(".b3-list-item.fn__none").length) { toggleElement.classList.add("fn__none"); } else { toggleElement.classList.remove("fn__none"); @@ -239,20 +240,41 @@ export const keymap = { keymapListElement.addEventListener("click", (event) => { let target = event.target as HTMLElement; while (target && !target.isEqualNode(keymapListElement)) { - if (target.classList.contains("b3-tooltips")) { - const type = target.getAttribute("data-type"); + const type = target.getAttribute("data-type"); + if (type === "reset") { const inputElement = target.parentElement.querySelector(".b3-text-field") as HTMLInputElement; - if (type === "reset") { - inputElement.value = updateHotkeyTip(inputElement.getAttribute("data-default")); - inputElement.setAttribute("data-value", inputElement.getAttribute("data-default")); - } else if (type === "clear") { - inputElement.value = ""; - inputElement.setAttribute("data-value", ""); - } + inputElement.value = updateHotkeyTip(inputElement.getAttribute("data-default")); + inputElement.setAttribute("data-value", inputElement.getAttribute("data-default")); + inputElement.previousElementSibling.textContent = inputElement.value; keymap._setkeymap(); event.preventDefault(); event.stopPropagation(); break; + } else if (type === "clear") { + const inputElement = target.parentElement.querySelector(".b3-text-field") as HTMLInputElement; + inputElement.value = ""; + inputElement.previousElementSibling.textContent = ""; + inputElement.setAttribute("data-value", ""); + keymap._setkeymap(); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (type === "update") { + target.classList.add("fn__none"); + const inputElement = target.nextElementSibling as HTMLInputElement; + inputElement.classList.remove("fn__none"); + inputElement.focus(); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (target.classList.contains("b3-list-item--hide-action")) { + const inputElement = target.querySelector(".b3-text-field") as HTMLInputElement; + inputElement.classList.remove("fn__none"); + inputElement.focus(); + inputElement.previousElementSibling.classList.add("fn__none"); + event.preventDefault(); + event.stopPropagation(); + break; } else if (target.classList.contains("toggle")) { if (target.nextElementSibling.classList.contains("fn__none")) { target.firstElementChild.firstElementChild.classList.add("b3-list-item__arrow--open"); @@ -269,7 +291,7 @@ export const keymap = { } }); let timeout: number; - keymapListElement.querySelectorAll("label.b3-list-item input").forEach(item => { + keymapListElement.querySelectorAll("label.b3-list-item input").forEach((item: HTMLInputElement) => { item.addEventListener("keydown", function (event: KeyboardEvent) { event.stopPropagation(); event.preventDefault(); @@ -316,6 +338,13 @@ export const keymap = { keymap._setkeymap(); }, 1000); }); + item.addEventListener("blur", function () { + setTimeout(() => { + this.classList.add("fn__none") + this.previousElementSibling.textContent = this.value + this.previousElementSibling.classList.remove("fn__none") + }, Constants.TIMEOUT_INPUT); // 隐藏的话点击删除无法 target 会为 li + }); }); }, _getKeymapString(event: KeyboardEvent, it: HTMLInputElement) {