From 29a25b006e94e6988c140c3f4fb306a87677c1b6 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Mon, 30 Jun 2025 01:27:05 +0800
Subject: [PATCH 1/2] :art: Improve Attribute View Layout
fix https://github.com/siyuan-note/siyuan/issues/15093 https://github.com/siyuan-note/siyuan/issues/15158
---
app/src/assets/scss/business/_av.scss | 35 +++++++++------------
app/src/assets/scss/business/_custom.scss | 2 +-
app/src/assets/scss/protyle/_protyle.scss | 2 +-
app/src/assets/scss/protyle/_wysiwyg.scss | 4 +++
app/src/protyle/render/av/gallery/render.ts | 2 +-
5 files changed, 22 insertions(+), 23 deletions(-)
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index bf8bec98615..dbbb855b63a 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -27,10 +27,7 @@
overflow-x: auto;
overflow-y: hidden;
cursor: auto;
- }
-
- &[data-av-type="gallery"] > .av__container {
- overflow: inherit;
+ padding: 2px;
}
&__pulse {
@@ -104,6 +101,7 @@
&:empty::after {
color: var(--b3-theme-on-surface-light);
content: attr(data-tip);
+ pointer-events: none;
}
}
@@ -345,6 +343,7 @@
object-fit: cover;
width: 100%;
object-position: center;
+ pointer-events: none;
&--fit {
object-fit: contain;
@@ -380,8 +379,7 @@
transition: background 100ms ease-out;
white-space: nowrap;
font-size: 85%;
- min-height: 23px;
- padding: 5px 4px;
+ padding: 10px 5px;
&--wrap {
word-break: break-all;
@@ -389,7 +387,7 @@
}
.av__cell {
- padding: 2px 4px;
+ padding: 2px 5px;
border-right: 0;
min-height: calc(1.625em + 4px);
@@ -403,8 +401,9 @@
border-radius: var(--b3-border-radius);
.b3-chip[data-type="block-more"] {
- top: 4px;
display: block;
+ top: 5px;
+ margin: 0;
z-index: 1;
}
}
@@ -419,10 +418,12 @@
cursor: default;
}
- &[data-dtype="mAsset"],
- &[data-dtype="mSelect"],
- &[data-dtype="select"] {
- margin-left: -2px;
+ .b3-chip {
+ margin: 3px 6px 3px 0;
+ }
+
+ .av__cellassetimg {
+ margin: 3px 6px 3px 0;
}
}
@@ -430,12 +431,6 @@
padding: 2px 4px !important;
min-height: calc(1.625em + 4px) !important;
- &[data-dtype="mAsset"][data-empty="true"],
- &[data-dtype="mSelect"][data-empty="true"],
- &[data-dtype="select"][data-empty="true"] {
- margin-left: 0;
- }
-
&[data-empty="true"] .av__gallery-tip {
display: flex;
}
@@ -699,7 +694,7 @@
}
.b3-chip {
- margin: 1px 2px;
+ margin: 1px 4px 1px 0;
padding: 2px 6px;
line-height: calc(1.625em - 6px);
font-size: inherit;
@@ -917,7 +912,7 @@
img.av__cellassetimg {
max-height: calc(1.625em - 2px);
border-radius: var(--b3-border-radius);
- margin: 1px 2px;
+ margin: 1px 4px 1px 0;
max-width: none;
vertical-align: top;
font-size: inherit;
diff --git a/app/src/assets/scss/business/_custom.scss b/app/src/assets/scss/business/_custom.scss
index dd428762cc0..d30fb54e409 100644
--- a/app/src/assets/scss/business/_custom.scss
+++ b/app/src/assets/scss/business/_custom.scss
@@ -120,7 +120,7 @@
}
.b3-chip {
- margin: 1px 2px;
+ margin: 1px 4px 1px 0;
}
.av__cellassetimg {
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index e38f5205485..b41f79f5e87 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -400,7 +400,7 @@
&:empty::after {
content: attr(data-tip);
color: var(--b3-theme-on-surface-light);
- cursor: text;
+ pointer-events: none;
}
&:focus {
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 3529d5ef719..95eae33e0b7 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -677,6 +677,10 @@
}
}
}
+
+ div[data-type="NodeAttributeView"] {
+ padding: 2px;
+ }
}
// 只读情况下列表前的圆点需要可以点击进行缩放
diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts
index c02e2905a46..8a37be4f286 100644
--- a/app/src/protyle/render/av/gallery/render.ts
+++ b/app/src/protyle/render/av/gallery/render.ts
@@ -162,7 +162,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
-
+
From 6e7c862e524a9196ff421ace882393faced643e5 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Mon, 30 Jun 2025 13:31:35 +0800
Subject: [PATCH 2/2] :art: Improve Attribute View Layout
---
app/src/assets/scss/business/_av.scss | 5 ++++-
app/src/assets/scss/protyle/_wysiwyg.scss | 4 ----
2 files changed, 4 insertions(+), 5 deletions(-)
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index dbbb855b63a..d4e26d0e477 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -27,7 +27,10 @@
overflow-x: auto;
overflow-y: hidden;
cursor: auto;
- padding: 2px;
+
+ &.fn__block {
+ overflow: visible;
+ }
}
&__pulse {
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 95eae33e0b7..3529d5ef719 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -677,10 +677,6 @@
}
}
}
-
- div[data-type="NodeAttributeView"] {
- padding: 2px;
- }
}
// 只读情况下列表前的圆点需要可以点击进行缩放