0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 font size

Browse source
This commit is contained in:
Vanessa 2023-09-26 12:43:13 +08:00
parent aa22b4892a
commit 713aba12e2
6 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/component/_chip.scss
View file

@ -34,7 +34,6 @@
&--small {
padding: 0 8px;
font-size: 12px;
line-height: 16px;
}
&--secondary {

4
app/src/assets/scss/component/_typography.scss
View file

@ -297,7 +297,7 @@
.hljs {
border-radius: var(--b3-border-radius);
padding: 22px 4px;
padding: 1.6em 4px;
font-size: 85%;
overflow: auto;
font-family: var(--b3-font-family-code);
@ -548,7 +548,7 @@
font-size: 85%;
line-height: 1.625;
background-color: var(--b3-theme-surface);
padding: 22px 4px;
padding: 1.6em 4px;
box-sizing: border-box;
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
width: 3.6em;

18
app/src/mobile/util/keyboardToolbar.ts
View file

@ -49,6 +49,15 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
</button>`;
});
const nodeElements = getFontNodeElements(protyle);
let disableFont = false;
nodeElements?.find((item: HTMLElement) => {
if (item.classList.contains("list") || item.classList.contains("li")) {
disableFont = true;
return true;
}
});
let lastColorHTML = "";
const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
if (lastFonts.length > 0) {
@ -82,9 +91,11 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
</button>`;
break;
case "fontSize":
lastColorHTML += `<button class="keyboard__slash-item" data-type="${lastFontStatus[0]}">
if (!disableFont) {
lastColorHTML += `<button class="keyboard__slash-item" data-type="${lastFontStatus[0]}">
<span class="keyboard__slash-text">${lastFontStatus[1]}</span>
</button>`;
}
break;
case "style1":
lastColorHTML += `<button class="keyboard__slash-item" data-type="${lastFontStatus[0]}">
@ -103,7 +114,6 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
}
let textElement: HTMLElement;
let fontSize = "16px";
const nodeElements = getFontNodeElements(protyle);
if (nodeElements && nodeElements.length > 0) {
textElement = nodeElements[0] as HTMLElement;
} else {
@ -157,8 +167,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">${window.siyuan.languages.fontSize}</div>
<div class="keyboard__slash-block">
<div class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
<div 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>

2
app/src/protyle/render/highlightRender.ts
View file

@ -132,6 +132,8 @@ export const lineNumberRender = (block: HTMLElement) => {
return;
}
block.classList.add("protyle-linenumber");
// clientHeight 总是取的整数
block.parentElement.style.lineHeight = `${((parseInt(block.parentElement.style.fontSize) || window.siyuan.config.editor.fontSize) * 1.625 * 0.85).toFixed(0)}px`;
const lineNumberTemp = document.createElement("div");
lineNumberTemp.className = "hljs protyle-linenumber";
lineNumberTemp.setAttribute("style", `padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;white-space:${block.style.whiteSpace};word-break:${block.style.wordBreak};font-variant-ligatures:${block.style.fontVariantLigatures};`);

23
app/src/protyle/toolbar/Font.ts
View file

@ -5,6 +5,7 @@ import {focusByRange, getSelectionPosition} from "../util/selection";
import {Constants} from "../../constants";
import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
import {updateBatchTransaction} from "../wysiwyg/transaction";
import {lineNumberRender} from "../render/highlightRender";
export class Font extends ToolbarItem {
public element: HTMLElement;
@ -46,6 +47,13 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
const element = document.createElement("div");
element.classList.add("protyle-font");
let disableFont = false;
nodeElements?.find((item: HTMLElement) => {
if (item.classList.contains("list") || item.classList.contains("li")) {
disableFont = true;
return true;
}
});
let lastColorHTML = "";
const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
if (lastFonts.length > 0) {
@ -72,7 +80,9 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
lastColorHTML += `<button data-type="${lastFontStatus[0]}" 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>`;
break;
case "fontSize":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`;
if (!disableFont) {
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`;
}
break;
case "style1":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}" class="color__square">A</button>`;
@ -126,10 +136,10 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<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"></div>
<div>${window.siyuan.languages.fontSize}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<div class="fn__hr${disableFont ? " fn__none" : ""}"></div>
<div class="${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
<div class="fn__hr--small${disableFont ? " fn__none" : ""}"></div>
<div class="fn__flex${disableFont ? " fn__none" : ""}">
<select class="b3-select fn__block">
<option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
<option ${fontSize === "13px" ? "selected" : ""} value="13px">13px</option>
@ -221,6 +231,9 @@ export const fontEvent = (protyle: IProtyle, nodeElements: Element[], type?: str
} else if (type === "fontSize") {
e.style.fontSize = color;
}
if ((type === "fontSize" || type === "clear") && e.getAttribute("data-type") === "NodeCodeBlock") {
lineNumberRender(e.querySelector(".hljs"));
}
});
focusByRange(protyle.toolbar.range);
} else {

3
app/src/util/assets.ts
View file

@ -199,7 +199,6 @@ export const addGA = () => {
export const setInlineStyle = (set = true) => {
const height = Math.floor(window.siyuan.config.editor.fontSize * 1.625);
// .protyle-wysiwyg .hljs.protyle-linenumber 的设置是由于 lineNumberRender 中 clientHeight 总是取的整数
let style = `.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}
.b3-typography code:not(.hljs), .protyle-wysiwyg span[data-type~=code] { font-variant-ligatures: ${window.siyuan.config.editor.codeLigatures ? "normal" : "none"} }
.li > .protyle-action {height:${height + 8}px;line-height: ${height + 8}px}
@ -210,8 +209,6 @@ export const setInlineStyle = (set = true) => {
.protyle-wysiwyg [data-node-id] [spellcheck] {min-height:${height}px;}
.protyle-wysiwyg [data-node-id] {${window.siyuan.config.editor.rtl ? " direction: rtl;" : ""}${window.siyuan.config.editor.justify ? " text-align: justify;" : ""}}
.protyle-wysiwyg .li {min-height:${height + 8}px}
.protyle-wysiwyg .hljs.protyle-linenumber {line-height: ${(height * 0.85).toFixed(0)}px}
.protyle-wysiwyg .av__calc {line-height: ${height}px}
.protyle-gutters button svg {height:${height}px}
.protyle-wysiwyg img.emoji, .b3-typography img.emoji {width:${height - 8}px}
.protyle-wysiwyg .h1 img.emoji, .b3-typography h1 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.75 * 1.25)}px}