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 <[email protected]>
sillsdev · Jan 14, 2025 · 31cf726 · 31cf726
1 parent 20f623a
commit 31cf726
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/.../viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/.../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
@@ -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
@@ -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
@@ -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}