Tips for some table cells (#274)

Added tooltips with case questions on the declension pages and on the grammar page.
sonic16x · May 11, 2024 · 798bd53 · 798bd53
1 parent 4ea5c04
commit 798bd53
Showing 11 changed files with 171 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/colors.scss b/src/colors.scss
@@ -13,6 +13,8 @@
   --table-highlighted-cell: #BBDEFB;
   --table-border-color: var(--gray-9);
   --overlay-color: #000;
+  --tips-font-color: #122f80;
+  --tips-background-color: #e4f1fc;
 
   --dark: #000;
   --light: #fff;
@@ -49,6 +51,8 @@
   --table-highlighted-cell: #1f374f;
   --table-border-color: #cdcdcd;
   --overlay-color: #666;
+  --tips-font-color: #e4f1fc;
+  --tips-background-color: #122f80;
 
   --dark: #fff;
   --light: #292931;

diff --git a/src/components/Modals/DetailModal/DetailModal.tsx b/src/components/Modals/DetailModal/DetailModal.tsx
@@ -8,6 +8,7 @@ import { t } from 'translations';
 import { hideModalDialog, setAlphabetTypeAction } from 'actions';
 import { IMainState } from 'reducers';
 
+import { getCaseTips } from 'utils/getCaseTips';
 import { getCyrillic } from 'utils/getCyrillic';
 import { getGlagolitic } from 'utils/getGlagolitic';
 import { getLatin } from 'utils/getLatin';
@@ -446,7 +447,7 @@ class DetailModalInternal extends Component<IDetailModalInternal> {
         this.props.orderOfCases.forEach((caseItem) => {
             if (caseItem in paradigmArray.cases) {
                 const caseName = t(`case${caseItem[0].toUpperCase()}${caseItem.slice(1)}`);
-                const tableRow = [`${caseName}@b`];
+                const tableRow = [`${caseName}@b@${this.formatStr(getCaseTips(caseItem, 'noun'))}`];
                 paradigmArray.cases[caseItem].forEach((caseForm) => {
                     tableRow.push(`${this.formatStr(caseForm)}@`);
                 });
@@ -474,7 +475,7 @@ class DetailModalInternal extends Component<IDetailModalInternal> {
         this.props.orderOfCases.forEach((caseItem) => {
             if (caseItem in singular) {
                 const tableRow = [
-                    `${t(`case${caseItem[0].toUpperCase()}${caseItem.slice(1)}`)}@b`,
+                    `${t(`case${caseItem[0].toUpperCase()}${caseItem.slice(1)}`)}@b@${this.formatStr(getCaseTips(caseItem, 'adjectiveSingular'))}`,
                 ];
                 switch (caseItem) {
                     case 'nom':
@@ -514,7 +515,7 @@ class DetailModalInternal extends Component<IDetailModalInternal> {
         this.props.orderOfCases.forEach((caseItem) => {
             if (caseItem in plural) {
                 const tableRow = [
-                    `${t(`case${caseItem[0].toUpperCase()}${caseItem.slice(1)}`)}@b`,
+                    `${t(`case${caseItem[0].toUpperCase()}${caseItem.slice(1)}`)}@b@${this.formatStr(getCaseTips(caseItem, 'adjectivePlural'))}`,
                 ];
                 switch (caseItem) {
                     case 'nom':

diff --git a/src/components/Pages/Grammar/Grammar.tsx b/src/components/Pages/Grammar/Grammar.tsx
@@ -1,5 +1,7 @@
 import { createRef,PureComponent } from 'react';
 
+import { getCaseTips } from 'utils/getCaseTips';
+
 import { Card } from 'components/Card';
 import { Table } from 'components/Table';
 import { Text } from 'components/Text';
@@ -28,6 +30,7 @@ const titles = {
     podrobnosti: 'Podrobne pravila (linky)',
 };
 
+
 export default class Grammar extends PureComponent {
     private containerRef;
     private activeId;
@@ -39,6 +42,13 @@ export default class Grammar extends PureComponent {
         this.onScroll = this.onScroll.bind(this);
         this.onWheel = this.onWheel.bind(this);
     }
+    private addCaseTips = (type: string) => (row: any[]) => {
+        const elemArr = row[0].split('@');
+        if(['N','A','G','L','I','D','V'].includes(elemArr[0])) elemArr[2] = getCaseTips(elemArr[0],type);
+        row[0] = elemArr.join('@');
+
+        return row;
+    }
     public render() {
         return (
             <div
@@ -87,8 +97,8 @@ export default class Grammar extends PureComponent {
                         </Text>
                     </Card>
                     <Card title={titles.imeniky} id="imeniky">
-                        <Table data={tables.tableBrat} />
-                        <Table data={tables.tableMuz} />
+                        <Table data={tables.tableBrat.map(this.addCaseTips('noun'))} />
+                        <Table data={tables.tableMuz.map(this.addCaseTips('noun'))} />
                         <Text>
                             {`Mužske objekty, ktore aktivno dělajut někaky proces, sut {žive}[i] (od pytanja KTO?) i po tutoj pričině imajut akuzativ ravny s genitivom.`}
                         </Text>
@@ -104,16 +114,16 @@ export default class Grammar extends PureComponent {
                                - {vladyk-{a}[r], vladyk-{y}[b], vladyk-{ě}[g,B], vladyk-{u}[p], vladyk-{o}[p],}[B] ... (jednina)
                                - {vladyk-{i}[b], vladyk-{ov}[p], vladyk-{a}[r]m, vladyk-{a}[r]m{i}[b],}[B] ... (množina)`}
                         </Text>
-                        <Table data={tables.tableZena} />
-                        <Table data={tables.tableKost} />
+                        <Table data={tables.tableZena.map(this.addCaseTips('noun'))} />
+                        <Table data={tables.tableKost.map(this.addCaseTips('noun'))} />
                         <Text>
                             {`Vse čislovniky zakončene na soglasky –{T}[B] i –{Č}[B] ({PET}[B], {ŠEST}[B], ... {DESET}[B], {TRINADSET}[B], ... {DVADESET}[B], {TYSEČ}[B]) imajut klonjenje kako {KOST}[B] v jednině: {šest, šest-{i}[b], šest-j{u}[p]}[B] ...`}
                         </Text>
                         <Text>
                             {`Dvojinne slova {OKO}[B], {UHO}[B] imajut dvojinu ravnu s množinoju vzora {KOST}[B] s palatalizovanym korenem: {oč-{i}[b], oč-{ij}[b], oč-{a}[r]m}[B] ... {uš-{i}[b], uš-{i}[b]j, uš-{a}[r]m}[B] ... kde {čj,šj,žj → č,š,ž}[B].`}
                         </Text>
-                        <Table data={tables.tableSelo} />
-                        <Table data={tables.tableDen} />
+                        <Table data={tables.tableSelo.map(this.addCaseTips('noun'))} />
+                        <Table data={tables.tableDen.map(this.addCaseTips('noun'))} />
                         <Text>
                             {`Na različenje od staroslovjanskogo jezyka, specijalne vzory imajut svoje klonjenje toliko v jednině. Množina i dual jest v normalnyh mekkyh vzorah:
                             - {dn-{i}[b]=kost-{i}[b], imen-{a}[r]=polj-{a}[r], mater-{e}[g]=duš-{e}[g], dět-{i}[b]=kost-{i}[b]}[B], ...`}
@@ -124,9 +134,9 @@ export default class Grammar extends PureComponent {
                         </Text>
                     </Card>
                     <Card title={titles.zaimeniky} id="zaimeniky">
-                        <Table data={tables.tableMest} />
-                        <Table data={tables.tableTojTaTo} />
-                        <Table data={tables.tableOnOnaOno} />
+                        <Table data={tables.tableMest.map(this.addCaseTips('noun'))} />
+                        <Table data={tables.tableTojTaTo.map(this.addCaseTips('adjective'))} />
+                        <Table data={tables.tableOnOnaOno.map(this.addCaseTips('noun'))} />
                         <Text>
                             {`Mekky	vzor klonjenja {(-{e}[g]g{o}[p], -{e}[g]m{u}[p], ...)}[B] imajut zaimenniky:
                             - {MOJ-MOJA-MOJE, TVOJ-TVOJA-TVOJE, NAŠ-NAŠA-NAŠE, VAŠ-VAŠA-VAŠE, VSEj-VSA-VSE, KOJ, KOJA, KOJE, ČIJ, ČIJA, ČIJE ...}[B]`}
@@ -137,8 +147,8 @@ export default class Grammar extends PureComponent {
                         </Text>
                     </Card>
                     <Card title={titles.pridavniky} id="pridavniky">
-                        <Table data={tables.tableDobry} />
-                        <Table data={tables.tableSvezi} />
+                        <Table data={tables.tableDobry.map(this.addCaseTips('adjective'))} />
+                        <Table data={tables.tableSvezi.map(this.addCaseTips('adjective'))} />
                         <br/>
                         <Table data={tables.tableGradacija} />
                         <Text>

diff --git a/src/components/Pages/Grammar/tables.json b/src/components/Pages/Grammar/tables.json
@@ -320,7 +320,7 @@
       "kost-{i}[b]@bb"
     ],
     [
-      "A@d;bt",
+      "A@d;bb",
       "kost@bt",
       "deset@bt",
       "kost-{i}[b]@bt;s",
@@ -450,8 +450,8 @@
     [
       "&nbsp@bt;bl;br;bb",
       "N- -R- -T-@bt;bl;br",
-      "&nbsp@bt;bl;br;bb;w=2",
-      "specialne vzory@bt;bl;br;bb;te"
+      "&nbsp@bt;bl;br;w=2",
+      "specialne vzory@bt;bl;br;te"
     ],
     [
       "&nbsp@bt;bl",

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -2,6 +2,7 @@ import { Component } from 'react';
 
 import { Clipboard } from 'components/Clipboard';
 import { parseStr } from 'components/Text';
+import { Tips } from 'components/Tips';
 
 import './Table.scss';
 
@@ -18,14 +19,14 @@ export class Table extends Component<ITableProps> {
         );
     }
 
-    private parseItem(raw): { str: string, attrs: any } {
+    private parseItem(raw): { str: string, attrs: any, tips: string } {
         // use negative lookahead for @] to avoid splitting by @ inside []
-        let [str, rawAttrs] = raw.split(/@(?!])/);
+        let [str, rawAttrs, tips] = raw.split(/@(?!])/);
         str = parseStr(str);
+        rawAttrs ??= '';
+        tips ??= '';
+
         const attrs = {};
-        if (!rawAttrs) {
-            rawAttrs = '';
-        }
         rawAttrs.split(';').forEach((rawExp) => {
             const exp = rawExp.split('=');
             if (exp.length === 1) {
@@ -37,14 +38,27 @@ export class Table extends Component<ITableProps> {
         return {
             str,
             attrs,
+            tips,
         };
     }
 
     private renderRow(row: string[]) {
         return row
             .map((item) => this.parseItem(item))
-            .map(({ str, attrs }, i) => {
-                if (str.includes('<') || str.includes('&')) {
+            .map(({ str, attrs, tips }, i) => {
+                if (tips) {
+                    return (
+                        <td
+                            key={i}
+                            className={Object.keys(attrs).filter((w) => (w !== 'w' && w !== 'h')).join(' ')}
+                            colSpan={attrs.w}
+                            rowSpan={attrs.h}
+                            style={{ width: attrs.sw }}
+                        >
+                            <Tips str={str} tips={tips}/>
+                        </td>
+                    );
+                } else if (str.includes('<') || str.includes('&')) {
                     return (
                         <td
                             key={i}

diff --git a/src/components/Tips/Tips.scss b/src/components/Tips/Tips.scss
@@ -0,0 +1,21 @@
+.tips {
+    cursor: help;
+    &::after {
+        position: absolute;
+        border-radius: 0.25rem;
+        color: var(--tips-font-color);
+        background-color: var(--tips-background-color);
+        padding: 0.35rem;
+        white-space: nowrap;
+    }
+    &:hover, &:focus {
+        &::after {
+            content: attr(data-tips);
+        }
+    } 
+    .tipsSymbol::after {
+        content: 'ⓘ';
+        font-size: smaller;
+        color: var(--muted-text-color);
+    }
+}