obsidian-plugin/callumalpass_tasknotes
1
0
Fork 0
mirror of https://github.com/callumalpass/tasknotes.git synced 2026-07-22 12:50:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

polish settings view controls

Browse source
This commit is contained in:
callumalpass 2026-05-18 20:14:48 +10:00
parent 49bc579c6a
commit 14539b3c0e
2 changed files with 74 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/settings/TaskNotesSettingTab.ts
View file

@ -51,8 +51,8 @@ export class TaskNotesSettingTab extends PluginSettingTab {
const translate = (key: TranslationKey) => this.plugin.i18n.translate(key);
// Create tab navigation
const tabNav = containerEl.createDiv("settings-tab-nav settings-view__tab-nav");
const settingsToolbar = containerEl.createDiv("settings-view__toolbar");
const tabNav = settingsToolbar.createDiv("settings-tab-nav settings-view__tab-nav");
// Define the 6-tab structure (defaults merged into task-properties)
const allTabs: TabConfig[] = [
@ -138,8 +138,8 @@ export class TaskNotesSettingTab extends PluginSettingTab {
});
});
// Add documentation link after tabs
const docsHeader = containerEl.createDiv("settings-header");
// Add documentation link alongside tabs
const docsHeader = settingsToolbar.createDiv("settings-header");
const docsLink = docsHeader.createEl("a", {
text: translate("settings.header.documentation"),
href: translate("settings.header.documentationUrl"),

99
styles/settings-view.css
View file

@ -6,24 +6,38 @@
SETTINGS HEADER
================================================ */
.tasknotes-plugin .settings-view__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tn-spacing-md);
margin-bottom: var(--tn-spacing-md);
}
.tasknotes-plugin .settings-header {
display: flex;
justify-content: flex-start;
margin-bottom: var(--tn-spacing-md);
margin-top: calc(-1 * var(--tn-spacing-sm));
flex-shrink: 0;
justify-content: flex-end;
}
.tasknotes-plugin .settings-header-link {
display: inline-flex;
align-items: center;
gap: var(--tn-spacing-xs);
color: var(--text-accent);
min-height: 28px;
padding: 3px 8px;
border-radius: var(--radius-m);
color: var(--text-muted);
text-decoration: none;
font-size: var(--font-ui-small);
font-weight: 500;
line-height: 1.4;
}
.tasknotes-plugin .settings-header-link:hover {
text-decoration: underline;
background: var(--background-modifier-hover);
color: var(--text-normal);
text-decoration: none;
}
.tasknotes-plugin .settings-header-link::after {
@ -39,10 +53,10 @@
.tasknotes-plugin .settings-view__tab-nav {
display: flex;
align-items: center;
gap: 1px;
gap: var(--tn-spacing-xs);
width: fit-content;
max-width: 100%;
margin-bottom: var(--tn-spacing-md);
margin-bottom: 0;
padding: 0;
border: 0;
background: transparent;
@ -59,7 +73,7 @@
min-height: 28px;
padding: 3px 9px;
border: 1px solid transparent;
border-radius: var(--radius-s);
border-radius: var(--radius-m);
box-shadow: none;
background: transparent;
color: var(--text-muted);
@ -82,11 +96,22 @@
.tasknotes-plugin .settings-view__tab-button--active,
.tasknotes-plugin .settings-view__tab-button.is-active {
border-color: var(--background-modifier-border);
background: var(--background-primary);
color: var(--text-normal);
}
@media (max-width: 700px) {
.tasknotes-plugin .settings-view__toolbar {
align-items: flex-start;
flex-direction: column;
gap: var(--tn-spacing-xs);
}
.tasknotes-plugin .settings-header {
justify-content: flex-start;
}
}
/* ================================================
TAB CONTENT
================================================ */
@ -314,42 +339,52 @@ select.tasknotes-settings__card-input {
}
/* Header Actions */
.tasknotes-settings__card-header-actions {
.tasknotes-plugin .tasknotes-settings__card-header-actions {
display: flex;
align-items: center;
gap: 4px;
}
.tasknotes-settings__card-header-btn {
width: 20px;
height: 20px;
border: none;
.tasknotes-plugin .tasknotes-settings__card-header-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-s);
box-shadow: none;
background: transparent;
color: var(--text-muted);
cursor: var(--cursor-link, pointer);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
outline: none;
padding: 0;
}
.tasknotes-settings__card-header-btn:focus {
box-shadow: none;
outline: none;
border: none;
.tasknotes-plugin .tasknotes-settings__card-header-btn svg {
width: 15px;
height: 15px;
stroke: currentColor;
}
.tasknotes-settings__card-header-btn:hover {
.tasknotes-plugin .tasknotes-settings__card-header-btn:focus {
box-shadow: none;
outline: none;
border: 0;
}
.tasknotes-plugin .tasknotes-settings__card-header-btn:hover {
background: var(--background-modifier-hover);
color: var(--text-normal);
}
.tasknotes-settings__card-header-btn--delete:hover {
background: var(--color-red);
color: var(--text-on-accent);
.tasknotes-plugin .tasknotes-settings__card-header-btn--delete:hover {
background: rgba(var(--color-red-rgb), 0.16);
color: var(--color-red);
}
/* Status Badges */
@ -517,12 +552,18 @@ select.tasknotes-settings__card-input {
/* Collapsible card support */
.tasknotes-settings__card--collapsible {
border-color: var(--background-modifier-border);
overflow: hidden;
transition: opacity 0.2s ease;
}
.tasknotes-settings__card--collapsible:hover {
border-color: var(--interactive-accent);
}
.tasknotes-settings__card--collapsible .tasknotes-settings__card-content,
.tasknotes-settings__card--collapsible .tasknotes-settings__card-actions {
transition: opacity 0.2s ease, max-height 0.2s ease, padding 0.2s ease;
transition: opacity 0.16s ease;
overflow: hidden;
}