obsidian-plugin/devonthesofa_obsidian-note-status
1
0
Fork 0
mirror of https://github.com/devonthesofa/obsidian-note-status.git synced 2026-07-22 12:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: enhance support section with copy-to-clipboard buttons and modern styling

Browse source
This commit is contained in:
Aleix Soler 2026-03-18 19:15:04 +01:00
parent 07c8b8d4df
commit 3d49c32f18
3 changed files with 104 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
components/SettingsUI/index.tsx
View file

@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
import { Notice } from "obsidian";
import { PluginSettings } from "@/types/pluginSettings";
import { TemplateSettings } from "./TemplateSettings";
import { BehaviourSettings } from "./BehaviourSettings";
@ -51,6 +52,13 @@ const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
onChange(key, value);
};
const handleSupportClick = (url: string, label: string) => {
window.open(url);
navigator.clipboard.writeText(url).then(() => {
new Notice(`Copied ${label} URL to clipboard!`);
});
};
const sections: SectionDefinition[] = [
{
id: "templates-statuses",
@ -217,35 +225,64 @@ const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
you review notes, surface statuses, and keep storage tidy.
</p>
<div className="note-status-settings__support">
<a
href="https://paypal.me/aleixsoler"
target="_blank"
rel="noreferrer"
className="note-status-settings__badge"
<button
className="note-status-settings__support-link"
onClick={() =>
handleSupportClick(
"https://paypal.me/aleixsoler",
"PayPal",
)
}
>
<img
src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
alt="Support via PayPal"
alt="PayPal"
style={{ height: "20px" }}
/>
</a>
<a
href="https://buymeacoffee.com/aleixsoler"
target="_blank"
rel="noreferrer"
className="note-status-settings__badge"
<span className="note-status-settings__support-link-label">
Support via PayPal
</span>
<span className="note-status-settings__support-link-url">
paypal.me/aleixsoler
</span>
</button>
<button
className="note-status-settings__support-link"
onClick={() =>
handleSupportClick(
"https://buymeacoffee.com/aleixsoler",
"Buy Me a Coffee",
)
}
>
<img
src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black"
alt="Buy me a coffee"
style={{ height: "20px" }}
/>
</a>
<a
href="https://github.com/devonthesofa/obsidian-note-status"
target="_blank"
rel="noreferrer"
<span className="note-status-settings__support-link-label">
Buy me a coffee
</span>
<span className="note-status-settings__support-link-url">
buymeacoffee.com/aleixsoler
</span>
</button>
<button
className="note-status-settings__support-link"
onClick={() =>
handleSupportClick(
"https://github.com/devonthesofa/obsidian-note-status",
"GitHub",
)
}
>
Star the project on GitHub
</a>
<span className="note-status-settings__support-link-label">
Star on GitHub
</span>
<span className="note-status-settings__support-link-url">
github.com/devonthesofa/obsidian-note-status
</span>
</button>
</div>
</div>
</div>

2
styles.css
View file

File diff suppressed because one or more lines are too long

91
styles/components/settings.css
View file

@ -23,60 +23,63 @@
.note-status-settings__support {
display: flex;
flex-wrap: wrap;
gap: var(--size-4-2);
flex-direction: column;
gap: var(--size-4-1);
margin-top: var(--size-4-1);
}
.note-status-settings__badge {
padding: 0;
border: none;
background: transparent;
}
.note-status-settings__badge img {
display: block;
height: 32px;
}
.note-status-settings__badge:hover {
background: transparent;
border-color: transparent;
transform: translateY(-1px);
}
.note-status-settings__badge:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
border-radius: var(--radius-s);
}
.note-status-settings__support a:not(.note-status-settings__badge) {
display: inline-flex;
.note-status-settings__support-link {
display: flex;
align-items: center;
justify-content: center;
gap: var(--size-2-2);
padding: var(--size-2-3) var(--size-4-2);
border-radius: var(--radius-s);
border: 1px solid var(--background-modifier-border);
text-decoration: none;
color: var(--text-normal);
gap: var(--size-4-2);
padding: var(--size-2-3) var(--size-4-3);
background: var(--background-primary);
transition:
background var(--anim-duration-fast) ease,
border-color var(--anim-duration-fast) ease,
transform var(--anim-duration-fast) ease;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
color: var(--text-normal);
font-size: var(--font-ui-small);
cursor: pointer;
transition: all var(--anim-duration-fast) ease;
text-align: left;
width: 100%;
}
.note-status-settings__support a:not(.note-status-settings__badge):hover {
.note-status-settings__support-link img {
display: block;
border-radius: var(--radius-s);
}
.note-status-settings__support-link:hover {
background: var(--background-modifier-hover);
border-color: var(--interactive-accent);
transform: translateY(-1px);
transform: translateX(4px);
}
.note-status-settings__support
a:not(.note-status-settings__badge):focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
.note-status-settings__support-link .status-icon {
color: var(--interactive-accent);
flex-shrink: 0;
}
.note-status-settings__support-link-label {
font-weight: var(--font-medium);
flex-shrink: 0;
}
.note-status-settings__support-link-url {
font-family: var(--font-monospace);
font-size: 0.85em;
color: var(--text-muted);
margin-left: auto;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.note-status-settings__support-link:hover
.note-status-settings__support-link-url {
color: var(--text-accent);
opacity: 1;
}
.note-status-section {