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

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

Browse source
This commit is contained in:
Vanessa 2024-11-05 10:48:12 +08:00
parent 3c05a55135
commit 66f3920335
9 changed files with 82 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/src/assets/scss/business/_color.scss
View file

@ -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);
}
}

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

@ -91,10 +91,6 @@
margin: 0;
max-width: none;
}
.color__square {
margin: 0 16px 0 8px;
}
}
&__title {

7
app/src/assets/scss/mobile.scss
View file

@ -459,13 +459,6 @@
}
.protyle {
&-util {
.color__square {
height: 24px;
width: 24px;
}
}
&-font {
font-size: 14px;
}

15
app/src/assets/scss/protyle/_toolbar.scss
View file

@ -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);
}
}
}

12
app/src/assets/scss/util/_function.scss
View file

@ -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;
}

10
app/src/protyle/hint/extend.ts
View file

@ -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: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="color__square color__square--list">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
}, {
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: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="color__square color__square--list">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
}, {
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: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="color__square color__square--list">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
}, {
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: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="color__square color__square--list">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
}, {
filter: ["清除样式", "qingchuyangshi", "qcys", "remove style"],
id: "clearFontStyle",
value: `style${Constants.ZWSP}`,
html: `<div class="b3-list-item__first"><div class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
html: `<div class="b3-list-item__first"><div class="color__square color__square--list">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
}, {
value: "",
id: "separator_6",

2
app/src/protyle/render/av/select.ts
View file

@ -297,7 +297,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
menu.addItem({
checked: parseInt(color) === index + 1,
iconHTML: "",
label: `<span class="color__square" style="padding: 5px;margin: 2px;color: var(--b3-font-color${index + 1});background-color: var(--b3-font-background${index + 1});">A</span>`,
label: `<span class="color__square color__square--list" style="margin: 2px 0;color: var(--b3-font-color${index + 1});background-color: var(--b3-font-background${index + 1});">A</span>`,
click(element) {
if (element.lastElementChild.classList.contains("b3-menu__checked")) {
return;

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

@ -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 += `<button class="color__square" data-type="color" style="color:${item}">A</button>`;
colorHTML += `<button ${item ? `class="color__square" style="color:${item}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.default}"`} data-type="color">A</button>`;
});
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 += `<button class="color__square" data-type="backgroundColor" style="background-color:${item}"></button>`;
bgHTML += `<button ${item ? `class="color__square" style="background-color:${item}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.default}"`} data-type="backgroundColor"></button>`;
});
const element = document.createElement("div");
@ -61,18 +61,18 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
lastColorHTML = `<div class="fn__flex">
${window.siyuan.languages.lastUsed}
<span class="fn__space"></span>
<kbd class="ft__on-surface fn__flex-center">${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}</kbd>
<kbd class="fn__kbd fn__flex-center">${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}</kbd>
</div>
<div class="fn__hr--small"></div>
<div class="fn__flex" style="align-items: center">`;
<div class="fn__flex fn__flex-wrap" style="align-items: center">`;
lastFonts.forEach((item: string) => {
const lastFontStatus = item.split(Constants.ZWSP);
switch (lastFontStatus[0]) {
case "color":
lastColorHTML += `<button class="color__square" data-type="${lastFontStatus[0]}" style="color:${lastFontStatus[1]}">A</button>`;
lastColorHTML += `<button ${lastFontStatus[1] ? `class="color__square" style="color:${lastFontStatus[1]}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.colorFont} ${window.siyuan.languages.default}"`} data-type="${lastFontStatus[0]}">A</button>`;
break;
case "backgroundColor":
lastColorHTML += `<button class="color__square" data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]}"></button>`;
lastColorHTML += `<button ${lastFontStatus[1] ? `class="color__square" style="background-color:${lastFontStatus[1]}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.colorPrimary} ${window.siyuan.languages.default}"`} data-type="${lastFontStatus[0]}"></button>`;
break;
case "style2":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" 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>`;
@ -86,7 +86,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
}
break;
case "style1":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}" class="color__square">A</button>`;
lastColorHTML += `<button ${lastFontStatus[1] ? `class="color__square" style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.color} ${window.siyuan.languages.default}"`} data-type="${lastFontStatus[0]}">A</button>`;
break;
case "clear":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${window.siyuan.languages.clearFontStyle}</button>`;
@ -112,7 +112,8 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<div class="fn__hr"></div>
<div>${window.siyuan.languages.color}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<div class="fn__flex fn__flex-wrap">
<button class="color__square ariaLabel" data-position="3bottom" 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>
@ -121,13 +122,13 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<div class="fn__hr"></div>
<div>${window.siyuan.languages.colorFont}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<div class="fn__flex fn__flex-wrap">
${colorHTML}
</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages.colorPrimary}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<div class="fn__flex fn__flex-wrap">
${bgHTML}
</div>
<div class="fn__hr"></div>
@ -141,6 +142,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<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>
@ -155,11 +157,16 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<option ${fontSize === "40px" ? "selected" : ""} value="40px">40px</option>
<option ${fontSize === "48px" ? "selected" : ""} value="48px">48px</option>
</select>
<div class="fn__space--small"></div>
</div>
<div class="fn__hr"></div>
<button class="b3-button b3-button--cancel" data-type="clear">
<svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}
</button>`;
<div class="fn__hr--b"></div>
<div 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>`;
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");
}
}
};

19
app/src/protyle/toolbar/index.ts
View file

@ -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);
}