refactor: 使用拨号按钮

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css

@@ -59,8 +59,6 @@
     --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
     --bs-btn-active-bg: var(--bb-layout-button-active-bg);
     box-shadow: var(--bb-layout-button-shadow);
-    right: 1rem;
-    bottom: 9rem;
 }
 
     ::deep .btn-theme img {

src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css

@@ -1,60 +1,4 @@
-::deep .btn-fade {
-    opacity: 0.7;
-    box-shadow: var(--bb-layout-button-shadow);
-    transition: opacity .3s linear;
-    position: fixed;
-    z-index: 1001;
-}
-
-    ::deep .btn-fade:hover {
-        opacity: 1;
-    }
-
-::deep .btn-update {
-    --bs-btn-bg: var(--bb-layout-button-update-bg);
-    --bs-btn-hover-bg: var(--bs-btn-bg);
-    --bs-btn-active-bg: var(--bs-btn-bg);
-    bottom: 5rem;
-    right: 1rem;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-    ::deep .btn-update img {
-        width: 55%;
-        margin-inline-start: 2px;
-    }
-
-::deep .btn-chat {
-    --bs-btn-bg: var(--bb-layout-button-bg);
-    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
-    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
-    box-shadow: var(--bb-layout-button-shadow);
-    right: 1rem;
-    bottom: 13rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--bb-button-chat-color);
-}
-
-::deep .btn-theme-mode {
-    --bs-btn-bg: var(--bb-layout-button-bg);
-    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
-    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
-    box-shadow: var(--bb-layout-button-shadow);
-    bottom: 17rem;
-    right: 1rem;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--bb-button-chat-color);
-}
-
-::deep pre {
+::deep pre {
     color: #e83e8c;
     margin-bottom: 0;
     max-height: 260px;

src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor

@@ -18,11 +18,25 @@
         @Body
     </section>
 
-    <ThemeMode />
-
-    <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
-
-    <ThemeChooser></ThemeChooser>
-
-    <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
+    <DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd" IsAutoClose="false">
+        <ButtonTemplate>
+            <div class="dial-button-gear">
+                <img src="./images/logo.png" />
+            </div>
+        </ButtonTemplate>
+        <ChildContent>
+            <DialButtonItem>
+                <ThemeMode></ThemeMode>
+            </DialButtonItem>
+            <DialButtonItem>
+                <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
+            </DialButtonItem>
+            <DialButtonItem>
+                <ThemeChooser></ThemeChooser>
+            </DialButtonItem>
+            <DialButtonItem>
+                <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
+            </DialButtonItem>
+        </ChildContent>
+    </DialButton>
 </section>

src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css

@@ -72,6 +72,78 @@
             background-color: var(--bb-sidebar-body-drag-hover-bg);
         }
 
+::deep .dial-button {
+    display: none;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+}
+
+::deep .btn-fade {
+    opacity: 0.7;
+    box-shadow: var(--bb-layout-button-shadow);
+    transition: opacity .3s linear;
+}
+
+    ::deep .btn-fade:hover {
+        opacity: 1;
+    }
+
+::deep .btn-update {
+    --bs-btn-bg: var(--bb-layout-button-update-bg);
+    --bs-btn-hover-bg: var(--bs-btn-bg);
+    --bs-btn-active-bg: var(--bs-btn-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+    ::deep .btn-update img {
+        width: 55%;
+        margin-inline-start: 2px;
+    }
+
+::deep .btn-chat {
+    --bs-btn-bg: var(--bb-layout-button-bg);
+    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
+    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
+    box-shadow: var(--bb-layout-button-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bb-button-chat-color);
+}
+
+::deep .btn-theme-mode {
+    --bs-btn-bg: var(--bb-layout-button-bg);
+    --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
+    --bs-btn-active-bg: var(--bb-layout-button-active-bg);
+    box-shadow: var(--bb-layout-button-shadow);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--bb-button-chat-color);
+}
+
+.dial-button-gear {
+    background-color: var(--bb-primary-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    padding: 6px;
+    opacity: 0.7;
+    transition: opacity .3s linear;
+    cursor: pointer;
+}
+
+    .dial-button-gear:hover {
+        opacity: 1;
+    }
+
+    .dial-button-gear img {
+        width: 100%;
+    }
+
 @media (min-width: 768px) {
     .section {
         --bb-layout-sidebar-width: 300px;
@@ -102,4 +174,8 @@
     .sidebar-bar {
         display: block;
     }
+
+    ::deep .dial-button {
+        display: block;
+    }
 }