forked from rDrama/rDrama
Don't fade in messages
parent
249d510f23
commit
54fa43038c
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "chat",
|
"name": "chat",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1,15 +1,5 @@
|
||||||
@keyframes fading-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ChatMessage {
|
.ChatMessage {
|
||||||
position: relative;
|
position: relative;
|
||||||
animation: fading-in 0.3s ease-in-out forwards;
|
|
||||||
padding-right: 1.5rem;
|
padding-right: 1.5rem;
|
||||||
min-height: 28px;
|
min-height: 28px;
|
||||||
}
|
}
|
||||||
|
@ -67,6 +57,20 @@
|
||||||
background: none !important;
|
background: none !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChatMessage-actions-button button {
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChatMessage-actions-button button i {
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ChatMessage-actions {
|
.ChatMessage-actions {
|
||||||
|
@ -93,7 +97,6 @@
|
||||||
/* List */
|
/* List */
|
||||||
.ChatMessageList {
|
.ChatMessageList {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ChatMessageList-group {
|
.ChatMessageList-group {
|
||||||
|
|
|
@ -23,7 +23,7 @@ export function ChatMessage({
|
||||||
showUser = true,
|
showUser = true,
|
||||||
timestampUpdates,
|
timestampUpdates,
|
||||||
actionsOpen,
|
actionsOpen,
|
||||||
onToggleActions
|
onToggleActions,
|
||||||
}: ChatMessageProps) {
|
}: ChatMessageProps) {
|
||||||
const {
|
const {
|
||||||
id,
|
id,
|
||||||
|
@ -53,7 +53,7 @@ export function ChatMessage({
|
||||||
setConfirmedDelete(true);
|
setConfirmedDelete(true);
|
||||||
}
|
}
|
||||||
}, [text, confirmedDelete]);
|
}, [text, confirmedDelete]);
|
||||||
const handleQuoteMessage = useCallback(() => {
|
const handleQuoteMessageAction = useCallback(() => {
|
||||||
quoteMessage(message);
|
quoteMessage(message);
|
||||||
onToggleActions(message.id);
|
onToggleActions(message.id);
|
||||||
}, [message, onToggleActions]);
|
}, [message, onToggleActions]);
|
||||||
|
@ -72,18 +72,26 @@ export function ChatMessage({
|
||||||
id={id}
|
id={id}
|
||||||
>
|
>
|
||||||
{!actionsOpen && (
|
{!actionsOpen && (
|
||||||
<button
|
<div className="ChatMessage-actions-button">
|
||||||
className="btn btn-secondary ChatMessage-actions-button"
|
<button
|
||||||
onClick={() => onToggleActions(id)}
|
className="btn btn-secondary"
|
||||||
>
|
onClick={() => quoteMessage(message)}
|
||||||
...
|
>
|
||||||
</button>
|
<i className="fas fa-reply" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary"
|
||||||
|
onClick={() => onToggleActions(id)}
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{actionsOpen && (
|
{actionsOpen && (
|
||||||
<div className="ChatMessage-actions">
|
<div className="ChatMessage-actions">
|
||||||
<button
|
<button
|
||||||
className="btn btn-secondary ChatMessage-button"
|
className="btn btn-secondary ChatMessage-button"
|
||||||
onClick={handleQuoteMessage}
|
onClick={handleQuoteMessageAction}
|
||||||
>
|
>
|
||||||
<i className="fas fa-reply" /> Reply
|
<i className="fas fa-reply" /> Reply
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue