mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): improve sidebar layering, visual hierarchy, and graph depth [issue #23]

Browse Source
This commit is contained in:
Marek Jaisński
2026-05-09 08:42:29 +02:00
parent bd5d0fb5c4
commit c77ff6f347
5 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Molecules/IntelligenceToolbar.razor
+1 -1
View File
@@ -38,7 +38,7 @@
<button class="toolbar-item" title="Global Settings"> <button class="toolbar-item" title="Global Settings">
<NexusIcon Name="settings" Size="20" /> <NexusIcon Name="settings" Size="20" />
</button> </button>
<button class="toolbar-item logout-item" @onclick="HandleLogout" title="Logout"> <button class="toolbar-item logout-item" @onclick="HandleLogout" title="Exit">
<NexusIcon Name="log-out" Size="20" /> <NexusIcon Name="log-out" Size="20" />
</button> </button>
</div> </div>
src/NexusReader.UI.Shared/Components/Molecules/IntelligenceToolbar.razor.css
+19
View File
@@ -75,3 +75,22 @@
color: #ff4d4d; color: #ff4d4d;
background: rgba(255, 77, 77, 0.1); background: rgba(255, 77, 77, 0.1);
} }
.toolbar-item.logout-item {
margin-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1.5rem;
height: auto;
width: 100%;
display: flex;
justify-content: center;
border-radius: 0;
color: #444;
}
.toolbar-item.logout-item:hover {
color: #ff4d4d;
background: none;
filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.4));
}
src/NexusReader.UI.Shared/Components/Organisms/KnowledgeGraph.razor.css
+17 -12
View File
@@ -12,28 +12,33 @@
.graph-controls { .graph-controls {
position: absolute; position: absolute;
bottom: 1rem; bottom: 1.5rem;
right: 1.5rem; right: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: 0.5rem; gap: 0.25rem;
background: rgba(20, 20, 20, 0.4);
backdrop-filter: blur(12px);
padding: 0.35rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
z-index: 10; z-index: 10;
} }
.zoom-btn { .zoom-btn {
width: 28px; width: 32px;
height: 28px; height: 32px;
background: rgba(18, 18, 18, 0.8); background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
border-radius: 4px; color: #aaa;
color: #888; font-size: 1.1rem;
font-size: 1rem;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
.zoom-btn:hover { .zoom-btn:hover {
src/NexusReader.UI.Shared/Layout/MainLayout.razor.css
+1 -1
View File
@@ -33,7 +33,7 @@ main {
height: 100%; height: 100%;
background: #0d0d0d; background: #0d0d0d;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(255, 255, 255, 0.05); border-left: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
} }
src/NexusReader.UI.Shared/wwwroot/js/knowledgeGraph.js
+2 -1
View File
@@ -21,7 +21,8 @@ export function mount(containerId, data, dotNetHelper) {
svgElement = d3.select(container).append("svg") svgElement = d3.select(container).append("svg")
.attr("viewBox", [0, 0, width, height]) .attr("viewBox", [0, 0, width, height])
.attr("width", "100%") .attr("width", "100%")
.attr("height", "100%"); .attr("height", "100%")
.style("background", "radial-gradient(circle, #1a1a1a 0%, #121212 100%)");
// Radial gradient for Nebula effect // Radial gradient for Nebula effect
const defs = svgElement.append("defs"); const defs = svgElement.append("defs");