feat(Messaging): add folders full support and add a folder icon

Magic-Fishes · Oct 12, 2024 · 49d581f · 49d581f
1 parent 5312761
commit 49d581f
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 12 deletions.
diff --git a/public/images/folder.svg b/public/images/folder.svg
diff --git a/src/components/app/Grades/Strengths.css b/src/components/app/Grades/Strengths.css
@@ -103,12 +103,11 @@ ol.strengths-container {
     border-radius: 50px;
     box-shadow: var(--box-shadow-element);
 
-    /* animation: 0.5s unroll 0s forwards; */
-    transform: rotateX(-90deg);
+
     visibility: hidden;
+    transform: rotateX(-90deg);
     animation: .5s var(--timing-function-spring-effect) 0s unroll forwards;
     animation-delay: calc(var(--order) * 75ms);
-    /* transform: rotateX(-90deg); */
 
     cursor: pointer;
     transition: all 0.1s, outline 0s;

diff --git a/src/components/app/Messaging/Inbox.jsx b/src/components/app/Messaging/Inbox.jsx
@@ -76,7 +76,7 @@ export default function Inbox({ selectedMessage, setSelectedMessage, selectedFol
         <div id="inbox">
             <TextInput onChange={handleChange} value={search} textType={"text"} placeholder={"Rechercher"} className="inbox-search-input" />
             {messages.get() !== undefined && (messageFolders.get() !== undefined && messageFolders.get()?.find((folder) => folder.id === selectedFolder)?.fetched)
-                ? (messages.get().length > 0
+                ? (messages.get().filter((message) => message.folderId === selectedFolder).length > 0
                     ? <ScrollShadedDiv className="messages-container">
                         <ul>
                             {messages.get().filter((message) => message.folderId === selectedFolder).filter(filterResearch).map((message, index) => <li style={{ "--order": index }} className={"message-container" + (selectedMessage === message.id ? " selected" : "")} data-read={message.read} onClick={() => handleClick(message)} onKeyDown={(event) => handleKeyDown(event, message)} key={message.id} role="button" tabIndex={0}>
@@ -91,7 +91,9 @@ export default function Inbox({ selectedMessage, setSelectedMessage, selectedFol
                             </li>)}
                         </ul>
                     </ScrollShadedDiv>
-                    : <p className="no-message-received">Vous n'avez reçu aucun message. Tendez l'oreille et profitez de cet instant de silence</p>
+                    : (messages.get().length > 0
+                        ? <p className="no-message-received">Ce dossier est vide. Peut-être qu'il attend juste un miracle... ou un clic</p>
+                        : <p className="no-message-received">Vous n'avez reçu aucun message. Tendez l'oreille et profitez de cet instant de silence</p>)
                 )
                 : <ScrollShadedDiv className="messages-container">
                     <ul>

diff --git a/src/components/app/Messaging/Messaging.css b/src/components/app/Messaging/Messaging.css
@@ -3,16 +3,48 @@
     height: 100%;
 }
 
+.folder-tooltip {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    transform: translateY(-50%);
+    height: 40px;
+    width: 40px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: .1s;
+}
+.folder-tooltip div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+}
+.folder-tooltip:has([data-state="open"]) {
+    background-color: rgb(var(--text-color-main), .15);
+}
+
+.folder-tooltip .folder-icon {
+    height: 33px;
+    transition: .1s;
+}
+.folder-tooltip .folder-icon path {
+    stroke: rgba(var(--text-color-alt), .7);
+    transition: .1s;
+}
+.folder-tooltip:has([data-state="open"]) .folder-icon path {
+    stroke: rgb(var(--text-color-main));
+}
+
 .folders-container {
     list-style-type: none;
     /* padding: 15px; */
     display: flex;
     flex-flow: column nowrap;
     gap: 10px;
 }
-.folders-container .folder-button-container {
-    /* margin-bottom: 10px; */
-}
+
 
 h3:has(~ .folders-container)  {
     margin-bottom: 10px;

diff --git a/src/components/app/Messaging/Messaging.jsx b/src/components/app/Messaging/Messaging.jsx
@@ -16,6 +16,8 @@ import "./Messaging.css";
 import Inbox from "./Inbox";
 import MessageReader from "./MessageReader";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../generic/PopUps/Tooltip";
+import FolderIcon from "../../graphics/FolderIcon";
+import { capitalizeFirstLetter } from "../../../utils/utils";
 
 
 export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fetchMessageContent, fetchMessageMarkAsUnread }) {
@@ -109,18 +111,18 @@ export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fe
                     <Window allowFullscreen={true} className="inbox-window">
                         <WindowHeader className="inbox-window-header">
                             {messageFolders.get() !== undefined && messageFolders.get().length > 1
-                                ? <Tooltip placement="bottom">
-                                    <TooltipTrigger>dossiers</TooltipTrigger>
+                                ? <Tooltip className="folder-tooltip" placement="bottom" onClick={(event) => event.stopPropagation()}>
+                                    <TooltipTrigger> <FolderIcon className="folder-icon" /> </TooltipTrigger>
                                     <TooltipContent>
                                         <h3>Dossiers</h3>
                                         <ul className="folders-container">
-                                            {messageFolders.get().map((folder) => <li key={folder.id} className="folder-button-container"><button onClick={() => setSelectedFolder(folder.id)} className="folder-button" >{folder.name}</button></li>)}
+                                            {messageFolders.get().map((folder) => <li key={folder.id} className="folder-button-container"><button onClick={() => setSelectedFolder(folder.id)} className="folder-button" >{capitalizeFirstLetter(folder.name)}</button></li>)}
                                         </ul>
                                     </TooltipContent>
                                 </Tooltip>
                                 : null
                             }
-                            <h2>{messageFolders.get()?.find((item) => item.id === selectedFolder)?.name ?? "Boîte de réception"}</h2>
+                            <h2>{capitalizeFirstLetter(messageFolders.get()?.find((item) => item.id === selectedFolder)?.name ?? "Boîte de réception")}</h2>
                         </WindowHeader>
                         <WindowContent>
                             <Inbox selectedMessage={selectedMessage}  setSelectedMessage={setSelectedMessage} selectedFolder={selectedFolder} fetchMessageMarkAsUnread={fetchMessageMarkAsUnread} />

diff --git a/src/components/graphics/FolderIcon.jsx b/src/components/graphics/FolderIcon.jsx
@@ -0,0 +1,9 @@
+import "./graphics.css"
+
+export default function FolderIcon({ className = "", id = "", alt, ...props }) {
+    return (
+        <svg aria-label={alt} className={className} id={id} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M3 8.2C3 7.07989 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H9.67452C10.1637 5 10.4083 5 10.6385 5.05526C10.8425 5.10425 11.0376 5.18506 11.2166 5.29472C11.4184 5.4184 11.5914 5.59135 11.9373 5.93726L12.0627 6.06274C12.4086 6.40865 12.5816 6.5816 12.7834 6.70528C12.9624 6.81494 13.1575 6.89575 13.3615 6.94474C13.5917 7 13.8363 7 14.3255 7H17.8C18.9201 7 19.4802 7 19.908 7.21799C20.2843 7.40973 20.5903 7.71569 20.782 8.09202C21 8.51984 21 9.0799 21 10.2V15.8C21 16.9201 21 17.4802 20.782 17.908C20.5903 18.2843 20.2843 18.5903 19.908 18.782C19.4802 19 18.9201 19 17.8 19H6.2C5.07989 19 4.51984 19 4.09202 18.782C3.71569 18.5903 3.40973 18.2843 3.21799 17.908C3 17.4802 3 16.9201 3 15.8V8.2Z" className="stroke-text-alt" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}