obsidian-plugin/olcubo_obsidian-cubox
1
0
Fork 0
mirror of https://github.com/olcubo/obsidian-cubox.git synced 2026-07-22 05:43:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

modal use checkbook

Browse source
This commit is contained in:
delphi 2025-03-05 16:52:25 +08:00
parent 87edf82f09
commit c955940997
5 changed files with 296 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/modal/folderSelectModal.ts
View file

@ -85,25 +85,53 @@ export class FolderSelectModal extends Modal {
this.listEl.empty();
// 添加"All Items"选项
new Setting(this.listEl)
.setName('All Items')
.addToggle(toggle => toggle
.setValue(this.selectedFolders.has(ALL_FOLDERS_ID))
.onChange(value => {
this.handleFolderToggle(ALL_FOLDERS_ID, value);
this.redraw();
}));
const allItemsSetting = new Setting(this.listEl)
.setName('All Items');
// 添加选中状态的类
if (this.selectedFolders.has(ALL_FOLDERS_ID)) {
allItemsSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
allItemsSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.selectedFolders.has(ALL_FOLDERS_ID);
this.handleFolderToggle(ALL_FOLDERS_ID, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
allItemsSetting.addToggle(toggle => toggle
.setValue(this.selectedFolders.has(ALL_FOLDERS_ID))
.onChange(value => {
this.handleFolderToggle(ALL_FOLDERS_ID, value);
this.redraw();
}));
// 添加每个文件夹的选项
this.folders.forEach(folder => {
new Setting(this.listEl)
.setName(folder.nested_name)
.addToggle(toggle => toggle
.setValue(this.isFolderSelected(folder.id))
.onChange(value => {
this.handleFolderToggle(folder.id, value);
this.redraw();
}));
const folderSetting = new Setting(this.listEl)
.setName(folder.nested_name);
// 添加选中状态的类
if (this.isFolderSelected(folder.id)) {
folderSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
folderSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.isFolderSelected(folder.id);
this.handleFolderToggle(folder.id, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
folderSetting.addToggle(toggle => toggle
.setValue(this.isFolderSelected(folder.id))
.onChange(value => {
this.handleFolderToggle(folder.id, value);
this.redraw();
}));
});
}

28
src/modal/statusSelectModal.ts
View file

@ -83,14 +83,28 @@ export class StatusSelectModal extends Modal {
// 添加每个状态的选项
this.statuses.forEach(status => {
new Setting(this.listEl)
.addToggle(toggle => toggle
.setValue(this.selectedStatuses.has(status.id))
.onChange(value => {
this.handleStatusToggle(status.id, value);
this.redraw();
}))
const statusSetting = new Setting(this.listEl)
.setName(status.name);
// 添加选中状态的类
if (this.selectedStatuses.has(status.id)) {
statusSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
statusSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.selectedStatuses.has(status.id);
this.handleStatusToggle(status.id, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
statusSetting.addToggle(toggle => toggle
.setValue(this.selectedStatuses.has(status.id))
.onChange(value => {
this.handleStatusToggle(status.id, value);
this.redraw();
}));
});
}

90
src/modal/tagSelectModal.ts
View file

@ -106,35 +106,77 @@ export class TagSelectModal extends Modal {
this.listEl.empty();
// 添加"All Items"选项
new Setting(this.listEl)
.setName('All Items')
.addToggle(toggle => toggle
.setValue(this.selectedTags.has(ALL_TAGS_ID))
.onChange(value => {
this.handleTagToggle(ALL_TAGS_ID, value);
this.redraw();
}));
const allItemsSetting = new Setting(this.listEl)
.setName('All Items');
// 添加选中状态的类
if (this.selectedTags.has(ALL_TAGS_ID)) {
allItemsSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
allItemsSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.selectedTags.has(ALL_TAGS_ID);
this.handleTagToggle(ALL_TAGS_ID, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
allItemsSetting.addToggle(toggle => toggle
.setValue(this.selectedTags.has(ALL_TAGS_ID))
.onChange(value => {
this.handleTagToggle(ALL_TAGS_ID, value);
this.redraw();
}));
// 添加"No Tags"选项
new Setting(this.listEl)
.setName('No Tags')
.addToggle(toggle => toggle
.setValue(this.selectedTags.has(NO_TAGS_ID))
.onChange(value => {
this.handleTagToggle(NO_TAGS_ID, value);
this.redraw();
}));
const noTagsSetting = new Setting(this.listEl)
.setName('No Tags');
// 添加选中状态的类
if (this.selectedTags.has(NO_TAGS_ID)) {
noTagsSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
noTagsSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.selectedTags.has(NO_TAGS_ID);
this.handleTagToggle(NO_TAGS_ID, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
noTagsSetting.addToggle(toggle => toggle
.setValue(this.selectedTags.has(NO_TAGS_ID))
.onChange(value => {
this.handleTagToggle(NO_TAGS_ID, value);
this.redraw();
}));
// 添加每个标签的选项
this.tags.forEach(tag => {
new Setting(this.listEl)
.setName(tag.nested_name)
.addToggle(toggle => toggle
.setValue(this.isTagSelected(tag.id))
.onChange(value => {
this.handleTagToggle(tag.id, value);
this.redraw();
}));
const tagSetting = new Setting(this.listEl)
.setName(tag.nested_name);
// 添加选中状态的类
if (this.isTagSelected(tag.id)) {
tagSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
tagSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.isTagSelected(tag.id);
this.handleTagToggle(tag.id, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
tagSetting.addToggle(toggle => toggle
.setValue(this.isTagSelected(tag.id))
.onChange(value => {
this.handleTagToggle(tag.id, value);
this.redraw();
}));
});
}

92
src/modal/typeSelectModal.ts
View file

@ -105,37 +105,77 @@ export class TypeSelectModal extends Modal {
this.listEl.empty();
// 添加"All Items"选项
new Setting(this.listEl)
.addToggle(toggle => toggle
.setValue(this.selectedTypes.has(this.allItemsId))
.onChange(value => {
if (value) {
// 选中"All Items"时，选中所有类型
this.selectedTypes.add(this.allItemsId);
this.types.forEach(type => {
this.selectedTypes.add(type.id);
});
} else {
// 取消选中"All Items"时，取消选中所有类型
this.selectedTypes.delete(this.allItemsId);
this.types.forEach(type => {
this.selectedTypes.delete(type.id);
});
}
this.redraw();
}))
const allItemsSetting = new Setting(this.listEl)
.setName('All Items');
// 添加选中状态的类
if (this.selectedTypes.has(this.allItemsId)) {
allItemsSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
allItemsSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.selectedTypes.has(this.allItemsId);
if (!isCurrentlySelected) {
// 选中"All Items"时，选中所有类型
this.selectedTypes.add(this.allItemsId);
this.types.forEach(type => {
this.selectedTypes.add(type.id);
});
} else {
// 取消选中"All Items"时，取消选中所有类型
this.selectedTypes.delete(this.allItemsId);
this.types.forEach(type => {
this.selectedTypes.delete(type.id);
});
}
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
allItemsSetting.addToggle(toggle => toggle
.setValue(this.selectedTypes.has(this.allItemsId))
.onChange(value => {
if (value) {
// 选中"All Items"时，选中所有类型
this.selectedTypes.add(this.allItemsId);
this.types.forEach(type => {
this.selectedTypes.add(type.id);
});
} else {
// 取消选中"All Items"时，取消选中所有类型
this.selectedTypes.delete(this.allItemsId);
this.types.forEach(type => {
this.selectedTypes.delete(type.id);
});
}
this.redraw();
}));
// 添加每个类型的选项
this.types.forEach(type => {
new Setting(this.listEl)
.addToggle(toggle => toggle
.setValue(this.selectedTypes.has(type.id))
.onChange(value => {
this.handleTypeToggle(type.id, value);
this.redraw();
}))
const typeSetting = new Setting(this.listEl)
.setName(type.name);
// 添加选中状态的类
if (this.selectedTypes.has(type.id)) {
typeSetting.settingEl.addClass('is-selected');
}
// 添加点击事件
typeSetting.settingEl.addEventListener('click', () => {
const isCurrentlySelected = this.selectedTypes.has(type.id);
this.handleTypeToggle(type.id, !isCurrentlySelected);
this.redraw();
});
// 保留原有的toggle但隐藏它（通过CSS），以保持原有逻辑
typeSetting.addToggle(toggle => toggle
.setValue(this.selectedTypes.has(type.id))
.onChange(value => {
this.handleTypeToggle(type.id, value);
this.redraw();
}));
});
}

99
src/utils/modalStyles.ts
View file

@ -37,6 +37,105 @@ export class ModalStyleManager {
.modal-footer button {
margin-left: 8px;
}
/* 隐藏原有的 toggle/switch 控件 */
.${listContainerClass} .setting-item-control {
display: none;
}
/* 调整设置项的布局，为左侧的 checkbox 腾出空间 */
.${listContainerClass} .setting-item {
position: relative;
padding-left: 36px;
border-radius: 4px;
transition: background-color 0.1s ease;
display: flex;
align-items: center;
min-height: 40px;
box-sizing: border-box;
}
.${listContainerClass} .setting-item:hover {
background-color: var(--background-modifier-hover);
}
/* 确保所有设置项的名称垂直居中 */
.${listContainerClass} .setting-item .setting-item-name {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
/* 添加自定义 checkbox 样式 - 通用样式 */
.${listContainerClass} .setting-item::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 1px solid var(--checkbox-border-color, var(--background-modifier-border));
border-radius: 3px;
background-color: var(--checkbox-color, var(--background-primary));
box-sizing: border-box;
}
/* 为第一行和其他行分别设置不同的定位 */
.${listContainerClass} .setting-item:first-child::before {
left: 10px;
top: 12px; /* 为第一行特别调整 */
}
.${listContainerClass} .setting-item:not(:first-child)::before {
left: 10px;
top: 50%;
transform: translateY(-50%);
}
/* 选中状态的 checkbox */
.${listContainerClass} .setting-item.is-selected::before {
background-color: var(--checkbox-color-checked, var(--interactive-accent));
border-color: var(--checkbox-border-color-checked, var(--interactive-accent));
}
/* 添加选中状态的勾选标记 - 通用样式 */
.${listContainerClass} .setting-item.is-selected::after {
content: "";
position: absolute;
width: 5px;
height: 9px;
border-right: 2px solid var(--text-on-accent);
border-bottom: 2px solid var(--text-on-accent);
}
/* 为第一行和其他行分别设置不同的定位 */
.${listContainerClass} .setting-item:first-child.is-selected::after {
left: 14px;
top: 13px; /* 为第一行特别调整 */
transform: rotate(45deg);
}
.${listContainerClass} .setting-item:not(:first-child).is-selected::after {
left: 14px;
top: 50%;
transform: translateY(-60%) rotate(45deg);
}
/* 确保第一行和其他行的对齐一致 */
.${listContainerClass} .setting-item:first-child {
margin-top: 0;
padding-top: 0;
}
/* 确保第一行文本与复选框对齐 */
.${listContainerClass} .setting-item:first-child .setting-item-name {
margin-top: 0;
padding-top: 0;
position: relative;
top: 6px; /* 微调第一行文本位置 */
font-weight: bold; /* 为第一行文字添加加粗样式 */
}
/* 确保所有行的高度一致 */
.${listContainerClass} .setting-item-heading,
.${listContainerClass} .setting-item-name {
line-height: normal;
margin: auto 0;
}
`;
document.head.appendChild(styleEl);
return styleEl;