github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-20 19:10:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 fix https://github.com/siyuan-note/siyuan/issues/7520

Browse Source
This commit is contained in:
Vanessa 2023-03-25 16:56:56 +08:00 committed by Liang Ding
parent aacf45d6a9
commit bc5937aad6
No known key found for this signature in database
GPG Key ID: 136F30F901A2231D
5 changed files with 77 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/src/assets/scss/mobile.scss
View File

@ -31,12 +31,55 @@
.b3-list--mobile {
.counter {
line-height: 36px;
height: 36px;
font-size: 16px;
border-radius: 4px;
}
& > .fn__flex-column {
height: 100%;
}
.b3-list-item {
font-size: 16px;
font-size: 18px;
line-height: 36px;
padding: 4px;
&__icon {
font-size: 18px;
line-height: 36px;
height: auto;
}
&__graphic {
width: 20px;
height: 20px;
padding: 8px 4px;
line-height: 20px;
font-size: 20px;
}
&__toggle {
padding: 11px;
height: auto;
}
&__arrow {
height: 14px;
width: 14px;
}
&__action {
padding: 8px;
height: 20px;
svg {
width: 20px;
height: 20px;
}
}
}
}
@ -65,7 +108,7 @@
background: var(--b3-theme-background);
&--border {
border-bottom: 1px solid var(--b3-theme-surface-lighter);
border-bottom: .5px solid var(--b3-theme-background-light);
}
&--dark {
@ -73,8 +116,8 @@
}
&__icon {
height: 18px;
width: 18px;
height: 20px;
width: 20px;
padding: 8px;
flex-shrink: 0;
margin: 6px 4px;
@ -97,11 +140,8 @@
min-width: 1px;
line-height: 30px;
font-size: 17px;
&:focus,
&:hover {
box-shadow: none;
}
padding: 0;
border: 0;
}
&__search {

2
app/src/assets/template/mobile/index.tpl
View File

@ -14,7 +14,7 @@
<svg id="toolbarFile" class="toolbar__icon">
<use xlink:href="#iconMenu"></use>
</svg>
<input class="toolbar__title b3-text-field fn__hidden" id="toolbarName">
<input class="toolbar__title fn__hidden" id="toolbarName">
<svg id="toolbarSync" class="toolbar__icon fn__none">
<use xlink:href="#iconCloudSucc"></use>
</svg>

2
app/src/mobile/util/MobileFiles.ts
View File

@ -605,7 +605,7 @@ export class MobileFiles extends Model {
}
return `<li data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" data-type="navigation-file"
class="b3-list-item" data-path="${item.path}">
<span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
<span style="padding-left: ${(item.path.split("/").length - 2) * 29 + 40}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
<svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span>
<span class="b3-list-item__icon">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>

12
app/src/mobile/util/initFramework.ts
View File

@ -29,7 +29,8 @@ export const initFramework = () => {
let bookmark: MobileBookmarks;
let tag: MobileTags;
// 不能使用 getEventName，否则点击返回会展开右侧栏
sidebarElement.querySelector(".toolbar--border").addEventListener("click", (event: Event & {
const firstToolbarElement = sidebarElement.querySelector(".toolbar--border")
firstToolbarElement.addEventListener("click", (event: Event & {
target: Element
}) => {
const svgElement = hasTopClosestByTag(event.target, "svg");
@ -41,8 +42,11 @@ export const initFramework = () => {
closePanel();
return;
}
sidebarElement.querySelectorAll(".toolbar--border svg").forEach(item => {
firstToolbarElement.querySelectorAll(".toolbar__icon").forEach(item => {
const itemType = item.getAttribute("data-type");
if (!itemType) {
return;
}
if (itemType === type) {
if (type === "sidebar-outline-tab") {
if (!outline) {
@ -57,13 +61,13 @@ export const initFramework = () => {
backlink.update();
}
} else if (type === "sidebar-bookmark-tab") {
if (!backlink) {
if (!bookmark) {
bookmark = new MobileBookmarks();
} else {
backlink.update();
}
} else if (type === "sidebar-tag-tab") {
if (!backlink) {
if (!tag) {
tag = new MobileTags();
} else {
tag.update();

20
app/src/util/Tree.ts
View File

@ -74,6 +74,14 @@ export class Tree {
countHTML = `<span class="counter">${item.count}</span>`;
}
const hasChild = (item.children && item.children.length > 0) || (item.blocks && item.blocks.length > 0);
let style = "";
if (isMobile()) {
if (item.depth > 0) {
style = `padding-left: ${(item.depth - 1) * 29 + 40}px`
}
} else {
style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`
}
html += `<li class="b3-list-item"
${(item.nodeType !== "NodeDocument" && item.type === "backlink") ? 'draggable="true" ' : ""}
${item.id ? 'data-node-id="' + item.id + '"' : ""}
@ -82,7 +90,7 @@ data-treetype="${item.type}"
data-type="${item.nodeType}"
data-subtype="${item.subType}"
${item.label ? "data-label='" + item.label + "'" : ""}>
<span style="padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px" class="b3-list-item__toggle${(item.type === "backlink" || hasChild) ? " b3-list-item__toggle--hl" : ""}${hasChild||item.type === "backlink" ? "" : " fn__hidden"}">
<span style="${style}" class="b3-list-item__toggle${(item.type === "backlink" || hasChild) ? " b3-list-item__toggle--hl" : ""}${hasChild || item.type === "backlink" ? "" : " fn__hidden"}">
<svg data-id="${encodeURIComponent(item.name + item.depth)}" class="b3-list-item__arrow${hasChild ? " b3-list-item__arrow--open" : ""}"><use xlink:href="#iconRight"></use></svg>
</span>
${iconHTML}
@ -119,6 +127,14 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
} else {
iconHTML = `<svg data-defids='["${item.defID}"]' class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>`;
}
let style = "";
if (isMobile()) {
if (item.depth > 0) {
style = `padding-left: ${(item.depth - 1) * 29 + 40}px`
}
} else {
style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`
}
html += `<li ${type === "backlink" ? 'draggable="true"' : ""}
class="b3-list-item ${isMobile() ? "" : "b3-list-item--hide-action"}"
data-node-id="${item.id}"
@ -128,7 +144,7 @@ data-type="${item.type}"
data-subtype="${item.subType}"
data-treetype="${type}"
data-def-path="${item.defPath}">
<span style="padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px" class="b3-list-item__toggle${item.children ? " b3-list-item__toggle--hl" : ""}${item.children ? "" : " fn__hidden"}">
<span style="${style}" class="b3-list-item__toggle${item.children ? " b3-list-item__toggle--hl" : ""}${item.children ? "" : " fn__hidden"}">
<svg data-id="${item.id}" class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span>
${iconHTML}