feat(status_bar): basic integration of inherited attributes

This commit is contained in:
Elian Doran
2025-12-12 21:41:05 +02:00
parent c6d97e3d4b
commit 870499bc3a
3 changed files with 21 additions and 10 deletions

View File

@@ -3,7 +3,7 @@
border-top: 1px solid var(--main-border-color); border-top: 1px solid var(--main-border-color);
background-color: var(--left-pane-background-color); background-color: var(--left-pane-background-color);
.status-bar-main-row { > .status-bar-main-row {
min-height: 32px; min-height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -72,4 +72,8 @@
} }
} }
> .attribute-list {
font-size: 0.9em;
}
} }

View File

@@ -26,6 +26,7 @@ import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
import { useAttachments } from "../type_widgets/Attachment"; import { useAttachments } from "../type_widgets/Attachment";
import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector"; import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
import Breadcrumb from "./Breadcrumb"; import Breadcrumb from "./Breadcrumb";
import InheritedAttributesTab from "../ribbon/InheritedAttributesTab";
interface StatusBarContext { interface StatusBarContext {
note: FNote; note: FNote;
@@ -272,15 +273,21 @@ function AttributesPane({ note, noteContext }: StatusBarContext) {
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
const api = useRef<AttributeEditorImperativeHandlers>(null); const api = useRef<AttributeEditorImperativeHandlers>(null);
return ( const context = parentComponent && {
componentId: parentComponent.componentId,
note,
hidden: !note
};
return (context &&
<div className="attribute-list"> <div className="attribute-list">
{parentComponent && <AttributeEditor <InheritedAttributesTab {...context} />
componentId={parentComponent.componentId}
<AttributeEditor
{...context}
api={api} api={api}
ntxId={noteContext.ntxId} ntxId={noteContext.ntxId}
note={note} />
hidden={!note}
/>}
</div> </div>
); );
} }

View File

@@ -9,7 +9,7 @@ import RawHtml from "../react/RawHtml";
import { joinElements } from "../react/react_utils"; import { joinElements } from "../react/react_utils";
import AttributeDetailWidget from "../attribute_widgets/attribute_detail"; import AttributeDetailWidget from "../attribute_widgets/attribute_detail";
export default function InheritedAttributesTab({ note, componentId }: TabContext) { export default function InheritedAttributesTab({ note, componentId }: Pick<TabContext, "note" | "componentId">) {
const [ inheritedAttributes, setInheritedAttributes ] = useState<FAttribute[]>(); const [ inheritedAttributes, setInheritedAttributes ] = useState<FAttribute[]>();
const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget()); const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget());
@@ -34,7 +34,7 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
refresh(); refresh();
} }
}); });
return ( return (
<div className="inherited-attributes-widget"> <div className="inherited-attributes-widget">
<div className="inherited-attributes-container selectable-text"> <div className="inherited-attributes-container selectable-text">
@@ -83,4 +83,4 @@ function InheritedAttribute({ attribute, onClick }: { attribute: FAttribute, onC
onClick={onClick} onClick={onClick}
/> />
); );
} }