修复使用系统原生 Emoji 宽度不一致问题 (#7668)

* 🎨 修复使用系统默认图标时图标宽度与自定义图标不一致问题

* 🎨 修复 emoji 选择菜单中图标不等宽问题

* 🎨 调整移动端样式
This commit is contained in:
颖逸 2023-03-16 09:15:04 +08:00 committed by GitHub
parent 31524d814f
commit 4c8b2278d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 11 additions and 8 deletions

View file

@ -113,7 +113,7 @@
&__icon {
svg, img {
float: left;
margin: 3px 0;
margin: 0 -2px 0 2px;
height: 16px;
width: 16px;
color: var(--b3-theme-on-surface);
@ -125,8 +125,9 @@
margin-right: 4px;
line-height: 22px;
height: 22px;
width: 16px;
transition: var(--b3-transition);
padding: 0 4px;
padding: 0 6px 0 2px;
flex-shrink: 0;
&:hover {

View file

@ -262,7 +262,8 @@
font-family: var(--b3-font-family-emoji);
text-align: center;
height: 28px;
padding: 2px 4px;
width: 32px;
padding: 2px 8px 2px 0;
cursor: pointer;
display: inline-block;
transition: var(--b3-transition);
@ -275,6 +276,7 @@
height: 24px;
display: block;
width: 24px;
padding: 0 -4px 0 4px;
}
&--current,

View file

@ -956,7 +956,7 @@ export class Files extends Model {
data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" draggable="true" data-count="${item.subFileCount}"
data-type="navigation-file"
class="b3-list-item b3-list-item--hide-action" data-path="${item.path}">
<span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
<span style="padding-left: ${(item.path.split("/").length - 2) * 14 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
<svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span>
<span class="b3-list-item__icon b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.changeIcon}">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>

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) * 16 + 22}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>

View file

@ -82,7 +82,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="padding-left: ${(item.depth - 1) * 14 + 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"}">
<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}
@ -128,7 +128,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="padding-left: ${(item.depth - 1) * 14 + 22}px;margin-right: 2px" 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}

View file

@ -425,7 +425,7 @@ const getLeaf = (liElement: HTMLElement) => {
}
fileHTML += `<li title="${getDisplayName(item.name, true, true)} ${item.hSize}${item.bookmark ? "\n" + window.siyuan.languages.bookmark + " " + item.bookmark : ""}${item.name1 ? "\n" + window.siyuan.languages.name + " " + item.name1 : ""}${item.alias ? "\n" + window.siyuan.languages.alias + " " + item.alias : ""}${item.memo ? "\n" + window.siyuan.languages.memo + " " + item.memo : ""}${item.subFileCount !== 0 ? window.siyuan.languages.includeSubFile.replace("x", item.subFileCount) : ""}\n${window.siyuan.languages.modifiedAt} ${item.hMtime}\n${window.siyuan.languages.createdAt} ${item.hCtime}"
data-box="${notebookId}" 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 b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
<span style="padding-left: ${(item.path.split("/").length - 2) * 14 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
<svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span>
${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER), false, "b3-list-item__graphic", true)}