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

chore: improve grouped view

Browse source
This commit is contained in:
Aleix Soler 2025-07-21 19:10:29 +02:00
parent 20ef00d280
commit 754e781c69
6 changed files with 82 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/GroupedStatusView/components/StatusGroup.tsx
View file

@ -47,7 +47,10 @@ export const StatusGroup = ({
return (
<div className="grouped-status-group">
<div className="grouped-status-group-header" onClick={handleToggle}>
<div
className="grouped-status-group__header"
onClick={handleToggle}
>
<div className="grouped-status-group__status">
<StatusDisplay
status={
@ -61,7 +64,7 @@ export const StatusGroup = ({
</span>
)}
</div>
<div className="grouped-status-group-info">
<div className="grouped-status-group__info">
<CollapsibleCounter
count={files.length}
isCollapsed={!isExpanded}

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

@ -18,13 +18,13 @@ export const StatusGroup: React.FC<StatusGroupProps> = ({
onToggle,
}) => (
<div className="status-group">
<div className="status-group-header">
<div className="status-group-title">{title}</div>
<div className="status-group__header">
<div className="status-group__title">{title}</div>
{description && (
<div className="status-group-description">{description}</div>
<div className="status-group__description">{description}</div>
)}
</div>
<div className="status-group-items">
<div className="status-group__items">
{statuses.map((status) => (
<SettingItem
key={`${status.templateId || "custom"}:${status.name}`}

8
components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
View file

@ -29,16 +29,16 @@ export const StatusFileInfoPopup: React.FC<Props> = ({ statuses }) => {
<div className="status-popup-content">
{statusEntries.map(([groupName, statusList]) => (
<div key={groupName} className="status-group">
<div className="status-group-header">
<span className="status-group-name">
<div className="status-group__header">
<span className="status-group__name">
{groupName.toLowerCase()}
</span>
<span className="status-group-count">
<span className="status-group__count">
{statusList.length}
</span>
</div>
<div className="status-group-items">
<div className="status-group__items">
{statusList.map((status, index) => (
<div
key={`${groupName}-${index}`}

23
styles/components/file-explorer.css
View file

@ -112,7 +112,7 @@
margin-bottom: 0;
}
.status-group-header {
.status-group__header {
display: flex;
justify-content: space-between;
align-items: center;
@ -120,26 +120,39 @@
background: var(--background-secondary-alt);
border-radius: var(--radius-s);
margin-bottom: var(--size-2-2);
border: 1px solid var(--background-modifier-border);
transition: background var(--anim-duration-fast) ease;
}
.status-group-name {
.status-group__header:hover {
background: var(--background-modifier-hover);
}
.status-group__name {
text-transform: capitalize;
font-weight: var(--font-medium);
font-size: var(--font-ui-smaller);
color: var(--text-normal);
}
.status-group-count {
padding: 1px var(--size-2-2);
.status-group__count {
display: inline-flex;
align-items: center;
padding: var(--size-2-1) var(--size-2-2);
background: var(--background-modifier-border);
border-radius: var(--radius-s);
font-size: var(--font-ui-smaller);
color: var(--text-muted);
font-weight: var(--font-medium);
min-width: 20px;
justify-content: center;
}
.status-group-items {
.status-group__items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: var(--size-2-2);
padding: 0 var(--size-2-1);
}
.status-item {

38
styles/components/grouped-view.css
View file

@ -83,25 +83,57 @@
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow var(--anim-duration-fast) ease;
}
.grouped-status-group-header {
.grouped-status-group:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.grouped-status-group__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--size-4-2) var(--size-4-3);
cursor: pointer;
transition: background var(--anim-duration-fast) ease;
position: relative;
}
.grouped-status-group-header:hover {
.grouped-status-group__header:hover {
background: var(--background-modifier-hover);
}
.grouped-status-group-info {
.grouped-status-group__header:focus {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.grouped-status-group__status {
display: flex;
align-items: center;
gap: var(--size-2-2);
min-width: 0;
flex: 1;
}
.grouped-status-group__template-badge {
display: inline-flex;
align-items: center;
padding: var(--size-2-1) var(--size-2-2);
background: var(--background-modifier-border);
border-radius: var(--radius-s);
font-size: var(--font-ui-smaller);
color: var(--text-muted);
font-weight: var(--font-medium);
}
.grouped-status-group__info {
display: flex;
align-items: center;
gap: var(--size-2-2);
margin-left: auto;
}
/* Files List */

21
styles/components/settings.css
View file

@ -256,24 +256,35 @@
/* Status Group for Quick Commands */
.status-group {
margin-bottom: var(--size-4-4);
padding: var(--size-4-3);
background: var(--background-primary-alt);
border-radius: var(--radius-m);
border: 1px solid var(--background-modifier-border);
}
.status-group-header {
.status-group__header {
margin-bottom: var(--size-4-2);
padding-bottom: var(--size-2-2);
border-bottom: 1px solid var(--background-modifier-border);
}
.status-group-title {
.status-group__title {
font-weight: var(--font-semibold);
color: var(--text-normal);
font-size: var(--font-ui-medium);
}
.status-group-description {
.status-group__description {
font-size: var(--font-ui-smaller);
color: var(--text-muted);
margin-top: var(--size-2-1);
line-height: var(--line-height-tight);
}
.status-group-items {
margin-left: var(--size-4-2);
.status-group__items {
display: flex;
flex-direction: column;
gap: var(--size-2-2);
}
/* Quick Commands Container */