singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

feat: improve message item buttons style

Browse Source
This commit is contained in:
Yidadaa 2023-06-27 23:29:53 +08:00
parent d5c33a1183
commit 38c8ee8cd2
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/chat.module.scss
View File

@ -281,15 +281,13 @@
border: var(--border-in-light); border: var(--border-in-light);
position: relative; position: relative;
transition: all ease 0.3s; transition: all ease 0.3s;
min-width: 0;
&:hover { &:hover {
min-width: 330px;
.chat-message-actions { .chat-message-actions {
height: 40px;
opacity: 1; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
max-width: 100%;
height: 40px;
.chat-message-action-date { .chat-message-action-date {
opacity: 0.3; opacity: 0.3;
@ -299,7 +297,6 @@
.chat-message-actions { .chat-message-actions {
display: flex; display: flex;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 12px; font-size: 12px;
align-items: flex-end; align-items: flex-end;
@ -308,11 +305,21 @@
transform: translateY(10px); transform: translateY(10px);
opacity: 0; opacity: 0;
height: 0; height: 0;
max-width: 0;
.chat-input-actions {
display: flex;
flex-wrap: nowrap;
}
} }
.chat-message-action-date { .chat-message-action-date {
white-space: nowrap;
transition: all ease 0.6s;
color: var(--black); color: var(--black);
opacity: 0; opacity: 0;
text-align: right;
margin-left: 20px;
} }
} }

22
app/components/chat.tsx
View File

@ -937,30 +937,30 @@ export function Chat() {
/> />
) : ( ) : (
<> <>
<ChatAction
text={Locale.Chat.Actions.Delete}
icon={<DeleteIcon />}
onClick={() => onDelete(message.id ?? i)}
/>
<ChatAction <ChatAction
text={Locale.Chat.Actions.Retry} text={Locale.Chat.Actions.Retry}
icon={<ResetIcon />} icon={<ResetIcon />}
onClick={() => onResend(message.id ?? i)} onClick={() => onResend(message.id ?? i)}
/> />
<ChatAction
text={Locale.Chat.Actions.Delete}
icon={<DeleteIcon />}
onClick={() => onDelete(message.id ?? i)}
/>
<ChatAction <ChatAction
text={Locale.Chat.Actions.Pin} text={Locale.Chat.Actions.Pin}
icon={<PinIcon />} icon={<PinIcon />}
onClick={() => onPinMessage(message)} onClick={() => onPinMessage(message)}
/> />
<ChatAction
text={Locale.Chat.Actions.Copy}
icon={<CopyIcon />}
onClick={() => copyToClipboard(message.content)}
/>
</> </>
)} )}
<ChatAction
text={Locale.Chat.Actions.Copy}
icon={<CopyIcon />}
onClick={() => copyToClipboard(message.content)}
/>
</div> </div>
<div className={styles["chat-message-action-date"]}> <div className={styles["chat-message-action-date"]}>