From 71fcfead362b79241ab461bf4d486fea05fbec28 Mon Sep 17 00:00:00 2001 From: Wadie-ess Date: Wed, 13 Sep 2023 16:48:58 +0100 Subject: [PATCH 1/3] fix text input layout --- frontend/code/package-lock.json | 5 - frontend/code/src/Components/Chat/index.tsx | 107 ++++++++++++-------- 2 files changed, 63 insertions(+), 49 deletions(-) diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json index 286d935..0362ad5 100644 --- a/frontend/code/package-lock.json +++ b/frontend/code/package-lock.json @@ -9071,11 +9071,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/istanbul-lib-report/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" - }, "node_modules/istanbul-lib-source-maps": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx index 8b34635..ac36894 100644 --- a/frontend/code/src/Components/Chat/index.tsx +++ b/frontend/code/src/Components/Chat/index.tsx @@ -1,4 +1,16 @@ -import {UserImage,yas,yas1,yas2,yas3,yas4,SearchIcon,EditIcon,More,Send,Close,Bio, +import { + UserImage, + yas, + yas1, + yas2, + yas3, + yas4, + SearchIcon, + EditIcon, + More, + Send, + Close, + Bio, } from "./Components/tools/Assets"; import { useState } from "react"; import { @@ -9,7 +21,7 @@ import { import { MessageDummy } from "./Components/tools/Assets"; interface ConversationProps { - onRemoveUserPreview: () => void; + onRemoveUserPreview: () => void; } export const Chat = () => { @@ -20,23 +32,23 @@ export const Chat = () => { }; return ( <> -
-
- {} -
-
- -
-
- {showUserPreview && ( - - )} -
+
+
+ {} +
+
+
+
+ {showUserPreview && ( + + )} +
+
); }; @@ -48,7 +60,7 @@ export const UserPreviewCard: React.FC = ({

- Person Info + Yassin's Info

-
- - More - -
+
); @@ -124,15 +143,17 @@ export const MessageTextInput = () => { return (
- +
+ - + +
); @@ -161,8 +182,7 @@ export const Conversation: React.FC = ({ // to make it dynamic list later ! export const RecentConversations = () => { - const [Conversation] = useState(MessageDummy - ); + const [Conversation] = useState(MessageDummy); return (
@@ -253,4 +273,3 @@ export const OnlineNowUsers = () => { ); }; - From 4a3107314f3c237d980b07353526bb6249583588 Mon Sep 17 00:00:00 2001 From: Wadie-ess Date: Fri, 15 Sep 2023 11:17:45 +0100 Subject: [PATCH 2/3] create Group chat Layout --- .../Chat/Components/MessageHelpers.tsx | 154 +++++++++++++++++- .../Chat/Components/tools/Assets.tsx | 2 + .../Chat/assets/CreateGroupChat.svg | 14 ++ .../Chat/assets/Group 1000001775.svg | 14 ++ frontend/code/src/Components/Chat/index.tsx | 99 +++++------ package-lock.json | 6 + 6 files changed, 221 insertions(+), 68 deletions(-) create mode 100644 frontend/code/src/Components/Chat/assets/CreateGroupChat.svg create mode 100644 frontend/code/src/Components/Chat/assets/Group 1000001775.svg create mode 100644 package-lock.json diff --git a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx index 64ab936..2489015 100644 --- a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx +++ b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx @@ -1,4 +1,22 @@ -import { Send, yas, check } from "../Components/tools/Assets"; +import { useState } from "react"; +import { SelectedUserTile } from ".."; +import { + UserImage, + yas, + yas1, + yas2, + yas3, + yas4, + SearchIcon, + EditIcon, + More, + Send, + Close, + Bio, + GroupChat, + check, + MessageDummy, +} from "../Components/tools/Assets"; export interface myConversationProps { username: string; @@ -59,7 +77,7 @@ export const MessageTextInput = () => { />
); @@ -94,13 +112,135 @@ export const ChatPlaceHolder = ({

{message}

- { isRead === false ?
-
- 5 -
-
: } + {isRead === false ? ( +
+
+ 5 +
+
+ ) : ( + + )} ); }; + +export const OnlineNowUsers = () => { + const [Users] = useState(MessageDummy); + return ( + <> +
+
+

+ Messages +

+
+ + + + + + + {/* // here */} +
+
+
+
+

+ Create Chat Group +

+
+
+
+ + +
+
+

Select To Add Friends

+ + {/* Scrollable part */} +
+ {Users.map((user) => ( + + ))} +
+ + +
+
+
+
+
+
+

+ Online Now +

+

+ See All +

+
+
+
+ {`second's +
+
+ +
+ {`second's +
+
+
+ {`second's +
+
+
+ {`second's +
+
+
+ {`second's +
+
+
+
+ + ); +}; diff --git a/frontend/code/src/Components/Chat/Components/tools/Assets.tsx b/frontend/code/src/Components/Chat/Components/tools/Assets.tsx index 3f76fc6..ef6524b 100644 --- a/frontend/code/src/Components/Chat/Components/tools/Assets.tsx +++ b/frontend/code/src/Components/Chat/Components/tools/Assets.tsx @@ -13,6 +13,7 @@ import Close from "../../assets/close_icon.svg"; import Bio from "../../assets/bio_icon.svg"; import check from "../../assets/check_icon.svg"; import group from "../../assets/groupChat.png"; +import GroupChat from "../../assets/CreateGroupChat.svg" import { myConversationProps } from "../MessageHelpers"; export const MessageDummy: myConversationProps[] = [ @@ -106,4 +107,5 @@ export { Close, Bio, check, + GroupChat }; diff --git a/frontend/code/src/Components/Chat/assets/CreateGroupChat.svg b/frontend/code/src/Components/Chat/assets/CreateGroupChat.svg new file mode 100644 index 0000000..cc4dc2d --- /dev/null +++ b/frontend/code/src/Components/Chat/assets/CreateGroupChat.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/frontend/code/src/Components/Chat/assets/Group 1000001775.svg b/frontend/code/src/Components/Chat/assets/Group 1000001775.svg new file mode 100644 index 0000000..cc4dc2d --- /dev/null +++ b/frontend/code/src/Components/Chat/assets/Group 1000001775.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx index ac36894..aab8f84 100644 --- a/frontend/code/src/Components/Chat/index.tsx +++ b/frontend/code/src/Components/Chat/index.tsx @@ -11,13 +11,16 @@ import { Send, Close, Bio, + GroupChat, } from "./Components/tools/Assets"; import { useState } from "react"; import { CurrentUserMessage, ChatPlaceHolder, UserMessage, + OnlineNowUsers, } from "./Components/MessageHelpers"; +import { myConversationProps } from "./Components/MessageHelpers"; import { MessageDummy } from "./Components/tools/Assets"; interface ConversationProps { @@ -205,70 +208,44 @@ export const RecentConversations = () => { }; // to refactor it and make it a dynamic list of 5 -export const OnlineNowUsers = () => { + + +export const SelectedUserTile = ({ + username, + userImage, +}: myConversationProps) => { return ( <> -
-
-

- Messages -

-
- - -
-
-
-

- Online Now -

-

- See All -

-
-
-
- {`second's -
-
+
+ + {/* head */} -
- {`second's -
-
-
- {`second's -
-
-
- {`second's -
-
-
- {`second's -
-
- + + {/* row 1 */} + + + + + +
+ + +
+
+
+ Avatar Tailwind CSS Component +
+
+
+
{username}
+
+
+
); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..7ac6b24 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "PongGame-WebApp", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 6fda9fc3c25446e08a9a165773d89b93a9546dc6 Mon Sep 17 00:00:00 2001 From: Wadie-ess Date: Sun, 17 Sep 2023 10:27:15 +0100 Subject: [PATCH 3/3] Finish Create ChatRoom LAyout --- frontend/code/package-lock.json | 18 +++++ frontend/code/package.json | 1 + .../Chat/Components/MessageHelpers.tsx | 68 +++++++++++++++++-- frontend/code/src/Components/Chat/index.tsx | 16 ++--- frontend/code/tailwind.config.js | 6 +- 5 files changed, 94 insertions(+), 15 deletions(-) diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json index 0362ad5..f5a6bb3 100644 --- a/frontend/code/package-lock.json +++ b/frontend/code/package-lock.json @@ -16,6 +16,7 @@ "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "axios": "^1.5.0", + "preline": "^1.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.46.1", @@ -3044,6 +3045,15 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz", @@ -12464,6 +12474,14 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/preline": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/preline/-/preline-1.9.0.tgz", + "integrity": "sha512-zvOexsDBood9gBAQYSwz7iY8TaomtRD0/qxvCnJl3caq5pif6frl8Oe4b4DsxHHD3Clzl4I5RmVKTq9XjMvNJA==", + "dependencies": { + "@popperjs/core": "^2.11.2" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/frontend/code/package.json b/frontend/code/package.json index 91569a4..4e0aeb8 100644 --- a/frontend/code/package.json +++ b/frontend/code/package.json @@ -11,6 +11,7 @@ "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "axios": "^1.5.0", + "preline": "^1.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.46.1", diff --git a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx index 2489015..ce8bb65 100644 --- a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx +++ b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx @@ -8,11 +8,11 @@ import { yas3, yas4, SearchIcon, - EditIcon, - More, + // EditIcon, + // More, Send, - Close, - Bio, + // Close, + // Bio, GroupChat, check, MessageDummy, @@ -129,6 +129,11 @@ export const ChatPlaceHolder = ({ export const OnlineNowUsers = () => { const [Users] = useState(MessageDummy); + const [selectedOption, setSelectedOption] = useState("Public"); // Initialize with a default value + + const handleOptionChange = (e: any) => { + setSelectedOption(e.target.value); + }; return ( <>
@@ -162,6 +167,55 @@ export const OnlineNowUsers = () => { />
+ +
+ + + +
+ + {/* Conditionally render the text input */} + {selectedOption === "Protected" && ( +
+
+

Group Password

+ +
+
+ )}

Select To Add Friends

{/* Scrollable part */} @@ -180,8 +234,10 @@ export const OnlineNowUsers = () => {
- - Done! + { + // eslint-disable-next-line + } + {" "}
diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx index aab8f84..7d7dda8 100644 --- a/frontend/code/src/Components/Chat/index.tsx +++ b/frontend/code/src/Components/Chat/index.tsx @@ -1,17 +1,17 @@ import { - UserImage, yas, - yas1, - yas2, - yas3, - yas4, - SearchIcon, - EditIcon, + // UserImage, + // yas1, + // yas2, + // yas3, + // yas4, + // SearchIcon, + // EditIcon, + // GroupChat, More, Send, Close, Bio, - GroupChat, } from "./Components/tools/Assets"; import { useState } from "react"; import { diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js index 2586fe9..c910c62 100644 --- a/frontend/code/tailwind.config.js +++ b/frontend/code/tailwind.config.js @@ -4,6 +4,7 @@ module.exports = { "./src/**/*.{js,jsx,ts,tsx}", "./src/**/**/*.{js,jsx,ts,tsx}", "./src/**/**/**/*.{js,jsx,ts,tsx}", + ], theme: { extend: { @@ -25,7 +26,10 @@ module.exports = { }, }, - plugins: [require("daisyui")], + plugins: [ + require("daisyui"), + require('preline/plugin'), +], daisyui: { themes: [ {