Update styling for word list (#41)

paranext · Sep 25, 2024 · 20d3b3b · 20d3b3b
2 parents 33f67e8 + 686743b
commit 20d3b3b
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/paratext-bible-word-list/src/word-cloud.component.tsx b/src/paratext-bible-word-list/src/word-cloud.component.tsx
@@ -14,7 +14,7 @@ export interface CloudData {
   value: number;
 }
 
-const colors = ['#d1160f', '#a8120d', '#7a0f0b', '#440705', '#3d0604', '#000000'];
+const colors = ['#858585', '#919191', '#6b6b6b', '#4e4e4e', '#222222', '#000000'];
 
 export default function WordCloud({ wordList }: WordCloudProps) {
   const cloudData = useMemo((): CloudData[] => {
@@ -38,10 +38,10 @@ export default function WordCloud({ wordList }: WordCloudProps) {
   const fontSizeSetter = (data: CloudData) => fontScale(data.value);
 
   return (
-    <ParentSize>
-      {({ width }) => (
+    <ParentSize style={{ height: '95%' }}>
+      {({ width, height }) => (
         <Wordcloud
-          height={500}
+          height={height}
           rotate={0}
           width={width}
           fontSize={fontSizeSetter}

diff --git a/src/paratext-bible-word-list/src/word-content-viewer.component.tsx b/src/paratext-bible-word-list/src/word-content-viewer.component.tsx
@@ -41,8 +41,8 @@ export default function WordContentViewer({ selectedWord }: { selectedWord: Word
   }, [selectedWord]);
 
   return (
-    <Table>
-      <TableHeader>
+    <Table stickyHeader>
+      <TableHeader stickyHeader>
         <TableRow>
           <TableHead>Reference</TableHead>
           <TableHead>Text</TableHead>

diff --git a/src/paratext-bible-word-list/src/word-list.web-view.scss b/src/paratext-bible-word-list/src/word-list.web-view.scss
@@ -1,17 +1,49 @@
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+}
+
+#root {
+  height: 100%;
+}
+
 .word-list {
-  overflow: auto;
-  padding: 10px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .filters {
     display: flex;
     align-items: center;
   }
 
   .filters > * {
-    margin-right: 10px;
+    margin: 0.25rem /* 4px */;
   }
-}
 
-.word-list > * {
-  margin-top: 10px;
+  .input {
+    margin: 0.25rem;
+    border-radius: 0.375rem;
+    border-width: 1px;
+  }
+
+  .loader {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .word-component {
+    flex: 1 1 0%;
+    overflow: auto;
+    margin: 0.25rem;
+    border-radius: 0.375rem;
+    border-width: 1px;
+  }
 }
diff --git a/src/paratext-bible-word-list/src/word-list.web-view.tsx b/src/paratext-bible-word-list/src/word-list.web-view.tsx
@@ -1,11 +1,18 @@
-import { useData } from '@papi/frontend/react';
 import { WebViewProps } from '@papi/core';
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { ComboBox, Input, ScriptureReference, Switch } from 'platform-bible-react';
+import { useData } from '@papi/frontend/react';
 import type { WordListEntry } from 'paratext-bible-word-list';
+import {
+  ComboBox,
+  Input,
+  Label,
+  ScriptureReference,
+  ShadCnSwitch,
+  Spinner,
+} from 'platform-bible-react';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import WordCloud from './word-cloud.component';
 import WordContentViewer from './word-content-viewer.component';
 import WordTable from './word-table.component';
-import WordCloud from './word-cloud.component';
 
 const defaultScrRef: ScriptureReference = {
   bookNum: 1,
@@ -124,32 +131,48 @@ globalThis.webViewComponent = function WordListWebView({
           options={Object.values(Scope)}
         />
         <Input
+          className="input"
           placeholder="Word filter"
           value={wordFilter}
           onChange={(event) => onChangeWordFilter(event)}
         />
-        <Switch
-          isChecked={showWordCloud}
-          onChange={() => {
+        <ShadCnSwitch
+          id="view-mode"
+          checked={showWordCloud}
+          onCheckedChange={() => {
             setShowWordCloud(!showWordCloud);
             setSelectedWord(undefined);
           }}
         />
-        <p>{showWordCloud ? 'Cloud' : 'Table'} view</p>
+
+        <Label htmlFor="view-mode">{`${showWordCloud ? 'Cloud' : 'Table'} view`}</Label>
       </div>
-      {loading && <p>Generating word list</p>}
+      {loading && (
+        <div className="loader">
+          <Spinner />
+          <Label>Generating word list</Label>
+        </div>
+      )}
       {!loading &&
         wordList &&
         (showWordCloud ? (
-          <WordCloud wordList={shownWordList} />
+          <div className="word-component">
+            <WordCloud wordList={shownWordList} />
+          </div>
         ) : (
-          <WordTable
-            wordList={shownWordList}
-            fullWordCount={wordList.length}
-            onWordClick={(word: string) => findSelectedWordEntry(word)}
-          />
+          <div className="word-component">
+            <WordTable
+              wordList={shownWordList}
+              fullWordCount={wordList.length}
+              onWordClick={(word: string) => findSelectedWordEntry(word)}
+            />
+          </div>
         ))}
-      {selectedWord && <WordContentViewer selectedWord={selectedWord} />}
+      {selectedWord && (
+        <div className="word-component">
+          <WordContentViewer selectedWord={selectedWord} />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/paratext-bible-word-list/src/word-table.component.tsx b/src/paratext-bible-word-list/src/word-table.component.tsx
@@ -28,7 +28,7 @@ const columns = (wordColumnTitle: string): ColumnDef<WordData>[] => [
     accessorKey: 'word',
     header: ({ column }) => {
       return (
-        <Button onClick={() => column.toggleSorting(undefined)}>
+        <Button variant="ghost" onClick={() => column.toggleSorting(undefined)}>
           {`${wordColumnTitle} ${getSortingIcon(column.getIsSorted())}`}
         </Button>
       );
@@ -38,7 +38,7 @@ const columns = (wordColumnTitle: string): ColumnDef<WordData>[] => [
     accessorKey: 'count',
     header: ({ column }) => {
       return (
-        <Button onClick={() => column.toggleSorting(undefined)}>
+        <Button variant="ghost" onClick={() => column.toggleSorting(undefined)}>
           {`Count ${getSortingIcon(column.getIsSorted())}`}
         </Button>
       );
@@ -67,8 +67,7 @@ export default function WordTable({ wordList, fullWordCount, onWordClick }: Word
 
   return (
     <DataTable
-      enablePagination
-      showPaginationControls
+      stickyHeader
       columns={columns(wordColumnTitle)}
       data={wordData}
       onRowClickHandler={onCellClick}