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

Merge pull request #41 from devonthesofa/feature/reorder-custom-statuses

Browse source 
feat: reorder arrows for custom statuses
This commit is contained in:
Aleix Soler 2025-07-20 21:08:30 +02:00 committed by GitHub
commit d1f5b500da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 98 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/SettingsUI.tsx/CustomStatusItem.tsx
View file

@ -13,6 +13,10 @@ export type Props = {
value: string,
) => void;
onCustomStatusRemove: (index: number) => void;
onMoveUp?: (index: number) => void;
onMoveDown?: (index: number) => void;
canMoveUp?: boolean;
canMoveDown?: boolean;
};
export const CustomStatusItem: React.FC<Props> = ({
@ -20,6 +24,10 @@ export const CustomStatusItem: React.FC<Props> = ({
index,
onCustomStatusChange,
onCustomStatusRemove,
onMoveUp,
onMoveDown,
canMoveUp = false,
canMoveDown = false,
}) => {
const isValid = status.name.trim().length > 0;
const displayIcon = status.icon.trim() || "📝";
@ -92,6 +100,32 @@ export const CustomStatusItem: React.FC<Props> = ({
/>
</div>
{/* Reorder buttons */}
{(onMoveUp || onMoveDown) && (
<div className="custom-status-item__field custom-status-item__field--reorder">
<div className="custom-status-item__reorder-buttons">
<button
onClick={() => onMoveUp && onMoveUp(index)}
aria-label="Move status up"
className="custom-status-item__reorder-btn"
title="Move status up"
disabled={!canMoveUp}
>
↑
</button>
<button
onClick={() => onMoveDown && onMoveDown(index)}
aria-label="Move status down"
className="custom-status-item__reorder-btn"
title="Move status down"
disabled={!canMoveDown}
>
↓
</button>
</div>
</div>
)}
{/* Remove button */}
<div className="custom-status-item__field custom-status-item__field--actions">
<button

26
components/SettingsUI.tsx/CustomStatusSettings.tsx
View file

@ -45,6 +45,26 @@ export const CustomStatusSettings: React.FC<Props> = ({
}
};
const moveCustomStatusUp = (index: number) => {
if (index <= 0) return;
const currentStatuses = [...settings.customStatuses];
[currentStatuses[index - 1], currentStatuses[index]] = [
currentStatuses[index],
currentStatuses[index - 1],
];
onChange("customStatuses", currentStatuses);
};
const moveCustomStatusDown = (index: number) => {
if (index >= settings.customStatuses.length - 1) return;
const currentStatuses = [...settings.customStatuses];
[currentStatuses[index], currentStatuses[index + 1]] = [
currentStatuses[index + 1],
currentStatuses[index],
];
onChange("customStatuses", currentStatuses);
};
return (
<div>
<h3>Custom Statuses</h3>
@ -84,6 +104,12 @@ export const CustomStatusSettings: React.FC<Props> = ({
settings={settings}
onCustomStatusChange={updateCustomStatus}
onCustomStatusRemove={removeCustomStatus}
onMoveUp={moveCustomStatusUp}
onMoveDown={moveCustomStatusDown}
canMoveUp={index > 0}
canMoveDown={
index < settings.customStatuses.length - 1
}
/>
))
)}

38
styles/components/settings.css
View file

@ -87,6 +87,11 @@
flex: 0 0 auto;
}
.custom-status-item__field--reorder {
flex: 0 0 auto;
padding-top: var(--size-4-1);
}
.custom-status-item__field--actions {
flex: 0 0 auto;
padding-top: var(--size-4-1);
@ -156,6 +161,39 @@
transform: scale(1.05);
}
.custom-status-item__reorder-buttons {
display: flex;
flex-direction: column;
gap: 2px;
}
.custom-status-item__reorder-btn {
width: 24px;
height: 24px;
border-radius: var(--radius-s);
background: var(--background-modifier-border);
color: var(--text-normal);
border: none;
cursor: pointer;
font-size: 12px;
font-weight: bold;
transition: all var(--anim-duration-fast) ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.custom-status-item__reorder-btn:hover:not(:disabled) {
background: var(--interactive-hover);
transform: scale(1.05);
}
.custom-status-item__reorder-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.custom-status-item__preview {
display: flex;
align-items: center;