apply more user feedback (#1397)

* don't trigger search if user presses a key between 2 shifts * set a min width on project title to keep long project names from taking over * fix dialog buttons getting trimmed on mobile due to keyboards * make it possible to load the dev page over different hostnames * configure android to resize the web view when the keyboard opens * always use localhost when running in maui desktop in dev mode * always enable browser dev tools * show update notification before download is finished due to its unreliability, changed the text due to that
sillsdev · Jan 22, 2025 · 8ab953c · 8ab953c
1 parent 718612f
commit 8ab953c
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 10 deletions.
diff --git a/backend/FwLite/FwLiteMaui/App.xaml b/backend/FwLite/FwLiteMaui/App.xaml
@@ -2,6 +2,8 @@
 <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:FwLiteMaui"
+             xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
+             android:Application.WindowSoftInputModeAdjust="Resize"
              x:Class="FwLiteMaui.App">
     <Application.Resources>
         <ResourceDictionary>

diff --git a/backend/FwLite/FwLiteMaui/FwLiteMauiKernel.cs b/backend/FwLite/FwLiteMaui/FwLiteMauiKernel.cs
@@ -23,11 +23,11 @@ public static void AddFwLiteMauiServices(this IServiceCollection services,
         string environment = "Production";
 #if DEBUG
         environment = "Development";
-        services.AddBlazorWebViewDeveloperTools();
 #endif
         IHostEnvironment env = new HostingEnvironment() { EnvironmentName = environment };
         services.AddSingleton<IHostEnvironment>(env);
         services.AddMauiBlazorWebView();
+        services.AddBlazorWebViewDeveloperTools();
         //must be added after blazor as it modifies IJSRuntime in order to intercept it's constructor
         services.AddFwLiteShared(env);
         services.AddSingleton<HostedServiceAdapter>();

diff --git a/backend/FwLite/FwLiteMaui/Platforms/Windows/AppUpdateService.cs b/backend/FwLite/FwLiteMaui/Platforms/Windows/AppUpdateService.cs
@@ -76,9 +76,9 @@ private async Task Test()
         await ApplyUpdate(fwLiteRelease);
     }
 
-    private void ShowUpdateAvailableNotification(FwLiteRelease latestRelease)
+    private void ShowUpdateInstallingNotification(FwLiteRelease latestRelease)
     {
-        new ToastContentBuilder().AddText("FieldWorks Lite Update Available").AddText($"Version {latestRelease.Version} will be installed after FieldWorks Lite is closed").Show();
+        new ToastContentBuilder().AddText("FieldWorks Lite Installing update").AddText($"Version {latestRelease.Version} will be installed after FieldWorks Lite is closed").Show();
     }
 
     private async Task<bool> RequestPermissionToUpdate(FwLiteRelease latestRelease)
@@ -150,6 +150,9 @@ private async Task ApplyUpdate(FwLiteRelease latestRelease, bool quitOnUpdate =
             }
             logger.LogInformation("Downloading update: {ProgressPercentage}%", progressInfo.percentage);
         };
+        ShowUpdateInstallingNotification(latestRelease);
+
+        //note this asyncOperation is not reliable, it's possible the update will install and this will never resolve, so don't do anything important after this
         var result = await asyncOperation;
         if (!string.IsNullOrEmpty(result.ErrorText))
         {
@@ -158,7 +161,6 @@ private async Task ApplyUpdate(FwLiteRelease latestRelease, bool quitOnUpdate =
         }
 
         logger.LogInformation("Update downloaded, will install on next restart");
-        ShowUpdateAvailableNotification(latestRelease);
     }
 
     private async Task<ShouldUpdateResponse> ShouldUpdate()

diff --git a/backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor b/backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor
@@ -8,10 +8,11 @@
 @inject FwLiteProvider FwLiteProvider
 @inject IOptions<FwLiteConfig> Config;
 @inject ProjectServicesProvider ProjectServicesProvider;
+@inject NavigationManager NavigationManager;
 @implements IAsyncDisposable
 @if (useDevAssets)
 {
-    <script type="module" src="http://localhost:5173/@@vite/client"></script>
+    <script type="module" src="@DevScheme://@DevHostname:5173/@@vite/client"></script>
 }
 else
 {
@@ -48,6 +49,20 @@ else
 @code {
     private bool useDevAssets => Config.Value.UseDevAssets;
     // private bool useDevAssets => false;
+    private Uri DevUri
+    {
+        get
+        {
+            //this lets us use the host from the request, this enables us to open the web page on a phone where the host will not be localhost
+            var uri = new Uri(NavigationManager.Uri);
+            //check if we're running in maui, then use localhost instead.
+            if (uri.Host == "0.0.0.1") uri = new Uri("http://localhost:" + uri.Port);
+            return uri;
+        }
+    }
+
+    private string DevHostname => DevUri.Host;
+    private string DevScheme => DevUri.Scheme;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -63,7 +78,7 @@ else
 
             if (useDevAssets)
             {
-                await JS.InvokeAsync<IJSObjectReference>("import", "http://localhost:5173/src/main.ts");
+                await JS.InvokeAsync<IJSObjectReference>("import", $"{DevScheme}://{DevHostname}:5173/src/main.ts");
             } else
             {
                 await JS.InvokeAsync<IJSObjectReference>("import",

diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
@@ -304,8 +304,8 @@
 {#if projectLoaded}
 <div class="project-view !flex flex-col PortalTarget" style={spaceForEditorStyle}>
   <AppBar class="bg-secondary min-h-12 shadow-md" head={false}>
-    <div slot="title" class="prose whitespace-nowrap">
-      <h3>{projectName}</h3>
+    <div slot="title" class="prose whitespace-nowrap min-w-20">
+      <h3 class="text-ellipsis overflow-hidden">{projectName}</h3>
     </div>
     <Button
       classes={{root: showHomeButton ? '' : 'hidden'}}

diff --git a/frontend/viewer/src/app.postcss b/frontend/viewer/src/app.postcss
@@ -16,7 +16,8 @@
 }
 
 .dialog {
-  height: 100vh;
+    /*using 100vh or dvh still caused the action items to get clipped*/
+  height: 100%;
   width: 700px;
   @apply md:max-h-[50rem];
   @apply flex flex-col;

diff --git a/frontend/viewer/src/lib/search-bar/SearchBar.svelte b/frontend/viewer/src/lib/search-bar/SearchBar.svelte
@@ -23,7 +23,12 @@
   let waitingForSecondShiftTimeout: ReturnType<typeof setTimeout>;
   const abortController = new AbortController();
   document.addEventListener('keydown', (e) => {
-    if (e.key !== 'Shift') return;
+    if (e.key !== 'Shift') {
+      //cancel, user pressed shift and typed another letter
+      waitingForSecondShift = false;
+      clearTimeout(waitingForSecondShiftTimeout);
+      return;
+    }
     if (waitingForSecondShift) {
       waitingForSecondShift = false;
       clearTimeout(waitingForSecondShiftTimeout);

diff --git a/frontend/viewer/vite.config.ts b/frontend/viewer/vite.config.ts
@@ -51,6 +51,7 @@ export default defineConfig(({ mode, command }) => {
     }), svelteTesting()],
     server: {
       origin: 'http://localhost:5173',
+      host: true,
     },
     test: {
       environment: 'happy-dom',