diff --git a/app/src/assets/scss/business/_color.scss b/app/src/assets/scss/business/_color.scss index f5f5f90e8..2722caa25 100644 --- a/app/src/assets/scss/business/_color.scss +++ b/app/src/assets/scss/business/_color.scss @@ -1,10 +1,10 @@ .color__square { - height: 16px; - margin-right: 4px; - width: 16px; + height: 26px; + width: 26px; + margin: 4px; border: 0; transition: var(--b3-transition); - box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset; + box-shadow: 0 0 0 1px var(--b3-theme-surface-lighter) inset; display: flex; align-items: center; flex-direction: column; @@ -12,12 +12,14 @@ background-color: var(--b3-theme-background); padding: 0; border-radius: var(--b3-border-radius); + font-size: 16px; + font-weight: 500; - &:last-child { - margin-right: 0; + &--list { + margin: 0 8px 0 0; } - &:hover { - box-shadow: 0 0 0 1px var(--b3-theme-on-background) inset, 0 0 0 2px var(--b3-theme-background) inset; + &:hover:not(.color__square--list) { + box-shadow: 0 0 0 1px var(--b3-theme-surface-lighter) inset, 0 0 0 4px var(--b3-theme-background); } } diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index 4329e00fc..6378acf26 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -91,10 +91,6 @@ margin: 0; max-width: none; } - - .color__square { - margin: 0 16px 0 8px; - } } &__title { diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index fd7a6f35c..ff31b132d 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -459,13 +459,6 @@ } .protyle { - &-util { - .color__square { - height: 24px; - width: 24px; - } - } - &-font { font-size: 14px; } diff --git a/app/src/assets/scss/protyle/_toolbar.scss b/app/src/assets/scss/protyle/_toolbar.scss index 69efec3a5..c02ee5555 100644 --- a/app/src/assets/scss/protyle/_toolbar.scss +++ b/app/src/assets/scss/protyle/_toolbar.scss @@ -81,6 +81,7 @@ max-height: 80vh; z-index: 4; box-sizing: border-box; + overflow: auto; &--mobile { top: 0; @@ -92,19 +93,23 @@ &-font { font-size: 12px; padding: 4px 8px; + max-width: 238px; &__style { - background-color: transparent; - margin-right: 4px; + background-color: var(--b3-theme-background); + margin: 4px; transition: var(--b3-transition); - padding: 0 4px; + padding: 0 8px; border-radius: var(--b3-border-radius); - border: 1px solid transparent; color: var(--b3-theme-on-background); white-space: nowrap; + font-size: 16px; + box-shadow: 0 0 0 1px var(--b3-theme-surface-lighter) inset; + border-width: 0; + line-height: 26px; &:hover { - border-color: var(--b3-theme-surface-lighter); + box-shadow: 0 0 0 1px var(--b3-theme-surface-lighter) inset, 0 0 0 4px var(--b3-theme-background); } } } diff --git a/app/src/assets/scss/util/_function.scss b/app/src/assets/scss/util/_function.scss index 1c3b51924..0d0264f32 100644 --- a/app/src/assets/scss/util/_function.scss +++ b/app/src/assets/scss/util/_function.scss @@ -136,6 +136,18 @@ background-color: var(--b3-protyle-code-background); } + &__kbd { + padding: 2px 4px; + font: 75% Consolas, "Liberation Mono", Menlo, Courier, monospace, var(--b3-font-family); + 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: var(--b3-border-radius); + box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter); + } + &__list { padding-left: 2em; } diff --git a/app/src/protyle/hint/extend.ts b/app/src/protyle/hint/extend.ts index e3a881e59..0b16002f9 100644 --- a/app/src/protyle/hint/extend.ts +++ b/app/src/protyle/hint/extend.ts @@ -295,27 +295,27 @@ export const hintSlash = (key: string, protyle: IProtyle) => { filter: ["信息样式", "xinxiyangshi", "xxys", "info style"], id: "infoStyle", value: `style${Constants.ZWSP}color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);`, - html: `
A
${window.siyuan.languages.infoStyle}
`, + html: `
A
${window.siyuan.languages.infoStyle}
`, }, { filter: ["成功样式", "chenggongyangshi", "cgys", "success style"], id: "successStyle", value: `style${Constants.ZWSP}color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);`, - html: `
A
${window.siyuan.languages.successStyle}
`, + html: `
A
${window.siyuan.languages.successStyle}
`, }, { filter: ["警告样式", "jinggaoyangshi", "jgys", "warning style"], id: "warningStyle", value: `style${Constants.ZWSP}color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);`, - html: `
A
${window.siyuan.languages.warningStyle}
`, + html: `
A
${window.siyuan.languages.warningStyle}
`, }, { filter: ["错误样式", "cuowuyangshi", "cwys", "error style"], id: "errorStyle", value: `style${Constants.ZWSP}color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);`, - html: `
A
${window.siyuan.languages.errorStyle}
`, + html: `
A
${window.siyuan.languages.errorStyle}
`, }, { filter: ["清除样式", "qingchuyangshi", "qcys", "remove style"], id: "clearFontStyle", value: `style${Constants.ZWSP}`, - html: `
A
${window.siyuan.languages.clearFontStyle}
`, + html: `
A
${window.siyuan.languages.clearFontStyle}
`, }, { value: "", id: "separator_6", diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts index ff9381f50..744b485ea 100644 --- a/app/src/protyle/render/av/select.ts +++ b/app/src/protyle/render/av/select.ts @@ -297,7 +297,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, menu.addItem({ checked: parseInt(color) === index + 1, iconHTML: "", - label: `A`, + label: `A`, click(element) { if (element.lastElementChild.classList.contains("b3-menu__checked")) { return; diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts index 184928918..15c0bc285 100644 --- a/app/src/protyle/toolbar/Font.ts +++ b/app/src/protyle/toolbar/Font.ts @@ -32,18 +32,18 @@ export class Font extends ToolbarItem { export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => { let colorHTML = ""; - ["var(--b3-font-color1)", "var(--b3-font-color2)", "var(--b3-font-color3)", "var(--b3-font-color4)", + ["", "var(--b3-font-color1)", "var(--b3-font-color2)", "var(--b3-font-color3)", "var(--b3-font-color4)", "var(--b3-font-color5)", "var(--b3-font-color6)", "var(--b3-font-color7)", "var(--b3-font-color8)", "var(--b3-font-color9)", "var(--b3-font-color10)", "var(--b3-font-color11)", "var(--b3-font-color12)", "var(--b3-font-color13)"].forEach((item) => { - colorHTML += ``; + colorHTML += ``; }); let bgHTML = ""; - ["var(--b3-font-background1)", "var(--b3-font-background2)", "var(--b3-font-background3)", "var(--b3-font-background4)", + ["", "var(--b3-font-background1)", "var(--b3-font-background2)", "var(--b3-font-background3)", "var(--b3-font-background4)", "var(--b3-font-background5)", "var(--b3-font-background6)", "var(--b3-font-background7)", "var(--b3-font-background8)", "var(--b3-font-background9)", "var(--b3-font-background10)", "var(--b3-font-background11)", "var(--b3-font-background12)", "var(--b3-font-background13)"].forEach((item) => { - bgHTML += ``; + bgHTML += ``; }); const element = document.createElement("div"); @@ -61,18 +61,18 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => { lastColorHTML = `
${window.siyuan.languages.lastUsed} - ${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)} + ${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}
-
`; +
`; lastFonts.forEach((item: string) => { const lastFontStatus = item.split(Constants.ZWSP); switch (lastFontStatus[0]) { case "color": - lastColorHTML += ``; + lastColorHTML += ``; break; case "backgroundColor": - lastColorHTML += ``; + lastColorHTML += ``; break; case "style2": lastColorHTML += ``; @@ -86,7 +86,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => { } break; case "style1": - lastColorHTML += ``; + lastColorHTML += ``; break; case "clear": lastColorHTML += ``; @@ -112,7 +112,8 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
${window.siyuan.languages.color}
-
+
+ @@ -121,13 +122,13 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
${window.siyuan.languages.colorFont}
-
+
${colorHTML}
${window.siyuan.languages.colorPrimary}
-
+
${bgHTML}
@@ -141,6 +142,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
${window.siyuan.languages.fontSize}
+
+
-
-`; +
+
+
+ +
+
`; element.addEventListener("click", function (event: Event) { let target = event.target as HTMLElement; while (target && !target.isEqualNode(element)) { @@ -328,6 +335,10 @@ export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) textElement.removeAttribute("data-content"); break; } + + if (!textElement.getAttribute("style")) { + textElement.removeAttribute("style"); + } } }; diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 0f311ab4d..d54cdc57c 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -502,7 +502,11 @@ export class Toolbar { inlineElement.setAttribute("data-type", type); inlineElement.textContent = item.textContent; setFontStyle(inlineElement, textObj); - newNodes.push(inlineElement); + if (type === "text" && !inlineElement.getAttribute("style")) { + newNodes.push(item); + } else { + newNodes.push(inlineElement); + } } else { newNodes.push(item); } @@ -591,7 +595,18 @@ export class Toolbar { } else if (item.tagName !== "BR" && item.tagName !== "IMG") { item.setAttribute("data-type", types.join(" ")); setFontStyle(item, textObj); - newNodes.push(item); + if (types.includes("text") && !item.getAttribute("style")) { + if (types.length === 1) { + const tempText = document.createTextNode(item.textContent); + newNodes.push(tempText); + } else { + types.splice(types.indexOf("text"), 1); + item.setAttribute("data-type", types.join(" ")); + newNodes.push(item); + } + } else { + newNodes.push(item); + } } else { newNodes.push(item); }