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

style: add styles in styles.css file instead of in JS

Browse source
This commit is contained in:
delphi 2025-04-07 13:17:18 +08:00
parent 1ac273ceb7
commit 7874a2a6e8
7 changed files with 163 additions and 274 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/cuboxSetting.ts
View file

@ -90,14 +90,9 @@ export class CuboxSyncSettingTab extends PluginSettingTab {
const {containerEl} = this;
containerEl.empty();
// 添加 Cubox 标题和版本信息
new Setting(containerEl)
.setName('Cubox')
.setDesc(`Created by Cubox, version ${this.plugin.manifest.version}`)
// 连接设置部分
containerEl.createEl('h3', {text: 'Connect Obsidian to Your Cubox'});
new Setting(containerEl).setName('Connect Obsidian to Your Cubox').setHeading();
// 修改域名选择下拉框
new Setting(containerEl)
@ -173,7 +168,7 @@ export class CuboxSyncSettingTab extends PluginSettingTab {
this.updateApiKeySetting();
// 过滤器设置部分
containerEl.createEl('h3', {text: 'Filter'});
new Setting(containerEl).setName('Filter').setHeading();
new Setting(containerEl)
.setName('Folder Filter')
@ -324,7 +319,7 @@ export class CuboxSyncSettingTab extends PluginSettingTab {
}));
// 同步设置部分
containerEl.createEl('h3', {text: 'Sync'});
new Setting(containerEl).setName('Sync').setHeading();
new Setting(containerEl)
.setName('Sync Interval')
@ -477,8 +472,9 @@ export class CuboxSyncSettingTab extends PluginSettingTab {
}));
// 状态部分
containerEl.createEl('h3', {text: 'Status'});
containerEl.createEl('p', {text: `Last sync: ${this.plugin.formatLastSyncTime()}`});
new Setting(containerEl).setName('Status').setHeading();
new Setting(containerEl).setDesc(`Last sync: ${this.plugin.formatLastSyncTime()}`);
//containerEl.createEl('p', {text: `Last sync: ${this.plugin.formatLastSyncTime()}`});
// 初始化帮助链接
setTimeout(() => {

19
src/modal/folderSelectModal.ts
View file

@ -1,6 +1,5 @@
import { App, Modal, Setting, Notice } from 'obsidian';
import { CuboxFolder } from '../cuboxApi';
import { ModalStyleManager } from './modalStyles';
export const ALL_FOLDERS_ID = 'all_folders';
@ -37,9 +36,9 @@ export class FolderSelectModal extends Modal {
const { contentEl } = this;
contentEl.createEl('h2', { text: 'Manage Cubox folders to be synced' });
contentEl.addClass('cubox-folder-select-modal');
contentEl.addClass('cubox-modal');
this.listEl = contentEl.createDiv({ cls: 'folder-list-container' });
this.listEl = contentEl.createDiv({ cls: 'folder-list-container cubox-list-container' });
this.footerEl = contentEl.createDiv({ cls: 'modal-footer' });
// 创建文件夹列表
@ -67,18 +66,6 @@ export class FolderSelectModal extends Modal {
this.onConfirm(resultFolders);
this.close();
});
// 添加样式
this.addStyles();
}
private addStyles() {
// 使用通用样式管理器添加样式
ModalStyleManager.addModalStyles(
'cubox-folder-modal-styles',
'cubox-folder-select-modal',
'folder-list-container'
);
}
private createFolderList() {
@ -153,7 +140,5 @@ export class FolderSelectModal extends Modal {
onClose() {
const { contentEl } = this;
contentEl.empty();
ModalStyleManager.removeModalStyles('cubox-folder-modal-styles');
}
}

171
src/modal/modalStyles.ts
View file

@ -1,171 +0,0 @@
export class ModalStyleManager {
/**
* 为模态框添加通用样式
* @param styleId 样式元素的ID
* @param modalClass 模态框的主类名
* @param listContainerClass 列表容器的类名
* @returns 创建的样式元素
*/
public static addModalStyles(
styleId: string,
modalClass: string,
listContainerClass: string
): HTMLStyleElement {
const styleEl = document.createElement('style');
styleEl.id = styleId;
styleEl.textContent = `
.${modalClass} {
display: flex;
flex-direction: column;
height: 100%;
}
.${listContainerClass} {
flex-grow: 1;
overflow-y: auto;
padding-top: 20px;
padding-right: 10px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
padding: 16px;
border-top: 1px solid var(--background-modifier-border);
}
.modal-footer button {
margin-left: 8px;
}
/* 调整设置项的布局，为左侧的 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-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.is-disabled {
opacity: 0.3;
pointer-events: none;
}
/* 添加横线样式用于表示禁用状态的复选框 */
.${listContainerClass} .setting-item.is-disabled::before {
background-color: var(--background-primary);
border-color: var(--background-modifier-border);
}
.${listContainerClass} .setting-item.is-disabled::after {
content: "";
position: absolute;
width: 8px;
height: 2px;
background-color: var(--text-muted);
left: 14px;
top: 50%;
transform: translateY(-50%);
border: none;
}
/* 确保所有行的高度一致 */
.${listContainerClass} .setting-item-heading,
.${listContainerClass} .setting-item-name {
line-height: normal;
margin: auto 0;
}
`;
document.head.appendChild(styleEl);
return styleEl;
}
/**
* 移除指定ID的样式元素
* @param styleId 样式元素的ID
*/
public static removeModalStyles(styleId: string): void {
const styleEl = document.getElementById(styleId);
if (styleEl) styleEl.remove();
}
}

17
src/modal/statusSelectModal.ts
View file

@ -1,5 +1,4 @@
import { App, Modal, Setting, Notice } from 'obsidian';
import { ModalStyleManager } from './modalStyles';
export interface ContentStatus {
id: string;
@ -50,9 +49,9 @@ export class StatusSelectModal extends Modal {
const { contentEl } = this;
contentEl.createEl('h2', { text: 'Manage Cubox content status to be synced' });
contentEl.addClass('cubox-status-select-modal');
contentEl.addClass('cubox-modal');
this.listEl = contentEl.createDiv({ cls: 'status-list-container' });
this.listEl = contentEl.createDiv({ cls: 'status-list-container cubox-list-container' });
this.footerEl = contentEl.createDiv({ cls: 'modal-footer' });
// 创建状态列表
@ -81,16 +80,6 @@ export class StatusSelectModal extends Modal {
this.onSave(selectedIds, statusValues);
this.close();
});
this.addStyles();
}
private addStyles() {
ModalStyleManager.addModalStyles(
'cubox-status-modal-styles',
'cubox-status-select-modal',
'status-list-container'
);
}
private createStatusList() {
@ -174,7 +163,5 @@ export class StatusSelectModal extends Modal {
onClose() {
const { contentEl } = this;
contentEl.empty();
ModalStyleManager.removeModalStyles('cubox-status-modal-styles');
}
}

17
src/modal/tagSelectModal.ts
View file

@ -1,6 +1,5 @@
import { App, Modal, Setting, Notice } from 'obsidian';
import { CuboxTag } from '../cuboxApi';
import { ModalStyleManager } from './modalStyles';
export const ALL_ITEMS = 'all_items';
export const NO_TAGS_ID = '';
@ -38,9 +37,9 @@ export class TagSelectModal extends Modal {
const { contentEl } = this;
contentEl.createEl('h2', { text: 'Manage Cubox tags to be synced' });
contentEl.addClass('cubox-tag-select-modal');
contentEl.addClass('cubox-modal');
this.listEl = contentEl.createDiv({ cls: 'tag-list-container' });
this.listEl = contentEl.createDiv({ cls: 'tag-list-container cubox-list-container' });
this.footerEl = contentEl.createDiv({ cls: 'modal-footer' });
// 创建标签列表
@ -65,16 +64,6 @@ export class TagSelectModal extends Modal {
this.onConfirm(resultTags);
this.close();
});
this.addStyles();
}
private addStyles() {
ModalStyleManager.addModalStyles(
'cubox-tag-modal-styles',
'cubox-tag-select-modal',
'tag-list-container'
);
}
private createTagList() {
@ -169,7 +158,5 @@ export class TagSelectModal extends Modal {
onClose() {
const { contentEl } = this;
contentEl.empty();
ModalStyleManager.removeModalStyles('cubox-tag-modal-styles');
}
}

31
src/modal/typeSelectModal.ts
View file

@ -1,5 +1,4 @@
import { App, Modal, Setting, Notice } from 'obsidian';
import { ModalStyleManager } from './modalStyles';
export const ALL_CONTENT_TYPES = [
'Article',
@ -40,9 +39,9 @@ export class TypeSelectModal extends Modal {
contentEl.empty();
contentEl.createEl('h2', { text: 'Manage Cubox content types to be synced' });
contentEl.addClass('cubox-type-select-modal');
contentEl.addClass('cubox-modal');
this.listEl = contentEl.createDiv({ cls: 'type-list-container' });
this.listEl = contentEl.createDiv({ cls: 'type-list-container cubox-list-container' });
this.footerEl = contentEl.createDiv({ cls: 'modal-footer' });
// 创建类型列表
@ -65,27 +64,6 @@ export class TypeSelectModal extends Modal {
this.onSave(selectedTypes);
this.close();
});
this.addStyles();
}
private addStyles() {
ModalStyleManager.addModalStyles(
'cubox-modal-styles',
'cubox-type-select-modal',
'type-list-container'
);
// 添加额外的样式，覆盖第一行字体加粗的样式
const styleEl = document.createElement('style');
styleEl.id = 'cubox-type-modal-additional-styles';
styleEl.textContent = `
/* 覆盖第一行字体加粗的样式 */
.type-list-container .setting-item:first-child .setting-item-name {
font-weight: normal;
}
`;
document.head.appendChild(styleEl);
}
private createTypeList() {
@ -125,10 +103,5 @@ export class TypeSelectModal extends Modal {
onClose() {
const { contentEl } = this;
contentEl.empty();
ModalStyleManager.removeModalStyles('cubox-modal-styles');
const additionalStyleEl = document.getElementById('cubox-type-modal-additional-styles');
if (additionalStyleEl) additionalStyleEl.remove();
}
}

166
styles.css
View file

@ -7,29 +7,15 @@ If your plugin does not need CSS, delete this file.
*/
/* 文件夹选择模态框样式 */
.folder-list {
max-height: 300px;
overflow-y: auto;
margin: 10px 0;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
padding: 5px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
margin-top: 20px;
gap: 10px;
padding: 16px;
border-top: 1px solid var(--background-modifier-border);
}
.modal-footer button {
padding: 6px 12px;
border-radius: 4px;
background-color: var(--interactive-normal);
color: var(--text-normal);
cursor: pointer;
margin-left: 8px;
}
.modal-footer button.mod-cta {
@ -78,4 +64,150 @@ If your plugin does not need CSS, delete this file.
.reference-link:hover {
text-decoration: underline;
}
/* Modal Dialog Styles */
.cubox-modal {
display: flex;
flex-direction: column;
height: 100%;
}
.cubox-list-container {
flex-grow: 1;
overflow-y: auto;
padding-top: 20px;
padding-right: 10px;
overflow-anchor: none;
scroll-behavior: auto;
height: 100%;
max-height: 65vh;
}
/* Setting item styles for modal dialogs */
.cubox-list-container .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;
}
.cubox-list-container .setting-item:hover {
background-color: var(--background-modifier-hover);
}
/* Setting item name styles */
.cubox-list-container .setting-item-name {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
/* Custom checkbox styles */
.cubox-list-container .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;
}
/* First child checkbox positioning */
.cubox-list-container .setting-item:first-child::before {
left: 10px;
top: 12px;
}
/* Other items checkbox positioning */
.cubox-list-container .setting-item:not(:first-child)::before {
left: 10px;
top: 50%;
transform: translateY(-50%);
}
/* Selected checkbox state */
.cubox-list-container .setting-item.is-selected::before {
background-color: var(--checkbox-color-checked, var(--interactive-accent));
border-color: var(--checkbox-border-color-checked, var(--interactive-accent));
}
/* Checkmark for selected items */
.cubox-list-container .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);
}
/* First child checkmark positioning */
.cubox-list-container .setting-item:first-child.is-selected::after {
left: 14px;
top: 13px;
transform: rotate(45deg);
}
/* Other items checkmark positioning */
.cubox-list-container .setting-item:not(:first-child).is-selected::after {
left: 14px;
top: 50%;
transform: translateY(-60%) rotate(45deg);
}
/* First item special styling */
.cubox-list-container .setting-item:first-child {
margin-top: 0;
padding-top: 0;
}
.cubox-list-container .setting-item:first-child .setting-item-name {
margin-top: 0;
padding-top: 0;
position: relative;
top: 6px;
font-weight: bold;
}
/* Disabled state styling */
.cubox-list-container .setting-item.is-disabled {
opacity: 0.3;
pointer-events: none;
}
.cubox-list-container .setting-item.is-disabled::before {
background-color: var(--background-primary);
border-color: var(--background-modifier-border);
}
.cubox-list-container .setting-item.is-disabled::after {
content: "";
position: absolute;
width: 8px;
height: 2px;
background-color: var(--text-muted);
left: 14px;
top: 50%;
transform: translateY(-50%);
border: none;
}
/* Consistent line height for all items */
.cubox-list-container .setting-item-heading,
.cubox-list-container .setting-item-name {
line-height: normal;
margin: auto 0;
}
/* Override first row bold font for type modal */
.type-list-container .setting-item:first-child .setting-item-name {
font-weight: normal;
}