From 31cf726a2afaa7fe8f424dd6a89d8f47a22fbaa6 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Tue, 14 Jan 2025 10:26:43 +0700
Subject: [PATCH] make activity changes textbox readonly (#1370)

* make activity changes textbox readonly

* Rework hiding search icon in readonly mode

* Restyle readonly vs editable state of form fields

---------

Co-authored-by: Tim Haasdyk <tim_haasdyk@sil.org>
---
 frontend/viewer/src/ProjectView.svelte        |  2 +-
 frontend/viewer/src/TestProjectView.svelte    |  7 ++++
 frontend/viewer/src/WebComponent.svelte       |  9 ++++-
 .../src/lib/activity/ActivityView.svelte      |  3 +-
 .../Services/IMiniLcmJsInvokable.ts           |  1 -
 .../viewer/src/lib/entry-editor/field.postcss | 38 ++++++++++++-------
 .../inputs/CrdtMultiOptionField.svelte        |  2 +-
 .../viewer/src/lib/history/HistoryView.svelte |  6 +--
 8 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
index 6df0d62b5..4fc3e5479 100644
--- a/frontend/viewer/src/ProjectView.svelte
+++ b/frontend/viewer/src/ProjectView.svelte
@@ -346,7 +346,7 @@
       {#if about}
         <AboutDialog text={about} />
       {/if}
-      {#if $features.feedback}
+      {#if $features.feedback && fwLiteConfig.feedbackUrl}
         <Button
           href={fwLiteConfig.feedbackUrl}
           target="_blank"
diff --git a/frontend/viewer/src/TestProjectView.svelte b/frontend/viewer/src/TestProjectView.svelte
index 4d8cb1a83..ca403ffe4 100644
--- a/frontend/viewer/src/TestProjectView.svelte
+++ b/frontend/viewer/src/TestProjectView.svelte
@@ -2,8 +2,15 @@
 import ProjectView from './ProjectView.svelte';
 import {InMemoryApiService} from '$lib/in-memory-api-service';
 import {DotnetService} from '$lib/dotnet-types';
+import {FwLitePlatform} from '$lib/dotnet-types/generated-types/FwLiteShared/FwLitePlatform';
 
 const inMemoryLexboxApi = new InMemoryApiService();
 window.lexbox.ServiceProvider.setService(DotnetService.MiniLcmApi, inMemoryLexboxApi);
+window.lexbox.ServiceProvider.setService(DotnetService.FwLiteConfig, {
+  appVersion: 'test-project',
+  feedbackUrl: '',
+  os: FwLitePlatform.Web,
+  useDevAssets: true,
+});
 </script>
 <ProjectView projectName={inMemoryLexboxApi.projectName} isConnected />
diff --git a/frontend/viewer/src/WebComponent.svelte b/frontend/viewer/src/WebComponent.svelte
index 0c281ac81..1506e6e93 100644
--- a/frontend/viewer/src/WebComponent.svelte
+++ b/frontend/viewer/src/WebComponent.svelte
@@ -3,6 +3,8 @@
   import ProjectView from './ProjectView.svelte';
   import { getSettings } from 'svelte-ux';
   import css from './app.postcss?inline';
+  import {DotnetService} from '$lib/dotnet-types';
+  import {FwLitePlatform} from '$lib/dotnet-types/generated-types/FwLiteShared/FwLitePlatform';
 
   let loading = true;
 
@@ -33,7 +35,12 @@
       abortController.abort();
     }
   });
-
+  window.lexbox.ServiceProvider.setService(DotnetService.FwLiteConfig, {
+    appVersion: 'lexbox-viewer',
+    feedbackUrl: '',
+    os: FwLitePlatform.Web,
+    useDevAssets: true,//has no effect, but is required
+  });
   const { currentTheme } = getSettings();
 </script>
 
diff --git a/frontend/viewer/src/lib/activity/ActivityView.svelte b/frontend/viewer/src/lib/activity/ActivityView.svelte
index 23878d78e..953d71e03 100644
--- a/frontend/viewer/src/lib/activity/ActivityView.svelte
+++ b/frontend/viewer/src/lib/activity/ActivityView.svelte
@@ -86,8 +86,9 @@
       {#if selectedRow}
         <TextField label="Changes"
                    value={JSON.stringify(selectedRow.changes, null, 4)}
+                   disabled
                    multiline
-                   class="readonly"
+                   class="readonly field"
                    classes={{input: 'h-80'}}/>
       {/if}
     </div>
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
index 3a80ba807..2933e57b9 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
@@ -57,6 +57,5 @@ export interface IMiniLcmJsInvokable
 	createExampleSentence(entryId: string, senseId: string, exampleSentence: IExampleSentence) : Promise<IExampleSentence>;
 	updateExampleSentence(entryId: string, senseId: string, before: IExampleSentence, after: IExampleSentence) : Promise<IExampleSentence>;
 	deleteExampleSentence(entryId: string, senseId: string, exampleSentenceId: string) : Promise<void>;
-	dispose() : Promise<void>;
 }
 /* eslint-enable */
diff --git a/frontend/viewer/src/lib/entry-editor/field.postcss b/frontend/viewer/src/lib/entry-editor/field.postcss
index bcd54ae8f..01e791c23 100644
--- a/frontend/viewer/src/lib/entry-editor/field.postcss
+++ b/frontend/viewer/src/lib/entry-editor/field.postcss
@@ -24,23 +24,33 @@
       @apply col-span-2 pl-4;
     }
 
