...

2026-06-04 11:29:24 -04:00
parent 377a041afa
commit 2625992014
16 changed files with 125 additions and 26 deletions
@@ -0,0 +1,226 @@
+@implements IDisposable;
+@inject IGlossaryService glossaryService
+@inject IGlossaryDialogService glossaryDialogService
+
+
+<div class="dialogBackground" onclick="@CloseDialog">
+    <div class="dialogContainer glossaryDialog"
+         @onclick:preventDefault="true"
+         @onclick:stopPropagation="true">
+
+        @if (term == null)
+        {
+            <div>Term is null</div>
+        }
+        else
+        {
+            <div class="dialogHeader">
+                @if (glossaryDialogService.HasHistory())
+                {
+                    <button class="backButton" @onclick="glossaryDialogService.BackDialog">
+                        <div class="backButtonIcon"></div>
+                    </button>
+                }
+                <div class="dialogTitle">
+                    @term.Term
+                </div>
+                <div class="glossaryDialogCategory">@term.Category</div>
+            </div>
+            <div class="dialogContent">
+                <div class="glossaryDefinition">@((MarkupString)RenderMarkdown(term.LongDefinition))</div>
+
+                @if (term.RelatedEntityIds.Count > 0)
+                {
+                    <div class="glossaryRelatedSection">
+                        <div class="glossaryRelatedTitle">Related Entities</div>
+                        <div class="glossaryRelatedList">
+                            @foreach (var entityId in term.RelatedEntityIds)
+                            {
+                                <EntityLabelComponent EntityId="@entityId"/>
+                            }
+                        </div>
+                    </div>
+                }
+
+                @if (term.RelatedTermIds.Count > 0)
+                {
+                    <div class="glossaryRelatedSection">
+                        <div class="glossaryRelatedTitle">Related Terms</div>
+                        <div class="glossaryRelatedList">
+                            @foreach (var relatedId in term.RelatedTermIds)
+                            {
+                                <GlossaryLabelComponent TermId="@relatedId"/>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
+            <div class="dialogFooter"></div>
+        }
+    </div>
+
+</div>
+
+<style>
+
+
+    .pageContents * {
+        filter: blur(2px);
+    }
+
+
+    .dialogBackground {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+    }
+
+    .dialogContainer {
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 64px;
+        width: 800px;
+        height: 600px;
+
+        background-color: var(--background);
+        border-width: var(--dialog-border-width);
+        border-style: solid;
+        border-color: var(--dialog-border-color);
+        border-radius: var(--dialog-radius);
+
+
+        box-shadow: 1px 2px 2px black;
+
+    }
+
+    .dialogHeader {
+        width: 100%;
+        background-color: var(--accent);
+        border-top-left-radius: var(--dialog-radius);
+        border-top-right-radius: var(--dialog-radius);
+        border-bottom: 4px solid black;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .backButton {
+        margin-left: 16px;
+        padding: 12px;
+
+        border: 1px solid var(--accent);
+    }
+
+    .backButton:hover {
+        background-color: var(--primary-hover);
+        border: 1px solid var(--primary-border-hover);
+    }
+
+    .backButtonIcon {
+        height: 32px;
+        width: 32px;
+        border: solid white;
+        border-width: 0 9px 9px 0;
+        transform: rotate(135deg);
+    }
+
+    .dialogTitle {
+        padding: 16px;
+        font-size: 2rem;
+        font-weight: bold;
+    }
+
+    .dialogContent {
+        flex-grow: 1;
+        padding: 6px;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        height: 800px;
+    }
+
+    .dialogFooter {
+        width: 100%;
+        height: 6px;
+        background-color: var(--paper);
+    }
+
+    .glossaryDialog {
+        max-width: 600px;
+    }
+
+    .glossaryDialogCategory {
+        font-size: 0.8rem;
+        opacity: 0.7;
+        margin-left: 12px;
+    }
+
+    .glossaryDefinition {
+        line-height: 1.6;
+    }
+
+    .glossaryDefinition p {
+        margin-bottom: 12px;
+    }
+
+    .glossaryRelatedSection {
+        margin-top: 20px;
+        padding-top: 16px;
+        border-top: 1px solid var(--info-secondary-border);
+    }
+
+    .glossaryRelatedTitle {
+        font-weight: 800;
+        font-size: 1rem;
+        margin-bottom: 8px;
+    }
+
+    .glossaryRelatedList {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+</style>
+
+@code {
+    private GlossaryTermModel? term;
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        glossaryDialogService.Subscribe(OnUpdate);
+        LoadTerm();
+    }
+
+    void IDisposable.Dispose()
+    {
+        glossaryDialogService.Unsubscribe(OnUpdate);
+    }
+
+    void OnUpdate()
+    {
+        LoadTerm();
+        StateHasChanged();
+    }
+
+    void LoadTerm()
+    {
+        var id = glossaryDialogService.GetTermId();
+        term = id != null ? glossaryService.GetTerm(id) : null;
+    }
+
+    void CloseDialog()
+    {
+        glossaryDialogService.CloseDialog();
+    }
+
+    string RenderMarkdown(string text)
+    {
+        return Markdown.ToHtml(text);
+    }
+
+}