Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-22 23:14:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/14231

Browse source
This commit is contained in:
Vanessa 2025-03-04 21:55:18 +08:00
parent 2d2420794c
commit dcc1e32a30
14 changed files with 73 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/config/repos.ts
View file

@ -424,7 +424,7 @@ export const repos = {
<option value="0" ${window.siyuan.config.sync.provider === 0 ? "selected" : ""}>SiYuan</option>
<option value="2" ${window.siyuan.config.sync.provider === 2 ? "selected" : ""}>S3</option>
<option value="3" ${window.siyuan.config.sync.provider === 3 ? "selected" : ""}>WebDAV</option>
<option value="4" ${window.siyuan.config.sync.provider === 4 ? "selected" : ""}>${window.siyuan.languages.localFlieSystem}</option>
<option value="4" ${window.siyuan.config.sync.provider === 4 ? "selected" : ""}>${window.siyuan.languages.localFileSystem}</option>
</select>
</div>
<div id="syncProviderPanel" class="b3-label">

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

@ -139,25 +139,23 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<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="${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
<div class="fn__hr--small${disableFont ? " fn__none" : ""}"></div>
<div class="fn__flex${disableFont ? " fn__none" : ""}">
<div class="fn__space--small"></div>
<select class="b3-select fn__block">
<option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
<option ${fontSize === "13px" ? "selected" : ""} value="13px">13px</option>
<option ${fontSize === "14px" ? "selected" : ""} value="14px">14px</option>
<option ${fontSize === "15px" ? "selected" : ""} value="15px">15px</option>
<option ${fontSize === "16px" ? "selected" : ""} value="16px">16px</option>
<option ${fontSize === "19px" ? "selected" : ""} value="19px">19px</option>
<option ${fontSize === "22px" ? "selected" : ""} value="22px">22px</option>
<option ${fontSize === "24px" ? "selected" : ""} value="24px">24px</option>
<option ${fontSize === "29px" ? "selected" : ""} value="29px">29px</option>
<option ${fontSize === "32px" ? "selected" : ""} value="32px">32px</option>
<option ${fontSize === "40px" ? "selected" : ""} value="40px">40px</option>
<option ${fontSize === "48px" ? "selected" : ""} value="48px">48px</option>
</select>
<div class="fn__space--small"></div>
${window.siyuan.languages.fontSize}
<span class="fn__flex-1"></span>
<label class="fn__flex">
相对于编辑器字号
<span class="fn__space"></span>
<input class="b3-switch fn__flex-center" ${fontSize.endsWith("em") ? "checked" : ""} type="checkbox">
</label>
</div>
<div 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)}">
</div>
<div class="b3-tooltips b3-tooltips__n fn__flex${fontSize.endsWith("em") ? "" : " fn__none"}" aria-label="${parseInt(fontSize) * 100}%">
<input class="b3-slider fn__block" id="fontSizeEM" max="4.5" min="0.56" step="0.01" type="range" value="${parseInt(fontSize)}">
</div>
</div>
<div class="fn__hr--b"></div>
<div class="fn__flex">
@ -188,8 +186,38 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
target = target.parentElement;
}
});
element.querySelector("select").addEventListener("change", function (event: Event) {
fontEvent(protyle, nodeElements, "fontSize", (event.target as HTMLSelectElement).value);
const switchElement = element.querySelector(".b3-switch") as HTMLInputElement;
const fontSizePXElement = element.querySelector("#fontSizePX") as HTMLInputElement;
const fontSizeEMElement = element.querySelector("#fontSizeEM") as HTMLInputElement;
switchElement.addEventListener("change", function () {
if (switchElement.checked) {
// px -> em
const em = parseFloat((parseInt(fontSizePXElement.value) / 16).toFixed(2));
fontSizeEMElement.parentElement.setAttribute("aria-label", (em * 100).toString() + "%");
fontSizeEMElement.value = em.toString();
fontSizePXElement.parentElement.classList.add("fn__none");
fontSizeEMElement.parentElement.classList.remove("fn__none");
} else {
const px = Math.round(parseInt(fontSizeEMElement.value) * 16);
fontSizePXElement.parentElement.setAttribute("aria-label", px + "px");
fontSizePXElement.value = px.toString();
fontSizePXElement.parentElement.classList.remove("fn__none");
fontSizeEMElement.parentElement.classList.add("fn__none");
}
});
fontSizePXElement.addEventListener("change", function () {
fontEvent(protyle, nodeElements, "fontSize", fontSizePXElement.value + "px");
});
fontSizeEMElement.addEventListener("change", function () {
fontEvent(protyle, nodeElements, "fontSize", fontSizeEMElement.value + "em");
});
fontSizePXElement.addEventListener("input", function () {
fontSizePXElement.parentElement.setAttribute("aria-label", fontSizePXElement.value + "px");
});
fontSizeEMElement.addEventListener("input", function () {
fontSizeEMElement.parentElement.setAttribute("aria-label", (parseFloat(fontSizeEMElement.value) * 100).toFixed(0) + "%")
});
return element;
};