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

chore: improve quick commands selector ui

Browse source
This commit is contained in:
Aleix Soler 2025-07-21 19:18:18 +02:00
parent 47298aeb95
commit 92f484b582
2 changed files with 87 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/SettingsUI.tsx/StatusGroup.tsx
View file

@ -1,6 +1,5 @@
import React from "react";
import { PluginSettings } from "@/types/pluginSettings";
import { SettingItem } from "./SettingItem";
export type StatusGroupProps = {
statuses: PluginSettings["customStatuses"];
@ -30,22 +29,38 @@ export const StatusGroup: React.FC<StatusGroupProps> = ({
? `${status.templateId}:${status.name}`
: status.name;
const isSelected =
currentQuickCommands.includes(scopedStatusName);
return (
<SettingItem
<label
key={`${status.templateId || "custom"}:${status.name}`}
name={`${status.icon} ${status.name}`}
description={status.description || ""}
className={`status-selector ${isSelected ? "status-selector--selected" : ""}`}
>
<div className="status-selector__content">
<div className="status-selector__status">
<span className="status-selector__icon">
{status.icon}
</span>
<span className="status-selector__name">
{status.name}
</span>
</div>
{status.description && (
<div className="status-selector__description">
{status.description}
</div>
)}
</div>
<input
type="checkbox"
checked={currentQuickCommands.includes(
scopedStatusName,
)}
className="status-selector__checkbox"
checked={isSelected}
onChange={(e) =>
onToggle(scopedStatusName, e.target.checked)
}
/>
</SettingItem>
</label>
);
})}
</div>

64
styles/components/settings.css
View file

@ -287,6 +287,70 @@
gap: var(--size-2-2);
}
/* Status Selector for Quick Commands */
.status-selector {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--size-2-3) var(--size-4-2);
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
background: var(--background-primary);
cursor: pointer;
transition: all var(--anim-duration-fast) ease;
position: relative;
}
.status-selector:hover {
background: var(--background-modifier-hover);
border-color: var(--background-modifier-border-hover);
}
.status-selector--selected {
background: var(--background-modifier-success);
border-color: var(--interactive-success);
}
.status-selector--selected:hover {
background: var(--background-modifier-success-hover);
}
.status-selector__content {
flex: 1;
min-width: 0;
}
.status-selector__status {
display: flex;
align-items: center;
gap: var(--size-2-2);
margin-bottom: var(--size-2-1);
}
.status-selector__icon {
font-size: var(--font-ui-medium);
width: var(--size-4-3);
text-align: center;
flex-shrink: 0;
}
.status-selector__name {
font-weight: var(--font-medium);
color: var(--text-normal);
}
.status-selector__description {
font-size: var(--font-ui-smaller);
color: var(--text-muted);
line-height: var(--line-height-tight);
}
.status-selector__checkbox {
margin-left: var(--size-4-2);
pointer-events: none;
flex-shrink: 0;
}
/* Quick Commands Container */
.quick-commands-container {
margin-top: var(--size-4-2);