fix: 长分类名称省略时保留数量
This commit is contained in:
@@ -593,6 +593,35 @@ app.whenReady().then(async () => {
|
|||||||
});
|
});
|
||||||
})()`)
|
})()`)
|
||||||
);
|
);
|
||||||
|
const longShelfName = 'TheArtOfComputerProgramming超长分类名称';
|
||||||
|
library.updateShelf(researchShelf.id, { name: longShelfName });
|
||||||
|
await pollJs(
|
||||||
|
'超长分类名称刷新',
|
||||||
|
`Array.from(document.querySelectorAll('#libraryShelfList .library-filter'))
|
||||||
|
.some((button) => button.firstElementChild.textContent === ${JSON.stringify(longShelfName)})`
|
||||||
|
);
|
||||||
|
check(
|
||||||
|
'超长分类只省略名称并完整保留数量与操作区',
|
||||||
|
await js(`(() => {
|
||||||
|
const button = Array.from(document.querySelectorAll('#libraryShelfList .library-filter'))
|
||||||
|
.find((candidate) => candidate.firstElementChild.textContent === ${JSON.stringify(longShelfName)});
|
||||||
|
const name = button.firstElementChild;
|
||||||
|
const count = button.querySelector('.library-filter-count');
|
||||||
|
const actions = button.closest('.library-shelf-row').querySelector('.library-shelf-actions');
|
||||||
|
return getComputedStyle(button).display === 'flex'
|
||||||
|
&& getComputedStyle(name).textOverflow === 'ellipsis'
|
||||||
|
&& name.scrollWidth > name.clientWidth
|
||||||
|
&& count.textContent === '(1)'
|
||||||
|
&& count.getBoundingClientRect().width > 0
|
||||||
|
&& count.getBoundingClientRect().right <= actions.getBoundingClientRect().left + 1;
|
||||||
|
})()`)
|
||||||
|
);
|
||||||
|
library.updateShelf(researchShelf.id, { name: researchShelf.name });
|
||||||
|
await pollJs(
|
||||||
|
'恢复研究书架名称',
|
||||||
|
`Array.from(document.querySelectorAll('#libraryShelfList .library-filter'))
|
||||||
|
.some((button) => button.firstElementChild.textContent === ${JSON.stringify(researchShelf.name)})`
|
||||||
|
);
|
||||||
check(
|
check(
|
||||||
'标签侧栏显示真实聚合计数',
|
'标签侧栏显示真实聚合计数',
|
||||||
await js(`(() => {
|
await js(`(() => {
|
||||||
|
|||||||
@@ -620,7 +620,15 @@ test('侧栏行内操作不占据布局,选中高亮与静态筛选项等宽',
|
|||||||
assert.doesNotMatch(css, /\.library-shelf-actions\s*\{\s*display:\s*flex;\s*flex:\s*none/);
|
assert.doesNotMatch(css, /\.library-shelf-actions\s*\{\s*display:\s*flex;\s*flex:\s*none/);
|
||||||
assert.match(css, /\.library-shelf-row \.library-filter,\s*\n\.library-tag-row \.library-filter\s*\{[^}]*padding-right:\s*48px/);
|
assert.match(css, /\.library-shelf-row \.library-filter,\s*\n\.library-tag-row \.library-filter\s*\{[^}]*padding-right:\s*48px/);
|
||||||
// 分类数量紧跟名称显示为「分类(数量)」,不再像标签数量那样浮到右侧
|
// 分类数量紧跟名称显示为「分类(数量)」,不再像标签数量那样浮到右侧
|
||||||
assert.match(css, /#libraryTab \.library-filter\[data-shelf\] \.library-filter-count,\s*\n\.library-shelf-row \.library-filter-count\s*\{\s*float:\s*none/);
|
assert.match(css, /\.library-shelf-row \.library-filter\s*\{[^}]*display:\s*flex/);
|
||||||
|
const shelfName = css.match(
|
||||||
|
/\.library-shelf-row \.library-filter > span:first-child\s*\{([^}]*)\}/
|
||||||
|
);
|
||||||
|
assert.ok(shelfName, '缺少长分类名称的独立省略样式');
|
||||||
|
assert.match(shelfName[1], /min-width:\s*0/);
|
||||||
|
assert.match(shelfName[1], /overflow:\s*hidden/);
|
||||||
|
assert.match(shelfName[1], /text-overflow:\s*ellipsis/);
|
||||||
|
assert.match(css, /#libraryTab \.library-filter\[data-shelf\] \.library-filter-count,\s*\n\.library-shelf-row \.library-filter-count\s*\{[^}]*flex:\s*none;[^}]*float:\s*none/);
|
||||||
const actionButtons = css.match(
|
const actionButtons = css.match(
|
||||||
/\.library-shelf-actions \.notes-icon-btn,\s*\n\.library-tag-actions \.notes-icon-btn\s*\{([^}]*)\}/
|
/\.library-shelf-actions \.notes-icon-btn,\s*\n\.library-tag-actions \.notes-icon-btn\s*\{([^}]*)\}/
|
||||||
);
|
);
|
||||||
|
|||||||
+14
-1
@@ -714,6 +714,16 @@ body {
|
|||||||
.library-tag-row { position: relative; display: flex; align-items: center; }
|
.library-tag-row { position: relative; display: flex; align-items: center; }
|
||||||
.library-shelf-row .library-filter,
|
.library-shelf-row .library-filter,
|
||||||
.library-tag-row .library-filter { flex: 1; padding-right: 48px; }
|
.library-tag-row .library-filter { flex: 1; padding-right: 48px; }
|
||||||
|
.library-shelf-row .library-filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.library-shelf-row .library-filter > span:first-child {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
.library-shelf-actions,
|
.library-shelf-actions,
|
||||||
.library-tag-actions {
|
.library-tag-actions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -741,7 +751,10 @@ body {
|
|||||||
}
|
}
|
||||||
.library-filter-count { float: right; color: var(--text-dim); }
|
.library-filter-count { float: right; color: var(--text-dim); }
|
||||||
#libraryTab .library-filter[data-shelf] .library-filter-count,
|
#libraryTab .library-filter[data-shelf] .library-filter-count,
|
||||||
.library-shelf-row .library-filter-count { float: none; }
|
.library-shelf-row .library-filter-count {
|
||||||
|
flex: none;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
.library-content { min-width: 0; }
|
.library-content { min-width: 0; }
|
||||||
.library-search {
|
.library-search {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user