♻️ Update command name, move styles to styles file, and improve file checking
This commit is contained in:
Greg K.
parent
4b2c3b4aa1
commit
376e2122d7
|
|
@ -485,11 +485,19 @@ const ClipperCatalog: React.FC<ClipperCatalogProps> = ({ app, plugin }) => {
|
|||
>
|
||||
<path d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<ArticleTitle
|
||||
file={app.vault.getAbstractFileByPath(article.path) as TFile}
|
||||
content={article.content || ''}
|
||||
title={article.title}
|
||||
/>
|
||||
{(() => {
|
||||
const abstractFile = app.vault.getAbstractFileByPath(article.path);
|
||||
if (abstractFile instanceof TFile) {
|
||||
return (
|
||||
<ArticleTitle
|
||||
file={abstractFile}
|
||||
content={article.content || ''}
|
||||
title={article.title}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <span>{article.title}</span>;
|
||||
})()}
|
||||
</span>
|
||||
</td>
|
||||
<td className="cc-px-4 cc-py-2 clipper-catalog-muted">
|
||||
|
|
@ -540,114 +548,6 @@ const ClipperCatalog: React.FC<ClipperCatalogProps> = ({ app, plugin }) => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
/* Container styles */
|
||||
.clipper-catalog-advanced {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-search {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
/* Button styles */
|
||||
.clipper-catalog-button {
|
||||
background-color: var(--interactive-accent) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.clipper-catalog-button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Directory chip styles */
|
||||
.cc-bg-chip {
|
||||
background-color: var(--background-modifier-form-field);
|
||||
}
|
||||
|
||||
.cc-bg-chip-hover {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.cc-text-close-icon {
|
||||
color: var(--background-secondary);
|
||||
}
|
||||
|
||||
/* For dark theme support */
|
||||
.theme-dark .cc-text-close-icon {
|
||||
color: var(--background-primary);
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.clipper-catalog-header-row {
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-header-cell {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.clipper-catalog-header-cell:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.clipper-catalog-row {
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-row:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
/* Text and icon styles */
|
||||
.clipper-catalog-input {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.clipper-catalog-icon,
|
||||
.clipper-catalog-clear-btn,
|
||||
.clipper-catalog-refresh,
|
||||
.clipper-catalog-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.clipper-catalog-title {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* Tag styles */
|
||||
.clipper-catalog-tag {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-tag:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Link styles */
|
||||
.clipper-catalog-link {
|
||||
color: var(--text-accent);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-link:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
17
src/main.tsx
17
src/main.tsx
|
|
@ -48,8 +48,8 @@ export default class ObsidianClipperCatalog extends Plugin {
|
|||
|
||||
|
||||
this.addCommand({
|
||||
id: 'open-clipper-catalog',
|
||||
name: 'Open Clipper Catalog',
|
||||
id: 'show-all-clippings',
|
||||
name: 'Show All Clippings',
|
||||
callback: () => {
|
||||
// Get active leaf or create new one in center
|
||||
const leaf = this.app.workspace.getLeaf('tab');
|
||||
|
|
@ -108,10 +108,6 @@ class ClipperCatalogSettingTab extends PluginSettingTab {
|
|||
cls: 'advanced-settings-name'
|
||||
});
|
||||
|
||||
// Add some styling to the heading element
|
||||
settingsHeader.style.padding = '10px 0';
|
||||
settingsHeader.style.fontWeight = 'bold';
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Property Name')
|
||||
.setDesc('Specify which frontmatter property contains your clipped URLs (e.g., "source", "url", "link").')
|
||||
|
|
@ -121,14 +117,5 @@ class ClipperCatalogSettingTab extends PluginSettingTab {
|
|||
this.plugin.settings.sourcePropertyName = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
// Add CSS
|
||||
containerEl.createEl('style', {
|
||||
text: `
|
||||
.text-sm{
|
||||
font-size:.75rem;
|
||||
}
|
||||
`
|
||||
});
|
||||
}
|
||||
}
|
||||
111
src/styles.css
111
src/styles.css
|
|
@ -12,6 +12,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Text utilities */
|
||||
.text-sm {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
/* Scoped plugin styles */
|
||||
.clipper-catalog-plugin {
|
||||
/* Add minimal reset only for our plugin elements */
|
||||
|
|
@ -107,3 +112,109 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Container styles */
|
||||
.clipper-catalog-advanced {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-search {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
/* Button styles */
|
||||
.clipper-catalog-button {
|
||||
background-color: var(--interactive-accent) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.clipper-catalog-button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Directory chip styles */
|
||||
.cc-bg-chip {
|
||||
background-color: var(--background-modifier-form-field);
|
||||
}
|
||||
|
||||
.cc-bg-chip-hover {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.cc-text-close-icon {
|
||||
color: var(--background-secondary);
|
||||
}
|
||||
|
||||
/* For dark theme support */
|
||||
.theme-dark .cc-text-close-icon {
|
||||
color: var(--background-primary);
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.clipper-catalog-header-row {
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-header-cell {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.clipper-catalog-header-cell:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.clipper-catalog-row {
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-row:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
/* Text and icon styles */
|
||||
.clipper-catalog-input {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.clipper-catalog-icon,
|
||||
.clipper-catalog-clear-btn,
|
||||
.clipper-catalog-refresh,
|
||||
.clipper-catalog-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.clipper-catalog-title {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* Tag styles */
|
||||
.clipper-catalog-tag {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-tag:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Link styles */
|
||||
.clipper-catalog-link {
|
||||
color: var(--text-accent);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-link:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
122
styles.css
122
styles.css
|
|
@ -383,6 +383,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Text utilities */
|
||||
|
||||
.text-sm {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
/* Scoped plugin styles */
|
||||
|
||||
.clipper-catalog-plugin {
|
||||
|
|
@ -468,6 +474,120 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Container styles */
|
||||
|
||||
.clipper-catalog-advanced {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-search {
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
/* Button styles */
|
||||
|
||||
.clipper-catalog-button {
|
||||
background-color: var(--interactive-accent) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.clipper-catalog-button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Directory chip styles */
|
||||
|
||||
.cc-bg-chip {
|
||||
background-color: var(--background-modifier-form-field);
|
||||
}
|
||||
|
||||
.cc-bg-chip-hover {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.cc-text-close-icon {
|
||||
color: var(--background-secondary);
|
||||
}
|
||||
|
||||
/* For dark theme support */
|
||||
|
||||
.theme-dark .cc-text-close-icon {
|
||||
color: var(--background-primary);
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
|
||||
.clipper-catalog-header-row {
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-header-cell {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.clipper-catalog-header-cell:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.clipper-catalog-row {
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.clipper-catalog-row:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
/* Text and icon styles */
|
||||
|
||||
.clipper-catalog-input {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.clipper-catalog-icon,
|
||||
.clipper-catalog-clear-btn,
|
||||
.clipper-catalog-refresh,
|
||||
.clipper-catalog-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.clipper-catalog-title {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* Tag styles */
|
||||
|
||||
.clipper-catalog-tag {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-tag:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Link styles */
|
||||
|
||||
.clipper-catalog-link {
|
||||
color: var(--text-accent);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.clipper-catalog-link:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hover\:cc-bg-blue-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
|
||||
|
|
@ -555,4 +675,4 @@
|
|||
.dark\:hover\:cc-text-gray-300:hover:is(.cc-dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue