gitea/infio-copilot-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): make image selector modal more compact #49

Browse Source
This commit is contained in:
JayBridge 2025-04-25 00:12:26 +08:00
parent 9681ccf83c
commit 8c58b6c028
2 changed files with 70 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/modals/ImageSelectorModal.tsx
View File

@ -94,7 +94,11 @@ export class ImageSelectorModal extends Modal {
}
onOpen(): void {
const { contentEl } = this
const { contentEl, modalEl } = this
// 添加特定的CSS类以便我们可以定位模态框
modalEl.addClass('mod-image-selector')
const root = createRoot(contentEl)
root.render(
@ -108,7 +112,9 @@ export class ImageSelectorModal extends Modal {
}
onClose(): void {
const { contentEl } = this
const { contentEl, modalEl } = this
// 移除特定的CSS类
modalEl.removeClass('mod-image-selector')
contentEl.empty()
}
}

57
styles.css
View File

@ -2151,51 +2151,67 @@ button.infio-chat-input-model-select {
}
.infio-image-selector {
padding: var(--size-4-4);
min-width: 500px;
max-width: 800px;
padding: var(--size-4-3); /* 减小内边距 */
min-width: 450px; /* 减小最小宽度 */
max-width: 700px; /* 减小最大宽度 */
/* 禁用外部容器的滚动 */
overflow: hidden;
/* 确保模态框内容不会超出视口高度 */
max-height: 80vh; /* 减小最大高度 */
display: flex;
flex-direction: column;
}
.infio-image-selector-header {
display: flex;
gap: var(--size-2-2);
margin-bottom: var(--size-4-4);
gap: var(--size-2-1); /* 减小间距 */
margin-bottom: var(--size-4-2); /* 减小底部边距 */
/* 确保头部不会收缩 */
flex-shrink: 0;
}
.infio-image-search {
flex: 1;
padding: var(--size-2-2);
padding: var(--size-2-1); /* 减小内边距 */
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
background-color: var(--background-primary);
color: var(--text-normal);
font-size: var(--font-ui-small); /* 减小字体大小 */
height: 28px; /* 固定高度 */
}
.infio-upload-button {
padding: var(--size-2-2) var(--size-4-4);
padding: var(--size-2-1) var(--size-4-3); /* 减小内边距 */
background-color: var(--interactive-accent);
color: var(--text-on-accent);
border-radius: var(--radius-s);
cursor: pointer;
font-size: var(--font-ui-small);
font-size: var(--font-ui-smaller); /* 减小字体大小 */
display: inline-flex;
align-items: center;
gap: var(--size-2-2);
gap: var(--size-2-1); /* 减小间距 */
height: 28px; /* 固定高度 */
}
.infio-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--size-4-4);
max-height: 400px;
/* 减小每个图片项的最小宽度，使每行可以显示更多图片 */
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: var(--size-4-2); /* 减小间距 */
/* 允许内部容器滚动 */
overflow-y: auto;
padding: var(--size-2-2);
/* 使用flex-grow确保网格占用剩余空间 */
flex-grow: 1;
/* 减小最大高度，使网格更紧凑 */
max-height: calc(70vh - 80px);
}
.infio-image-item {
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
padding: var(--size-2-2);
padding: var(--size-2-1); /* 减小内边距 */
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--background-primary);
@ -2207,18 +2223,25 @@ button.infio-chat-input-model-select {
.infio-image-item img {
width: 100%;
height: 120px;
/* 减小图片高度 */
height: 100px;
object-fit: cover;
border-radius: var(--radius-xs);
}
.infio-image-name {
margin-top: var(--size-2-2);
font-size: var(--font-ui-smaller);
margin-top: var(--size-2-1); /* 减小上边距 */
font-size: var(--font-ui-smallest); /* 使用更小的字体 */
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-normal);
color: var(--text-muted); /* 使用更淡的颜色 */
line-height: 1.2; /* 减小行高 */
}
/* 禁用Obsidian模态框的滚动 */
.modal.mod-image-selector .modal-content {
overflow: hidden !important;
}