Vanessa 2025-08-05 12:28:10 +08:00
parent 0e5e32126b
commit 3f8777be96
2 changed files with 39 additions and 9 deletions

View file

@ -913,18 +913,49 @@
position: sticky; position: sticky;
left: 0; left: 0;
clear: both; clear: both;
font-size: 87.5%; padding: 16px 0 8px 0;
padding: 16px 0 0 0; display: flex;
align-items: center;
.counter:hover { &:hover .av__group-icon--hover {
display: block;
}
}
&-counter {
font-size: 87.5%;
color: var(--b3-theme-on-surface-light);
margin: 0 8px;
}
&-icon {
cursor: pointer;
color: var(--b3-theme-on-surface-light);
translate: var(--b3-transition);
border-radius: var(--b3-border-radius);
&:hover {
color: var(--b3-theme-on-background);
background-color: var(--b3-list-icon-hover); background-color: var(--b3-list-icon-hover);
} }
svg { svg {
padding: 4px;
float: left;
width: calc(1em - 6px);
height: calc(1em - 6px);
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1);
} }
}
&--hover {
display: none;
svg {
width: calc(1em - 4px);
height: calc(1em - 4px);
}
}
}
&-arrow--open { &-arrow--open {
transform: rotate(90deg); transform: rotate(90deg);

View file

@ -226,15 +226,14 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
}; };
export const getGroupTitleHTML = (group: IAVView, counter: number) => { export const getGroupTitleHTML = (group: IAVView, counter: number) => {
return `<div class="av__group-title block__icons"> return `<div class="av__group-title">
<div class="block__icon block__icon--show" data-type="av-group-fold" data-id="${group.id}"> <div class="av__group-icon" data-type="av-group-fold" data-id="${group.id}">
<svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg> <svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg>
</div> </div>
<span class="fn__space"></span> <span class="fn__space"></span>
${group.name} ${group.name}
<span class="${counter === 0 ? "fn__none" : "counter"}">${counter}</span> <span class="${counter === 0 ? "fn__none" : "av__group-counter"}">${counter}</span>
<span class="fn__space"></span> <span class="av__group-icon av__group-icon--hover ariaLabel" data-type="av-add-top" data-position="north" aria-label="${window.siyuan.languages.newRow}"><svg><use xlink:href="#iconAdd"></use></svg></span>
<span class="block__icon ariaLabel" data-type="av-add-top" data-position="north" aria-label="${window.siyuan.languages.newRow}"><svg><use xlink:href="#iconAdd"></use></svg></span>
</div>`; </div>`;
}; };