Skip to content

Commit 49d581f

Browse files
TruitesecheTruiteseche
committed
feat(Messaging): add folders full support and add a folder icon
1 parent 5312761 commit 49d581f

File tree

6 files changed

+60
-12
lines changed

6 files changed

+60
-12
lines changed

‎public/images/folder.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/app/Grades/Strengths.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,11 @@ ol.strengths-container {
103103
border-radius: 50px;
104104
box-shadow: var(--box-shadow-element);
105105

106-
/* animation: 0.5s unroll 0s forwards; */
107-
transform: rotateX(-90deg);
106+
108107
visibility: hidden;
108+
transform: rotateX(-90deg);
109109
animation: .5s var(--timing-function-spring-effect) 0s unroll forwards;
110110
animation-delay: calc(var(--order) * 75ms);
111-
/* transform: rotateX(-90deg); */
112111

113112
cursor: pointer;
114113
transition: all 0.1s, outline 0s;

‎src/components/app/Messaging/Inbox.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function Inbox({ selectedMessage, setSelectedMessage, selectedFol
7676
<div id="inbox">
7777
<TextInput onChange={handleChange} value={search} textType={"text"} placeholder={"Rechercher"} className="inbox-search-input" />
7878
{messages.get() !== undefined && (messageFolders.get() !== undefined && messageFolders.get()?.find((folder) => folder.id === selectedFolder)?.fetched)
79-
? (messages.get().length > 0
79+
? (messages.get().filter((message) => message.folderId === selectedFolder).length > 0
8080
? <ScrollShadedDiv className="messages-container">
8181
<ul>
8282
{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
9191
</li>)}
9292
</ul>
9393
</ScrollShadedDiv>
94-
: <p className="no-message-received">Vous n'avez reçu aucun message. Tendez l'oreille et profitez de cet instant de silence</p>
94+
: (messages.get().length > 0
95+
? <p className="no-message-received">Ce dossier est vide. Peut-être qu'il attend juste un miracle... ou un clic</p>
96+
: <p className="no-message-received">Vous n'avez reçu aucun message. Tendez l'oreille et profitez de cet instant de silence</p>)
9597
)
9698
: <ScrollShadedDiv className="messages-container">
9799
<ul>

‎src/components/app/Messaging/Messaging.css

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,48 @@
33
height: 100%;
44
}
55

6+
.folder-tooltip {
7+
position: absolute;
8+
top: 50%;
9+
left: 5px;
10+
transform: translateY(-50%);
11+
height: 40px;
12+
width: 40px;
13+
border-radius: 10px;
14+
cursor: pointer;
15+
transition: .1s;
16+
}
17+
.folder-tooltip div {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
height: 100%;
22+
width: 100%;
23+
}
24+
.folder-tooltip:has([data-state="open"]) {
25+
background-color: rgb(var(--text-color-main), .15);
26+
}
27+
28+
.folder-tooltip .folder-icon {
29+
height: 33px;
30+
transition: .1s;
31+
}
32+
.folder-tooltip .folder-icon path {
33+
stroke: rgba(var(--text-color-alt), .7);
34+
transition: .1s;
35+
}
36+
.folder-tooltip:has([data-state="open"]) .folder-icon path {
37+
stroke: rgb(var(--text-color-main));
38+
}
39+
640
.folders-container {
741
list-style-type: none;
842
/* padding: 15px; */
943
display: flex;
1044
flex-flow: column nowrap;
1145
gap: 10px;
1246
}
13-
.folders-container .folder-button-container {
14-
/* margin-bottom: 10px; */
15-
}
47+
1648

1749
h3:has(~ .folders-container) {
1850
margin-bottom: 10px;

‎src/components/app/Messaging/Messaging.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import "./Messaging.css";
1616
import Inbox from "./Inbox";
1717
import MessageReader from "./MessageReader";
1818
import { Tooltip, TooltipContent, TooltipTrigger } from "../../generic/PopUps/Tooltip";
19+
import FolderIcon from "../../graphics/FolderIcon";
20+
import { capitalizeFirstLetter } from "../../../utils/utils";
1921

2022

2123
export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fetchMessageContent, fetchMessageMarkAsUnread }) {
@@ -109,18 +111,18 @@ export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fe
109111
<Window allowFullscreen={true} className="inbox-window">
110112
<WindowHeader className="inbox-window-header">
111113
{messageFolders.get() !== undefined && messageFolders.get().length > 1
112-
? <Tooltip placement="bottom">
113-
<TooltipTrigger>dossiers</TooltipTrigger>
114+
? <Tooltip className="folder-tooltip" placement="bottom" onClick={(event) => event.stopPropagation()}>
115+
<TooltipTrigger> <FolderIcon className="folder-icon" /> </TooltipTrigger>
114116
<TooltipContent>
115117
<h3>Dossiers</h3>
116118
<ul className="folders-container">
117-
{messageFolders.get().map((folder) => <li key={folder.id} className="folder-button-container"><button onClick={() => setSelectedFolder(folder.id)} className="folder-button" >{folder.name}</button></li>)}
119+
{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>)}
118120
</ul>
119121
</TooltipContent>
120122
</Tooltip>
121123
: null
122124
}
123-
<h2>{messageFolders.get()?.find((item) => item.id === selectedFolder)?.name ?? "Boîte de réception"}</h2>
125+
<h2>{capitalizeFirstLetter(messageFolders.get()?.find((item) => item.id === selectedFolder)?.name ?? "Boîte de réception")}</h2>
124126
</WindowHeader>
125127
<WindowContent>
126128
<Inbox selectedMessage={selectedMessage} setSelectedMessage={setSelectedMessage} selectedFolder={selectedFolder} fetchMessageMarkAsUnread={fetchMessageMarkAsUnread} />

‎src/components/graphics/FolderIcon.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import "./graphics.css"
2+
3+
export default function FolderIcon({ className = "", id = "", alt, ...props }) {
4+
return (
5+
<svg aria-label={alt} className={className} id={id} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
6+
<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" />
7+
</svg>
8+
)
9+
}

0 commit comments

Comments
 (0)