added custom font style

2025-04-23 10:05:19 +00:00 · 2024-12-14 22:53:40 -08:00 · 2024-12-14 22:53:40 -08:00 · 181f7ee5cb
commit 181f7ee5cb
parent 7a76bf4690
9 changed files with 143 additions and 17 deletions
--- a/app/client/web/package.json
+++ b/app/client/web/package.json
@ -26,6 +26,7 @@
    "jest": "29.1.1",
    "jsencrypt": "^3.3.2",
    "react": "18.3.1",
+    "react-color": "^2.19.3",
    "react-dom": "18.2.0",
    "react-easy-crop": "^5.0.8",
    "react-image-file-resizer": "^0.4.8",
--- a/app/client/web/src/constants/Strings.ts
+++ b/app/client/web/src/constants/Strings.ts
@ -1,4 +1,7 @@
 export const en = {
+  textSmall: 'Small',
+  textMedium: 'Medium',
+  textLarge: 'Large',
  processingError: 'Attachment Error',
  unknownContact: 'Unknown Contact',
  encrypted: 'Encrypted',
@ -255,6 +258,9 @@ export const en = {
 }

 export const fr = {
+  textSmall: 'Petit',
+  textMedium: 'Moyen',
+  textLarge: 'Grand',
  processingError: 'erreur de Pièce Jointe',
  unknownContact: 'Contact Inconnu',
  encrypted: 'Crypté',
@ -512,6 +518,9 @@ export const fr = {
 }

 export const sp = {
+  textSmall: 'Pequeño',
+  textMedium: 'Mediano',
+  textLarge: 'Grande',
  processingError: 'Error al Adjuntar',
  unkownContact: 'Contacto Desconocido',
  encrypted: 'Cifrado',
@ -768,6 +777,9 @@ export const sp = {
 }

 export const pt = {
+  textSmall: 'Pequeno',
+  textMedium: 'Médio',
+  textLarge: 'Grande',
  processingError: 'Erro de Anexo',
  unknownContact: 'Contato Desconhecido',
  encrypted: 'Criptografado',
@ -1024,6 +1036,9 @@ export const pt = {
 }

 export const de = {
+  textSmall: 'Klein',
+  textMedium: 'Mittel',
+  textLarge: 'Groß',
  processingError: 'Anhangsfehler',
  unknwonContact: 'Unbekannter Kontakt',
  encrypted: 'Verschlüsselt',
@ -1280,6 +1295,9 @@ export const de = {
 }

 export const ru = {
+  textSmall: 'Маленький',
+  textMedium: 'Средний',
+  textLarge: 'Большой',
  processingError: 'Ошибка прикрепления',
  unknownContact: 'Неизвестный контакт',
  encrypted: 'Зашифрованный',
--- a/app/client/web/src/conversation/Conversation.tsx
+++ b/app/client/web/src/conversation/Conversation.tsx
@ -3,13 +3,14 @@ import { Focus } from 'databag-client-sdk'
 import classes from './Conversation.module.css'
 import { useConversation } from './useConversation.hook';
 import { IconSend, IconTextSize, IconTextColor, IconVideo, IconFile, IconDisc, IconCamera, IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconExclamationCircle } from '@tabler/icons-react'
-import { Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core'
+import { Menu, Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core'
 import { Message } from '../message/Message';
 import { modals } from '@mantine/modals'
 import { ImageFile } from './imageFile/ImageFile';
 import { VideoFile } from './videoFile/VideoFile';
 import { AudioFile } from './audioFile/AudioFile';
 import { BinaryFile } from './binaryFile/BinaryFile';
+import { SketchPicker } from "react-color";

 const PAD_HEIGHT = (1024 - 64);
 const LOAD_DEBOUNCE = 1000;
@ -200,7 +201,7 @@ export function Conversation() {
        <div className={classes.files}>
          { media }
        </div>
-        <Textarea className={classes.message} placeholder={state.strings.newMessage} value={state.message} onChange={(event) => actions.setMessage(event.currentTarget.value)} disabled={!state.detail || state.detail.locked || sending} />
+        <Textarea className={classes.message} placeholder={state.strings.newMessage} styles={{ input: {color: state.textColorSet ? state.textColor : null, fontSize: state.textSizeSet ? state.textSize : null }}} value={state.message} onChange={(event) => actions.setMessage(event.currentTarget.value)} disabled={!state.detail || state.detail.locked || sending} />
        <div className={classes.controls}>
          <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachImage.current.click()}> 
            <IconCamera />
@ -215,12 +216,38 @@ export function Conversation() {
            <IconFile />
          </ActionIcon>
          <Divider size="sm" orientation="vertical" />
-          <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
-            <IconTextSize />
-          </ActionIcon>
-          <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
-            <IconTextColor />
-          </ActionIcon>
+          <Menu shadow="md" position="top">
+            <Menu.Target>
+              <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
+                <IconTextSize />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item onClick={() => actions.setTextSize(12)}>
+                { state.strings.textSmall }
+              </Menu.Item>
+              <Menu.Item onClick={() => actions.setTextSize(16)}>
+                { state.strings.textMedium }
+              </Menu.Item>
+              <Menu.Item onClick={() => actions.setTextSize(20)}>
+                { state.strings.textLarge }
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+          <Menu shadow="md" position="top">
+            <Menu.Target>
+              <ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}> 
+                <IconTextColor />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <SketchPicker disableAlpha={true}
+                color={state.textColor}
+                onChange={(color) => {
+                  actions.setTextColor(color.hex);
+                }} />
+            </Menu.Dropdown>
+          </Menu>
          <div className={classes.send}>
            <ActionIcon className={classes.attach} variant="light" disabled={(!state.message && state.assets.length === 0) || !state.detail || state.detail.locked || sending} onClick={sendMessage} loading={sending}> 
              <IconSend />
--- a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
+++ b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
@ -16,6 +16,8 @@
    left: 0;
    width: 100%;
    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
  }

  .extension {
--- a/app/client/web/src/conversation/useConversation.hook.ts
+++ b/app/client/web/src/conversation/useConversation.hook.ts
@ -98,7 +98,11 @@ export function useConversation() {
    subjectNames: [],
    unknownContacts: 0,
    message: '',
-    assets: [] as {type: string, file: File, position?: number}[],
+    assets: [] as {type: string, file: File, position?: number, label?: string}[],
+    textColor: '#444444',
+    textColorSet: false,
+    textSize: 16,
+    textSizeSet: false,
  })

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -188,6 +192,14 @@ export function useConversation() {
    setMessage: (message: string) => {
      updateState({ message });
    },
+    setTextSize: (textSize: number) => {
+      const textSizeSet = true;
+      updateState({ textSize, textSizeSet });
+    },
+    setTextColor: (textColor: string) => {
+      const textColorSet = true;
+      updateState({ textColor, textColorSet });
+    },
    setThumbPosition: (index: number, position: number) => {
      updateAsset(index, { position });
    },
@ -282,7 +294,7 @@ export function useConversation() {
              } else if (type === 'audio') {
                return { encrypted: { type, label, parts }};
              } else {
-                return { encrypted: { type, label, extenstion, parts }};
+                return { encrypted: { type, label, extension, parts }};
              }
            } else if (asset.image) {
              const thumb = uploaded.find(upload => upload.appId === asset.image.thumb)?.assetId;
@ -303,7 +315,7 @@ export function useConversation() {
              return { binary: { label, extension, data } };
            }
          });
-          return { text: state.message, assets };
+          return { text: state.message, textColor: state.textColorSet ? state.textColor : null, textSize: state.textSizeSet ? state.textSize : null, assets };
        }
        const progress = (precent: number) => {};
        await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, progress);
--- a/app/client/web/src/message/binaryAsset/BinaryAsset.module.css
+++ b/app/client/web/src/message/binaryAsset/BinaryAsset.module.css
@ -14,6 +14,13 @@
    overflow: hidden;
  }

+  .name {
+    text-align: center;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
  .extension {
    font-weight: bold;
  }
--- a/app/client/web/src/message/binaryAsset/BinaryAsset.tsx
+++ b/app/client/web/src/message/binaryAsset/BinaryAsset.tsx
@ -12,7 +12,7 @@ export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaA
    <div className={classes.asset}>
      <Image className={classes.thumb} src={binary} fit="contain" />
      <div className={classes.label}>
-        <div>{ label }</div>
+        <div className={classes.name}>{ label }</div>
        <div className={classes.extension}>{ extension }</div>
      </div>
    </div>
--- a/app/client/web/yarn.lock
+++ b/app/client/web/yarn.lock
@ -791,6 +791,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@icons/material@npm:^0.2.4":
+  version: 0.2.4
+  resolution: "@icons/material@npm:0.2.4"
+  peerDependencies:
+    react: "*"
+  checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
  version: 8.0.2
  resolution: "@isaacs/cliui@npm:8.0.2"
@ -2861,6 +2870,7 @@ __metadata:
    jsencrypt: ^3.3.2
    prettier: 3.3.3
    react: 18.3.1
+    react-color: ^2.19.3
    react-dom: 18.2.0
    react-easy-crop: ^5.0.8
    react-image-file-resizer: ^0.4.8
@ -5373,6 +5383,13 @@ __metadata:
  languageName: node
  linkType: hard

+"lodash-es@npm:^4.17.15":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash.memoize@npm:4.x":
  version: 4.1.2
  resolution: "lodash.memoize@npm:4.1.2"
@ -5394,7 +5411,7 @@ __metadata:
  languageName: node
  linkType: hard

-"lodash@npm:^4.17.21":
+"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.21":
  version: 4.17.21
  resolution: "lodash@npm:4.17.21"
  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@ -5481,6 +5498,13 @@ __metadata:
  languageName: node
  linkType: hard

+"material-colors@npm:^1.2.1":
+  version: 1.2.6
+  resolution: "material-colors@npm:1.2.6"
+  checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f
+  languageName: node
+  linkType: hard
+
 "math-intrinsics@npm:^1.0.0":
  version: 1.0.0
  resolution: "math-intrinsics@npm:1.0.0"
@ -6101,7 +6125,7 @@ __metadata:
  languageName: node
  linkType: hard

-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.8.1":
  version: 15.8.1
  resolution: "prop-types@npm:15.8.1"
  dependencies:
@ -6149,6 +6173,23 @@ __metadata:
  languageName: node
  linkType: hard

+"react-color@npm:^2.19.3":
+  version: 2.19.3
+  resolution: "react-color@npm:2.19.3"
+  dependencies:
+    "@icons/material": ^0.2.4
+    lodash: ^4.17.15
+    lodash-es: ^4.17.15
+    material-colors: ^1.2.1
+    prop-types: ^15.5.10
+    reactcss: ^1.2.0
+    tinycolor2: ^1.4.1
+  peerDependencies:
+    react: "*"
+  checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.2.0":
  version: 18.2.0
  resolution: "react-dom@npm:18.2.0"
@ -6322,6 +6363,15 @@ __metadata:
  languageName: node
  linkType: hard

+"reactcss@npm:^1.2.0":
+  version: 1.2.3
+  resolution: "reactcss@npm:1.2.3"
+  dependencies:
+    lodash: ^4.0.1
+  checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
  version: 3.6.0
  resolution: "readdirp@npm:3.6.0"
@ -7129,6 +7179,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tinycolor2@npm:^1.4.1":
+  version: 1.6.0
+  resolution: "tinycolor2@npm:1.6.0"
+  checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
  version: 1.0.5
  resolution: "tmpl@npm:1.0.5"
--- a/app/sdk/src/focus.ts
+++ b/app/sdk/src/focus.ts
@ -525,11 +525,13 @@ export class FocusModule implements Focus {
        });
        const mapped = filtered.map((asset: any) => {
          if (asset.encrypted) {
-            const { type, thumb, parts } = asset.encrypted;
+            const { type, thumb, label, extension, parts } = asset.encrypted;
            if (type === 'image' || type === 'video') {
              return { encrypted: { type, thumb: getAsset(thumb), parts: getAsset(parts) } };
-            } else {
-              return { encrypted: { type, parts: getAsset(parts) } };
+            } else if (type === 'audio') {
+              return { encrypted: { type, label, parts: getAsset(parts) } };
+            }else {
+              return { encrypted: { type, label, extension, parts: getAsset(parts) } };
            }
          } else if (asset.image) {
            const { thumb, full } = asset.image;