Skip to content

Commit d7f51a5

Browse files
EyeBrawlerEyeBrawler
authored
Merge pull request #69 from SensitTechnologies/phoebe-overhaul
Phoebe overhaul
2 parents 4d9ce37 + b972b4b commit d7f51a5

File tree

63 files changed

+5131
-487
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+5131
-487
lines changed

‎MESS/MESS.Blazor/Components/App.razor‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
<link rel="stylesheet" href="@Assets["app.css"]"/>
1010
<link rel="stylesheet" href="@Assets["MESS.Blazor.styles.css"]"/>
1111
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
12+
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
13+
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css" rel="stylesheet">
1214
<ImportMap/>
1315
<link rel="icon" type="image/png" href="favicon.png"/>
1416
<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
@@ -18,10 +20,16 @@
1820
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
1921
<script src="_framework/blazor.web.js"></script>
2022
<script src='./Components/Pages/Phoebe/WorkInstruction/WorkInstructionNodeManagerList.razor.js'></script>
21-
<script src='./Components/Pages/Phoebe/WorkInstruction/WorkInstructionExportButton.razor.js'></script>
23+
<script src='./Components/Pages/Phoebe/WorkInstruction/Export/WorkInstructionExportButton.razor.js'></script>
2224
<script src='./Components/Pages/ProductionLog/ConfirmationModal.razor.js'></script>
2325
<script src="./Scripts/AutoFocus.js"></script>
26+
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
2427
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
28+
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
29+
<script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script>
30+
<script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script>
31+
<script src="./Scripts/HiddenClick.js"></script>
32+
<script src="./Scripts/QuillInterop.js"></script>
2533
</body>
2634

2735
</html>

‎MESS/MESS.Blazor/Components/Carousel/Carousel.razor‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,12 @@
113113
/// </summary>
114114
[Parameter]
115115
public string Id { get; set; } = $"carousel_{Guid.NewGuid():N}";
116+
117+
/// <summary>
118+
/// Event callback triggered when the active image index changes.
119+
/// </summary>
120+
[Parameter]
121+
public EventCallback<int> OnActiveIndexChanged { get; set; }
116122

117123
private int ActiveIndex { get; set; } = 0;
118124
private IJSObjectReference? module;
@@ -131,21 +137,24 @@
131137
}
132138
}
133139

134-
private void NextSlide()
140+
private async Task NextSlide()
135141
{
136142
ActiveIndex = (ActiveIndex + 1) % Images.Count;
143+
await OnActiveIndexChanged.InvokeAsync(ActiveIndex);
137144
StateHasChanged();
138145
}
139146

140-
private void PreviousSlide()
147+
private async Task PreviousSlide()
141148
{
142149
ActiveIndex = (ActiveIndex - 1 + Images.Count) % Images.Count;
150+
await OnActiveIndexChanged.InvokeAsync(ActiveIndex);
143151
StateHasChanged();
144152
}
145153

146-
private void SetActiveIndex(int index)
154+
private async Task SetActiveIndex(int index)
147155
{
148156
ActiveIndex = index;
157+
await OnActiveIndexChanged.InvokeAsync(ActiveIndex);
149158
StateHasChanged();
150159
}
151160

‎MESS/MESS.Blazor/Components/Layout/DarkModeButton.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
isDarkMode = !isDarkMode;
1616
await JS.InvokeVoidAsync("toggleDarkMode", isDarkMode);
1717
}
18-
}
18+
}

‎MESS/MESS.Blazor/Components/Layout/MainLayout.razor‎

Lines changed: 112 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,130 @@
1-
@using Microsoft.AspNetCore.Components.Authorization
1+
@inject IJSRuntime JS
22
@inherits LayoutComponentBase
3+
@implements IDisposable
4+
@using MESS.Blazor.Components.Navigator
5+
@using Microsoft.AspNetCore.Components.Authorization
6+
@inject NavigationManager Navigation
7+
@inject AuthenticationStateProvider AuthProvider
38

49
<HeadContent>
510
<script src="darkmode.js"></script>
611
</HeadContent>
712

8-
<div class="page">
9-
<main>
10-
<article class="content px-4 mx-auto">
11-
<AuthorizeView Roles="Technician, Administrator">
12-
<NavLink class="btn btn-outline-secondary text-decoration-none" href="/WorkInstructionManager" Match="NavLinkMatch.All">
13-
Phoebe
14-
</NavLink>
15-
<NavLink class="btn btn-outline-secondary text-decoration-none" href="/production-log" Match="NavLinkMatch.All">
16-
Production Log
17-
</NavLink>
18-
</AuthorizeView>
19-
<div class="mt-sm-3">
20-
@Body
21-
</div>
22-
<DarkModeButton></DarkModeButton>
23-
</article>
24-
</main>
25-
</div>
13+
<!-- Fixed Top Bar with Left and Right Buttons -->
14+
<div class="position-fixed top-0 start-0 end-0 d-flex justify-content-between align-items-center px-3 custom-top-bar"
15+
style="z-index: 1050; height: 50px;">
2616

