mirror of https://github.com/shuang854/Turtle
added ionic segment
Simon Huang
5 years ago
parent
4052296a19
commit
9abcfd4015
@ -1,52 +0,0 @@
|
||||
ion-textarea {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
|
||||
.chat-card {
|
||||
background: var(--ion-color-light);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-toolbar {
|
||||
padding-left: 5px;
|
||||
--background: var(--ion-color-light);
|
||||
}
|
||||
|
||||
.footer-ios ion-toolbar:first-of-type {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
align-self: center;
|
||||
margin: 0 2px 0 5px;
|
||||
--box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.message-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #999;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.message-input {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.native-input.sc-ion-input-ios {
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
import { IonCard, IonFabButton, IonFooter, IonIcon, IonInput, IonToolbar } from '@ionic/react';
|
||||
import { sendOutline } from 'ionicons/icons';
|
||||
import React, { useState } from 'react';
|
||||
import { rtdb } from '../services/firebase';
|
||||
import './Chatbox.css';
|
||||
import Messages from './Messages';
|
||||
import OnlineList from './OnlineList';
|
||||
|
||||
type ChatboxProps = {
|
||||
ownerId: string;
|
||||
roomId: string;
|
||||
userId: string;
|
||||
userList: Map<string, string>;
|
||||
};
|
||||
|
||||
const Chat: React.FC<ChatboxProps> = ({ ownerId, roomId, userId, userList }) => {
|
||||
const [message, setMessage] = useState(''); // Message to be sent
|
||||
|
||||
// Send message to database
|
||||
const sendMessage = async () => {
|
||||
if (message !== '') {
|
||||
await rtdb.ref('/chats/' + roomId).push({
|
||||
content: message,
|
||||
createdAt: Date.now(),
|
||||
senderId: userId,
|
||||
});
|
||||
|
||||
// Reset textarea field
|
||||
setMessage('');
|
||||
}
|
||||
};
|
||||
|
||||
const onEnter = (e: React.KeyboardEvent<HTMLIonInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonCard class="chat-card">
|
||||
<Messages ownerId={ownerId} roomId={roomId} userId={userId} userList={userList}></Messages>
|
||||
<IonFooter>
|
||||
<IonToolbar class="message-toolbar">
|
||||
<IonInput
|
||||
onIonChange={(e) => setMessage(e.detail.value!)}
|
||||
onKeyDown={(e) => onEnter(e)}
|
||||
value={message}
|
||||
placeholder="Send message"
|
||||
enterkeyhint="send"
|
||||
class="message-input"
|
||||
></IonInput>
|
||||
<IonFabButton slot="end" size="small" onClick={sendMessage} class="send-button">
|
||||
<IonIcon icon={sendOutline}></IonIcon>
|
||||
</IonFabButton>
|
||||
<OnlineList userList={userList}></OnlineList>
|
||||
</IonToolbar>
|
||||
</IonFooter>
|
||||
</IonCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
@ -0,0 +1,12 @@
|
||||
.frame-card {
|
||||
background: var(--ion-color-light);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-segment-button {
|
||||
--indicator-transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
max-height: 40px;
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import { IonCard, IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
|
||||
import { chatboxOutline, informationCircleOutline, peopleOutline } from 'ionicons/icons';
|
||||
import React, { useState } from 'react';
|
||||
import './Frame.css';
|
||||
import Messages from './Messages';
|
||||
import OnlineList from './OnlineList';
|
||||
|
||||
type FrameProps = {
|
||||
ownerId: string;
|
||||
roomId: string;
|
||||
userId: string;
|
||||
userList: Map<string, string>;
|
||||
};
|
||||
|
||||
const Frame: React.FC<FrameProps> = ({ ownerId, roomId, userId, userList }) => {
|
||||
const [pane, setPane] = useState('chat');
|
||||
|
||||
return (
|
||||
<IonCard class="frame-card">
|
||||
<IonSegment value={pane}>
|
||||
<IonSegmentButton value="chat" onClick={() => setPane('chat')}>
|
||||
<IonIcon icon={chatboxOutline}></IonIcon>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="online" onClick={() => setPane('online')}>
|
||||
<IonIcon icon={peopleOutline}></IonIcon>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="about" onClick={() => setPane('about')}>
|
||||
<IonIcon icon={informationCircleOutline}></IonIcon>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
|
||||
<Messages pane={pane} ownerId={ownerId} roomId={roomId} userId={userId} userList={userList}></Messages>
|
||||
<OnlineList pane={pane} userList={userList}></OnlineList>
|
||||
</IonCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default Frame;
|
||||
Loading…
Reference in New Issue