update: style update;

Sending-Network · Nov 27, 2023 · 68fbae1 · 68fbae1
1 parent f1a271b
commit 68fbae1
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 63 deletions.
diff --git a/src/direflow-components/chat-component/App.jsx b/src/direflow-components/chat-component/App.jsx
@@ -434,7 +434,7 @@ App.defaultProps = {
   widgetWidth: isMobile() ? "100vw" : "375px",
   widgetHeight: isMobile() ? "100vh" : "667px",
   widgetBoxShadow: "2px 0px 20px rgba(0, 0, 0, 0.3)",
-  bgColor: "#F9F9FA",
+  bgColor: "#fff",
   mainTextColor: "#000",
   primaryColor: '#00B36B',
   contactLastMessageTimeColor: "#B4B5B8",

diff --git a/src/direflow-components/chat-component/component/mainPage/inviteRoomItem/inviteRoomItem.css b/src/direflow-components/chat-component/component/mainPage/inviteRoomItem/inviteRoomItem.css
@@ -84,14 +84,13 @@
   justify-content: space-between;
 }
 .invite-item-right-after-invites {
-  width: calc(100% - 64px);
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 .invite-item-after-invite-btns {
-  width: 80px;
+  width: 43px;
   padding: 4px 6px;
 	line-height: 19px;
   color: #292d32;

diff --git a/src/direflow-components/chat-component/component/mainPage/inviteRoomItem/inviteRoomItem.jsx b/src/direflow-components/chat-component/component/mainPage/inviteRoomItem/inviteRoomItem.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Styled } from "direflow-component";
 import styles from "./inviteRoomItem.css";
 import { api } from "../../../api"; 
-import { formatTextLength, timeFormat, formatUserName, getMsgStr, getDefaultAvatar } from "../../../utils/index";
+import { getInviteSendEvent, timeFormat } from "../../../utils/index";
 import { Filter, SendingNetworkEvent } from "sendingnetwork-js-sdk";
 import RoomAvatar from "../../roomAvatar/roomAvatar";
 import UserAvatar from "../../userAvatar/userAvatar";
@@ -15,15 +15,15 @@ const RoomItem = ({ room, isEditing, onCheckChanged, acceptInvite, rejectInvite}
   const [lastTime, setLastTime] = useState("");
   const [lastMsg, setLastMsg] = useState("");
   const [timestamp, setTimestamp] = useState(0);
-  const [inviteSender, setInviteSender] = useState(null)
+  const [senderEvent, setSenderEvent] = useState()
 
   useEffect(() => {
     if (room) {
       const ship = room.getMyMembership();
       const members = room.getJoinedMembers();
       setMembership(ship);
       setMemberList(members);
-      setInviteSender(getInviteSendUser(room))
+      setSenderEvent(getInviteSendEvent(room))
       room.on("Room.timeline", onTimeline);
     }
     return (() => {
@@ -37,10 +37,12 @@ const RoomItem = ({ room, isEditing, onCheckChanged, acceptInvite, rejectInvite}
     }
   }, [room?.checked])
 
-  const getInviteSendUser = (room) => {
-    const userId = api.getUserId()
-    const senderEvent = room.currentState?.members[userId]?.events?.member // send invite event(SendingNetworkEvent)
-    return api._client.getUser(senderEvent?.event?.sender)
+  const getInviteSendUser = () => {
+    const res = api._client.getUser(senderEvent?.event?.sender)
+    console.error('getInviteSendUser: ', senderEvent, senderEvent?.event?.sender, res)
+  }
+  const getInviteSendTs = () => {
+    return senderEvent?.event?.origin_server_ts
   }
 
   const onTimeline = (sdnEvent) => {
@@ -67,13 +69,13 @@ const RoomItem = ({ room, isEditing, onCheckChanged, acceptInvite, rejectInvite}
           {checked ? checkIcon : circleIcon}
         </div> : null}
         <div className="invite-item-left">
-          <UserAvatar member={inviteSender} />
+          <UserAvatar member={getInviteSendUser()} />
         </div>
 
         <div className="invite-item-right">
           <div className="invite-item-right-before">
             <div className="invite-item-right-before-name">{room.name || room.calculateName}</div>
-            <div className="invite-item-right-before-time">{timestamp || ''}</div>
+            <div className="invite-item-right-before-time">{timeFormat(getInviteSendTs())}</div>
           </div>
           <div className="invite-item-right-after">
             {!isEditing && membership === "invite" && (

diff --git a/src/direflow-components/chat-component/component/mainPage/inviteRoomList/inviteRoomList.jsx b/src/direflow-components/chat-component/component/mainPage/inviteRoomList/inviteRoomList.jsx
@@ -69,7 +69,7 @@ const RoomList = ({ setRoomListType, rooms, menuFuncs, closeModalms, menuClick }
   const rejectInvite= (roomId) => { // reject one invite
     api.leave(roomId, () => {
       showToast({
-        type: 'success',
+        type: 'none',
         msg: 'Invitation rejected',
       })
     });
@@ -86,7 +86,7 @@ const RoomList = ({ setRoomListType, rooms, menuFuncs, closeModalms, menuClick }
   const rejectMutipleSelectedInvite = async () => { // reject mutiple selected invite
     await Promise.all(selectedInvite.map(room => api.leave(room.roomId)))
     showToast({
-      type: 'success',
+      type: 'none',
       msg: 'Invitations rejected',
     })
   }

diff --git a/src/direflow-components/chat-component/component/mainPage/mainPage.jsx b/src/direflow-components/chat-component/component/mainPage/mainPage.jsx
@@ -3,7 +3,7 @@ import { Styled } from "direflow-component";
 import styles from "./mainPage.css";
 import RoomList from './roomList/roomList'
 import InviteRoomList from './inviteRoomList/inviteRoomList'
-import { calculateRoomName, getAddressByUserId, getMsgStr } from "../../utils/index";
+import { calculateRoomName, getAddressByUserId, getMsgStr, getInviteSendEvent } from "../../utils/index";
 import { api } from "../../api";
 
 const MainPage = ({ rooms, enterRoom, menuFuncs, onMenuClick }) => {
@@ -29,6 +29,10 @@ const MainPage = ({ rooms, enterRoom, menuFuncs, onMenuClick }) => {
 		setRoomList(resultList);
 	}
 
+	const getInviteSendTs = (senderEvent) => {
+    return senderEvent?.event?.origin_server_ts
+  }
+
 	const getLastMsgTs = (room) => {
 		if (!room) return 0;
 		const timeline = room.getLiveTimeline();
@@ -42,6 +46,10 @@ const MainPage = ({ rooms, enterRoom, menuFuncs, onMenuClick }) => {
         if (getMsgStr(lastEvent, isDmRoom, userId)) {
           return lastEvent.getTs();
         }
+				else { // just join room
+					const senderEvent = getInviteSendEvent(room)
+					return getInviteSendTs(senderEvent)
+				}
       }
 		}
 		return 0;

diff --git a/src/direflow-components/chat-component/component/mainPage/roomItem/roomItem.css b/src/direflow-components/chat-component/component/mainPage/roomItem/roomItem.css
@@ -1,20 +1,7 @@
-.rooms .room-invite {
-  font-size: 14px;
-  height: 60px;
-  line-height: 60px;
-  padding: 0 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  color: #fff;
-  display: flex;
-}
 
 /* room-item */
 .rooms .room-item {
-  height: 70px;
+  height: 65px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
@@ -45,11 +32,9 @@
 .room-item-right {
   width: calc(100% - 54px);
   height: 44px;
-  padding: 12px 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border-bottom: 1px solid #eee;
 }
 .room-item-right-top {
   width: 100%;
@@ -66,7 +51,7 @@
   text-overflow: ellipsis;
   color: #000;
   font-family: Poppins;
-  font-size: 16px;
+  font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
@@ -81,7 +66,7 @@
   color: #999;
   text-align: right;
   font-family: Poppins;
-  font-size: 14px;
+  font-size: 13px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
@@ -101,7 +86,7 @@
   text-overflow: ellipsis;
   color: #979797;
   font-family: Poppins;
-  font-size: 14px;
+  font-size: 13px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
@@ -117,15 +102,18 @@
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  line-height: 16px;
-  border-radius: 9px;
+  line-height: 18px;
+  border-radius: 10px;
   background-color: var(--primary-color);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   margin-left: 4px;
-  padding: 1px 6px;
+  padding: 1px 7px;
+}
+.room-item-right-bottom-badge.circle {
+  width: 6px;
 }
 .room-item-right-bottom-invites {
   width: calc(100% - 64px);

diff --git a/src/direflow-components/chat-component/component/mainPage/roomItem/roomItem.jsx b/src/direflow-components/chat-component/component/mainPage/roomItem/roomItem.jsx
@@ -137,7 +137,7 @@ const RoomItem = ({ room, enterRoom }) => {
               <div className="room-item-right-bottom-badge">@</div>
             )}
             {membership === "join" && room.notificationCounts.total > 0 && (
-              <div className="room-item-right-bottom-badge">{room.notificationCounts.total}</div>
+              <div className={`room-item-right-bottom-badge ${room.notificationCounts.total < 100 && 'circle'}`}>{room.notificationCounts.total}</div>
             )}
             {membership === "invite" && (
               <div className="room-item-right-bottom-invites">

diff --git a/src/direflow-components/chat-component/component/mainPage/roomList/roomList.css b/src/direflow-components/chat-component/component/mainPage/roomList/roomList.css
@@ -1,28 +1,26 @@
 .rooms {
-  background-color: var(--bg-color);
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
 /* rooms-header */
-.rooms-header{
+.rooms-header {
   width: 100%;
   height: 50px;
-  padding: 0 13px 0 16px;
+  padding: 7px 16px 0 16px;
   box-sizing: border-box;
-  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .rooms-header-left {
   color: #000;
   font-family: Poppins;
-  font-size: 14px;
+  font-size: 22px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 20px;
 }
 .rooms-header-right {
@@ -38,7 +36,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f7f7f7;
   position: relative;
   z-index: 0;
 }
@@ -47,8 +44,7 @@
   height: 36px;
   box-sizing: border-box;
   border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  background: #FFF;
+  background: #eee;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   display: flex;
   align-items: center;
@@ -60,9 +56,13 @@
   outline: none;
   border: none;
   color: #000;
+  background-color: #eee;
   font-family: 'Poppins';
   flex: 1;
 }
+.search-bar .filter-box::placeholder {
+  color: #999;
+}
 .search-bar .search-icon {
   width: 14px;
   margin-right: 7px;
@@ -74,7 +74,6 @@
   overflow-y: scroll;
   position: relative;
   box-sizing: border-box;
-  padding: 8px 0;
   scrollbar-width: none;
 }
 .rooms-list::-webkit-scrollbar {
@@ -110,7 +109,7 @@
 
 /* invite-room */
 .rooms .invite-room {
-  height: 70px;
+  height: 61px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
@@ -144,11 +143,9 @@
 .invite-room-right {
   width: calc(100% - 54px);
   height: 44px;
-  padding: 12px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #eee;
 }
 .invite-room-right-name {
   width: calc(100% - 64px);
@@ -158,7 +155,7 @@
   text-overflow: ellipsis;
   color: #000;
   font-family: Poppins;
-  font-size: 16px;
+  font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 44px;
@@ -170,13 +167,16 @@
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  line-height: 16px;
-  border-radius: 9px;
+  line-height: 18px;
+  border-radius: 10px;
   background-color: var(--primary-color);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   margin-left: 4px;
-  padding: 1px 6px;
+  padding: 1px 7px;
 }
+.invite-room-right-count.circle {
+  width: 6px;
+}
diff --git a/src/direflow-components/chat-component/component/mainPage/roomList/roomList.jsx b/src/direflow-components/chat-component/component/mainPage/roomList/roomList.jsx
@@ -91,7 +91,7 @@ const RoomList = ({ setRoomListType, rooms, menuFuncs, enterRoom, closeModalms,
             </div>
             <div className="invite-room-right">
               <div className="invite-room-right-name">Invitations</div>
-              {inviteRoomList.length ? <div className="invite-room-right-count">{inviteRoomList.length}</div> : null}
+              {inviteRoomList.length ? <div className={`invite-room-right-count ${inviteRoomList.length < 100 && 'circle'}`}>{inviteRoomList.length}</div> : null}
               {/* <div className="invite-room-right-count">{inviteRoomList.length}</div> */}
             </div>
           </div>

diff --git a/src/direflow-components/chat-component/component/roomPage/messageItem/messageItem.jsx b/src/direflow-components/chat-component/component/roomPage/messageItem/messageItem.jsx
@@ -326,7 +326,7 @@ const MessageItem = ({
             {senderId === userId ? (
               <div className="msgBox_right" key={event_id}>
                 <div className={`msgBox_right_info${combine ? " combine" + combine : ""}`}>
-                  <div className={["msgBox_right_info_msg", isPreviewCard() && "msgBox_show_card", message.isDeleted && 'wrapper_deleted_msg', isImage && 'image'].join(" ")} onClick={onTouchMsgItem} onContextMenu={onContext}>
+                  <div className={["msgBox_right_info_msg", message.isDeleted && 'wrapper_deleted_msg', isImage && 'image'].join(" ")} onClick={onTouchMsgItem} onContextMenu={onContext}>
                     {contentView}
                     {showTime() && <span className="msg_time">{`${message.isEdited ? '(edited) ' : ''}${renderTime()}`}</span>}
                   </div>

diff --git a/src/direflow-components/chat-component/component/roomPage/roomPage.css b/src/direflow-components/chat-component/component/roomPage/roomPage.css
@@ -12,6 +12,7 @@
 
 .msg_reply_dialog {
     padding: 10px;
+    background: #fff;
 }
 .msg_reply_dialog_content {
   padding-left: 26px;