-    .readonly {
-      &.TextField, .TextField {
-        opacity: 1;
+    &.TextField, .TextField {
+      [class~="border"] {
+        filter: contrast(0.95);
+        border-radius: 0;
+        border-style: none;
+        border-bottom-style: solid;
+        @apply !shadow-none;
+        border-color: hsl(var(--color-surface-content) / 30%);
+      }
+    }
 
-        [class~="border"] {
-          border: none;
-        }
+    &.readonly.TextField, .readonly.TextField, .readonly .TextField {
+      /* prevent other "disabled-state styles" from impacting readability */
+      opacity: 1;
 
-        input {
-          /* enable standard text selection */
-          pointer-events: auto;
-          cursor: text;
-        }
+      [class~="border"] {
+        border-color: hsl(var(--color-surface-content) / 20%);
+        background: transparent;
+      }
+
+      input {
+        /* enable standard text selection */
+        pointer-events: auto;
+      }
 
-        .append {
-          display: none;
-        }
+      .append, .prepend {
+        display: none;
       }
     }
 
diff --git a/frontend/viewer/src/lib/entry-editor/inputs/CrdtMultiOptionField.svelte b/frontend/viewer/src/lib/entry-editor/inputs/CrdtMultiOptionField.svelte
index bfd640d16..089c55cf5 100644
--- a/frontend/viewer/src/lib/entry-editor/inputs/CrdtMultiOptionField.svelte
+++ b/frontend/viewer/src/lib/entry-editor/inputs/CrdtMultiOptionField.svelte
@@ -43,7 +43,7 @@
     value={editorValue}
     disabled={readonly}
     options={sortedOptions}
-    icon={readonly ? undefined : mdiMagnify}
+    icon={mdiMagnify}
     formatSelected={({ value, options }) => {
       return (preserveOrder
       // sorted by order of selection
diff --git a/frontend/viewer/src/lib/history/HistoryView.svelte b/frontend/viewer/src/lib/history/HistoryView.svelte
index 3a269ab3f..d1a4a7abc 100644
--- a/frontend/viewer/src/lib/history/HistoryView.svelte
+++ b/frontend/viewer/src/lib/history/HistoryView.svelte
@@ -70,14 +70,14 @@
       <div>
         {#if record?.entity}
           {#if record.entityName === 'Entry'}
-            <EntryEditor entry={record.entity} modalMode/>
+            <EntryEditor entry={record.entity} modalMode readonly/>
           {:else if record.entityName === 'Sense'}
             <div class="editor-grid">
-              <SenseEditor sense={record.entity}/>
+              <SenseEditor sense={record.entity} readonly/>
             </div>
           {:else if record.entityName === 'ExampleSentence'}
             <div class="editor-grid">
-              <ExampleEditor example={record.entity} readonly={false}/>
+              <ExampleEditor example={record.entity} readonly/>
             </div>
           {/if}
         {/if}