talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding hot keys for escape

Browse Source
This commit is contained in:
talksik
2022-03-20 17:42:38 -04:00
parent 6a19f06bae
commit 05b560dafd
3 changed files with 46 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/package.json
+1
View File
@@ -109,6 +109,7 @@
"mongodb": "^4.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hotkeys": "^2.0.0",
"react-icons": "^4.3.1",
"react-query": "^3.34.16",
"recoil": "^0.6.1"
packages/desktop/src/pages/Home/selectedConversation/index.tsx
+37 -22
View File
@@ -9,6 +9,7 @@ import {
import { $selectedConversation } from "../../../controller/recoil";
import { Dimensions } from "../../../electron/constants";
import { FaWindowClose } from "react-icons/fa";
import { GlobalHotKeys } from "react-hotkeys";
import { RelationshipState } from "@nirvana/core/models/relationship.model";
import UpdateRelationshipStateRequest from "@nirvana/core/requests/updateRelationshipState.request";
import moment from "moment";
@@ -124,34 +125,48 @@ export default function SelectedConversation() {
}
};
// hot keys for closing this window
const handleClose = () => {
setSelectedConvo(null);
};
const keyMap = { CLOSE_SELECTED_CONVO: "esc" };
const handlers = { CLOSE_SELECTED_CONVO: handleClose };
return (
<div className="bg-slate-800 flex-1 flex flex-col relative">
{/* close marker */}
<FaWindowClose className="text-slate-400 hover:text-white hover:scale-110 absolute top-0 right-0 m-1" />
<>
<GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
{/* top header/profile information */}
<span className="flex flex-row justify-start items-center p-2">
<img
className="rounded"
src={convoDetailsResponse.contactUser.picture}
<div className="bg-slate-800 flex-1 flex flex-col relative">
{/* close marker */}
<FaWindowClose
onClick={handleClose}
className="text-slate-400 text-xl hover:text-slate-200 hover:scale-110 absolute top-0 right-0 m-1 cursor-pointer"
/>
<span className="flex flex-col items-start pl-2">
<span className="flex flex-row space-x-2">
<span className="text-white font-semibold text-lg">
{convoDetailsResponse.contactUser.name}
</span>
<span className="text-emerald-500 text-sm">
{convoDetailsResponse.contactUser.status}
{/* top header/profile information */}
<span className="flex flex-row justify-start items-center p-2">
<img
className="rounded"
src={convoDetailsResponse.contactUser.picture}
/>
<span className="flex flex-col items-start pl-2">
<span className="flex flex-row space-x-2">
<span className="text-white font-semibold text-lg">
{convoDetailsResponse.contactUser.name}
</span>
<span className="text-emerald-500 text-sm">
{convoDetailsResponse.contactUser.status}
</span>
</span>
<span className="text-slate-300 text-sm">{`joined ${moment(
convoDetailsResponse.contactUser.createdDate
).fromNow()}`}</span>
</span>
<span className="text-slate-300 text-sm">{`joined ${moment(
convoDetailsResponse.contactUser.createdDate
).fromNow()}`}</span>
</span>
</span>
{renderMainContent()}
</div>
{renderMainContent()}
</div>
</>
);
}