Skip to content

Improve font appearance menu #15605

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
+37 −27
Closed

Improve font appearance menu #15605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7e8158a
:art: Improve font appearance menu
TCOTC Aug 16, 2025
bbe45a9
:art: Add `data-id` attributes to elements in the font appearance menu
TCOTC Aug 16, 2025
573e1a3
:art: Add `data-id` attributes to elements in the font appearance menu
TCOTC Aug 16, 2025
4c65adf
:art: Improve font appearance menu
TCOTC Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/assets/scss/business/_color.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
border-radius: var(--b3-border-radius);
font-size: 16px;
font-weight: 500;
color: var(--b3-theme-on-background);
color: var(--b3-color-text, --b3-theme-on-background);

&--list {
margin: 0 8px 0 0;
Expand Down
29 changes: 17 additions & 12 deletions app/src/mobile/util/keyboardToolbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
let lastColorHTML = "";
const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
if (lastFonts.length > 0) {
lastColorHTML = `<div class="keyboard__slash-title">
lastColorHTML = `<div data-id="lastUsed" class="keyboard__slash-title">
${window.siyuan.languages.lastUsed}
</div>
<div class="keyboard__slash-block">`;
<div data-id="lastUsedWrap" class="keyboard__slash-block">`;
lastFonts.forEach((item: string) => {
const lastFontStatus = item.split(Constants.ZWSP);
switch (lastFontStatus[0]) {
Expand Down Expand Up @@ -124,6 +124,7 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
}
let textElement: HTMLElement;
let fontSize = "16px";
let textColor: string;
if (nodeElements && nodeElements.length > 0) {
textElement = nodeElements[0] as HTMLElement;
} else {
Expand All @@ -134,11 +135,12 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
}
if (textElement) {
fontSize = textElement.style.fontSize || "16px";
textColor = textElement.style.color;
}
const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement;
utilElement.innerHTML = `${lastColorHTML}
<div class="keyboard__slash-title">${window.siyuan.languages.color}</div>
<div class="keyboard__slash-block">
<div data-id="color" class="keyboard__slash-title">${window.siyuan.languages.color}</div>
<div data-id="colorWrap" class="keyboard__slash-block">
<button class="keyboard__slash-item" data-type="style1">
<span class="keyboard__slash-icon">A</span>
<span class="keyboard__slash-text">${window.siyuan.languages.color} ${window.siyuan.languages.default}</span>
Expand All @@ -160,16 +162,16 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
<span class="keyboard__slash-text">${window.siyuan.languages.successStyle}</span>
</button>
</div>
<div class="keyboard__slash-title">${window.siyuan.languages.colorFont}</div>
<div class="keyboard__slash-block">
<div data-id="colorFont" class="keyboard__slash-title">${window.siyuan.languages.colorFont}</div>
<div data-id="colorFontWrap" class="keyboard__slash-block">
${colorHTML}
</div>
<div class="keyboard__slash-title">${window.siyuan.languages.colorPrimary}</div>
<div class="keyboard__slash-block">
<div data-id="colorPrimary" class="keyboard__slash-title">${window.siyuan.languages.colorPrimary}</div>
<div data-id="colorPrimaryWrap" class="keyboard__slash-block"${textColor ? ` style="--b3-color-text: ${textColor};"` : ""}>
${bgHTML}
</div>
<div class="keyboard__slash-title">${window.siyuan.languages.fontStyle}</div>
<div class="keyboard__slash-block">
<div data-id="fontStyle" class="keyboard__slash-title">${window.siyuan.languages.fontStyle}</div>
<div data-id="fontStyleWrap" class="keyboard__slash-block">
<button class="keyboard__slash-item" data-type="style2">
<span class="keyboard__slash-text" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</span>
</button>
Expand All @@ -181,8 +183,8 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
<span class="keyboard__slash-text">${window.siyuan.languages.clearFontStyle}</span>
</button>
</div>
<div class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
<div class="keyboard__slash-block${disableFont ? " fn__none" : ""}">
<div data-id="fontSize" class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
<div data-id="fontSizeWrap" class="keyboard__slash-block${disableFont ? " fn__none" : ""}">
<select class="b3-select fn__block" style="width: calc(50% - 8px);margin: 4px 0 8px 0;">
<option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
<option ${fontSize === "13px" ? "selected" : ""} value="13px">13px</option>
Expand Down Expand Up @@ -561,14 +563,17 @@ export const initKeyboardToolbar = () => {
if (["clear", "style2", "style4", "color", "backgroundColor", "fontSize", "style1"].includes(type)) {
const nodeElements = getFontNodeElements(protyle);
const itemElement = buttonElement.firstElementChild as HTMLElement;
const colorPrimaryWrap = toolbarElement.querySelector("[data-id='colorPrimaryWrap']") as HTMLElement;
if (type === "style1") {
fontEvent(protyle, nodeElements, type, itemElement.style.backgroundColor + Constants.ZWSP + itemElement.style.color);
colorPrimaryWrap.style.setProperty("--b3-color-text", itemElement.style.color);
} else if (type === "fontSize") {
fontEvent(protyle, nodeElements, type, itemElement.textContent.trim());
} else if (type === "backgroundColor") {
fontEvent(protyle, nodeElements, type, itemElement.style.backgroundColor);
} else if (type === "color") {
fontEvent(protyle, nodeElements, type, itemElement.style.color);
colorPrimaryWrap.style.setProperty("--b3-color-text", itemElement.style.color);
} else {
fontEvent(protyle, nodeElements, type);
}
Expand Down
33 changes: 19 additions & 14 deletions app/src/protyle/toolbar/Font.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
"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 += `<button ${item ? `class="color__square" style="background-color:${item}"` : `class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.default}"`} data-type="backgroundColor"></button>`;
bgHTML += `<button ${item ? `class="color__square" style="background-color:${item}"` : `class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.default}"`} data-type="backgroundColor">A</button>`;
});

const element = document.createElement("div");
Expand All @@ -58,13 +58,13 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
let lastColorHTML = "";
const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
if (lastFonts.length > 0) {
lastColorHTML = `<div class="fn__flex">
lastColorHTML = `<div data-id="lastUsed" class="fn__flex">
${window.siyuan.languages.lastUsed}
<span class="fn__space"></span>
<kbd class="fn__kbd fn__flex-center${window.siyuan.config.keymap.editor.insert.lastUsed.custom ? "" : " fn__none"}">${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}</kbd>
</div>
<div class="fn__hr--small"></div>
<div class="fn__flex fn__flex-wrap" style="align-items: center">`;
<div data-id="lastUsedWrap" class="fn__flex fn__flex-wrap" style="align-items: center">`;
lastFonts.forEach((item: string) => {
const lastFontStatus = item.split(Constants.ZWSP);
switch (lastFontStatus[0]) {
Expand Down Expand Up @@ -97,6 +97,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
}
let textElement: HTMLElement;
let fontSize = window.siyuan.config.editor.fontSize + "px";
let textColor: string;
if (nodeElements && nodeElements.length > 0) {
textElement = nodeElements[0] as HTMLElement;
} else {
Expand All @@ -107,39 +108,40 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
}
if (textElement) {
fontSize = textElement.style.fontSize || window.siyuan.config.editor.fontSize + "px";
textColor = textElement.style.color;
}
element.innerHTML = `${lastColorHTML}
<div class="fn__hr"></div>
<div>${window.siyuan.languages.color}</div>
<div data-id="color">${window.siyuan.languages.color}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex fn__flex-wrap">
<div data-id="colorWrap" class="fn__flex fn__flex-wrap">
<button class="color__square ariaLabel" data-position="3south" data-type="style1" aria-label="${window.siyuan.languages.default}">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);">A</button>
</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages.colorFont}</div>
<div data-id="colorFont">${window.siyuan.languages.colorFont}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex fn__flex-wrap">
<div data-id="colorFontWrap" class="fn__flex fn__flex-wrap">
${colorHTML}
</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages.colorPrimary}</div>
<div data-id="colorPrimary">${window.siyuan.languages.colorPrimary}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex fn__flex-wrap">
<div data-id="colorPrimaryWrap" class="fn__flex fn__flex-wrap"${textColor ? ` style="--b3-color-text: ${textColor};"` : ""}>
${bgHTML}
</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages.fontStyle}</div>
<div data-id="fontStyle">${window.siyuan.languages.fontStyle}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<div data-id="fontStyleWrap" class="fn__flex">
<button data-type="style2" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>
<button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>
</div>
<div class="fn__hr${disableFont ? " fn__none" : ""}"></div>
<div class="fn__flex${disableFont ? " fn__none" : ""}">
<div data-id="fontSize" class="fn__flex${disableFont ? " fn__none" : ""}">
${window.siyuan.languages.fontSize}
<span class="fn__flex-1"></span>
<label class="fn__flex">
Expand All @@ -149,7 +151,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<span class="fn__space--small"></span>
</label>
</div>
<div class="${disableFont ? " fn__none" : ""}">
<div data-id="fontSizeWrap" class="${disableFont ? " fn__none" : ""}">
<div class="fn__hr"></div>
<div class="b3-tooltips b3-tooltips__n fn__flex${fontSize.endsWith("em") ? " fn__none" : ""}" aria-label="${fontSize}">
<input class="b3-slider fn__block" id="fontSizePX" max="72" min="9" step="1" type="range" value="${parseInt(fontSize)}">
Expand All @@ -159,26 +161,29 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
</div>
</div>
<div class="fn__hr--b"></div>
<div class="fn__flex">
<div data-id="clearFontStyle" class="fn__flex">
<div class="fn__space--small"></div>
<button class="b3-button b3-button--remove fn__block" data-type="clear">
<svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}
</button>
<div class="fn__space--small"></div>
</div>`;
const colorPrimaryWrap = element.querySelector("[data-id='colorPrimaryWrap']") as HTMLElement;
element.addEventListener("click", function (event: Event) {
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(element)) {
const dataType = target.getAttribute("data-type");
if (target.tagName === "BUTTON") {
if (dataType === "style1") {
fontEvent(protyle, nodeElements, dataType, target.style.backgroundColor + Constants.ZWSP + target.style.color);
colorPrimaryWrap.style.setProperty("--b3-color-text", target.style.color);
} else if (dataType === "fontSize") {
fontEvent(protyle, nodeElements, dataType, target.textContent.trim());
} else if (dataType === "backgroundColor") {
fontEvent(protyle, nodeElements, dataType, target.style.backgroundColor);
} else if (dataType === "color") {
fontEvent(protyle, nodeElements, dataType, target.style.color);
colorPrimaryWrap.style.setProperty("--b3-color-text", target.style.color);
} else {
fontEvent(protyle, nodeElements, dataType);
}
Expand Down