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

💄 fix https://github.com/siyuan-note/siyuan/issues/7598

Browse source
This commit is contained in:
Vanessa 2023-03-16 22:18:27 +08:00
parent 7a8d4d4e62
commit ad0b625db8
3 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,13 +39,14 @@
.b3-menu {
&__submenu {
top: 45px;
top: 57px;
left: 0;
bottom: 0;
max-height: none;
right: 0;
box-shadow: none;
border: 0;
padding: 0;
}
&__item {
@ -64,6 +65,10 @@
line-height: 24px;
padding-left: 16px;
}
.color__square {
margin: 0 16px 0 8px;
}
}
&__title {
@ -141,13 +146,9 @@
padding: 4px;
align-content: flex-start;
.b3-menu__icon {
display: none;
}
.b3-menu__item {
width: auto;
padding: 4px;
min-width: auto;
margin-top: 7px;
}
.b3-menu__label {

2
app/src/menus/Menu.ts
View file

@ -50,6 +50,8 @@ export class Menu {
itemElement.classList.add("b3-menu__item--show");
if (!this.element.classList.contains("b3-menu--fullscreen")) {
this.showSubMenu(subMenuElement);
} else {
this.element.scrollTop = 0
}
});
}

29
app/src/protyle/gutter/index.ts
View file

@ -668,7 +668,9 @@ export class Gutter {
submenu: this.genCardStyle(selectsElement, protyle).concat(this.genFontStyle(selectsElement, protyle)).concat(this.genBGStyle(selectsElement, protyle))
}).element;
window.siyuan.menus.menu.append(appearanceElement);
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
if (!isMobile()) {
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
}
this.genAlign(selectsElement, protyle);
this.genWidths(selectsElement, protyle);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
@ -1439,7 +1441,9 @@ export class Gutter {
submenu: this.genCardStyle([nodeElement], protyle).concat(this.genFontStyle([nodeElement], protyle)).concat(this.genBGStyle([nodeElement], protyle))
}).element;
window.siyuan.menus.menu.append(appearanceElement);
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
if (!isMobile()) {
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
}
this.genAlign([nodeElement], protyle);
this.genWidths([nodeElement], protyle);
}
@ -1588,12 +1592,14 @@ export class Gutter {
private genBGStyle(nodeElements: Element[], protyle: IProtyle) {
const styles: IMenu[] = [];
const isM = isMobile();
["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, index) => {
styles.push({
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorPrimary} ${index + 1}">
iconHTML: isM ? `<span style="background-color:${item};" class="color__square fn__flex-center"></span>` : Constants.ZWSP,
label: isM ? `${window.siyuan.languages.colorPrimary} ${index + 1}` : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorPrimary} ${index + 1}">
<span style="background-color:${item};" class="color__square fn__flex-center"></span>
</div>`,
click: () => {
@ -1607,7 +1613,8 @@ export class Gutter {
type: "separator"
});
styles.push({
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.clearFontStyle}">
iconHTML: isM ? '<span class="color__square fn__flex-center">A</span>' : Constants.ZWSP,
label: isM ? window.siyuan.languages.clearFontStyle : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.clearFontStyle}">
<span class="color__square fn__flex-center">A</span>
</div>`,
click: () => {
@ -1703,12 +1710,14 @@ export class Gutter {
private genFontStyle(nodeElements: Element[], protyle: IProtyle) {
const styles: IMenu[] = [];
const isM = isMobile();
["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, index) => {
styles.push({
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorFont} ${index + 1}">
iconHTML: isM ? `<span style="color:${item};" class="color__square fn__flex-center">A</span>` : Constants.ZWSP,
label: isM ? `${window.siyuan.languages.colorFont} ${index + 1}` : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorFont} ${index + 1}">
<span style="color:${item};" class="color__square fn__flex-center">A</span>
</div>`,
click: () => {
@ -1726,9 +1735,11 @@ export class Gutter {
private genCardStyle(nodeElements: Element[], protyle: IProtyle) {
const styles: IMenu[] = [];
const isM = isMobile();
["error", "warning", "info", "success"].forEach((item) => {
styles.push({
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages[item + "Style"]}">
iconHTML: isM ? `<span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="color__square fn__flex-center">A</span>` : Constants.ZWSP,
label: isM ? window.siyuan.languages[item + "Style"] : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages[item + "Style"]}">
<span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="color__square fn__flex-center">A</span>
</div>`,
click: () => {
@ -1743,7 +1754,8 @@ export class Gutter {
type: "separator"
});
return styles.concat([{
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.hollow}">
iconHTML: isM ? '<span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="color__square fn__flex-center">A</span>' : Constants.ZWSP,
label: isM ? window.siyuan.languages.hollow : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.hollow}">
<span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="color__square fn__flex-center">A</span>
</div>`,
click: () => {
@ -1753,7 +1765,8 @@ export class Gutter {
});
}
}, {
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
iconHTML: isM ? ' <span 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)" class="color__square fn__flex-center">A</span>' : Constants.ZWSP,
label: isM ? window.siyuan.languages.shadow : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
<span 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)" class="color__square fn__flex-center">A</span>
</div>`,
click: () => {