27-
<div id="blazor-error-ui" data-nosnippet>
28-
An unhandled error has occurred.
29-
<a href="." class="reload">Reload</a>
30-
<span class="dismiss">🗙</span>
17+
<!-- Left-side button -->
18+
<div class="d-flex align-items-center">
19+
<AuthorizeView Roles="Technician, Administrator">
20+
@if (ShowSidebarToggle)
21+
{
22+
<button class="btn btn-outline-secondary"
23+
@onclick="ToggleSidebar"
24+
style="width: 32px; height: 32px; padding: 0; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem;">
25+
☰
26+
</button>
27+
}
28+
</AuthorizeView>
29+
</div>
30+
31+
<!-- Right-side button -->
32+
<div class="d-flex align-items-center">
33+
@if (ShowDarkModeToggle)
34+
{
35+
<button class="btn btn-outline-secondary"
36+
@onclick="ToggleDarkMode"
37+
title="Toggle Dark Mode"
38+
style="width: 36px; height: 32px; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem;">
39+
@(isDarkMode ? "\u2600\ufe0f" : "\ud83c\udf19")
40+
</button>
41+
}
42+
</div>
3143
</div>
3244

45+
<!-- Sidebar -->
46+
<AuthorizeView Roles="Technician, Administrator">
47+
<NavigationMenu IsOpen="@isSidebarOpen" OnToggle="ToggleSidebar" />
48+
</AuthorizeView>
49+
50+
<!-- Main Content -->
51+
<main class="content px-4 mx-auto"
52+
style="
53+
margin-left:@(isSidebarOpen ? "250px" : "0");
54+
padding-top: 36px;
55+
transition: margin-left 0.3s ease;">
56+
@Body
57+
</main>
58+
59+
<!-- Fluent Providers -->
3360
<FluentToastProvider />
3461
<FluentDialogProvider />
3562
<FluentTooltipProvider />
3663
<FluentMessageBarProvider />
3764
<FluentMenuProvider />
3865

66+
<!-- Error UI -->
67+
<div id="blazor-error-ui" data-nosnippet>
68+
An unhandled error has occurred.
69+
<a href="." class="reload">Reload</a>
70+
<span class="dismiss">🗙</span>
71+
</div>
72+
73+
@code {
74+
private bool isSidebarOpen = false;
75+
private bool ShowSidebarToggle = true;
76+
private bool ShowDarkModeToggle = true;
77+
private bool isDarkMode = false;
78+
79+
/// <summary>
80+
/// Called by the framework when parameters are set.
81+
/// Checks the current page and determines whether the sidebar toggle and dark mode toggle should be shown.
82+
/// </summary>
83+
protected override void OnParametersSet()
84+
{
85+
var relativeUri = Navigation.ToBaseRelativePath(Navigation.Uri).TrimEnd('/');
86+
87+
// Hide toggle button on the WorkInstructionManager page
88+
ShowSidebarToggle = !relativeUri.Equals("WorkInstructionManager", StringComparison.OrdinalIgnoreCase);
89+
90+
// Also hide dark mode toggle on WorkInstructionManager page
91+
ShowDarkModeToggle = ShowSidebarToggle;
92+
}
93+
94+
/// <summary>
95+
/// Toggles the sidebar open/closed state.
96+
/// Also invokes the SidebarToggleRequested callback if assigned.
97+
/// </summary>
98+
private async Task ToggleSidebar()
99+
{
100+
isSidebarOpen = !isSidebarOpen;
101+
102+
if (SidebarToggleRequested.HasDelegate)
103+
{
104+
await SidebarToggleRequested.InvokeAsync(null);
105+
}
106+
}
107+
108+
/// <summary>
109+
/// Toggles dark mode by invoking the JS function and updates the icon.
110+
/// </summary>
111+
private async Task ToggleDarkMode()
112+
{
113+
isDarkMode = !isDarkMode;
114+
await JS.InvokeVoidAsync("toggleDarkMode", isDarkMode);
115+
}
39116

40-
@code
41-
{
117+
/// <summary>
118+
/// Performs any necessary cleanup when the component is disposed.
119+
/// </summary>
120+
public void Dispose()
121+
{
122+
// Cleanup if needed
123+
}
42124

125+
/// <summary>
126+
/// Event callback for notifying external components when the sidebar toggle is requested.
127+
/// </summary>
128+
[Parameter]
129+
public EventCallback SidebarToggleRequested { get; set; }
43130
}

0 commit comments

Comments
 (0)