添加 SettingsButton

Wherlog/Controls/MarkdownSection.razor.css

@@ -63,6 +63,12 @@
         transform: translateX(0);
     }
 
+::deep pre code {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+}
+
 ::deep figcaption {
     color: var(--neutral-foreground-hint);
     font-size: 0.875em;

Wherlog/Controls/PostCard.razor.js

@@ -5,12 +5,12 @@
         setElements(elements[i]);
     }
     function setElements(element) {
-        if (typeof element === 'undefined' || element === null) {
+        if (!(element instanceof Element)) {
             return;
         }
-        if (element?.className) {
-            element.className = 'hljs-' + element.className;
-        }
+        const className = [];
+        element.classList.forEach(x => className.push('hljs-' + x));
+        element.className = className.join(' ');
         const numberOfElements = +element?.children.length;
         for (let i = 0; i < numberOfElements; i++) {
             setElements(element.children[i]);

Wherlog/Controls/SettingsButton.razor

@@ -0,0 +1,22 @@
+@inherits SettingsCardBase
+
+<div class="@ClassValue" style="@Style">
+    <FluentCard
+        onclick="@OnClick"
+        AreaRestricted="false"
+        Style="padding: var(--settings-button-padding);">
+        <div class="content-grid">
+            <SettingsPresenter
+                Icon="@Icon"
+                Header="@Header"
+                Description="@Description"
+                ActionContent="@ActionContent" />
+            @if (ActionIcon != null)
+            {
+                <div class="action-icon-holder">
+                    @ActionIcon
+                </div>
+            }
+        </div>
+    </FluentCard>
+</div>

Wherlog/Controls/SettingsButton.razor.cs

@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+
+namespace Wherlog.Controls
+{
+    public partial class SettingsButton : SettingsCardBase
+    {
+        protected override string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-button")
+            .Build();
+
+        /// <summary>
+        /// Gets or sets the icon that is shown when IsClickEnabled is set to true.
+        /// </summary>
+        [Parameter]
+        public RenderFragment ActionIcon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the tooltip of the ActionIcon.
+        /// </summary>
+        [Parameter]
+        public string ActionIconToolTip { get; set; } = "More";
+
+        /// <summary>
+        /// Command executed when the user clicks on the button.
+        /// </summary>
+        [Parameter]
+        public EventCallback<MouseEventArgs> OnClick { get; set; }
+    }
+}

Wherlog/Controls/SettingsButton.razor.css

@@ -0,0 +1,18 @@
+* {
+    --settings-button-padding: 16px 0 16px 16px;
+}
+
+::deep div.content-grid {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+::deep div.action-icon-holder {
+    width: 32px;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 8px;
+}

Wherlog/Controls/SettingsCard.razor

@@ -1,13 +1,19 @@
-@inherits FluentComponentBase
+@using Microsoft.FluentUI.AspNetCore.Components.Utilities
+@inherits SettingsCardBase
 
 <div class="@ClassValue" style="@Style">
     <FluentCard AreaRestricted="false" Style="padding: var(--settings-card-padding);">
         <SettingsPresenter
             Icon="@Icon"
             Header="@Header"
             Description="@Description"
-            ActionContent="@ActionContent"
-            ActionIcon="@ActionIcon"
-            ActionIconToolTip="@ActionIconToolTip"/>
+            ActionContent="@ActionContent"/>
     </FluentCard>
 </div>
+
+@code
+{
+    protected override string ClassValue => new CssBuilder(Class)
+        .AddClass("settings-card")
+        .Build();
+}

Wherlog/Controls/SettingsExpander.razor.cs → Wherlog/Controls/SettingsCardBase.cs

@@ -1,14 +1,11 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
-using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
-    public partial class SettingsExpander : FluentComponentBase
+    public abstract class SettingsCardBase : FluentComponentBase
     {
-        private string ClassValue => new CssBuilder(Class)
-            .AddClass("settings-expander")
-            .Build();
+        protected abstract string ClassValue { get; }
 
         /// <summary>
         /// Gets or sets the Header.
@@ -22,12 +19,6 @@ public partial class SettingsExpander : FluentComponentBase
         [Parameter]
         public RenderFragment Description { get; set; }
 
-        /// <summary>
-        /// Gets or sets the content of a ContentControl.
-        /// </summary>
-        [Parameter]
-        public RenderFragment Content { get; set; }
-
         /// <summary>
         /// Gets or sets the icon on the left.
         /// </summary>
@@ -39,11 +30,5 @@ public partial class SettingsExpander : FluentComponentBase
         /// </summary>
         [Parameter]
         public RenderFragment ActionContent { get; set; }
-
-        /// <summary>
-        /// Gets or sets the alignment of the Content.
-        /// </summary>
-        [Parameter]
-        public ContentAlignment ContentAlignment { get; set; }
     }
 }

Wherlog/Controls/SettingsExpander.razor

@@ -1,4 +1,5 @@
-@inherits FluentComponentBase
+@using Microsoft.FluentUI.AspNetCore.Components.Utilities
+@inherits SettingsCardBase
 
 <div class="@ClassValue" style="@Style">
     <FluentAccordion>
@@ -13,3 +14,16 @@
         </FluentAccordionItem>
     </FluentAccordion>
 </div>
+
+@code
+{
+    protected override string ClassValue => new CssBuilder(Class)
+        .AddClass("settings-expander")
+        .Build();
+
+    /// <summary>
+    /// Gets or sets the content of a ContentControl.
+    /// </summary>
+    [Parameter]
+    public RenderFragment Content { get; set; }
+}

Wherlog/Controls/SettingsPresenter.razor

@@ -1,4 +1,5 @@
-@inherits FluentComponentBase
+@using Microsoft.FluentUI.AspNetCore.Components.Utilities
+@inherits SettingsCardBase
 
 <div class="@ClassValue" style="@Style">
     <div class="header-root">
@@ -26,3 +27,10 @@
         </div>
     }
 </div>
+
+@code
+{
+    protected override string ClassValue => new CssBuilder(Class)
+        .AddClass("settings-presenter")
+        .Build();
+}